Building a Cinematic 16:9 Game Dashboard with Vanilla JS (v1.0.0-beta)

The Backstory

After a bit of a setback (and getting a brand new laptop), I decided to sit down today and rebuild my vision for a minimalist Linux Game Checker. I wanted something that felt more like a high-end console interface than a standard database.

The Design Philosophy

Most game checkers are vertical lists. I wanted to utilize the full width of a 16:9 screen.

Horizontal Grid: I implemented a 4-column layout using CSS Grid to create "mini-long" rectangles.

Minimalism: No all-caps. I used proper Title Case for the game names to keep it looking professional and clean.

Performance: No heavy frameworks. It’s built with Vanilla JavaScript for instant filtering across the 50+ games currently in the library.

Features

Instant Search: Reactive filtering as you type.

Status Badges: Clear indicators for Native, Proton, and Blocked (anti-cheat) status using specific RGBA transparency for a modern look.

Cinematic Frame: Locked to a 16:9 aspect ratio for a consistent aesthetic.

The Tech

I kept the stack simple: HTML5, CSS3 (Tailwind for utility), and Vanilla JS. >
Links

Live Demo: [https://silxnce-is-him.github.io/linux-game-checker/]

GitHub Repo: [https://github.com/SiLXNCE-iS-HiM/linux-game-checker]

This is just the v1.0.0-beta. I'm planning on automating the data fetch in the future, but for now, I'm focusing on the UI/UX. Would love to hear your thoughts on the grid layout!