Abdullah Akbar — Web Projects

A curated collection of 27 web projects built from scratch using HTML, CSS, and vanilla JavaScript. Projects span browser games, productivity tools, UI/brand clones, and full multi-page websites.

Live demo → abudora-0.github.io/Web-Projects

---

🎮 Games (5)

Project	Description	Stack
Dino Game	Endless runner with obstacles, high scores, and touch controls	HTML CSS JS
Snake Game	Classic snake on canvas with keyboard + swipe support	HTML CSS JS
Tic Tac Toe	Two-player game with win detection and score tracking	HTML CSS JS
Animated Car	CSS + JS animated car with parallax scene	HTML CSS JS
Arcade Hub	Hub of 8 mini-games — Memory, Wordle, 2048, Simon Says & more	HTML CSS JS

🔧 Tools & Apps (10)

Project	Description	Stack
Budget Tracker	Finance tracker with charts, goals, insights & CSV export	HTML CSS JS Chart.js
Movie Finder	TMDB-powered movie discovery with watchlist & favorites	HTML CSS JS TMDB API
Album Player	Custom audio player with vinyl animation & playlist	HTML CSS JS
Weather App	Live weather with temperature, wind & forecast	HTML CSS JS API
Xchange	Real-time currency converter with live exchange rates	HTML CSS JS API
Password Manager	Browser-based credential vault using localStorage	HTML CSS JS
To Do List	Task manager with filters & localStorage persistence	HTML CSS JS
De Calc	Sleek calculator with keyboard support & history	HTML CSS JS
Email Validator	Real-time regex email validation with visual feedback	HTML CSS JS
Analog Clock	Real-time analog clock with CSS transforms & theme switcher	HTML CSS JS

🎨 UI Clones & Templates (8)

Project	Description	Stack
Netflix Clone	Netflix landing page — hero, FAQs, feature rows	HTML CSS JS
Spotify Clone	Spotify UI with sidebar nav and functional player	HTML CSS JS
Myntra Clone	Fashion e-commerce grid with responsive navbar	HTML CSS JS
X / Twitter Clone	Twitter/X feed UI with dark mode design	HTML Tailwind JS
Windows 11 UI Clone	Desktop recreation with taskbar, start menu & widgets	HTML CSS JS
Bootstrap Website	Multi-page site built entirely on Bootstrap	HTML CSS Bootstrap
Cheatsheet Template	Developer cheatsheet with Prism.js syntax highlighting	HTML CSS Prism.js
Incognito Mode	Chrome incognito new-tab page recreation	HTML CSS JS

🌐 Websites (4)

Project	Description	Stack
Portfolio	Personal portfolio with skills, projects & contact	HTML CSS JS
Blog Website	Multi-page blog with search, about & contact	HTML CSS
Landing Page	Product landing with scroll animations & CTA	HTML CSS JS
Foodies	Restaurant website with menu & recipe cards	HTML CSS JS

---

Tech Stack

Layer	Technologies
Structure	HTML5, Semantic tags, SVG
Styling	CSS3, Custom Properties, Flexbox, Grid, Animations
Logic	Vanilla JavaScript (ES6+), LocalStorage, Canvas API, Web Audio API
APIs	TMDB (movies), Open-Meteo (weather), Exchange Rate API
Libraries	Chart.js, Prism.js, Bootstrap (select projects only)

---

Run Locally

No build tools required — every project is a static HTML file.

# Clone the repo
git clone https://github.com/Abudora-0/web-projects.git
cd web-projects

# Serve with any static server (recommended)
npx serve .

# Or open index.html directly in your browser

Navigate the index at http://localhost:3000 to browse all projects.

Tip: Projects that use external APIs (Weather App, Movie Finder, Xchange) require an internet connection and may need valid API keys in their script.js files.

---

Structure

web-projects/
├── index.html                       # Project hub (this file)
├── README.md
├── Album Player/
├── Analog Clock/
├── Animated Car/
├── Arcade Hub/
├── Blog Website/
├── BootStrap Website/
├── CheatSheet Template/
├── De Calc/
├── Dino Game/
├── Email Validator/
├── Foodies/
├── Incognito Mode/
├── Landing Page/
├── Movie Recommendation App/
├── Myntra Clone/
├── Netflix Clone/
├── Password Manager/
├── Personal Budget Expense Tracker/
├── Portfolio/
├── Snake Game/
├── Spotify Clone/
├── Tic Tac Toe/
├── To Do List/
├── WIndow 11 UI Clone/
├── Wheather App/
├── X & Twitter Clone/
└── Xchange/

---

🎵 Adding Songs Locally (Spotify Clone & Album Player)

MP3 files are not included in this repo — audio files are too large for GitHub.
The Spotify Clone and Album Player will show empty on GitHub Pages.

To get them working locally:

1. Clone the repo and cd into it
2. Add your .mp3 files into the matching artist folders:

Spotify Clone/songs/
├── billie/   → add mp3s here + cover.jpg
├── drake/    → add mp3s here + cover.jpg
├── dua/      → add mp3s here + cover.jpg
├── eminem/   → add mp3s here + cover.jpg
├── kenny/    → add mp3s here + cover.jpg
├── taylor/   → add mp3s here + cover.jpg
└── weeknd/   → add mp3s here + cover.jpg

3. Each folder already has an info.json (artist/album metadata) and a cover.svg placeholder.
   Add a cover.jpg for the full album art experience.
4. Serve the project with a local server (required — fetch() won't work on file://):

npx serve .
# then open http://localhost:3000/Spotify%20Clone/

5. For Album Player, songs are loaded automatically from the Spotify Clone folder via relative paths.

---

Author

Abdullah Akbar github.com/Abudora-0

---

Built with HTML, CSS & JavaScript — no frameworks, no bundlers.