Yvonne Lu Trinh's Portfolio

• 

  Interactive pointillism portrait

What it does

This portfolio is a living showcase of my projects, experiments, and creative journey. Visitors can explore interactive project windows, swipe through animated image sliders, and get a real sense of my design sensibility and technical chops—all in a responsive, visually engaging package.

How I built it

This portfolio is powered by React and TypeScript, styled with Tailwind CSS, and animated with Motion. I crafted custom components for the project windows and image slider, ensuring each piece felt unique and intuitive. Vite keeps everything fast and modern, while analytics tools like LogRocket and Microsoft Clarity help me learn from real user interactions. Every detail, from the navigation to the hover effects, was designed and built by hand.

Challenges we ran into

Pixel-perfect design is a moving target! Balancing creativity with usability, making sure animations felt smooth (not distracting), and wrangling responsive layouts for every device took plenty of iteration.

Accomplishments I'm proud of

I’m proud of how cohesive and “me” this site feels. The interactive windows and the overall polish make this portfolio stand out. In particular, creating the interactive pointillism portrait on the "about" page was a fun process where I got to use a number of new tools. Seeing my ideas come to life and knowing visitors can experience my work in an engaging way is incredibly rewarding

What I learned

Building this portfolio deepened my understanding of advanced React patterns, animation timing, and responsive design. I learned how to optimize for both performance and aesthetics, and how to use analytics to iterate based on real feedback.

What's next for my portfolio

A portfolio should evolve just like its creator. Next up: polishing of responsiveness across viewports and browsers, more case studies, richer project writeups, and maybe even a blog. I’m excited to keep experimenting, refining, and sharing new work as I grow.

Built With

• clarity
• eslint
• javascript
• logrocket
• lucide-react
• motion
• react
• sharp
• tailwind-css
• typescript
• vite