A production-ready personal portfolio website built with Next.js 15, React 19, and Tailwind CSS. It features a terminal-based interface that acts as an operating system for navigating the user's professional experience.
- Component-Based Architecture: Modular design separating the Terminal Core, Command Registry, and UI Panels.
- Terminal Interface: Fully functional CLI with command history, autocomplete, and React-rendered output.
- Scenario Planner: A "Marketing Scenario Planner" dashboard demonstrating Refined Concurrency using React 19's
useDeferredValueandHighcharts. - Interactive Resume: Glassmorphism-styled resume panel driven by strongly-typed JSON data.
- AI Integration: Simulated LLM assistant capable of answering questions about the portfolio owner using simple keyword matching (RAG-lite).
- Performance First: Optimized metric scores, code splitting, and responsive animations.
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS v4
- Icons: Lucide React
- Charts: Highcharts
- Deployment: Vercel / Netlify / Any Node.js host
-
Install Dependencies:
npm install
-
Run Development Server:
npm run dev
-
Build for Production:
npm run build npm start
| Command | Description |
|---|---|
help |
List available commands |
about |
Show professional summary |
skills |
List technical skills |
planner |
Open the Scenario Planner (React 19 Demo) |
resume |
Open the full interactive resume |
projects |
List notable projects |
ask <q> |
Ask the AI assistant a question |
clear |
Clear terminal output |
src/
├── app/ # Next.js App Router
├── components/
│ ├── terminal/ # Terminal Core Components (Context, Input, Output)
├── features/
│ ├── planner/ # Scenario Planner Module
│ ├── resume/ # Resume Display Module
├── data/ # Static data (Resume content)
├── lib/ # Utilities, Command Registry, AI Logic
└── types/ # TypeScript Interfaces
MIT