September 30, 2026
One Day One Code.
FrontendA series of small, focused builds — landing pages, browser games, interactive learning labs, and a desktop app — each designed and shipped in about a day.
Description
One Day One Code is my series of small, self-contained builds: pick one idea, design it, and ship it in roughly a day. It keeps my frontend and UI skills sharp and gives me room to try techniques I don’t use at work — scroll-driven canvas animation, WebGL, drag-and-drop learning games, virtual labs, and even a desktop app.
The thinking behind the series is in the One Day One Code note, and the source for the static builds lives in one GitHub repository .
The builds
Tarik Tambang IPS
HTML · CSS · JavaScript · SVG
A real-time, two-team tug-of-war quiz for junior-high Social Studies: answer questions faster than the other team to pull the rope your way.
Oct 2026
Bebek IPS
HTML · CSS · JavaScript · Canvas
A pixel-art shooting game inspired by Duck Hunt where players shoot the duck carrying the correct answer to junior-high Social Studies questions.
Sep 2026
Lab Mitigasi Bencana — Disaster Mitigation Lab
HTML · CSS · JavaScript · Canvas
A virtual lab where students choose buildings and terrain, set an earthquake's magnitude, watch the impact in real time, then apply mitigation measures and compare the results.
Sep 2026
Jelajah Nusantara
HTML · CSS · JavaScript · SVG
An interactive map game for junior-high geography where players place Indonesia's islands and provinces on the map and answer quizzes about each region's natural resources and characteristics.
Sep 2026
Axion AI
HTML · CSS · JavaScript
A clean, modern SaaS landing page for a fictional AI work assistant, with a feature grid, pricing, and FAQ.
Sep 2026
IRONFORGE Gym
HTML · CSS · JavaScript
A high-energy landing page for a fictional gym, with animated stats, programs, trainers, pricing tiers, and a schedule.
Sep 2026
Aurum
HTML · CSS · JavaScript
A luxury dark-and-gold landing page for a fictional fine-dining restaurant, with a tasting menu and reservation form.
Aug 2026
VELOURA
HTML · CSS · JavaScript
An editorial landing page for a fictional luxury fashion house, with a split hero, product grid, and cart badge.
Aug 2026
Luminary Studio
HTML · CSS · JavaScript
A bold, dark landing page for a fictional creative digital agency, with a gradient hero and animated stat counters.
Aug 2026
Foliage Coffee
HTML · CSS · JavaScript
A warm, editorial landing page for a fictional slow coffee bar, with a floating cup hero, a featured-bean card, and scroll-based reveals.
Aug 2026
Pasar Saham Virtual — Investment Simulator
HTML · CSS · JavaScript · SCORM
A virtual investing simulator where learners manage Rp10M across stocks, funds, gold, and cash through 5 rounds of economic-news scenarios.
Jul 2026
Pitek — Desktop Asset Manager
Electron · Svelte · TypeScript · Vite
An Eagle-style desktop asset manager that indexes images, video, audio, and text into tidy, human-readable folders on disk — thumbnails and JSON, no database.
Jul 2026
Gizi Seimbang — Nutrition Literacy Game
HTML · CSS · JavaScript
A drag-and-drop nutrition game for building balanced meals, with live calorie and macro tracking based on real Indonesian TKPI food data.
Jul 2026
Lab Coding Blok — Basic Logic Lab
HTML · CSS · JavaScript
A visual block-coding lab where learners snap Move, Loop, and If blocks together to run animated programs and build computational thinking.
Jul 2026
Jangan Lupa Titik Koma
HTML · CSS · JavaScript
A coding puzzle where exactly one line among thousands is missing its semicolon, and you have to spot and click it to fix the build.
Jun 2026
Uchiha Itachi Landing Page
HTML · CSS · JavaScript · Canvas
A cinematic, scroll-driven Uchiha Itachi landing page that scrubs an image-frame sequence, with WebGL effects and synthesized audio.
Jun 2026
Haystack Hunt
HTML · CSS · JavaScript · Three.js
A tiny 3D find-the-needle game built with Three.js where you clear a haystack one strand at a time to uncover the hidden needle.
Jun 2026
Hey! I’m Fanny, the software engineer tending to this digital garden. You can read more about me, or subscribe by email.