Personal portfolio of Kai Li, Full Stack Developer & AI Agent Builder — built on Next.js 16 + React 19, featuring dark/light mode, scroll animations, and a showcase of AI-integrated projects including a LangGraph multi-agent system.
Screenshot pending — will be added after final deployment.
Next.js 16 + React 19 — Among the earliest public portfolios to adopt both simultaneously, demonstrating a commitment to staying current with the ecosystem.
Zero-dependency scroll animations — Every section animates in on scroll via native Intersection Observer APIs, with no animation library.
AI-project showcase — Features 4 AI-integrated projects: a vector search blog, a LangGraph multi-agent task manager, a RAG knowledge chatbot, and an AI vocabulary assistant.
| Layer | Technology |
|---|---|
| Framework | Next.js 16, React 19 |
| Language | TypeScript 5 |
| Styling | Tailwind CSS 4, Shadcn/ui |
| Theme | next-themes (dark/light + system detection) |
| Icons | Lucide React, React Icons |
| Deployment | Vercel |
- Dark / Light mode — automatic system preference detection + manual toggle, persisted in localStorage
- Scroll animations — Intersection Observer-based, zero JS animation library dependency
- Floating tech cards — hero section badges with staggered CSS float animation
- Projects grid — live status indicators (Live / Coming Soon) with external links
- Skills section — categorized by domain (Backend, Frontend, Database, Architecture, AI & Agent Engineering)
- SEO ready — OpenGraph tags, sitemap, and robots.txt via Next.js App Router
- Fully responsive — mobile, tablet, and desktop breakpoints
Prerequisites: Node.js 18+, pnpm (recommended)
git clone https://github.com/kaili-lab/dev-portfolio-v1.git
cd dev-portfolio-v1
pnpm install
pnpm devOpen http://localhost:3000.
Production build:
pnpm build
pnpm start- Add screenshot / demo GIF to README
- Deploy remaining projects (Home Task, Vocab Master, Knowledge Chat)
GitHub: @kaili-lab · X: @kaili_dev