The Starting Point
My original portfolio was a single index.html file. About 460 lines of handwritten HTML, a custom CSS file with Neo-Brutalist styling, and 43 lines of vanilla JavaScript for scroll animations.
It worked. It loaded fast. Cloudflare Pages served it with zero configuration. So why change it?
The Pain Points
Three things kept bothering me:
-
Adding a new project meant editing raw HTML. Copy-paste a card div, update the text, hope you did not break the indentation. It worked but felt fragile.
-
No blog. I wanted to write about my research and projects, but adding a blog to a static HTML page means either building a whole system from scratch or using a separate platform.
-
No dynamic data. GitHub stats, live project status, reading time on articles. All things that static HTML cannot do without external services and iframes.
Why Next.js
I considered Astro (ships zero JS by default, great for content sites) but landed on Next.js for a few reasons:
- React on the resume. As a CS student, React ecosystem experience has direct career value.
- One framework, multiple modes. Static generation for the portfolio sections, server components for dynamic data, MDX for the blog.
- Cloudflare Pages support. Same hosting, same domain, just a different build step.
What Changed
The biggest win was extracting all hardcoded content into JSON data files. Now adding a project means adding an object to projects.json. No HTML to touch.
The second win was componentization. Each section is its own React component. I can reason about the Hero section without scrolling past the Contact form.
What I Kept
The Neo-Brutalist CSS. I did not rewrite it into Tailwind. The design system ports cleanly as global CSS with variables. The Formspree contact form also works identically since it is just a standard form POST.
Was It Worth It?
For the portfolio alone, honestly, the static HTML was fine. But the moment you want a blog, dynamic data, or easier content management, the framework pays for itself. And the learning investment in React and Next.js extends far beyond this one project.