About this site

Every site is a small machine. This one is wound around a single idea — time — and built by hand, in plain HTML, CSS and JavaScript, with no framework anywhere in sight.

v3 · Grimoerie / Blacklight

The name

The site is called )It's About Time( — the brackets deliberately reversed, closing before they open, like a watch read back to front. The design is Grimoerie / Blacklight, taken from a stack of hand-drawn plates: aged paper crowded with scratch-ink figures, compass roses, all-seeing eyes, dot-and-star chains running down the margins, kana annotations bleeding into the fibre. The same plate reads two ways depending on the light, so the site does too — flip the toggle at the bottom-left. In the dark it is under UV: electric cyan, magenta and acid lime burning off a true-black ground. In the light it is on the desk: oxblood annotation, ink-blue diagrams and antique gold pressed into parchment. Same layout, same sigils, inverted energy. It is, after all, about time.

What's inside

🖼 A gallery

AI-generated art and a shelf of research documents, with an "Ask my documents" RAG chat widget bolted to the page.

🧰 Projects

A portfolio of things built and shipped end to end — AI, systems, security tooling and scientific computing.

🕹 Two arcades

A JavaScript canvas arcade with accounts and a live leaderboard — and a No-Script arcade of games with zero JavaScript.

⏱ A visitor log

A live, 90s-style hit counter — per-page counts and a rolling log of throwaway visitor handles, no IPs stored.

The look

One small tokens.css file is the single source of truth for the palette; every other stylesheet imports it. The theme is two plates of the same book, lit two different ways. Dark mode is blacklight — the page under UV, electric scratch-ink burning off a true-black ground. Light mode is grimoerie — the same page in daylight, ink and sepia foxing on aged parchment. Same layout, same sigils, inverted energy. Alongside the colours, a set of --accent-rgb channel tokens lets every rgba() in the site follow the theme instead of hardcoding one mode.

Three typefaces do the work: Fraunces for display, JetBrains Mono for chrome and labels, and Spectral for body text on the paper clippings.

☾ Blacklight

☀ Grimoerie

The machinery

Front end: hand-written static HTML, CSS and vanilla JavaScript — no build step, no framework, no bundler. Scroll reveals use a tiny IntersectionObserver; the light/dark toggle is a self-contained script that flips one data-theme attribute.
Back end: the arcade accounts, score sync and visitor counter run on free PHP + MySQL — PDO, bcrypt password hashing, a CSRF header and a per-IP login throttle.
Installable: a web manifest plus a full icon set (favicon, Apple touch, maskable) generated by rasterising an SVG of a clock dial, so the site installs as a PWA.
Deploy: a single shell script ships the whole tree over FTP to InfinityFree — the static pages refresh instantly, while CSS/JS carry a ?v= cache-buster.

The standout is the No-Script arcade: eight real games — an escape room, a hover maze, whack-a-mole, a riddle lock, a reaction game, a bell-tower chain, a switchboard parity puzzle, and a colour-blend matcher — whose every bit of state lives in CSS pseudo-classes (:target, :checked, :has(), :valid). Not one <script> tag. Open the arcade →

Credits

Built by: Thomas Verhave, with Claude Code
Type: Fraunces · JetBrains Mono · Spectral (Google Fonts)
Hosting: InfinityFree (static + PHP/MySQL)
Source: github.com/Thom4sss