Neon Genesis Evangelion-inspired CLI portfolio experience.
nextjsframer-motionsupabase

Key Facts

  • Role: Creator & Lead Developer
  • Stack: Next.js 16 (App Router), React 19, Supabase, Tailwind CSS v4, Framer Motion, EmulatorJS, Playwright, Vitest
  • Target: Personal brand, recruiters, and engineering peers
  • Status: Active (jsdraper.com)

Executive Summary

My personal portfolio is an interactive homage to the MAGI supercomputer system from Neon Genesis Evangelion. It challenges the standard "hero section + grid" portfolio trope by dropping visitors into an immersive, command-line interface where they explore my work by typing commands.

Under the hood, it is a serious engineering project: a fully accessible, high-performance Next.js 16 application that pushes the boundaries of the latest web technologies. It features a custom terminal shell, a built-in Mega Drive emulator, and a robust "headless" CMS backed by Supabase.

The Challenge

The primary challenge was to balance an immersive, experimental UI with the practical requirements of a professional portfolio.

  • Dual-Mode UX: Supporting "power users" who want to explore via terminal and "busy recruiters" who need a traditional resume view without maintaining two separate codebases.
  • Accessibility in a Terminal: CLI-style interfaces are notoriously difficult for screen readers. I had to engineer a solution that remains fully accessible while maintaining the visual aesthetic.
  • Performance: Complex animations (Framer Motion) and an in-browser emulator (EmulatorJS) must not degrade the initial load time or lighthouse scores.

The Stack

I used this project as a playground for bleeding-edge tech and rigorous testing methodologies:

  • Frontend: Next.js 16 (App Router) & React 19, Tailwind CSS v4 (using viewport tokens).
  • Backend: Supabase (PostgreSQL + Auth + Storage).
  • Motion & UI: Framer Motion (boot sequence orchestration), Custom MDX pipeline with remark/rehype.
  • Arcade: EmulatorJS (Mega Drive core) with native lifecycle management.
  • Testing: Playwright (E2E & Visual Regression), Vitest (Unit/UI).

Key Architectural Decisions

1. The Terminal as a First-Class Citizen

Building a terminal in the browser requires more than just an input field. I engineered a robust shell architecture:

  • Session Persistence: History and state are managed globally via use-terminal-session.ts, allowing users to jump between the terminal, arcade, and document readers without losing their command history.
  • Command Registry: A declarative command system (command-registry.ts) maps string inputs to async actions, allowing for complex features like investments, writing, and cv to be added with minimal boilerplate.
  • Viewport Responsive System: To support everything from 1440p displays to 720p laptops, layout dimensions are centralized in tokens.css using dynamic clamp() values and aggressive height breakpoints.

2. Dual-Mode Projection (Terminal vs. Onepager)

The site features a "Choose Your Own Adventure" UI that seamlessly swaps between three modes:

  • Immersive Terminal: The default CLI experience.
  • Onepager Overlay: A traditional, accessible document view accessible via /onepager or the onepager command.
  • Arcade Mode: A standalone theatre mode for the emulator.
  • Implementation: I utilized a shared shell layer that handles the boot sequence and theming, with mode-specific projection components that share a unified data layer.

3. In-Browser Arcade (Mega Drive Emulator)

I integrated a fully functional Mega Drive emulator that plays Sonic 2, housed natively within the terminal shell.

  • Lifecycle Management: Engineered arcade-emulator-runtime.ts to handle the heavy WebAssembly load and cleanup, ensuring no rogue emulator instances remain in memory when the user exits the arcade.
  • Immersive Theatre Mode: The emulator features a strict 4:3 aspect ratio and custom "CRT" scanline effects, with full gamepad support via the Web Gamepad API.

4. Advanced MDX Pipeline & Admin Caching

To keep maintenance low but flexibility high, I built a custom "headless" CMS setup backed by Supabase.

  • Streaming MDX: Instead of pre-packaged solutions, I parse content using @mdx-js/mdx. Case studies and articles are streamed securely from Supabase PostgreSQL and Storage buckets.
  • Intelligent Caching: Public endpoints utilize stale-while-revalidate caching. The hidden admin dashboard (/admin) triggers Next.js revalidateTag and revalidatePath to guarantee immediate updates across the site upon writes.

Outcome

EVA Terminal has become a conversation starter, demonstrating my ability to build complex, interactive interfaces that are both playful and structurally robust. It proves that a portfolio can be a high-fidelity software project in its own right, filtering for teams that value creativity, bold engineering, and uncompromising quality.