Tools
Tools: A Portfolio That Grows From Nothing — AI Generates Everything in Real-Time
2026-02-02
0 views
admin
The Concept ## How It Works ## This Portfolio Is an Agent ## Streaming, Not Simulating ## About Me ## What's Next New Year, New You Portfolio Challenge Submission What if your portfolio didn't exist until someone asked? No static pages. No pre-written bios. Just a terminal-style interface waiting for a question — and an AI that builds everything from scratch, every time. Try typing skills, projects, or about — or ask anything you want. Most portfolios are static. You write it once, deploy it, and hope someone reads it. I wanted the opposite: a portfolio that only exists through conversation. You ask, Gemini generates, and the content appears as a card on screen — streaming in real-time. Every visit can be a different experience depending on what you ask. The visual metaphor is intentional: a blank terminal that comes alive. It reflects how I actually work — starting from the real situation, not from templates. The stack is intentionally minimal: The architecture is simple: the client sends a question, the server attaches a system prompt (never exposed to the client), streams the Gemini response back via Server-Sent Events, and the client renders it as markdown cards with a typewriter effect. No database. No auth. No build step. Just node server.js. This isn't a website — it's an agent. There's no pre-built page waiting for you. No cached responses. Every time you ask a question, the agent reads my background, thinks about your question, and builds a response from scratch — just for you. Ask "skills" twice, and you'll get the same facts in different words. Ask something unexpected like "explain Ryu's skills like I'm five" and it'll adapt its tone — but still stay in character. This means every visitor gets a slightly different portfolio. The version you see doesn't exist for anyone else. It was built in real-time, for your question, and it disappears when you leave. That's what excites me about AI agents: they don't just retrieve information — they generate experiences. The typewriter effect you see isn't a CSS animation — it's real-time AI output. The backend establishes a Server-Sent Events (SSE) connection with Google Gemini. Each token arrives as it's generated, streams through Express, and renders on screen instantly. The text is being "thought" by the AI in real-time, token by token. It's not a retro effect — it's the heartbeat of the AI. I'm Ryu — an AI Agent Builder based in Tokyo. My career didn't follow a straight line: IT → advertising → esports → AI Agents. What connects them is that I've always worked at the intersection of technology and real operations. I call my approach "Cho-Genba-shugi" (Ultra-Field-Oriented) — I sit inside actual workflows before writing any code. The best moment is when a workflow I personally observed becomes an AI agent, and the user's reaction goes beyond "this is useful" to "wait… this actually understands how we work." This portfolio follows the same idea. It doesn't pretend to know what you want to see. It waits, listens, and builds. If you're working on AI Agents or just want to chat about building things, find me: Thanks for reading — and go ask my portfolio something weird. It can handle it. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK:
[Browser] → POST /api/chat → [Express + System Prompt] → [Gemini API] ↓
[Browser] ← SSE stream ← [Express proxy] ← [Streaming response] Enter fullscreen mode Exit fullscreen mode CODE_BLOCK:
[Browser] → POST /api/chat → [Express + System Prompt] → [Gemini API] ↓
[Browser] ← SSE stream ← [Express proxy] ← [Streaming response] CODE_BLOCK:
[Browser] → POST /api/chat → [Express + System Prompt] → [Gemini API] ↓
[Browser] ← SSE stream ← [Express proxy] ← [Streaming response] - Express.js — serves static files and proxies the Gemini API
- Vanilla HTML/CSS/JS — no framework overhead, cyberpunk terminal UI
- Gemini 2.0 Flash (Streaming) — real-time content generation via SSE
- Cloud Run — serverless deployment - Multi-turn conversation memory
- Voice input
- Dynamic project cards that pull from live GitHub data
how-totutorialguidedev.toaimlservernodedatabasegitgithub