Playing With This Site

6 min read

Most personal blogs are just posts on a page. This one has a few extra things hiding under the surface. Some are useful, some are silly, and some exist purely because building them was more fun than writing another tutorial.

Here’s the full tour.

The Konami Code

Start anywhere on the site. Type the classic sequence:

↑ ↑ ↓ ↓ ← → ← → B A

The entire page flips into hacker mode — green-on-black terminal aesthetic, monospace everything, scanlines across the screen, neon glow on links. It lasts eight seconds, or until you click or press another key.

There is no practical reason for this feature.

Three CTF Flags

There are three capture-the-flag challenges hidden across the site, ordered by difficulty.

Easy — View the HTML source of any page. Read the comments. That’s it.

Medium — There’s a page on this site dedicated to security. Inspect it more carefully than you’d read it.

Hard — Check robots.txt. Not everything in there is meant for crawlers. One line is base64-encoded. Decode it.

If you find all three, you have proven that you can right-click and use a terminal. Congratulations.

The Ops Theater

This blog has an operational infrastructure section that would be overkill for a Fortune 500 company, let alone a static site with zero databases.

/status

A fully styled status dashboard. Every service is green. Every service has always been green. There is no backend checking anything — the page is hardcoded HTML. But it looks very professional.

/metrics

A Prometheus-style metrics page with real formatting and completely fake data. Highlights include:

  • 247 coffee cups consumed during development
  • 83 YAML indentation errors caught
  • 14.5 hours spent choosing fonts
  • 0 containers, 0 databases, 0 npm dependencies

That last line is accurate and the site is proud of it.

/incidents

Actual post-mortem reports. Written in full incident-response format with severity levels, timelines, and root cause analysis. For things like:

  • A CSS cache taking three minutes to propagate (P2)
  • Build latency increasing (P3)
  • A typo in a post title (P4)

Each one follows the same structure you’d see at a company with an SRE team. This site does not have an SRE team.

/infrastructure

An ASCII diagram of the deployment pipeline. Because every serious platform needs an architecture diagram, and ASCII art is the most honest format.

/runbook

A DevOps-style runbook for operating the site. The tone suggests that maintaining a static blog requires the same rigor as keeping a distributed system alive. It does not.

Honeypot Pages

Try visiting /admin/, /wp-admin/, or /wp-login.php/ on the live site.

You’ll get a terminal-styled “ACCESS DENIED” page. These exist to waste the time of bots scanning for WordPress installations. The pages fake intrusion detection logging while quietly admitting — if you read the source — that this is a static site and there is nothing to break into.

Press Cmd+K (or Ctrl+K, or just / anywhere that isn’t a text input). A search modal opens with full keyboard navigation — arrow keys to move, Enter to select, Escape to close.

It searches across all posts and projects, shows tags, and caps results at eight. The entire thing is vanilla JavaScript with no search library. The index is baked into the page at build time.

You can also filter posts by tags. Click any tag on a post, and the URL updates with a ?tags= parameter. Shareable filtered views, no JavaScript framework required.

Encrypted Content

Some content on this site is password-protected. Not behind a login page — there is no server to log into. Instead, the content is encrypted client-side using AES-256-GCM before the site is even built.

The encrypted blob sits in the HTML. When you enter the password, the browser decrypts it locally using the Web Crypto API. The password never leaves your browser, never touches a server, and never appears in any request.

If you type the wrong password, it tells you. If you type the right one, the content appears in place. No page reload.

Redacted Text

Hover over blacked-out text and it reveals itself. This uses the {{< redacted >}} shortcode — the text color matches the background until you hover or focus on it.

It’s useful for spoilers, sensitive examples, or making readers feel like they’re reading a declassified document.

The Console Message

Open your browser’s developer tools and check the console. There’s a greeting waiting for you with links to the source repository and the security policy.

Because if someone opens DevTools on your site, they deserve a hello.

Most blog footers have a copyright line and maybe a link to the theme. This one has:

  • An ASCII directory tree showing the site structure
  • The git commit hash of the current build, linked to the exact commit on GitHub
  • A build timestamp so you know exactly when this version was deployed
  • An SLA badge claiming 99.95% uptime, linking to the status page
  • A security grade badge from securityheaders.com
  • An RSS feed link

The commit hash and timestamp are injected automatically during the CI/CD build. They’re not manually updated.

Dark Mode That Remembers

The theme toggle in the header switches between dark and light mode. It respects your system preference on first visit and remembers your choice in localStorage after that.

The transition is smooth — no flash of the wrong theme on page load. The toggle script runs in the <head> before the page renders, which is a small detail that prevents the “white flash on dark mode” problem that plagues most implementations.

The 404 Page

Navigate to any URL that doesn’t exist. The 404 page is styled as a terminal error — because when something goes wrong, it should at least look cool.

No External Requests

View the network tab in DevTools while browsing. Every single resource — fonts, CSS, JavaScript, images — is served from the same domain. There are no calls to Google, no CDN requests, no analytics pings, no tracking pixels.

The Content Security Policy enforces this. If an external resource somehow got added, the browser would block it and the CI pipeline would catch it before deploy.

Two Languages

The entire site is available in English and Slovak. The language switcher is in the footer. Every UI label, navigation item, and metadata string has a translation. Posts that have been translated show up in both versions.

What Doesn’t Exist

Just as notable as what’s here is what’s deliberately missing:

  • No analytics or tracking of any kind
  • No cookie banners (because there are no cookies to consent to)
  • No comments section
  • No newsletter signup
  • No “hire me” banner
  • No npm dependencies in the build
  • No JavaScript framework

The entire site is Hugo, SCSS, and 150 lines of vanilla JavaScript.


That’s everything — or at least everything I’m willing to document publicly. If you find something I missed, check the source. It’s all there.