Modern Personal Website Tech Stack Cheatsheet #nextjs #react #typescript #tailwindcss

website_cheatsheet.md

Personal Website Tech Stack Cheatsheet

Core Technologies

Technology	Version	Purpose
Next.js	14.2.0	React framework with file-based routing, static site generation
React	18.2.0	UI library for component-based development
TypeScript	5.3.3	Static type-checking for JavaScript
TailwindCSS	3.4.1	Utility-first CSS framework

Static Site Generation

# Build and export the site as static HTML
npm run build
npm run export

Project Structure

/src
  /app                  # App Router pages and layouts
    /api                # API routes (removed for static export)
    /blog               # Blog section
      /[slug]           # Dynamic blog post routes
    /about              # About page
    /contact            # Contact page
    globals.css         # Global CSS styles
    layout.tsx          # Root layout with metadata
    page.tsx            # Homepage
  /components           # Reusable React components
  /lib                  # Utility functions and data fetching
/content                # Content files (blog posts in MDX)
/public                 # Static assets

Key Components

Component	Purpose	Client/Server
Navbar.tsx	Navigation header with mobile responsiveness	Client
Footer.tsx	Site footer with links and copyright	Client
FeaturedPosts.tsx	Featured blog posts grid	Client
BlogList.tsx	Full list of blog posts with filtering	Client
BlogPost.tsx	Individual blog post display with MDX rendering	Client
SyntaxHighlighter.tsx	Code syntax highlighting for blog posts	Client

TailwindCSS Configuration

// Color scheme
colors: {
  primary: {
    DEFAULT: '#3b82f6', // Blue
    dark: '#1d4ed8',
    light: '#93c5fd',
  },
  secondary: {
    DEFAULT: '#0ea5e9', // Sky/Teal
    dark: '#0369a1',
    light: '#7dd3fc',
  },
  background: {
    DEFAULT: '#f9fafb',
    dark: '#f3f4f6',
  },
  // Also includes dark mode colors
}

Dark Mode Implementation

// tailwind.config.js
darkMode: 'class',

// ThemeToggle.tsx
// Toggles the 'dark' class on the html element
// Uses localStorage to persist theme preference

Content Management

The site uses MDX for blog content with gray-matter for frontmatter parsing:

// MDX frontmatter example
---
title: 'Blog Post Title'
date: '2025-03-08'
excerpt: 'Brief description of the post'
tags: ['Tag1', 'Tag2']
---

// Content in Markdown with JSX support

Static Export Configuration

// next.config.js
const nextConfig = {
  reactStrictMode: true,
  output: 'export', // Static site generation
  images: {
    unoptimized: true, // Required for static export with Next.js Image
  },
};

Component Design Pattern

// Client Components
'use client'; // Required for components using React hooks

import { useState } from 'react';

export function ComponentName() {
  const [state, setState] = useState(initialValue);
  
  return (
    // JSX
  );
}

// Server Components (default in Next.js App Router)
export default function ServerComponent() {
  return (
    // JSX
  );
}

Common Commands

# Development
npm run dev

# Linting
npm run lint

# Building for production
npm run build

# Static export
npm run export

Dependencies Summary

Core Dependencies

• next
• react
• react-dom
• typescript
• tailwindcss
• postcss
• autoprefixer

Content Management

• gray-matter (frontmatter parsing)
• next-mdx-remote (MDX rendering)
• rehype-highlight (syntax highlighting)

UI/UX

• @tailwindcss/typography (better typography in Markdown)
• katex (for mathematical formulas)
• react-syntax-highlighter (code block styling)