Refactor to multi-page SPA with React Router and blog system

[augbog]

Summary

Migrated the portfolio from a static multi-file structure (separate index.html and quotes.html) to a single-page application (SPA) powered by React Router. Added a blog system with markdown support via a custom Vite plugin, and restructured the codebase to support multiple routes (Home, Blog, Quotes, Cubes).

Key Changes

• React Router Integration: Converted App.jsx to use BrowserRouter, Routes, and Route components. Created a Layout component that wraps all pages with persistent Nav and Footer.

• New Pages:

  • Home.jsx — Hero section with animated gradient canvas background, latest blog posts preview, and social icons
  • Blog.jsx — Blog listing page with all posts sorted by date
  • BlogPost.jsx — Individual blog post page with markdown rendering and navigation between posts
  • Cubes.jsx — Extracted the interactive 3D scene (formerly the homepage) to its own route

• Markdown Blog System:

  • Created plugins/vite-plugin-markdown.js — Custom Vite plugin that provides a virtual module virtual:blog-posts for importing blog metadata and content
  • Created MarkdownRenderer.jsx — Lightweight markdown-to-JSX renderer (no external dependencies) supporting headings, paragraphs, bold, italic, inline code, code blocks, links, blockquotes, and lists
  • Added sample blog posts in content/blog/ with frontmatter (title, date, tags, excerpt)

• Navigation & Layout:

  • Created Nav.jsx — Fixed navigation bar with active route highlighting
  • Created Footer.jsx — Site footer with links
  • Created Layout.jsx — Wrapper component for consistent page structure

• GitHub Pages SPA Support:

  • Added public/404.html — Redirect script for GitHub Pages SPA routing
  • Updated src/main.jsx — Added logic to handle the ?p= query parameter from the 404 redirect

• Styling Updates:

  • Updated src/styles/index.css — Refined transitions, added component layer utilities, improved line-height defaults
  • Updated Quotes.jsx — Adjusted min-height to account for fixed nav

• Dependencies:

  • Added react-router-dom (^7.13.2) for routing
  • Added gray-matter (^4.0.3) for parsing markdown frontmatter

• Build Configuration:

  • Updated vite.config.js — Removed multi-entry point setup, integrated markdown blog plugin
  • Removed old dist/ files from repository (added to .gitignore)

Implementation Details

• The markdown blog plugin scans content/blog/ for .md files, parses frontmatter with gray-matter, and exports both a list of posts and a map for slug-based lookup
• The MarkdownRenderer uses a simple line-by-line parser to convert markdown to JSX elements, avoiding external markdown libraries
• The Home page features an animated canvas gradient background that respects the system's dark mode preference
• Blog posts are sorted by date (newest first) and include navigation links to adjacent posts
• The SPA uses GitHub Pages' 404 redirect technique to enable client-side routing on a custom domain

https://claude.ai/code/session_01Jtxy4UcYnk9ojrcbVoePvw