Personal portfolio website for Richard Li — richardli.dev
Design inspired by Toronto Subway signage, the Apple Camera app, and iOS tab bars.
- AI Chatbot — Ask anything about Richard's background, experience, and projects. Powered by Claude Haiku with real-time streaming responses and suggested question prompts.
- Windows XP Mode — A toggleable nostalgia mode that transforms the site into a Windows XP desktop experience.
- Light / Dark Theme — Warm dark and cream light modes with a sun/moon toggle, built with custom CSS variables.
| Technology | Purpose |
|---|---|
| Next.js 15 (App Router) | Full-stack React framework |
| React 19 | UI library |
| TypeScript | Type safety |
| Tailwind CSS | Utility-first styling |
| shadcn/ui + Radix UI | Accessible component primitives |
| next-themes | Theme management |
| Nodemailer | Server-side email delivery |
| react-markdown | Markdown rendering in chat |
| Zod + react-hook-form | Form validation |
| Service | Model | Usage |
|---|---|---|
| Anthropic | claude-haiku-4-5 |
Conversational chatbot — answers questions about Richard in first person, streamed in real time |
| Vercel AI SDK | — | Streaming abstraction layer for LLM responses |
The chatbot is configured with a detailed system prompt covering work experience, volunteer roles, skills, achievements, and personal interests so it can respond accurately and in character.
hi-sg/
├── app/
│ ├── page.tsx # Homepage (bio, projects, chatbot)
│ ├── layout.tsx # Root layout + metadata
│ ├── layout-content.tsx # Client wrapper: ThemeProvider → XPProvider → GifLoadingScreen
│ ├── globals.css # CSS variables, custom fonts, design tokens
│ ├── api/
│ │ ├── chat/route.ts # Claude AI chatbot endpoint (streaming)
│ │ └── contact/route.ts # Contact form email handler
│ ├── projects/
│ │ ├── page.tsx # Projects grid
│ │ └── [id]/page.tsx # Individual project pages
│ ├── transit/
│ │ ├── transit.tsx # Transit page component
│ │ ├── photography/ # Photo gallery + modal viewer
│ │ └── hypo-maps/ # Hypothetical transit maps
│ ├── chat/page.tsx # Dedicated chatbot page
│ ├── contact/page.tsx # Contact form
│ └── resume/page.tsx # Resume page
├── components/
│ ├── animated-header.tsx # Main nav: XP mode + theme toggles
│ ├── chat-box.tsx # Chatbot UI with streaming + suggestions
│ ├── windows-xp/ # Full Windows XP theme mode
│ ├── ui/ # shadcn/ui component library
│ └── ...
├── contexts/
│ └── windows-xp-context.tsx # XP mode global state
├── hooks/
│ └── use-page-view-tracker.ts # Discord webhook page analytics
├── public/
│ ├── fonts/ # Toronto Subway + SFCamera typefaces
│ └── images/ # Project screenshots and assets
└── styles/ # Additional stylesheets (photography.css, etc.)
npm install --legacy-peer-deps
npm run devRequires a .env.local file with:
ANTHROPIC_API_KEY=...
OPENAI_API_KEY=...
All rights reserved. The code in this repository is not licensed for reuse, redistribution, or modification without explicit permission from the author.