Overview 🌟

It’s been nearly two years since I last updated the design of my portfolio—only updating the content during that time. But eventually, I grew tired of the old design. So, I decided to give my portfolio a fresh look! ✨ However, I stuck with the same tech stack: Sveltekit and TailwindCSS.

Previously, my website had a design similar to most documentation sites. Some even said browsing my site felt like reading technical docs. And honestly, that was intentional at the time. But lately, I’ve grown out of that idea. That’s why I embarked on this redesign journey. 🛠️

Finding Inspiration 💡

Since I wasn’t satisfied with my previous design, I started hunting for inspiration on WallofPortfolios. This site showcases a variety of creative and unique portfolio designs, and honestly, I was overwhelmed by the options! 😅 After some exploration, I fell in love with two portfolios: Ayaneshu’s and Parth Vardhani’s.

Why did I like them? Their layouts reminded me of the Arc Browser, which I used to use. Inspired by their designs, I decided to incorporate a browser-like layout into my portfolio, complete with a loading indicator for page transitions. How cool is that? 🌈

Building the New Design 🚧

Creating the new design wasn’t too challenging for me since I’m primarily a Frontend Developer who occasionally dabbles in Fullstack development. To make things easier, I started by designing the layout first, followed by the sidebar and content sections. This step-by-step approach saved me a lot of hassle. 😌

By the way, aside from Sveltekit and TailwindCSS, I also used a few additional libraries to enhance my workflow. Here’s a breakdown:

Previous Website 📂

Current Website 🌐

What Did I Gain? 🤔

After building and deploying the new version, I noticed some surprising results. One major highlight was the build time. On my previous site, with the same content and libraries, it took 3-5 minutes to build. 🕒 But with the current setup (same content, different libraries), the build time dropped to just 20-30 seconds! ⚡

Honestly, I was shocked. The codebase and content were almost identical—the only differences were the libraries and the layout. Yet, the performance improvement was incredible. 🙌

Conclusion 🎯

Redesigning my portfolio was a rewarding experience. Not only did I create a more visually appealing site, but I also optimized its performance significantly. This project reinforced the importance of experimenting with new tools and approaches. Who knows what other improvements await in the future? 🚀

If you’re a developer thinking about redesigning your portfolio, don’t hesitate! It’s a great opportunity to refine your skills, explore new technologies, and showcase your creativity. Plus, it’s always fun to see your progress over time. 🎨✨

Happy coding, and may your portfolio shine bright! 💻🌟