Portfolio Website

The App Router uses React Server Components by default. That means pages that are just text and images get sent as plain HTML with basically zero JavaScript. For a content site, that's huge. Everything loads fast because browsers have less work to do. The project detail pages get built ahead of time using generateStaticParams. Next.js looks at my project data, generates every /project/[slug] page during the build, and serves them as static files from a CDN. Someone clicks a link, they get instant HTML. No server processing, no loading states, just the page. I also like that data fetching happens right in the component file. The project page fetches its own content from my config files directly. Everything lives together instead of being scattered across API routes and useEffect hooks.

MDX lets me write in Markdown but use React components when I need them. Most of the time I'm just writing paragraphs and lists like normal. But if I want to show how a button works, I can import the actual component and drop it right in the text. People see the real thing instead of a screenshot. I set up a system that splits each MDX file into two parts. The frontmatter at the top (title, date, tags) becomes metadata I can query. The content body gets compiled separately. So I can do things like "find all projects from 2024 that use TypeScript" while still writing everything in regular Markdown files. It's like a database but the source files are just text I can edit in any editor. All the MDX compilation happens during the build. When someone visits the site, the processing is already done. They get the final HTML immediately.

Tailwind keeps me moving. I write a component and style it right there in the same file. No jumping between JavaScript and CSS files, no thinking up class names, no wondering if changing one style will break something else. I defined all my colors and spacing values in the Tailwind config once. Things like bg-background and text-foreground instead of specific hex codes. When I wanted to switch to the monochrome look, I just updated those definitions. Every component using those tokens updated automatically. The brutalist borders and shadows are just utility classes like border-2 and shadow-lg. If I ever want to redesign, I change the config file and everything flows through. I'm styling with a system instead of fighting individual CSS rules.

TypeScript catches mistakes before they become problems. I defined what a project object looks like: it needs a title, slug, tech stack, image gallery. If I add a new project and forget the description field, the build breaks immediately and tells me exactly what's missing. This saved me when I reorganized how the tech deep dive sections work. I changed the data structure, and TypeScript showed me every single place in the UI that needed updating. Without it, I would've shipped broken pages and found out through 404 errors or weird layouts. It also makes adding features easier. I know exactly what data I have access to at any point. The autocomplete shows me valid fields. I spend less time checking documentation and more time building.