A plain look at the technology, artwork, privacy choices, and decisions behind Entertrainer. No mystery tour; just the working parts.
FrameworkOne Vue app. AstroClock is a React island. Stack is a small WebGL game. Pages are in the first response, so a link describes the page being opened. The content does not wait on an animation.
Design systemColour, type, surface and motion for the magazine live in assets/css/main.css. Tailwind is only inside AstroClock. The publication itself is not a component library.
TypeFraunces for display, Archivo for interface, Source Serif 4 for reading, IBM Plex Mono for metadata. All SIL Open Font License, all self-hosted, three of the four variable — so the whole range is eight files. Chosen as the closest open equivalents to a commercial stack I could not license.
ColourThe interface accent is signal yellow, paired with near-black text that clears 4.5:1. Essay pictures keep one cobalt. Other hues are for status, not decoration.
SurfacesMost separation is a hairline and the space around it. A few tactile objects — the home switchboard, the category tiles — still carry a hard offset shadow, because they are meant to feel like pieces you can pick up.
MotionEvery transition picks from the same short list, and things leave faster than they arrive. Scroll reveals are CSS scroll-driven animations, so the failure mode is "no animation" rather than "no content". If motion fails, the content is still there.
ImagesCard artwork was generated and the titles set on top afterwards, because type rendered by an image model is type nobody proofread. Images can improvise; headlines need proofreading.
HostingPages are server-rendered. There is no analytics database. A tool sends only the request you make. StoryGen projects stay in the browser.
Opening soundOne short welcome tone with the opening, when the browser allows sound before a tap: “Digital Vibe (Podcast Intro Ident)” by Diamond_Tunes on Pixabay (Content License). Attribution is appreciated; the license does not require it. Device silent mode is respected — playback uses ordinary HTML audio and fails quietly if muted or blocked.
Every filter is a real radio group with arrow-key movement, every control has a visible focus ring, and the first thing in the tab order is a skip link to the content. Keyboard access is therefore a requirement, not a finishing touch, for a learning designer’s portfolio.
Turn on reduced motion and the card lifts, the staggers and the page transitions all collapse to state changes. Nothing on this site is legible only while it is moving. Motion is optional; meaning is not.
Every card puts its artwork in a band above the type instead of behind it, so a slow, dark or missing image costs you a picture and never a headline. The front page is fully readable with images disabled. The picture may wait. The headline does not.
StoryGen keeps your storyboards in your browser’s own storage, so they survive a refresh and never reach me. The others hold nothing at all. Where a tool calls a model it sends only the text you gave it for that one request, and nothing is kept on the way through. Your storyboard stays in the browser; only the text you submit is sent for that request.