[{"_1":2,"_36":-5,"_37":-5},"loaderData",{"_3":4},"routes/blogs._index",{"_5":6,"_29":30,"_31":30,"_32":30,"_33":34,"_35":34},"posts",[7],{"_8":9,"_10":11,"_12":13,"_14":15,"_16":17,"_18":19,"_23":24,"_25":26,"_27":28},"slug","building-modern-portfolio","title","Building a Modern Portfolio with React Router v7 and Tailwind 4","excerpt","Learn how I built this portfolio website using the latest React Router v7 and Tailwind CSS v4, featuring dynamic theming and modern design patterns.","date","2026-01-30","readTime","5 min read","tags",[20,21,22],"React","Tailwind CSS","Web Development","published",true,"markdownContent","\n## Introduction\n\nBuilding a portfolio website is a rite of passage for many developers. It's a chance to showcase your skills, experiment with new technologies, and create something that represents you professionally. In this post, I'll share my experience building this portfolio using **React Router v7** and **Tailwind CSS v4**.\n\n## Why React Router v7?\n\nReact Router v7 brings some exciting changes to the table:\n\n- **File-based routing** - Routes are automatically generated based on your file structure\n- **Built-in data loading** - The `loader` function makes data fetching seamless\n- **Type safety** - Better TypeScript integration with `useLoaderData`\n- **Server-side rendering** - Out of the box SSR support\n\nHere's an example of how I set up a route with data loading:\n\n```typescript\nexport async function loader({ params }: LoaderFunctionArgs) {\n const project = getProjectBySlug(params.slug);\n if (!project) {\n throw new Response('Not found', { status: 404 });\n }\n return { project };\n}\n```\n\n## Tailwind CSS 4: What's New?\n\nTailwind CSS v4 introduced several improvements:\n\n### 1. CSS-first Configuration\n\nInstead of JavaScript configuration, Tailwind 4 uses CSS for theming:\n\n```css\n@theme {\n --font-sans: \"Inter\", \"system-ui\", \"sans-serif\";\n --color-primary: #3B82F6;\n}\n```\n\n### 2. Dynamic Theming\n\nI implemented a theme system that allows users to switch between Brown and Pink themes:\n\n```css\n[data-theme=\"brown\"] {\n --bg-primary: #dedbca;\n --bg-secondary: #6E5034;\n --text-primary: #000;\n}\n\n[data-theme=\"pink\"] {\n --bg-primary: oklch(93.6% 0.032 17.717);\n --bg-secondary: #ffa1a3;\n --text-primary: #000;\n}\n```\n\n## Key Features\n\n### Dynamic Theme Switching\n\nUsers can choose between Brown and Pink themes, with their preference saved to localStorage:\n\n```typescript\nconst setTheme = (newTheme: Theme) => {\n setThemeState(newTheme);\n localStorage.setItem('theme', newTheme);\n};\n```\n\n### Markdown Blog System\n\nThe blog system uses gray-matter for frontmatter parsing and marked for Markdown rendering with syntax highlighting powered by highlight.js.\n\n### Responsive Design\n\nEvery component is designed mobile-first, ensuring a great experience on all devices.\n\n## Lessons Learned\n\n1. **Start with theming** - Setting up CSS variables early makes styling consistent\n2. **Use semantic HTML** - It improves accessibility and SEO\n3. **Keep components small** - Easier to maintain and test\n\n## What's Next?\n\nI'm planning to add:\n\n- Dark mode support\n- Blog search functionality\n- Project filtering by technology\n\nThanks for reading! Feel free to explore the portfolio and reach out if you have any questions.\n","content","

Introduction

Building a portfolio website is a rite of passage for many developers. It's a chance to showcase your skills, experiment with new technologies, and create something that represents you professionally. In this post, I'll share my experience building this portfolio using React Router v7 and Tailwind CSS v4.

Why React Router v7?

React Router v7 brings some exciting changes to the table:

File-based routing - Routes are automatically generated based on your file structure
Built-in data loading - The loader function makes data fetching seamless
Type safety - Better TypeScript integration with useLoaderData
Server-side rendering - Out of the box SSR support

Here's an example of how I set up a route with data loading:

\n\n

\n typescript\n \n

export async function loader({ params }: LoaderFunctionArgs) {\n  const project = getProjectBySlug(params.slug);\n  if (!project) {\n    throw new Response('Not found', { status: 404 });\n  }\n  return { project };\n}

Tailwind CSS 4: What's New?

Tailwind CSS v4 introduced several improvements:

1. CSS-first Configuration

Instead of JavaScript configuration, Tailwind 4 uses CSS for theming:

\n\n

\n css\n \n

@theme {\n  --font-sans: "Inter", "system-ui", "sans-serif";\n  --color-primary: #3B82F6;\n}

2. Dynamic Theming

I implemented a theme system that allows users to switch between Brown and Pink themes:

\n\n

\n css\n \n

[data-theme="brown"] {\n  --bg-primary: #dedbca;\n  --bg-secondary: #6E5034;\n  --text-primary: #000;\n}\n\n[data-theme="pink"] {\n  --bg-primary: oklch(93.6% 0.032 17.717);\n  --bg-secondary: #ffa1a3;\n  --text-primary: #000;\n}

Key Features

Dynamic Theme Switching

Users can choose between Brown and Pink themes, with their preference saved to localStorage:

\n\n

\n typescript\n \n

const setTheme = (newTheme: Theme) => {\n  setThemeState(newTheme);\n  localStorage.setItem('theme', newTheme);\n};

Markdown Blog System

The blog system uses gray-matter for frontmatter parsing and marked for Markdown rendering with syntax highlighting powered by highlight.js.

Responsive Design

Every component is designed mobile-first, ensuring a great experience on all devices.

Lessons Learned

Start with theming - Setting up CSS variables early makes styling consistent
Use semantic HTML - It improves accessibility and SEO
Keep components small - Easier to maintain and test

What's Next?

I'm planning to add:

Dark mode support
Blog search functionality
Project filtering by technology

Thanks for reading! Feel free to explore the portfolio and reach out if you have any questions.

\n","totalPosts",1,"totalPages","currentPage","hasNextPage",false,"hasPrevPage","actionData","errors"]

A collection of thoughts, code, and quiet observations.

Recent Entries

Building a Modern Portfolio with React Router v7 and Tailwind 4