I built Gimo, a secure local credentials vault designed specifically for gamers to store their account details, email addresses, launcher passwords, and CD keys (covering Steam, Epic Games, Ubisoft, Xbox, and Rockstar). It has a bold Neo-Brutalist look, a premium pitch-black dark mode, copy-to-clipboard buttons, and a clean search filter.
What was challenging for me?
- Eliminating Theme Flicker : Moving CSS and JS into separate files caused the page to flash bright white for a split second before dark mode loaded. I solved this by writing a tiny, render-blocking script inside the `` to check the theme value in LocalStorage before the page started drawing.
- Header Clutter on Mobile : In mobile view, the header took up way too much vertical space. I resolved this by absolute-positioning the theme switch button next to the logo and transforming the "+ Add Credential" button into a floating pill button in the bottom-right corner.
- View Transition Masking : Implementing a custom tenor GIF swipe mask for the dark/light mode toggle required precise CSS keyframe scaling to prevent the GIF aspect ratio from breaking on different screen resolutions.
What am i proud of?
- Sleek Mobile Layout : The mobile view feels like a premium native mobile application instead of a website because of the Floating Action Button (FAB) layout.
- Separation of Concerns : Refactored the old single-file codebase into a clean, modular structure (index.html, src/style.css, and src/app.js) that is easy to maintain.
- Cosmic Dark Theme : Built a highly curated, premium space-black palette that looks vibrant and glowing in low-light environments rather than using basic grey templates.
How can people test my project?
Since the vault operates entirely on the client side with local storage, there is zero setup or server installation required:
1. Clone my github repo :
```bash
git clone https://github.com/sahilaw22/gimo-game-vault.git
cd gimo-game-vault
```
2. Launch locally :
Simply open the `index.html` file in any web browser, or spin up a quick local python server:
```bash
python -m http.server 8000
```
Then visit `http://localhost:8000` in your browser.
3. Use the Vault :
- Tap any of the "Copy" buttons to copy usernames, passwords, or emails.
- Search for games or platform tags using the live filter search bar.
- Add new game entries with multi-select platform buttons.
- 1 devlog
- 2h
