Version three of my personal portfolio.

Stack

• Vercel - Deployments, metrics, ci/cd.
• Next.js (V15 stable) - Server components, static pages, routing.
• Typescript - Becuase its better to be to typesafe.
• Sanity - Content managment system (I finally got tired of editing my code to add a project).
• Shadcn / Tailwind - Styling, and base components.

About Portfolio V3

With this portfolio, I really wanted to align it with my technical abilities. In the past, my portfolio felt bland, boring, and more like a resume than anything else. This time, my goal was to make it feel like an actual application, with tons of polished details. I’m no UI/UX designer, but I know how to build just about anything I can visualize. I used the web for inspiration and also drew a lot from Apple’s marketing UI for a clean, sleek feel.

Identifying Unique Challenges

The main design inspiration for my portfolio was the cool "Let’s Connect" footer with animated arrows that appear on hover. I knew I wanted to include this, but since I was building everything from scratch, and not using a direct template, recreating it was a bit of a challenge. Tailwind didn’t have the necessary class names out of the box, so I had to add some utility layers in my globals.css file to support the keyframes and animation for it to work.

Another challenge was learning some new libraries and tools. I’ve always wanted my portfolio to be powered by a CMS, so using Sanity was a no-brainer. The best part? If I ever build a new portfolio, I can simply copy over the schemas and queries to a new app without having to recreate all the data.

Finally, Framer Motion. The smooth scroll transitions that give it that polished Apple-like feel were made possible by Framer Motion. It was a fun library to use and really helped take this project to the next level.