Welcome to my personal frontend sandbox! This repository serves as a centralized hub for tracking my frontend stuff. It contains a collection of UI components, interactive web layouts, and standalone design labs.
The primary goal of this sandbox is to focus on clean architecture, semantic accessibility (a11y), and fluid responsive design.
- Interactive Sandbox Hub: View All Projects Live
Below is a dynamically generated index of the frontend modules available in this workspace. Each component lives in its own root directory for isolated execution.
| Project Name | Stack Type | Technical Stack | Live Demo |
|---|---|---|---|
| Blog Post Card | 🎨 Presentational | 🧱 HTML5, 🎨 CSS3 | Explore Live |
| Business Card | 🎨 Presentational | 🧱 HTML5, 🎨 CSS3 | Explore Live |
| Confidential Email | 🎨 Presentational | 🧱 HTML5, 🎨 CSS3 | Explore Live |
| Dicee | ⚡ Interactive | 🧱 HTML5, 🎨 CSS3, ⚡ Vanilla JS | Explore Live |
| Drum Kit | ⚡ Interactive | 🧱 HTML5, 🎨 CSS3, ⚡ Vanilla JS | Explore Live |
| Fcc Survey Form | 🎨 Presentational | 🧱 HTML5, 🎨 CSS3 | Explore Live |
| Feature Selection | 🎨 Presentational | 🧱 HTML5, 🎨 CSS3 | Explore Live |
| Ghibli API | ⚡ Interactive | 🧱 HTML5, 🎨 CSS3, ⚡ Vanilla JS | Explore Live |
| Hover Effect | 🎨 Presentational | 🧱 HTML5, 🎨 CSS3 | Explore Live |
| Loan Calculator | ⚡ Interactive | 🧱 HTML5, 🎨 CSS3, ⚡ Vanilla JS | Explore Live |
| Number Guesser | ⚡ Interactive | 🧱 HTML5, 🎨 CSS3, ⚡ Vanilla JS | Explore Live |
| Pricing Plans | 🎨 Presentational | 🧱 HTML5, 🎨 CSS3 | Explore Live |
| Pricing Table | 🎨 Presentational | 🧱 HTML5, 🎨 CSS3 | Explore Live |
| Progress Bar | ⚡ Interactive | 🧱 HTML5, 🎨 CSS3, ⚡ Vanilla JS | Explore Live |
| Simon Game | ⚡ Interactive | 🧱 HTML5, 🎨 CSS3, ⚡ Vanilla JS | Explore Live |
| Task List | ⚡ Interactive | 🧱 HTML5, 🎨 CSS3, ⚡ Vanilla JS | Explore Live |
| Toggle Sidebar | ⚡ Interactive | 🧱 HTML5, 🎨 CSS3, ⚡ Vanilla JS | Explore Live |
To keep this ecosystem modular and easy to navigate, every project adheres to a strict individual directory layout:
sandbox/
├── [project-name]/ <-- Explicit lowercase naming convention
│ ├── index.html <-- Standalone DOM entry point
│ ├── style.css <-- Component-scoped visual rules
│ └── script.js <-- Component-scoped interactive logic (optional)
- No Cross-Pollination: Styles and logic are entirely contained inside their respective project directories.
- Component-First Isolation: Any project can be cloned or extracted independently without breaking dependencies.
To explore, run, or debug any specific project locally on your machine:
- Clone this workspace:
git clone https://github.com/gbgabiola/sandbox.git
- Change into the repository directory:
cd sandbox - Run a local server:
Open the root workspace using VS Code and launch the Live Server extension, or open individualindex.htmlfiles directly inside your preferred web browser.
If you want to talk shop about software engineering or collaboration opportunities, feel free to drop by:
© 2026 gbgabiola • This repository is completely open-source and free to adapt under the terms of the MIT License.