DEV Community

Cover image for I Built a Cyberpunk Terminal Portfolio with Next.js, Antigravity and Gemini AI

I Built a Cyberpunk Terminal Portfolio with Next.js, Antigravity and Gemini AI

New Year, New You Portfolio Challenge Submission

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

I’m Inusha Gunasekara, an IT undergraduate at the University of Moratuwa, Sri Lanka, and the co-founder of Tekkeys, where we're building agentic AI tools.

For this challenge, I didn’t want to build just another "landing page." I wanted to build a Digital Twin. I conceptualized "System 1"—a sentient, terminal-based operating system that represents my skills, projects, and personality as code. The goal was to create an interface that feels alive, combining the raw utility of a CLI with the polished aesthetics of a cyberpunk interface.

I initially engineered the system as a fully autonomous clone powered by the Gemini 2.5 Flash-Lite API. However, to guarantee 100% uptime and zero latency for public access, I pivoted the architecture to a deterministic "Simulation Mode." This hybrid approach preserves the sentient "vibe" of the AI while ensuring the reliability required for a production-grade portfolio.

Portfolio

(Type "help" to see available commands, or try "projects" to see what I'm working on.)

How I Built It

My portfolio is a Stateless Terminal built for extreme performance, security, and zero-cost scaling.

The Tech Stack:

  • Framework: Next.js 16 (App Router) for the core React architecture.
  • Styling: Tailwind CSS v4 for the utility-first, cyberpunk aesthetic.
  • Infrastructure: Google Cloud Run (Serverless) for scalable, containerized deployment.
  • Containerization: Docker (Multi-stage build) using the standalone output mode.

The "Digital Twin" Architecture:
The core of this project is "System 1"—a digital representation of my persona.

  • Initial Prototype: I originally built a fully autonomous agent using the Gemini 2.5 Flash-Lite API. While powerful, I identified that relying on a metered API for a high-traffic public landing page introduced potential latency and quota risks ("The Reddit Hug of Death").
  • Production Optimization: To ensure a production-grade user experience, I engineered a Deterministic Simulation Engine. This engine mimics the streaming "typing effect" of an LLM but pulls from an optimized, local knowledge graph. This decision reduced API latency from ~400ms to <5ms and eliminated all running costs, while preserving the "sentient" feel of the terminal.

Deploying to Google Cloud Run:
I chose Cloud Run for its "Scale to Zero" capability. By using a multi-stage Dockerfile, I reduced the final container size by approximately 80%. This ensures the portfolio spins up instantly when a user visits but costs $0 when idle.

What I'm Most Proud Of

1. The "Halt Sequence" (sudo delete)

I wanted the terminal to feel like a real, vulnerable operating system, not just a read-only website. I implemented a hidden "kill switch" where users can type sudo delete followed by confirm. This triggers a dramatic, system-wide crash simulation—turning the screen black and forcing a "reboot" sequence. It adds a layer of gamification that encourages users to explore the boundaries of the interface.

2. Engineering the "Simulation Engine"

While it was tempting to keep the live Gemini API connection, I am most proud of the decision to build a Deterministic Simulation Engine. I realized that for a portfolio, reliability is a feature. By architecting a local "mock stream" that replicates the exact typing patterns and latency of an LLM, I achieved the "sentient AI" feel without the risk of API quotas or network latency. It taught me that sometimes the best engineering solution is removing a dependency, not adding one.

3. Secure Live Data (Gas Tracker)

I built a real-time Ethereum Gas Tracker that fetches live data from Etherscan. Instead of exposing my API keys on the client side, I built a secure Next.js Server-Side Proxy. This route acts as a gateway, injecting the secrets on the server before forwarding the request to Etherscan.

4. The "Cyberpunk" Polish

I spent significant effort fine-tuning the visual details. Balancing these high-fidelity "glitch" effects with the performance requirements of a web app (using Tailwind CSS v4) was a rewarding challenge in frontend optimization.

Top comments (0)