A comprehensive repository showcasing frontend experiments, UI concepts, and interactive web applications. Each project demonstrates different aspects of modern web development, from accessibility best practices to advanced animations and interactive experiences.
Complete website projects ranging from interactive games to practical utilities.
- Pokedex - Interactive Pokemon encyclopedia
- Pastel - Bootstrap-based portfolio template
- Bulk File Renamer - Batch file renaming tool
- DupeHunter - Duplicate text finder utility
- Link To Google Bookmarks - Bookmark link generator
- Firey Passages - Animated text effects showcase
- File Redownloader - Batch file download utility
- QR Code Generator - Dynamic QR code creation tool
- Mock Email Generator - Interactive mock email generator
- Rename Files - Batch file renaming tool
- Face Bomp - Whack-a-mole style reaction game
- War - Classic card game implementation
- UNO - Another Classic card game implementation
- DhikrForest - Offline-first dhikr (Islamic remembrance) counter that visualizes worship as a growing forest, with Laylatul Qadr mode and milestone notifications
Creative UI concepts and experimental interface designs.
- Skynet Eats - Food delivery app UI concept
- Drone Series - Drone product showcase interface
- Scenic Forests - Nature photography gallery interface
- Momentum - Minimalist productivity dashboard
- Video Background Website - Immersive video-based landing page
Interactive visual effects and animations that demonstrate creative uses of CSS, JavaScript, and WebGL.
- Ghost Eyes - Spooky eye-tracking effect
- Grid Spotlight Effect - Interactive grid spotlight animation
- Anime.js Sphere - 3D animated sphere using Anime.js
- Anthony V1 Website Effects - Custom cursor and mouse-follow effects
- Blue Techno Fluid - WebGL fluid simulation
- Diamond Photo Gallery - Diamond-shaped image gallery layout
- Fluid Flame Effect - Interactive flame simulation
- Button Gallery - Collection of creative button hover effects
- Ink Fluid - GPU-accelerated ink dispersion effect
- Loading Animation 2 - Creative loading spinner animation
- Moving Squares Animation - Animated square pattern effects
- Particles - Interactive particle system visualization
- Split Screen Slider - Dual-panel slider interface
- Spotlight Effect - Mouse-tracking spotlight effect
- Touch Slider - Touch-enabled image slider
- Video.js - Custom video player implementation
- 3D Cube Loader - Animated 3D cube loading animation
- 3D Image Transition - 3D perspective image transitions
- Animated Input Border - Dynamic input field border animations
- Escalade Loader - Escalating animation loader
- Fire Cursor - Cursor trail with fire particle effect
- Gemini Loader - Google Gemini-inspired loading animation
- Hover Shine Effect - Metallic shine on hover interaction
- Jump And Slide - Playful jump and slide animation
- Magic Card - Interactive card with magical hover effects
- MagicalHoverEffect - Enchanting hover interaction with particles
- Navigation Bar - Animated navigation bar with hover effects
- Redirecting Loader - Page redirect loading animation
- Shine Animation - Animated shine sweep effect
- Shine Effect - Glossy shine overlay effect
- Balloon Spawn Effect - Interactive balloon spawn animation
Browser extensions that enhance functionality and user experience.
- Gallery Bookmark Viewer - Visual bookmark management extension with customizable viewing options
- Gallery Viewer - Offline-first gallery browser for large image/video collections with recursive folder loading, video frame extraction, flexible grid layouts (1–24 images/row), three zoom modes, folder bookmarks, and spotlight mode. Opened via Alt+G
- Linkest - Link and note manager with one-click tab saving, smart URL vs. plain-text detection, multi-select batch operations, position-based insertion, and persistent local storage
- Hydration Hero - Privacy-first water intake tracker with customizable logging, daily goal progress, timestamped history, and midnight auto-reset, built with React + Vite + Tailwind
- Local Video Player - Feature-rich local video player with volume amplification up to 500%, resume-from-position, fine-grained speed controls (0.1x–16x), Picture-in-Picture, and Global Media Controls integration
To explore these projects locally:
- Clone the repository (including submodules):
git clone --recurse-submodules https://github.com/AbdulDevHub/Web-Mountain.git
cd Web-Mountain- Open
index.htmlin your browser to view the project showcase. - For Vite/React Projects:
Individual Vite applications (such as Bulk File Renamer) live in their respective
vite-source-codesubfolders. To run a Vite project locally:
cd "Awesome Websites/Bulk File Renamer/vite-source-code"
npm install
npm run dev⚡ CI/CD & Deployment: Netlify automatically builds all Vite-based projects into their parent output directories upon pushing to
main, ensuring seamless deployment without committing compileddistfiles.
Several projects in this repo are Git submodules pointing to their own standalone repos:
| Project | Location | Repo |
|---|---|---|
| Gallery Viewer | Chrome Extensions/Gallery-Viewer |
AbdulDevHub/Gallery-Viewer |
| Linkest | Chrome Extensions/Linkest |
AbdulDevHub/Linkest |
| Hydration Hero | Chrome Extensions/Hydration-Hero |
AbdulDevHub/Hydration-Hero |
| Local Video Player | Chrome Extensions/Local-Video-Player |
AbdulDevHub/Local-Video-Player |
| DhikrForest | Awesome Websites/DhikrForest |
AbdulDevHub/DhikrForest |
If you're cloning fresh, pull submodule content in the same step:
git clone --recurse-submodules https://github.com/AbdulDevHub/Web-Mountain.gitYour submodule folders will exist but be empty. Fix it with:
git submodule update --init --recursiveTo pull the parent repo and update all submodules to the commit the parent repo currently points to:
git pull
git submodule update --init --recursiveOr combine both in one step for future pulls:
git pull --recurse-submodulesBy default, a submodule is pinned to a specific commit, not "always latest." To pull each submodule's newest main (or default branch) commit:
git submodule update --remote --mergeThis updates all submodules. To update just one:
git submodule update --remote --merge "Chrome Extensions/Gallery-Viewer"After running this, the parent repo will show the submodule folders as "modified" (pointing to a new commit) — commit that pointer update in Web-Mountain itself:
git add "Chrome Extensions/Gallery-Viewer"
git commit -m "Update Gallery-Viewer submodule to latest"
git push
⚠️ git submodule update --remote --mergemoves a submodule to whatever is newest on its default branch, which can pull in unfinished work if a side repo is mid-change. For a portfolio repo, it's safer to update one submodule at a time and check itsgit logbefore committing the pointer bump.
git submodule add https://github.com/AbdulDevHub/repo-name.git "Category/Project-Name"
git commit -m "Add repo-name as submodule"
git pushgit submodule deinit -f "Category/Project-Name"
git rm -f "Category/Project-Name"
rm -rf .git/modules/"Category/Project-Name"
git commit -m "Remove Project-Name submodule"- Frameworks & Tooling: React, TypeScript, Vite, Tailwind CSS
- Core: HTML5, CSS3, JavaScript (ES6+)
- Animation: Anime.js, CSS animations, Canvas API
- Graphics: WebGL, GPU.js, SVG
- Libraries: JSZip, jQuery, Bootstrap, dat.GUI
- Tools: Materialize, Video.js, Docker, pnpm
- Techniques: CSS Grid, Flexbox, Responsive Design
This repository serves as a living archive of frontend learning experiments, showcasing progression in web development skills across multiple domains including:
- ✨ Visual effects and animations
- 🎮 Interactive applications and games
- 🎨 UI/UX design implementations
- 🔧 Practical web utilities
- 🧩 Chrome extension development
Each project demonstrates different aspects of modern web development, from foundational concepts to advanced techniques.
Feel free to explore each project folder for implementation details. Happy Coding! 🚀