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.

Demo

Notable Tech Used

• Astro: To build the site structure and generate fast static pages for the homepage, about page, and case study routes.
• React: Used for smaller interactive parts of the site such as the responsive header, mobile navigation, and copy-to-clipboard email button.
• Tailwind CSS: Used to build the responsive layouts, spacing system, and typography styles across the site.
• Motion (formerly Framer Motion): For lightweight UI animation in sections that reveal content on scroll.

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.

Lessons Learned

• Custom code vs builder: Rebuilding the site showed me how much easier it is to improve accessibility, responsiveness, and layout consistency when I have direct control over the code.
• Using Astro for content: I learned how to keep most of the site static for simplicity and performance, while using React only for the parts that needed interactivity.