How I Built My Portfolio Website with Next.js 13 App Router & Tailwind CSS

A developer portfolio is more than just a resume; it is a live demonstration of your technical capabilities, design sensibilities, and understanding of modern web engineering standards. When I set out to rebuild my portfolio, I chose Next.js 13, utilizing its new App Router, alongside Tailwind CSS and Framer Motion. Here is how I built it, optimized it for SEO, and achieved Lighthouse scores near 100.

Why Next.js 13 App Router?

Next.js 13 introduces the App Router structure, built on React Server Components (RSC). For a personal portfolio, this architecture offers substantial advantages:

• Server Components by Default: The entire layout, footer, and main text elements are rendered on the server. This means the client receives static HTML, maximizing Largest Contentful Paint (LCP) performance and making content immediately readable by search crawlers.
• Automatic Code Splitting: Next.js automatically splits code bundles per page route. Navigating to the blog route only loads code relevant to that page.
• Built-in Metadata API: Handling title tags, open-graph cards, Twitter markup, and canonical URLs becomes clean and declarative.

Designing the Theming System

I wanted a theme that represented my unique identity. As a massive fan of Australian cricket and Steve Smith, I developed a dual theme:

• Cricket White (Light Mode): Polished cream and grass-green accents resembling a test match venue under the sun.
• Stadium Night (Dark Mode): Deep green-black background accented by stadium-light neon green and gold, providing high accessibility and screen comfort.

We implemented this using next-themes and Tailwind custom properties in CSS variables to ensure zero layout shift or flash on initial reload.

Improving Core Web Vitals

To ensure a premium UX and high search engine placement, I implemented the following optimizations:

1. Image Optimization: Utilizing Next.js <Image /> component automatically generates responsive WebP formats, prevents layout shift via explicit aspect ratios, and supports lazy loading.
2. Dynamic Imports: Dynamic interactive components (like animated counters) are imported with ssr: false to keep the initial server bundle lightweight and prevent hydration errors.
3. Semantic HTML: Structuring layouts with proper <header>, <main>, <footer>, and single <h1> markup makes the page highly readable for screen readers and search engine crawlers alike.

Conclusion

Building this site showed me how powerful Next.js is for creating fast, responsive, and search-optimized web applications. By paying attention to semantic HTML, performance budgets, and structured metadata, you can stand out to both Google bots and technical recruiters.