Personal Portfolio — UX/UI Case Study
This case study documents the complete UX/UI design process for my personal portfolio website. It highlights the design and research decisions that led to a professional and intuitive platform for showcasing my work.
The story behind the project
Generic developer portfolios all look the same: hero, projects grid, contact. They fail to communicate the unique blend of design, code, and AI work that I do.
A portfolio split into three clear value propositions (Design, Build, AI) with case-study depth on every project — not just screenshots. Glass-morphism visual language and customisable accent colours give it personality.
Site loads in under 1.2s on mobile, scored 98 on Lighthouse, and converted 4 client conversations within the first month.
How it was designed
Discovery
Audited 30+ designer-developer portfolios to identify what differentiates the memorable ones from the forgettable.
- Competitive analysis across 30 portfolios
- Interviews with hiring managers and recruiters
- Defined value propositions and tone
- Information architecture
Design & Build
Designed in Figma, then implemented in Next.js with Tailwind. Custom CSS variables expose accent colours that visitors can swap live.
- Glass-morphism component system
- Live theming via CSS variables + React context
- Responsive across mobile, tablet, desktop
- Accessible: skip-link, ARIA, reduced-motion support