Building a Modern Personal Site with Next.js 15

Building a personal website is a rite of passage for developers. It's a chance to showcase your work, share your thoughts, and experiment with new technologies without client constraints.

The Stack

For this site, I chose a modern stack that prioritizes developer experience and performance:

• Next.js 15 with App Router for SSR/SSG
• Tailwind CSS v4 for styling
• shadcn/ui for accessible components
• Framer Motion for animations
• MDX for blog content

Design Philosophy

The design follows a few key principles:

Dark Mode First

Dark themes are easier to make look sophisticated. A zinc-950 base with an amber/gold accent creates warmth without sacrificing the modern aesthetic.

Subtle Motion

Animation should enhance, not distract. Scroll-triggered reveals, kinetic typography, and smooth transitions add polish without overwhelming the content.

Glass Morphism

Subtle blur effects and semi-transparent backgrounds create depth and visual hierarchy. The key is restraint—use it sparingly for maximum impact.

Code Example

Here's how the kinetic typography component works:

export function TextReveal({ text, delay = 0 }) {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true })
 
  return (
    <span ref={ref}>
      {text.split(" ").map((word, i) => (
        <motion.span
          key={i}
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ delay: delay + i * 0.08 }}
        >
          {word}
        </motion.span>
      ))}
    </span>
  )
}

What's Next

This is just the beginning. Future plans include:

• More blog posts on technical topics
• Project case studies
• Interactive experiments
• RSS feed

Stay tuned for more updates!