Web
NYS HUB — a hand-written static landing page for a 30-minute print shop
No framework at all: one HTML file, one stylesheet and a three-kilobyte script for a custom-printing shop whose whole pitch is speed — an animated 30-minute dial, what they print, a gallery, reviews and WhatsApp ordering from every section.
Problem
What needed solving?
A print shop that turns t-shirts, mugs, bottles, cushions and frames around in thirty minutes needed a single page that makes that promise unmissable and gets the customer into a WhatsApp chat with their design as fast as possible. The site had to load instantly on a phone and cost nothing to run.
Context
Who was it for?
Client site · Custom printing & ready-to-wear shop
Approach
- Skip the framework: hand-written HTML, CSS custom properties for the palette and a small script for reveals and the menu — the fastest possible page for a single-purpose site.
- Make the promise the visual: a hero headline that ends in '30 minutes' and an animated dial beside it, followed by a marquee of the shop's four guarantees.
- Structure the page as the customer thinks: what we print, examples fresh from the shop, why people come back, reviews, then a closing call to action — with 'Order on WhatsApp' repeated in every section and a floating WhatsApp button.
Architecture
How the system was designed.
A static site: index.html, css/styles.css and js/main.js, served by Railway with a Content-Security-Policy. Fonts come from Google Fonts; every order button is a prefilled WhatsApp link. There is no build step and no backend.
Implementation
What was built.
- 01Semantic sections — hero, what we print, gallery, why, reviews, call to action, footer — in a 19 KB HTML file with a sticky header and a mobile menu.
- 02A 27 KB stylesheet with the palette as custom properties (ink, paper, sand, yellow, clay, sage) and Anton, Plus Jakarta Sans and Space Grotesk from Google Fonts.
- 03A 3 KB script: IntersectionObserver reveals, the mobile navigation, and a reduced-motion check so the dial and marquee stay still for users who ask.
- 04Nineteen WhatsApp links across the page plus a floating button, each opening a chat with the shop's number.
- 05A Content-Security-Policy header on the Railway service.
AI
Where AI was used and why.
This project did not use AI — a deliberate choice. Not every system needs a model.
Technology
Relevant stack.
- HTML
- CSS
- JavaScript
- Google Fonts
- Railway
Outcome
Only factual results.
Outcome to be added. Results are only published here when they can be stated factually — no estimated metrics.
Lessons
Important engineering insights.
- For a one-page, one-action business, plain HTML beats any framework on speed, cost and simplicity.
- Repeat the single call to action in every section — the customer should never scroll to find it.
Have a project in mind?
Tell me what you're trying to build. I'll come back with an honest view on scope, architecture and the right approach.