> hakkaofdev.fr_

Interactive terminal-style portfolio

Overview

A terminal-inspired portfolio for Alexandre Gossard (@hakkaofdev) — Software Engineer & Digital Nomad.
Type commands, explore projects, browse skills, sign the guestbook, and even check what's playing on Spotify.

Highlights

	Feature	Details
>	Terminal UI	Command input, history navigation, autocomplete, fuzzy did-you-mean
>	18+ commands	help projects skills experiences education about contact guestbook cv repo theme stats echo clear reset spotify
>	Spotify integration	"Now Playing" header widget + spotify now / spotify top / spotify history
>	Guestbook	Public sign & read, honeypot + per-IP rate-limiting, moderation-ready
>	Dynamic CV	Server-rendered PDF via @react-pdf/renderer — preview or download
>	Advanced Theming	8+ built-in terminal themes (Dracula, Nord, Solarized, etc.) + custom theme support with preview & WCAG validation
>	SEO	Sitemap, robots.txt, JSON-LD, dynamic OG image
>	Analytics	Vercel Speed Insights + Supabase page-view tracking

Quick Start

Prerequisites — Node.js 22+  ·  pnpm 9+

# clone & install
git clone https://github.com/hakkaofdev/hakkaofdev.fr.git
cd hakkaofdev.fr
pnpm install

# develop
pnpm dev          # → http://localhost:3000

# production
pnpm build && pnpm start

Copy .env.example to .env.local and fill in the values you need:

# Required
NEXT_PUBLIC_SITE_URL=http://localhost:3000

# Spotify (optional — enables widget + commands)
SPOTIFY_CLIENT_ID=
SPOTIFY_CLIENT_SECRET=
SPOTIFY_REFRESH_TOKEN=

# Supabase (optional — enables analytics + guestbook)
NEXT_PUBLIC_SUPABASE_URL=
SUPABASE_SERVICE_ROLE_KEY=
APP_IP_SALT=
GUESTBOOK_AUTO_APPROVE=true
GUESTBOOK_RATE_LIMIT_MAX_PER_HOUR=3

Commands Reference

Command	Description
help	List all available commands
projects	Show projects grid
skills	Show categorized skills
about	Personal details, languages, hobbies
education	Education timeline
experiences	Experience timeline
guestbook	List & sign guestbook entries
contact	Contact methods & social profiles
cv	Open CV preview / download
repo	Repository details & clone command
theme	Manage themes: theme list, theme set <name>, theme preview <name>, theme create, theme delete <name>
stats	Coding & GitHub activity stats
echo <msg>	Print custom text
clear	Clear terminal output
reset	Reset to the welcome screen
spotify	Spotify sub-command help
spotify now	Currently playing track
spotify top	Top tracks
spotify history	Recently played tracks

Project Structure

app/
├── api/            # Route handlers (cv, guestbook, spotify, views)
├── layout.tsx      # Root layout, providers, fonts
├── page.tsx        # Home (terminal shell)
├── sitemap.ts      # Dynamic sitemap
└── robots.ts       # Robots config

components/
├── commands/       # Command descriptors, registries, renderers
├── cv-pdf/         # React-PDF sections for CV generation
├── ui/             # Reusable UI primitives
├── Terminal.tsx     # Main terminal component
└── WelcomeHero.tsx # Initial greeting block

lib/
├── constants/      # Site, resume, skills, terminal, guestbook config
├── cv/             # CV data mapping & PDF styles
├── schemas/        # Zod validation schemas
├── services/       # Analytics, guestbook, Supabase clients
├── themes/         # Theme engine: palettes, provider, storage, contrast validation
└── utils.ts        # Shared helpers

supabase/
└── schema/         # SQL migrations (guestbook table, RLS policies)

Theme System

The portfolio features a fully customizable theme engine with 8 built-in terminal-inspired themes and support for custom palettes.

Built-in Themes:

• default — Clean dark theme with cyan accents
• daylight — Light theme with warm tones
• dracula — Purple & pink dark theme
• nord — Arctic-inspired cool palette
• solarized — Precision colors for readability
• monokai — Vibrant syntax highlighting colors
• gruvbox — Retro groove with warm earth tones
• tokyo-night — Deep blue night theme

Theme Commands:

theme list              # Show all available themes with color swatches
theme set dracula       # Apply a theme instantly
theme preview nord      # Preview for 10s, then revert
theme create            # Interactive custom theme builder
theme delete <name>     # Remove a custom theme

Custom Themes:

• Create custom color palettes via the theme create command
• Automatic WCAG AA contrast validation ensures readability
• Themes persist in localStorage across sessions
• Delete custom themes anytime (built-in themes are protected)

All theme changes apply instantly with smooth color transitions.

Customization

Content lives in lib/constants/ — edit the files there to change projects, skills, education, experiences, and social links.

Themes are in lib/themes/palettes/ — each theme exports a ThemePalette object with color definitions and metadata. See existing themes as templates.

Adding a command:

1. Add it to COMMANDS in components/commands/command-descriptors.ts
2. Create a renderer in components/commands/renders/
3. Wire it in the registry under components/commands/registries/

Adding dynamic autocomplete parameters:

Commands can have smart autocomplete for their parameters (like theme set <themeName>). To add your own:

// 1. Create a parameter provider function
function getOptions(): string[] {
  return ["option1", "option2", "option3"];
}

// 2. Register the command pattern
import { registerDynamicParamCommand } from "@/components/commands/registries/dynamic-param-registry";

registerDynamicParamCommand({
  pattern: "mycommand action",
  paramProvider: getOptions,
  group: "Terminal",
});

// 3. Import your registry in components/providers/Providers.tsx

See components/commands/registries/EXAMPLES.ts for more patterns (localStorage, async data, context-aware, etc.)

Customizing the CV: update data in lib/cv/cv-pdf.data.ts, styles in lib/cv/cv-pdf.styles.ts, and sections in components/cv-pdf/CVSections.tsx.

Guestbook backend: SQL schema in supabase/schema/guestbook.sql, API in app/api/guestbook/route.ts, tune with GUESTBOOK_* env vars.

CI / CD

Workflow	Trigger	What it does
ci.yml	PR / push to main	Lint, typecheck, build
dependency-audit.yml	PR / weekly	pnpm audit --prod --audit-level=high
release.yml	Push to main	Release-please automated versioning

Deployed on Vercel — push to main and it ships.

Quality Scripts

pnpm lint          # Biome lint
pnpm format        # Biome format
pnpm typecheck     # tsc --noEmit
pnpm audit         # Dependency audit

License

MIT — see LICENSE for details.

Made by Alexandre Gossard