Blog

Personal blog

Getting Started with the New Portfolio

web technologiesopen sourcepersonalfirst-author

Welcome to the rebuilt portfolio website! This site has been completely modernized using Next.js 14+ with App Router, TypeScript, and static site generation for optimal performance and GitHub Pages deployment.

What's New

Modern Tech Stack

  • Next.js 14+ with App Router for improved performance and developer experience
  • TypeScript for type safety and better code quality
  • Tailwind CSS for rapid UI development with a custom color scheme
  • Static Site Generation for fast loading and easy GitHub Pages deployment

Content Management

Content is now managed through:

  1. JSON files in content/data/ for structured content (videos, talks, blogs)
  2. MDX files in content/blogs/ for personal blog posts with rich formatting
  3. GitHub Issues with automated workflows for easy content addition

Features

  • Three-column layout inspired by tdhopper.com
  • Advanced filtering by content type, topics, and tags
  • URL state management for shareable filtered views
  • Responsive design that works on mobile, tablet, and desktop
  • YouTube embeds for video content
  • SEO optimized with metadata and structured data

Color Scheme

The site uses a custom color palette:

  • Midnight Violet (#310A31) - Deep purple for backgrounds
  • Periwinkle (#D4CDF4) - Soft lavender for accents
  • Banana Cream (#FFE873) - Warm yellow for primary elements
  • Baltic Blue (#306998) - Rich blue for secondary elements
  • Tangerine (#EE8434) - Vibrant orange for highlights

Getting Started

To run the site locally:

npm install
npm run dev

To build for production:

npm run build

The static site will be generated in the out/ directory, ready for deployment to GitHub Pages.

Content Structure

Each content item includes:

  • Title and description
  • Type: blog, video, podcast, or talk
  • Topics: open-source, python, quantum-computing, etc.
  • Tags: personal, first-author, ghostwriter-editor
  • Publish date in ISO format
  • Organization (optional)
  • URL for external content
  • Embed ID for YouTube videos

This new architecture makes it easy to add, update, and manage content while providing a fast, modern user experience.