Building a Minimalist Portfolio with Next.js

The web has become cluttered. We're constantly bombarded with pop-ups, heavy animations, and complex layouts that distract from the content. As engineers, we often fall into the trap of over-engineering our personal sites to show off our skills.

But sometimes, less is more.

The Philosophy

When redesigning my portfolio, I looked at the personal sites of engineers I admire—people like Guillermo Rauch and Dax Raad. What did they have in common?

1. Speed: Their sites load instantly.
2. Typography: Great font choices that make reading a pleasure.
3. Content-First: No distractions. Just the work and the writing.

The Stack

I chose a stack that reflects these values:

• Next.js for the framework (static export or server components).
• Tailwind CSS for styling without the bloat.
• MDX for writing content as code.
• Geist Font for that crisp, modern look.

// Example of a simple component
export default function Hello() {
  return (
    <div className="p-4 bg-white rounded shadow">
      <h1>Hello World</h1>
    </div>
  )
}

Conclusion

This new design allows me to focus on what matters: sharing what I learn. No more tweaking complex layouts or debugging 3D animations. Just writing.