# Portfolio Website Development 🏗️ - Part 3

![souravdey.space](https://souravdey.space/images/blogs/portfolio-website-development-part-3/screenshot.png)

This blog is the 3rd part after **[Portfolio Website Development - Part 1](https://souravdey.space/blogs/portfolio-website-development-part-1)** and **[Part 2](https://souravdey.space/blogs/portfolio-website-development-part-2)**.

Part 2 ended with a single long page: anchor jumps, Hashnode pulling the latest four posts, and a layout I still liked visually. The problem showed up in day-to-day use. I kept pasting links and then typing “scroll to…” or sending people to Hashnode for the full post. That is fine for a launch story. It is a bad fit when you actually want **this domain** to be where the writing lives.

So I rebuilt the shape of the site around **real routes** and **MDX in the repo**.

## ⚡ Next.js 13 and the App Router

I am on **Next.js 13.4.x** with the **App Router** (`experimental.appDir` in `next.config.js`). The **`src/app/`** tree now owns `/`, `/blogs`, `/blogs/[slug]`, `/mindNuggets`, `/mindNuggets/[slug]`, nested `/aboutMe/*`, `/ideas`, `/mentorship`, and the rest. Clicking the menu is navigation, not `scrollIntoView` on one canvas.

The tradeoff is honest: I lost some of that “one continuous landing page” feel. I gained URLs I can drop in a DM, Open Graph that points at **souravdey.space**, and room to grow without turning `page.tsx` into a junk drawer.

## 📦 Contentlayer + MDX

Blogs and mind nuggets are **`.mdx` files under `src/content/`**. **[Contentlayer](https://contentlayer.dev/)** with **`next-contentlayer`** is what turns those files into typed documents and generated imports from **`contentlayer/generated`** (`allBlogs`, and the same pattern for other types). My build is `yarn contentlayer build && next build`.

In `contentlayer.config.js` I defined **Blog**, **MindNugget**, **Idea**, and **Book** document types. MDX goes through **remark-gfm**, **rehype-slug**, **rehype-pretty-code** (Shiki, `github-dark`), and **rehype-autolink-headings** so code blocks and headings behave the way I expect in long posts.

The homepage still composes **`intro.mdx`** and friends via **`@next/mdx`**, with **`experimental.mdxRs`** where it helps. Two MDX paths sound like extra noise. In practice it let me ship the marketing shell and the article pipeline without blocking one on the other.

## 🎨 Styling and motion

I did **not** move to Tailwind for this pass. Most surfaces use **CSS Modules** (`page.module.css`, component-level `*.module.css`) plus tokens in **`globals.css`**. **`prefers-color-scheme: dark`** drives a simple light or dark flip through CSS variables so I get a baseline theme without a custom toggle yet.

**Framer Motion** is still doing the heavy lifting for scroll progress and the small transitions that stop long pages from feeling dead. Icons are **lucide-react** and **@icons-pack/react-simple-icons** where I need brand marks.

## Tooling snapshot

**Node 18.x** in `engines`, **React 18.2**, **TypeScript 5.0.x**, **eslint-config-next**. On blog pages **dayjs**, **reading-time**, and **clsx** handle dates, read time, and class names. Nothing here is trying to be clever. It is the stack I could operate while still shipping features after work.

## What is next?

- Tighten metadata and sharing cards per route so every blog and nugget looks right when linked on Twitter or LinkedIn.
- Keep pulling more writing off third-party hosts so **souravdey.space** stays the canonical place.
- Revisit the `/aboutMe` subtree and side pages so they match the same content model where it makes sense.
- I am sure I will find ten more rough edges once I stop touching the same three files on repeat.

If you are on a similar journey: **routes first, content compiler second, polish third**. I spent too long in Part 2 pretending scroll targets were URLs. Fixing that unlocked everything else.

✨ Live site: [souravdey.space](https://souravdey.space)

---

*Originally published at [souravdey.space](https://souravdey.space/blogs/portfolio-website-development-part-3).*