website/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

This is a personal portfolio/blog website built with Next.js 13.4.16 (App Router), TypeScript, and Tailwind CSS. It's based on the Tailwind UI "Spotlight" template and features a modern, responsive design with dark mode support.

Essential Commands

# Install dependencies
npm install

# Run development server (http://localhost:3000)
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linting
npm run lint

# Type checking (via build process)
npm run build

Architecture & Key Patterns

Directory Structure

• /src/app/ - Next.js App Router pages and layouts

  • Each page is in its own directory with page.tsx or page.mdx
  • Articles are MDX files in subdirectories under /articles/
  • RSS feed generation at /feed.xml/

• /src/components/ - Reusable React components

  • Layout components extend from Layout.tsx
  • All components use TypeScript with proper type definitions
  • Components use Tailwind CSS classes for styling

• /src/lib/ - Utility functions

  • articles.ts - Functions for loading and managing MDX articles
  • formatDate.ts - Date formatting utilities

Content Management

• Articles are written in MDX format in /src/app/articles/[slug]/page.mdx
• Each article directory can contain images alongside the MDX file
• Article metadata is defined in the MDX frontmatter
• The ArticleLayout component wraps all article content

Styling Approach

• Tailwind CSS utility classes for all styling
• Dark mode support via next-themes package
• Typography plugin for prose content styling
• Custom Tailwind configuration in tailwind.config.js
• Code syntax highlighting with Prism CSS

TypeScript Configuration

• Strict mode enabled
• Path alias @/* maps to ./src/*
• All components and utilities should have proper TypeScript types

Important Files

• next.config.mjs - Next.js configuration with MDX support
• tailwind.config.js - Tailwind CSS customization
• .env.local - Must set NEXT_PUBLIC_SITE_URL for production

Development Guidelines

Adding New Pages

1. Create a new directory under /src/app/
2. Add a page.tsx file with proper TypeScript types
3. Use the SimpleLayout or custom layout components
4. Follow existing page patterns for consistency

Adding New Articles

1. Create a new directory under /src/app/articles/[article-name]/
2. Add a page.mdx file with frontmatter including title, description, author, and date
3. Place any images in the same directory
4. Articles automatically appear in the articles list and RSS feed

Component Development

• Always use TypeScript with proper type definitions
• Follow existing component patterns for props and structure
• Use Tailwind CSS classes; avoid inline styles
• Components should be reusable and properly abstracted

Environment Setup

Before running the project, create a .env.local file:

NEXT_PUBLIC_SITE_URL=https://your-domain.com

No Testing Framework

This project does not currently have a testing framework configured. Consider adding Jest and React Testing Library if test coverage is needed.