Stop Building Your Portfolio from Scratch: I Built a High-Performance Next.js Template So You Don't Have To

As developers, we all suffer from the same problem: "The Portfolio Paradox."

We can build complex full-stack applications for clients, but when it comes to our own personal website? We procrastinate. We spend weeks obsessing over which font to use, or we get stuck in "tutorial hell" trying to animate a navbar.

Last weekend, I decided to fix this.

I wanted a portfolio that was:

1. Fast (100% Lighthouse Score).
2. Easy to maintain (No digging through HTML to change text).
3. Clean (Recruiters love minimalism).

So, I built GrowUI — a production-ready template using the modern stack I use daily. Here is how I built it, and why you might want to use it too.

🛠 The Tech Stack

I chose the tools that offer the best balance between developer experience and performance:

• Next.js 16 (App Router): For server-side rendering and SEO.
• Tailwind CSS: For rapid styling without leaving the HTML.
• TypeScript: Because catching bugs at compile time is better than at runtime.
• Lucide React: For beautiful, lightweight icons.

💡 The "Secret Sauce": Config-Driven Content

The most annoying part of maintaining a portfolio is updating it. I didn't want to edit 5 different components just to add a new project.

So, I centralized everything into a single site.ts config file.

Here is a snippet of the code structure:

// src/config/site.ts

export const siteConfig = {
  name: "Geusan Dev",
  description: "Frontend Developer & UI Enthusiast.",
  skills: ["Next.js", "React", "Tailwind", "Figma"],
  projects: [
    {
      title: "Zenith Todo",
      tech: ["Tauri", "React", "SQLite"],
      link: "https://github.com/geusan/zenith",
    },
    // Adding a new project is just adding an object here!
  ],
};

This way, the UI components (Hero.tsx, Projects.tsx) are completely separated from the data. You can redesign the entire site without touching the content, or update the content without breaking the design.

⚡ Performance First

We all know performance matters. I optimized the images, fonts, and script loading to ensure it hits high green scores globally.

Here is the real-world performance test from multiple regions:

It consistently hits 90-95+ scores across the US, Europe, and Australia, ensuring your portfolio loads instantly for recruiters anywhere.

🚀 Want to use this?

I built this primarily for myself, but I realized many other developers are stuck in the same loop.

If you want to save 20+ hours of design and coding time, I’ve packaged this into a premium template.

It includes:

• ✅ Complete Source Code
• ✅ Dark Mode Ready
• ✅ Responsive Grid Layout
• ✅ SEO Meta Tags Setup

You can grab it for just $5 (the price of a coffee ☕️).

👉 Get the Template on Gumroad

Or check out the live demo here: Live Demo

Thanks for reading! If you have any questions about the code structure, let me know in the comments.

Comments

[Martijn Assie]

This is super smart … centralizing all your content in one config file is a game-changer!! Tip: you could add a small CLI or script to auto-generate project entries from GitHub repos … saves even more time and keeps it always up to date!!

[Geusan Edurais]

Hey Martijn! Thanks a lot for the kind words, really glad you dig the config-based approach! 🙌

That CLI idea is actually brilliant. Automating the sync with GitHub repos would definitely save even more time. I’m adding that to my roadmap for Version 2. Thanks for the suggestion!