2/26/2025 · 3 min read

From the vanilla holy trinity to React Js

After several years of launching my personal website, I finally decided to upgrade. the strongest reason behind it was this blog component itself, I wanted to have my own space to share my thoughts and I always felt fascinating by doing it through markdown files, you can achieve this in soo many ways but at the times we on, working with high tier frameworks is the best option not only to show off your skills but to learn and let me tell you, I learnt A LOT.

1. Building My Portfolio Website: A Journey of Code, Design, and Debugging

Creating a portfolio website is always a fun yet challenging experience, and my latest one was no exception. With a sleek dark and light theme, a smooth blog section, an interactive portfolio showcase, and a dynamic contact page, this project became more than just a simple site—it was a playground of creativity and technical problem-solving.

2. Tech Stack: The Backbone of My Site

To build this portfolio, I went for a modern and efficient stack:

Next.js – For blazing-fast performance and seamless navigation.
TailwindCSS – To make styling a breeze.
Framer Motion – To add those juicy animations.
Markdown for Blog Posts – Keeping content management simple and flexible.
Dark/Light Mode – Implemented using Next.js and Tailwind’s dark mode support.

3. Cool Features: What Makes It Stand Out?

Dynamic Theme Switching
🌗 – The entire website smoothly transitions between dark and light modes based on user preference.
Animated Portfolio Showcase
🎨 – Subtle hover effects, smooth entry animations, and a sleek layout make my projects pop.
Blog Section with Search & Filters
📝 – Navigating through blog posts is intuitive with built-in search and category filters.
Contact Form with Validation
📬 – Ensuring messages actually get through (because who likes spam?).
Performance Optimizations
🚀 – Using lazy loading, image optimization, and SSR to keep things snappy.

4. Challenges & Funny Debugging Moments

Of course, no project is complete without headaches and hilarious moments:

CSS Shenanigans: The first attempt at the light/dark mode switch ended up making the whole site flicker like a horror movie.
State Management Chaos: Somehow, clicking the theme switcher button was triggering unexpected console logs like, “Undefined is not a function.” 😵‍💫
Animations Going Rogue: At one point, my project showcase was zooming into infinity when hovered over. I had to step back and tame the Framer Motion beast.
SEO Woes: Realized too late that I forgot to add proper meta tags, so the site was practically invisible on Google. 🤦‍♂️

5. Final Thoughts

This portfolio was an incredible learning experience. From nailing the UI/UX to optimizing performance, every step pushed my skills further. Whether you're a developer, designer, or just curious about the process, I hope this gives some insight (and maybe some laughs) into what goes into crafting a personalized portfolio website.

Vladimir G _