By skyforbes So I bought a domain. portkiller.app. Forced myself to build a landing page for a tool that probably didn't need one. I just wanted to have fun with it.
The app solves a frustration. The website needed to communicate that frustration. Over-the-top developer rage. Glitchy horror aesthetic. An annoying flying port you have to kill while reading the page.
Dumb? Yes. But also fun.
I've been hearing a lot about Gemini being good at frontend. Decided to test it.
I was sitting in my car at a red light. Opened Gemini Canvas on my phone and typed:
> "Build me a modern, quirky, unique landing page for my menubar app called PortKiller. It helps you find and kill ports and docker processes. Copy should be problem/emotion first. And it should be funny."
The first version was surprisingly close to what I had in my head. Dark theme. Frustrated copy. Terminal aesthetics.
But it needed more interactivity. So I followed up:
> "Add an animated mosquito that flies around the page. Users should be able to click to kill it while browsing."
Nailed it.
After this I went nuts. Asked for crazy stuff off the top of my head. Custom CSS animations — glitch effects, CRT scanlines, RGB chromatic aberration. Gemini is genuinely good at this stuff.
A few more iterations and I had a solid single-file HTML page that captured the vibe. All custom animations, no libraries. Just CSS keyframes doing the heavy lifting.
Then I copied the code into a local repo. From here, Claude Code took over.
This is where I tried to take it from "cool demo" to "actually shippable."
I started by discussing deployment with Claude. What do I need for Cloudflare Pages? Claude walked me through the process. Once everything was set up, I noticed my deployed version wasn't reflecting changes. Investigated and found the issue: aggressive CDN caching.
> "Set up cache-busting for assets. I'm deploying to Cloudflare Pages and the CDN caches aggressively."
Claude created a build script that appends git hashes to asset URLs. No more manually purging cache after every deploy.
Next was SEO. Not just for search engines, but for social previews and discoverability. Claude added JSON-LD structured data, Open Graph tags, Twitter cards, a PWA manifest, and generated favicons from my logo SVG. The full checklist I would've spent an hour researching.
I ran a PageSpeed audit. Claude helped me understand the findings, and we went through them one by one — deferred scripts, inlined critical CSS for above-the-fold content, added font preloads. Mobile FCP dropped ~300ms.
> "PageSpeed says CSS and JS are render-blocking. Fix it."
Even after testing everything I could think of, there's always room for improvement. The flying port game felt sluggish. So I asked Claude to tighten it up.
> "The flying port appears 5 seconds after load. Too slow, let's target 500ms. Add a pop-in animation when it spawns."
Now it spawns at 500ms with a bouncy scale animation that plays on every respawn after you kill it.
For deployment, Claude handled the full git workflow and even used chrome-devtools to verify the live site worked.
> "Push to main, merge to deploy, wait for CD, verify on live site."
Stack is just HTML/CSS/JS. TailwindCSS for utilities. All the cool animations (glitch, CRT, RGB split, flying port) are custom CSS.
The flying port is a mini-game. Kill it and your "PORTS TERMINATED" counter goes up. It respawns with the pop-in animation. Dumb feature I'm unreasonably proud of.
https://reddit.com/link/1pfmv0n/video/umjkd0nvgk5g1/player
Website: https://portkiller.app
App is free. Open source on GitHub. https://github.com/gupsammy/portkiller
Have you guys tried vibe coding on gemini?