Improving Markdown and Styling on My Portfolio

What Changed

After building out the core structure of my portfolio, I turned my focus to improving the formatting of Markdown-based content—especially on blog and project detail pages. I wanted these sections to feel as polished as the rest of the site, with clean typography and proper spacing across elements like paragraphs, lists, and headers.

The Fix: Tailwind Typography and Markdown Rendering

I had already been using Markdown to manage blog and project content, but it wasn’t rendering with consistent formatting. Paragraphs looked clumped together, headings were unstyled, and the layout felt off.

To fix that, I:

• Integrated the @tailwindcss/typography plugin to enable Tailwind’s prose classes
• Updated my content containers to for better spacing and readability in dark mode
• Switched from inline rendering logic to fully parsing Markdown with remark and remark-html
• Verified all .md files were correctly indexed and included in the build

Why It Matters

The ability to render .md files with full formatting lets me easily maintain my blog and project entries without touching the layout logic. It also keeps the site scalable—new entries are just Markdown files, and they automatically gain the same consistent styling.

This update also helped me dig deeper into how Tailwind handles dynamic content, as well as how to debug static generation issues in Next.js 14’s App Router.

What’s Next

With Markdown and styling now dialed in, I’ll be turning my attention to refining mobile responsiveness, improving deployment speed, and continuing to integrate live demos like the movie recommender tool.

Thanks for following along—and if you’re building something similar, I’m happy to share tips!