guest@gubanov:~$ cat ./projects/portfolio/README.md

Portfolio

This very site — built from an empty Next.js project, prompt by prompt, with Claude Opus 5.5.

I set the direction, gave the content and reviewed every step; the code, the deployment, the screenshots and the case texts were produced by Claude Opus 5.5 in Claude Code. Below is the full log — what each prompt asked for and what came out of it.

source
role01
Direction, content, review
period02
Oct 2026
team03
Me + Claude Opus 5.5
type04
Portfolio site
gubanov.work/
Hero — a WebGL point cloud swept by a scanning beam, the cursor works as a probe
fig.00Hero — a WebGL point cloud swept by a scanning beam, the cursor works as a probe
[01]guest@gubanov:~$ cat overview.md01 / 06

Overview

// context

A developer portfolio in a terminal-and-lidar aesthetic: a WebGL point cloud swept by a scanning beam, dot-matrix type, headings that decode themselves and sections that open with a shell command.

It is also an experiment: how far one developer gets with an AI agent when the prompts are short and concrete. Every prompt in the log below is real — together they took the project from an empty Next.js app to a deployed site with case studies, on a VPS with its own domain.

[02]guest@gubanov:~$ claude --log02 / 06

Built with AI

Counted from the Claude Code session logs: every model call with its input, cached context and output.

model01
Claude Opus5.5
prompts02
written in Russian, one per step6
model calls03
470K tokens generated296
tokens processed04
82.4M of them — cached context84M
guest@gubanov:~$ cat ./history.logexpand +

  1. prompt 01

    Home page from scratch

    109 calls · 25.5M tokens · 216K out

    meAn empty Next.js project and a reference site for mood. Build a unique developer portfolio home: an abstract hero, about, three featured projects, skills, work experience and contacts. Terminal and lidar style, smooth text, reveal and hover animations; placeholders for the content.

    opusThe whole home page: a boot screen, the WebGL lidar hero with a cursor probe, decoding headings, a neofetch card with an ASCII torus, project cards with generated previews, skills with level bars, experience as a git log, a working terminal in the contact block and a vim-style status line.

  2. prompt 02

    Deploy to the VPS

    13 calls · 0.6M tokens · 10K out

    meUpload the site to the VPS, connect the gubanov.work domain and prepare subdomains for future projects — oriby, panamax, taskmanager.

    opusA standalone build shipped with rsync and run by systemd behind nginx, virtual hosts for the domain and three subdomains, one Let's Encrypt certificate for all five names. The root-level steps were packed into one script that I ran myself; a deploy script appeared for later updates.

  3. prompt 03

    Content from the resume

    11 calls · 0.9M tokens · 11K out

    meHere is my resume as a PDF — study it, rewrite the site's texts based on it and deploy the update.

    opusName, role, location, contacts, the about text, skills and four jobs taken from the resume and translated to English. All the placeholders are gone.

  4. prompt 04

    Polish and the first cases

    72 calls · 17.4M tokens · 132K out

    meMention Next.js and Nuxt in About, change skill levels and add AI agents, show months in the experience, fix the cursor that overlapped the system one, and present Oriby and Task Manager as projects.

    opusTenure counted automatically, the hero crosshair turned into a native SVG cursor, case pages with screenshots taken in headless Chrome, a full-screen viewer and the Oriby Lighthouse results; the Oriby demo went live on its subdomain.

  5. prompt 05

    This case

    50 calls · 20.2M tokens · 46K out

    meRename gubanov.dev to gubanov.work, add this site as a project with the AI log, link the GitLab repositories, refresh the Task Manager case and push everything to GitLab.

    opusThis page with statistics from the Claude Code logs, new English screenshots of Task Manager, repository links on every case and the code on GitLab.

  6. prompt 06

    3D, contacts and a live demo

    41 calls · 19.9M tokens · 54K out

    meMake the history collapsible, add a live demo and the start date to Task Manager, Telegram and GitLab to the contacts, and four 3D models to the projects page — rotatable in 3D without breaking the style, maybe as a lidar scan.

    opusEach FBX model sampled into a 120K-point cloud and shown in a hand-written WebGL viewer: a scanning beam, drag to rotate, intensity and rgb modes. Projects split by direction, the Task Manager demo on its subdomain, new contacts, this collapsible history.

[03]guest@gubanov:~$ cat ./work.log03 / 06

What was built

All of it through the prompts; my part — the brief, the content and the review.

  1. 01

    Home page: a WebGL lidar hero, about with a neofetch-style card, featured projects, skills with levels, experience as a git log and a contact block with a working terminal (help, whoami, projects…).

  2. 02

    Motion without animation libraries: one IntersectionObserver for reveals, text scramble, typewriter, dot-matrix letters, Lenis smooth scrolling and prefers-reduced-motion support.

  3. 03

    Content from the resume: about, skills with levels, experience with months and tenure calculated automatically.

  4. 04

    Case study pages generated from one data file, a full-screen screenshot viewer and a projects archive.

  5. 05

    Screenshots of the projects taken automatically in headless Chrome — desktop and phone, light and dark themes.

  6. 06

    Production on a VPS: nginx, systemd and Let's Encrypt for the domain and project subdomains, plus a one-command deploy script.

[04]guest@gubanov:~$ open ./screens04 / 06

Screens

Click a screenshot to open it full screen; arrow keys switch between them.

fig.01About — words light up while scrolling, a neofetch card with an ASCII torus
fig.02Projects — cards with a scan line and color on hover
fig.03Skills — a marquee and level bars that fill in
fig.04Experience as a git log, tenure counted automatically
fig.05Contact — a working terminal: help, whoami, projects, email
fig.06A case study page generated from data
fig.07Hero on a phone
fig.08Project cards
fig.09Experience
fig.10Case study
[05]guest@gubanov:~$ cat ./notes/architecture.md05 / 06

Under the hood

▸ note01

Content as data

Texts, projects, skills and experience live in content/*.ts. Pages are server components prerendered to static HTML — a new case study is one more object in a list.

▸ note02

WebGL without three.js

The hero is a hand-written shader: a point cloud, a scanning beam and a cursor probe in a few hundred lines. Rendering pauses when the hero leaves the screen.

▸ note03

Native over custom

The hero crosshair is a native SVG cursor instead of an overlay that lags behind the mouse; the screenshot viewer is a <dialog> with Esc and focus return for free.

▸ note04

Build locally, ship standalone

Next.js output: standalone is built on the laptop and shipped with rsync — the 1.6 GB VPS only runs node server.js behind nginx.

[06]guest@gubanov:~$ cat package.json06 / 06

Stack