An interactive, responsive hoverboard visualizer inspired by GitHub's signature contribution activity heatmap. Built using pure HTML, CSS, and JavaScript, the application renders a dynamic grid of contribution tiles that light up with vivid neon green commit colors upon mouse hover and gradually fade back to dark mode.
- Interactive Hover Grid: 120 dynamically rendered activity tiles that illuminate instantly when hovered.
- Randomized GitHub Palette: Draws from an authentic palette of green hues representing varying commit activity intensities.
- Neon Glow Bloom: Applies dual-spread
box-shadowglow effects on mouseover. - Smooth 2-Second Dissipation Trail: Uses CSS transitions to create a lingering fade-out trail as the cursor sweeps across the grid.
- GitHub Dark Mode Aesthetic: Styled with GitHub's signature dark background (
#0d1117), card border borders (#30363d), and modern system typography. - Zero Framework Overhead: Built exclusively with native HTML5, CSS3, and modern JavaScript.
| Technology | Purpose |
|---|---|
| HTML5 | Viewport markup and heading structure |
| CSS3 | Flexbox grid layout, dark mode color tokens, hover transitions, and glow shadows |
| JavaScript (ES6) | Dynamic <div> generation, random color picking, and mouseover/mouseout event handling |
GitHub-contributions-clone/
├── index.html
├── style.css
├── script.js
└── README.md
- DOM Instantiation (
script.js): A loop dynamically creates 120.activitytile elements and appends them into the#_containerelement. - Hover Trigger (
mouseover):- Randomly selects a green hex code from
greenColorCodes. - Snaps the tile's background color to the chosen shade and attaches a glowing
box-shadow. - Hover transition duration is set to
0sfor instantaneous reaction.
- Randomly selects a green hex code from
- Fade Out (
mouseout):- Resets the background color to
#21262dand shadow to default. - CSS
transition: background-color 2s ease, box-shadow 2s easesmoothly transitions the tile back over two seconds.
- Resets the background color to
No build configurations, package managers, or server installations are necessary.
git clone https://github.com/Kumar44developer/GitHub-contributions-clone.gitOpen index.html directly in any web browser, or serve it using an extension like VS Code Live Server.
- Adjust Tile Count: Update
const numberOfSquares = 120;inscript.jsto change total grid squares. - Modify Heatmap Colors: Replace the hex values inside
greenColorCodesinscript.jsto create alternative themes (e.g., blue, purple, or warm fire palettes). - Change Fade Duration: Edit the
transition: background-color 2s easeduration instyle.cssto lengthen or shorten the trailing glow effect.
Kumar44developer — GitHub Profile