Andrea Horvath

Software Engineer, Problem Solver


Rebuilding my portfolio using Next.js + React

I first built a portfolio during my senior year of college, at the recommendation of a professor. He suggested it as a way to showcase the projects I worked on and to create a central place where future employers could see my work.

At the time, the portfolio was primarily a place to showcase projects from Santa Clara University's VR lab. I wasn't thinking about personal branding, writing project breakdowns, or maintaining a long-term body of work. I just needed somewhere to put screenshots and links.

As my career progressed, the site became increasingly disconnected from the work I was actually doing. The projects were outdated, many newer projects were missing entirely, and the site itself no longer reflected the skills I had developed as a software engineer.

Why I Rebuilt My Portfolio

Unfortunately, when I first made my portfolio, I had no web development experience and relied on Wix to build it. It worked well enough at the time, but updating it quickly became frustrating. Adding new projects meant manually rearranging cards and page layouts, while updating images or videos often required re-uploading files and cleaning up old versions by hand.

As the site grew, those problems became harder to ignore. The design felt clunky, the layout was inconsistent, and the site didn't work particularly well on smaller screens. Every update felt like more effort than it should have been. I eventually reached a point where I genuinely disliked the portfolio. It no longer reflected my skills, wasn't enjoyable to maintain, and wasn't something I felt proud to show people.


Starting From Scratch

After several years at MeetKai, I had gained a lot of experience building web applications with tools like React and Next.js. Rebuilding my portfolio felt like the perfect opportunity to put those skills to use on a project that was entirely my own.

It was also a chance to rethink how I presented my work. My old portfolio hadn't been updated since 2022, and many of the projects featured there reflected who I was as a student rather than the engineer I had become. Over the years, I had worked on interactive 3D experiences, content management systems, training applications, and large-scale web projects, but very little of that was represented on the site.

Rather than trying to patch the existing Wix portfolio, I decided to start over completely. A fresh foundation would let me build something easier to maintain, better suited to showcasing technical work, and more representative of my current experience.

Designing for Content

One challenge I knew I would face from the beginning was figuring out the site's layout. I'm not a designer, and while I had plenty of opinions about what I disliked in my old portfolio, translating that into a clean, usable design was much harder than I expected. I spent a lot of time looking at other developer portfolios and experimenting with different layouts before settling on something that felt right. I knew I wanted the focus to be on the projects themselves rather than flashy visuals, but I still needed a structure that was easy to navigate and pleasant to read.

Unlike a design portfolio, where visuals often take center stage, I wanted something more text-focused. I did like aspects of the layout from my original Wix portfolio, so parts of this redesign were inspired by it. I believe portfolios are an excellent place to go into detail about experience where resumes and LinkedIn are not. I have the freedom to explain my contributions to projects, discuss architecture and technical decisions, and include images, videos, and code snippets that provide additional context.

How I Built It

One of my goals for this project was to use the same tools I work with professionally rather than relying on a website builder.

The site is built with Next.js and React, which gave me a flexible foundation for creating reusable page layouts and components. I used TailwindCSS for styling, allowing me to quickly iterate on layouts while keeping the design consistent across the site. Since I knew the portfolio would contain a lot of long-form project writeups, I also chose to use MDX for project pages and blog posts. This allows me to write content in Markdown while still embedding React components for videos, image galleries, code snippets, and other interactive elements.

For the UI, I combined components from HeroUI and shadcn/ui rather than building everything from scratch. One example is the mobile navigation menu, which uses shadcn's Sheet component. This let me focus more on the content and overall experience while still maintaining a polished interface. I also added small animations throughout the site using Motion. They're intentionally subtle, but they help make navigation feel more responsive and give the portfolio a bit more personality without getting in the way of the content.

The Unexpected Challenge: Writing

Explaining my projects was probably the hardest part of this process. It's easy to throw screenshots and code snippets onto a page, but breaking down a project into a concise, easy-to-understand explanation is much harder than I expected. I would often sit down with the intention of writing a project page, get bored a few paragraphs later, and suddenly decide that what the portfolio really needed was an entirely new feature. The contact form is a direct result of one of those detours.

It was also surprisingly difficult to remember exactly what I had worked on in some of my older projects. I frequently found myself reopening codebases and digging through old systems just to refresh my memory. In many cases, I had to reverse-engineer my own work before I could explain it to someone else.

Perhaps the biggest lesson was that understanding a system and explaining it are two very different skills. Writing these project breakdowns forced me to think not just about how something worked, but how to communicate it clearly to someone seeing it for the first time.

What Changed

The biggest improvement is that the portfolio is now something I actually enjoy maintaining.

My old Wix site always felt fragile. Adding a new project meant manually creating pages, rearranging layouts, uploading media, and making sure everything still lined up correctly afterward. As the site grew, updating it became increasingly tedious, which meant I often avoided making updates altogether.

The new portfolio is built with Next.js, React, and MDX, which makes adding content dramatically simpler. New project pages and blog posts follow reusable layouts, media can be managed directly within the project, and styling remains consistent across the entire site. Instead of fighting the platform every time I want to add something, I can focus on the content itself.

The redesign also gave me an opportunity to improve the overall experience. The old site was built before I had much web development experience, and it showed. Spacing, typography, and page layouts were often inconsistent, and the site didn't work particularly well on smaller screens. The new version is fully responsive, more polished, and much easier to navigate whether viewed on a desktop, tablet, or phone.

Most importantly, the portfolio now does a much better job of representing the kind of work I do today. Rather than a collection of screenshots and brief descriptions, each project can include detailed writeups, videos, architecture discussions, code examples, and lessons learned. It feels less like a gallery of projects and more like a record of how I approach building software.

Closing Thoughts

The biggest benefit wasn't moving away from Wix. It was creating a place where I can document projects in the level of detail I want, and continue expanding it as my work evolves.

It's also immensely satisfying being able to point at this portfolio and say, "I built that!" My old website always felt like a compromise, whereas this one reflects both the projects I've worked on and the skills I've developed over the last several years.

The site now feels like something I can continue building on. New projects can be added easily, blog posts can be written without fighting a page builder, and the structure is flexible enough to evolve as my interests change. For the first time, maintaining my portfolio feels less like a chore and more like an ongoing project.