Folio v1

I designed and developed the first version of my portfolio website in 2023, working as a design engineer—prototyping ideas directly in code rather than starting with traditional design tools. The goal was to create a sleek, memorable experience that showcased my work while demonstrating my technical capabilities.

Folio v1 cover image

What I Built

This was a single-page site with a dark theme, packed with smooth interactions and animations that made browsing feel intentional and engaging. I built a custom loading screen that set the tone, then implemented a magnetic cursor that responded to clickable elements throughout the page—a small detail that added a lot of personality.

Folio v1 demo video

The site featured five main sections: Hero, Work, About, Blog, and Contact—each with its own scroll-triggered animations and micro-interactions. I used a combination of Framer Motion and GSAP to create fluid transitions and polished effects that felt cohesive across the entire experience.

About section

Technical Approach

I approached this project by designing and prototyping directly in code, iterating quickly on interactions and animations until they felt right. This allowed me to experiment with complex animations and custom behaviors (like the magnetic cursor) in ways that would have been difficult to spec out in a traditional design tool.

Blog section

The architecture was built to be performant despite the heavy animations, with careful attention to optimization and smooth 60fps interactions across all devices.

Hero section

Tech Stack

Next.js • TypeScript • Tailwind CSS • Framer Motion • GSAP

Contact section

Open Source Impact

I made the project open source when I launched it in 2023, and it's since gained over 150 stars on GitHub. The repository has helped other developers learn animation techniques and served as a reference for building interactive portfolio sites.