You see a lot of great developers out there with beautiful portfolios, that are completely invisible. Let's be real: if no one can find your site on Google, what's the point?
I wanted to dodge that bullet.
This portfolio? It was built to be simple, direct, and well-structured, both visually and under the hood. But most importantly: it was made to pop up when someone searches for me or something I've written.
🧱 The Stack
Nothing groundbreaking here, but solid choices:
- Next.js (App Router) — for its awesome flexibility with server-side features and SEO power.
- Tailwind CSS — for lightning-fast development and consistent visuals.
- TypeScript — because once you go TS, you don't go back.
I stuck with the standard App Router structure, leveraging app/, layouts, and built-in metadata. This makes true SEO a breeze, no need for clunky plugins or external libraries.
🔍 SEO, Sans the Trauma
I didn't pull any black hat magic, but I did focus on the stuff that actually moves the needle:
📄 Metadata with next/metadata
Next.js 13+'s new metadata system (generateMetadata) gives you granular control over your page structure. Here's a quick peek:
export const generateMetadata = ({ params }) => ({
title: `Project: ${params.slug}`,
description: 'Dive into the details of this personal project built with React...',
openGraph: {
images: [`/og/${params.slug}.png`],
},
});
This is a game-changer for generating custom previews and drastically improving indexing on Google and social media.
🧭 robots.txt, sitemap.xml, and a Clean Structure
These two files might not be glamorous, but they're absolutely essential:
robots.txt to give crawlers the green light (without it, Google might just skip your page).
sitemap.xml to lay out the roadmap for all available routes.
🖼️ Open Graph + Twitter Cards
Every page has a configured preview image, with a standard fallback. I set up a /public/og folder with 1200x630px images, then wire 'em up in the metadata.
This makes your links look sharp and professional when you share them on LinkedIn, Twitter, and beyond.
🧠 Mobile-First, For Real
I avoided the common trap of thinking, "I'll fix it for mobile later."
From day one, I designed the layout as a vertical feed with smart section breaks. I leaned on Tailwind's utility classes to ensure text always had max-w-prose, comfortable spacing, and smooth readability even on tiny screens.
Oh, and no navbar on the mobile landing, by design, I wanted the initial focus to be purely on presentation. The Devlog link? It's subtle, tucked away in the footer, almost like an "easter egg" for those who want to dig deeper.
🧠 dynamic() Done Right = Seamless Performance
I used dynamic() to import heavier components or those based on user interaction, like Intersection Observer. But always with visual fallbacks, no ugly flashes that make your layout look broken.
const InView = dynamic(() => import('react-intersection-observer').then(mod => mod.InView), {
ssr: false,
loading: () => <div className="h-32 bg-zinc-900/10 animate-pulse rounded-xl" />,
});
These small details significantly boost perceived performance, even on slower connections.
📓 Devlog: Content as Strategy
I could've just stopped at a static portfolio, but I felt it was far more valuable to open up about the projects I build. That's how the Devlog was born, this very section you're reading now.
Beyond just showing I'm always building, writing here helps the site rank better over time. And honestly? It's a great way to document what I learn while getting my hands dirty with code.
A portfolio isn't just a calling card. It's living proof that you write code with intention, and a canvas to showcase your boundless creativity.
