Harsiddak Bedi
← Back to all blogs

Hello World: Building a Custom Next.js Portfolio

2024-05-15

Why Build Custom?

I could have easily used a template for my portfolio, but as a software engineer, building things from scratch is always the best way to learn and control every detail.

The Stack

For this iteration of my website, I chose:

  • Next.js (App Router) for routing and rendering.
  • Vanilla CSS because sometimes Tailwind is overkill for a minimal design.
  • React Markdown so I can write blogs directly from my VS Code and quickly publish them on Hashnode or Dev.to later.

Neumorphism Design

I wanted something that feels like polished hardware. Soft shadows and subtle inset highlights give a really cool tactile feel.

// A simple function to calculate shadow intensity
function getShadowConfig(isDark) {
    return isDark ? 'dark-shadow-values' : 'light-shadow-values';
}

Tip: Don't overuse neumorphism! It can easily clutter your design. Keep it strictly for cards, inputs, and buttons.

Thanks for reading, and stay tuned for more posts about software engineering, architecture, and learning!