My Portfolio Website

The Inspiration

After weeks of brainstorming ideas and coming up empty, I realized I was overexposed to SaaS websites. Every design I tried felt like it was advertising a SaaS product rather than reflecting my personality. Frustrated, I decided to browse Framer's template store for inspiration.

That’s when I stumbled upon the beautiful Oslo template by David Pietrasiak. Its minimalistic design immediately resonated with me, and I knew I had found a starting point.

I took inspiration from the template, recreated the design in Figma, and then coded it using Next.js and Tailwind CSS. You can check out my Figma design here. I even created a light mode version, which wasn’t in the original template. Huge thanks to David for the inspiration, but let’s move on to what makes this project mine.

Purpose

The purpose of this project is simple yet essential: to showcase my work. I have projects I’m proud of and love discussing, so I needed a platform to display them. After all, every developer needs a portfolio, right?

This portfolio isn’t just about showing what I’ve done—it's about demonstrating what I’ve learned and how I can apply those skills. My goal is to get noticed, connect with potential clients, and find opportunities to work on challenging projects. I genuinely enjoy solving problems for clients and building a diverse network along the way.

Spotlight

While much of this project was inspired by existing designs, I believe the spotlight is on my ability to recreate features I’ve admired across the web. Let me share some highlights:

Home

• Every page on the site includes loading animations. The hero text on the homepage flickers into view—a personal favorite. I first used this animation in my Counter project and loved it so much that I brought it back here.

• I added micro-interactions to the project preview images and a subtle parallax scrolling effect to my photo.

• Speaking of the photo, its background changes dynamically with the theme. Try switching between light and dark modes while viewing the image!

About

• This page features my dynamic photo again, along with some details about me. All elements fade in as you scroll, thanks to Motion.

• A fun touch: the typing speed stat is highlighted in a different color, and the asterisk blinks. Curious why? Hover over it!

• I used ShadCN’s hover card component to display real-time typing speed data fetched from the MonkeyType API. It’s a small but delightful detail.

Projects

• This section was particularly fun to build. I used ShadCN’s data table component to display project information.

• Each project’s details are written in MDX, rendered to HTML using the Content Collections package. I switched to this package after Contentlayer was archived and found it much easier to work with in Next.js v15.

• I generate a TL;DR for each project from its frontmatter, understanding that not everyone wants to read the full details.

• The Table of Contents on each project page is dynamically generated without relying on plugins. Ironically, trying to use plugins only complicated things, so I implemented my own solution.

Current Status

The portfolio is complete at an MVP stage. While I’m happy with it, I’m constantly looking for ways to improve. Here are a few things I plan to add in the future:

• A Blog: I want to attach my blog to this site and resume writing.
• A Contact Page: I don’t see the need for a contact form right now, but when I do, I’ll add one.
• More Interactions: I’m currently out of ideas, but I love experimenting with new interactions. When inspiration strikes, I won’t hesitate to implement it—no matter how unconventional.

Lessons Learned

The biggest lesson I’ve learned from this project is:

Don’t be afraid to take inspiration.

There’s nothing wrong with drawing inspiration from others. It doesn’t make my work any less mine. I still wrote the code, added my personal touch, and made it my own. More importantly, taking inspiration saved me a lot of time and helped me focus on what truly matters: creating something I’m proud of.

Conclusion

This portfolio isn’t just a showcase of my work—it’s a reflection of my journey as a developer. It highlights my skills, creativity, and ability to bring ideas to life. While the design may have started with inspiration, the final product is undeniably mine.

I’m excited to see where this portfolio takes me, whether it’s connecting with clients, collaborating on exciting projects, or simply growing as a developer. Here’s to many more projects, lessons, and opportunities ahead!