Food Tracker: Calorie Dashboard
Three phone screens of a calorie-tracking product: a dashboard whose segmented ring fills while its counters ease up from zero, an onboarding screen with calorie callouts pinned to a photo by lines that draw downward, and a recipe browser running a carousel that advances on its own. Vanilla HTML, CSS and JavaScript throughout, with no runtime network calls beyond the webfont.
A self-directed demo built to practice AI-native delivery. Not a real product or client project.
Overview
Food Tracker is a three-screen calorie-tracking app. The dashboard carries a segmented progress ring that fills while its counters ease up from zero, the onboarding screen pins calorie callouts to a food photo with lines that draw downward into it, and the recipe browser runs a carousel that advances every five seconds with the neighbouring cards peeking at either edge.
Stack & what's notable
Vanilla HTML, CSS and JavaScript. No framework, no build step, and nothing fetched at runtime except the DM Sans webfont, since the nine source images are vendored and re-encoded at twice the size they render, which took 4.3 MB of originals down to 284 KB.
The ring is ten SVG paths generated from polar coordinates with quadratic corner rounding, the counters run on requestAnimationFrame with a cubic ease so they land on their exact values, and a ResizeObserver scales the phones rather than a media query, so the layout holds at any width between a phone and a wide desktop.
Project stack
JavaScript
Language of the web
