DevPortfolio V2

Inspiration

As a developer, I realized that a static PDF resume couldn't fully capture my coding style or attention to detail. I wanted a "live canvas" to demonstrate my frontend skills—specifically focusing on modern, clean UI principles and high performance. I wanted to build something that felt professional yet personal.

What it does

DevPortfolio V2 serves as a central, interactive hub for my work. It features:

• Fully Responsive Layout: Looks perfect on mobile, tablet, and desktop.
• Smart Dark Mode: Automatically respects system preferences but allows manual toggling.
• Seamless Animations: Uses physics-based transitions for a smooth user experience.
• Project Showcase: A filtered grid view to display my other coding projects.

How we built it

I built the core using React to maintain a modular component architecture. For styling, I utilized Tailwind CSS, which allowed me to rapidly prototype while maintaining a consistent design system. To achieve the "seamless animations" mentioned in my pitch, I integrated Framer Motion for layout transitions and scroll reveals. The site is optimized for speed and deployed on Vercel.

Challenges we ran into

One of the main challenges was implementing the Dark Mode without the "flash of unstyled content" (FOUC) on initial load. I had to write a custom hook to check local storage and system preferences before the React component mounted. Additionally, ensuring the grid layout collapsed gracefully on smaller screens required precise tweaking of Tailwind breakpoints.

Accomplishments that we're proud of

I am particularly proud of the Lighthouse Performance Score, which is near 100/100. Achieving this while having rich animations required careful optimization of assets and code splitting. The result is a site that feels instant and snappy.

What's next for DevPortfolio V2

I plan to integrate a Headless CMS (like Sanity or Strapi) to manage the content dynamically. This will allow me to add blog posts and update project details instantly without needing to push new code updates.

Built With

• framer-motion
• javascript
• react
• tailwind-css
• vercel