A dynamic webapp landing page designed as the central hub to showcase my portfolio of projects. The Observation Deck delivers an intuitive, seamless user experience, effortlessly guiding visitors through my work while being easily modular for future updates.
Live: https://observation-deck.netlify.app/
projects.jsonis the single source of truth — the page and the screenshot pipeline both read it. Adding a project is one JSON entry; optional fields (featured,stack,caseStudy) unlock the flagship slot, tech tags, and the case-study dialog.scripts/capture-screenshots.jsvisits every project with Puppeteer, saves a compressed WebP screenshot toimages/, and writesstatus.json(up/down, response time, capture date).- A weekly GitHub Action runs the capture and commits fresh screenshots + status, so the deck's "last scan" and LIVE indicators stay current.
index.htmlrenders the deck from those files: a dark-only mission-control design (color-scheme: dark— there is no light theme), a header status strip, and per-project live badges.
npm install
npm run screenshots # refresh images/*.webp and status.json locally