Introduce terminal-style portfolio interface with local Hack Nerd Font and command-driven UX

[Copilot]

This PR implements the terminal-themed portfolio experience requested in the issue: local Hack Nerd Font integration, terminal-focused global theming, and a command-based interactive terminal with typed responses and mobile quick actions.

• Font + theme integration

  • Added local Hack Nerd Font assets to public/fonts (Regular, Bold, Italic).
  • Wired next/font/local in src/app/layout.tsx and exposed it as --font-hack.
  • Extended Tailwind with font-hack mapping and terminal cursor animation.
  • Updated global styling to enforce terminal palette (#0D0D0D background, #00FF41 foreground) and use Hack font stack.

• Terminal engine + command routing

  • Added src/components/Terminal.tsx with:
    • command history state
    • handleCommand(input: string) parser/router
    • clear behavior that resets terminal history
    • command outputs for:
      • whoami
      • ls ./projects/
      • ./experience.sh
      • cat stack.json
  • Replaced chatbot panel rendering path to use the new terminal component (src/components/Chatbot.tsx).

• Hacker UX polish

  • Added static prompt prefix: visitor@wilbert-chandra ➜ ~.
  • Added typing simulation hook (src/hooks/useTypingEffect.ts) for character-by-character output rendering.
  • Added blinking block cursor (█) via Tailwind keyframes/animation.
  • Added mobile sticky quick-action row: [ ./experience ], [ ./projects ], [ clear ].
  • Kept input visually minimal (unstyled shell-like input, autofocus on open, click-to-refocus within terminal).

• Illustrative snippet

  const COMMAND_OUTPUTS: Record<string, string> = {
    whoami: 'Final Year Data Science student focused on building robust data pipelines and production-ready AI systems.',
    'ls ./projects/': '📁 ./projects/\n- satu-dua.sh ...\n- multi-agent-orchestrator.py ...\n- mri-segmentation.pt ...',
    './experience.sh': '[2026] Data Engineer Intern @ DANA Indonesia ...',
    'cat stack.json': '{ ... "vector_databases": ["Milvus", "pgvector"] ... }',
  };

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com/repos/ryanoasis/nerd-fonts/contents/patched-fonts/Hack
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (http block)
• https://api.github.com/repos/ryanoasis/nerd-fonts/contents/patched-fonts/Hack/Regular
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Phase 1: Asset & Theme Integration

• Font Acquisition: Download the .woff2 files for Hack Nerd Font (Regular, Bold, Italic) and place them in your /public/fonts/ directory.
• Next.js Font Optimization: Wire up next/font/local inside your app/layout.tsx (or pages/_app.tsx). By exporting it as a CSS variable (e.g., --font-hack), you ensure zero layout shift.
• Tailwind Configuration: Update your tailwind.config.ts to map the new CSS variable to a utility class like font-hack. Set your global background to a strict #0D0D0D and text to #00FF41 (or a crisp #E0E0E0).
  Phase 2: Core Terminal Engine (Terminal.tsx)
• State Management: Initialize a React state array (const [history, setHistory] = useState([])) to store the log of executed commands and their generated outputs.
• The Input Controller: Build a stylized field that strips all default browser styling (no borders, no outline). Force it to autofocus on mount and re-focus whenever the user clicks anywhere on the window.
• The Parser: Write the handleCommand(input: string) router. When the user hits Enter, this function evaluates the string, pushes the user's command to the history state, and appends the corresponding response component.
  Phase 3: The Command Arsenal (Data Injection)
  Map your professional context directly to CLI outputs, utilizing Nerd Font glyphs (like 🐘 for PostgreSQL, 🐍 for Python, or ☁️ for AWS/Alibaba Cloud) for visual hierarchy:
• whoami: A quick, punchy bio highlighting your status as a Final Year Data Science student and your focus on building robust data pipelines and AI systems.
• ls ./projects/: * satu-dua.sh (Emergency Response System | React Native, FastAPI, Azure AI)
  • multi-agent-orchestrator.py (AI agents for CSV/document parsing)
  • mri-segmentation.pt (Deep learning for high-dimensional medical scans)
• ./experience.sh: * [2026] Data Engineer Intern @ DANA Indonesia
  • [2025] Data Engineer Intern @ Samsung R&D Institute Indonesia
  • [2024] Backend & AI Engineer @ UniPal
• cat stack.json: A structured output detailing your expertise in Airflow, Athena, vLLM, RAG architectures, and vector databases (Milvus, pgvector).
• clear: A utility function to empty the history state.
  Phase 4: Hacker UI/UX Polish
• The Custom Prompt: Build a static prefix for the input line using powerline glyphs, such as: visitor@wilbert-chandra ➜ ~
• Simulated I/O Delay: Write a custom useTypingEffect hook. Instead of rendering project details instantly, this hook will reveal the text block character-by-character with a ~10ms delay to mimic a live server response.
• Blinking Cursor: Add a CSS keyframe animation for a block cursor (█) that rests immediately after the active input text.
• Mobile Overrides: Add a sticky row of low-profile buttons ([ ./experience ], [ ./projects ], [ clear ]) at the bottom of the viewport so mobile users can navigate without bringing up their touch keyboard.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
webe-web	Ready	Preview, Comment	Feb 22, 2026 6:26am