Portfolio Website
Design & Development
Building design portfolio website - from AI-assisted ideation to final design and development in no-code platform
Designed and built my portfolio website using a combination of AI tools and no-code platforms, taking it from initial concept on paper to a fully responsive, published site. This page unpacks my journey—from early experiments with no-code tools to my latest workflow using Relume AI, Figma Sites, and Framer.
Tools
Relume AI - wireframing, sitemap, and style guide formulation
Figma / Figma Sites -Layout testing and UI design
Framer - fully functional website design, development, CMS integration, launch & hosting
Notion, Claude.ai, Gemini, and ChatGPT: content strategy and editing
Journey in No-Code Website Design
As a UX designer with foundational knowledge in HTML, CSS, and JavaScript, I've long been comfortable working with flexbox concepts and responsive UI design. Over the years, I've built on that foundation through hands-on experience with no-code platforms including WordPress, Squarespace, Webflow, and Framer.
Helped launch new product promotion websites for business
Built official websites of business and professionals
Iteratively evolved my own digital presence.
Key Design & Development Elements
Architecture: Information architecture planning, sitemaps, and Content management systems (CMS).
Technical: CSS Flexbox, fluid UI, and responsive design.
AI Integration: Prompt-driven wireframing, content planning, and AI-assisted design & ideation
Prototyping: Rapid ideation and layout testing. No-code website development
Designing My Latest Portfolio Website
Ideation & Wireframing - Began with analog sketches to define the user journey. Results: hand-drawn sitemap wireframes before bringing the ideas into digital tools.
Acceleration with Relume AI - Used AI prompting to condense hours of refining sitemaps and wireframes into minutes, quickly generating component ideas and style guides. With Relume AI I am able to:
Scope the site structure
Generate component ideas and layout directions
Export sitemaps and wireframes directly into Figma Sites for testing the design direction
Final Design in Framer - Framer became my primary tool for building the final site.
It gave me full design freedom to create a professional site by leveraging its design-to-code flexibility for responsive layouts. Framer enabled me to bring my wireframes and style guide to life with the level of precision and professionalism my portfolio needed.
Future Iterations & Optimization
I am treating this portfolio as an evolving product, moving beyond the launch phase to focus on continuous, data-driven refinement.
Behavioral Analytics: Track engagement, identify friction points, and visualize user journeys Google Analytics (GA4) and Contentsquare heatmaps.
SEO & GEO: Optimize site architecture and metadata for both traditional search and AI-driven discovery (Generative Engine Optimization).
Conversion Refinement: Use A/B testing to ensure key project details reach recruiters and stakeholders efficiently.
Performance Audits: Monitor speed and accessibility to maintain a seamless, cross-device user experience.
