Product Designer Portfolio Website

Problem

The client originally had this portfolio built with a website builder, but the site had accessibility problems, inconsistent content layout, and bugs across different screen sizes. This made the case studies and other information harder to read and navigate.

Solution

This project rebuilds the portfolio as a custom website with a cleaner structure for long-form case studies and more consistent behavior across devices. Users can browse projects and read organized case studies in a more responsive, maintainable interface.

Implementation Highlights

• Rebuilt the site in Astro so most pages stay static and fast while still supporting reusable layouts for case studies.
• Used React only for small interactive pieces like navigation and copy-to-clipboard behavior instead of making the whole site client-rendered.
• Moved long-form project content into MDX so case studies could be edited in a structured, reusable format.

Technical Challenges

• Structuring long form content: The original website builder version made it difficult to present detailed project content in a clear and consistent way. I solved this by moving the case studies into MDX and building reusable content sections for text, images, and video.
• Balancing static content with interactivity: Most of the site is content focused, but a few parts still needed client side behavior like the mobile menu. I solved this by using Astro for static pages and React via Astro Island architecture so components were supplied with browser state and event handling.