A unique terminal-style portfolio built with TanStack Start, React and TypeScript, providing an interactive command-line interface to explore my work and experience.
Visit my portfolio at itsme.dfanso.dev
- Interactive command-line experience
- Real terminal-like behavior
- Command history navigation (Arrow Up/Down keys)
- Tab auto-completion with suggestions
- Custom prompt styling and cursor animation
- Syntax highlighting for commands
| Command | Description |
|---|---|
help |
Show all available commands |
whoami |
Display profile information |
about |
View professional summary |
projects |
Browse featured projects with GitHub stats |
skills |
List technical expertise |
experience |
View work history |
education |
View academic background |
certifications |
View professional certificates |
contact |
Get contact information |
github |
Show GitHub stats and contributions |
clear |
Clear terminal screen (Ctrl+L) |
ls |
List available sections |
neofetch |
Display system information |
resume |
Download/view resume |
- Contribution graph (heatmap)
- Language statistics with visual bar
- Commits, PRs, and issues count
- Pinned repositories display
- Repository stats (stars, forks)
- ASCII art banner with glow effect
- Typewriter animation on first visit
- Scanline CRT terminal effect
- Smooth staggered line animations
- Dynamic time-based greetings
Built on TanStack Start (React 19 + TanStack Router, server-rendered and prerendered via Nitro), styled with Tailwind CSS v4, animated with anime.js, tested with Vitest, and deployed to Vercel.
- Node.js 18+
- Yarn package manager
- Clone the repository:
git clone https://github.com/dfanso/itsme.dfanso.dev.git
cd itsme.dfanso.dev- Install dependencies:
yarn install- Create environment file (optional, for GitHub stats):
cp .env.example .env
# Add your GITHUB_TOKEN- Start development server:
yarn dev- Build for production:
yarn build
yarn start| Variable | Required | Description |
|---|---|---|
GITHUB_TOKEN |
Optional | GitHub personal access token, used by the github command's server function (src/lib/github-server-fn.ts) for full stats (contribution graph, commits, PRs, issues, pinned repos) |
Without the token — or if the GitHub API request fails — the github command falls back to a "Unable to fetch GitHub data" message. Set GITHUB_TOKEN as a project environment variable in the Vercel dashboard for the deployed site (Settings → Environment Variables); it isn't read from .env in production, only during local yarn dev.
| Command | Action |
|---|---|
yarn install |
Install dependencies |
yarn dev |
Start local dev server at localhost:3000 |
yarn build |
Build the production app (prerendered / + /resume, SSR server, static assets) to ./.output/ |
yarn start |
Run the production build (node .output/server/index.mjs) |
yarn test |
Run the Vitest test suite (yarn test run for a single non-watch run) |
yarn generate:cv |
Regenerate public/resume.pdf from the portfolio data |
| Shortcut | Action |
|---|---|
Arrow Up/Down |
Navigate command history |
Tab |
Auto-complete commands |
Ctrl + L |
Clear screen |
Ctrl + C |
Copy selected text |
Ctrl + V |
Paste text |
- Responsive layout and typography
- Touch-friendly interface
- Dedicated mobile view for small screens
This project is licensed under the MIT License - see the LICENSE file for details.
Created by DFanso
Feel free to reach out on GitHub or through my portfolio site!