Portfolio

This portfolio is the site you are currently viewing — a personal developer portfolio built to showcase projects, skills, and experience through a polished, terminal-inspired interface. Project cards use a custom Terminal component that orchestrates a three-step animation sequence: the project title is rendered as ASCII art via figlet (Small font), a shell command animates in character-by-character 300 ms later, and the project description follows at 1 300 ms with a blinking cursor. The interactive 3D globe in the hero section is built with COBE — a WebGL renderer configured with 16 000 map samples, 10 worldwide location markers, and spring-physics drag interaction (damping: 1 400 ms, Motion useSpring). Navigating from a project card to its detail page triggers a View Transition named terminal-morph, morphing the terminal window smoothly between routes via a custom 400 ms cubic-bezier curve. The site runs on Next.js 16 with the App Router and React 19. All project detail pages are statically pre-rendered at build time using generateStaticParams. The color system is built on the Catppuccin Mocha palette, exposed as Tailwind CSS v4 custom tokens via @theme inline and OkLch color math. An inline FOUC-prevention script runs before React hydration to apply the user's saved theme from localStorage, eliminating any color flash on first load. All content lives in a single TypeScript data file (data/projects.ts) with a strict Project interface, so adding new projects requires no UI changes. The dashboard on the homepage aggregates widgets — GitHub activity, a typing test, a CTF counter, and a location map — into a 4-column grid alongside the project showcase.

Key Features

• Terminal-window project cards with three-step sequential animation: figlet ASCII art → shell command → typed description with blinking cursor.
• Interactive 3D globe powered by COBE (WebGL, 16 000 map samples, 10 location markers, spring-physics drag interaction).
• View Transitions between project cards and detail pages — named terminal-morph transition with custom 400 ms cubic-bezier animation.
• Catppuccin Mocha color theme with Tailwind CSS v4 @theme tokens and inline FOUC-prevention script for flash-free load.
• All project detail pages statically pre-rendered at build time via generateStaticParams and dynamic OpenGraph metadata.
• Single TypeScript data file as the content layer — strict Project interface, no CMS or runtime parsing needed.