🚀 Web Projects Portfolio

A curated collection of interactive web applications and creative projects

🌐 Live Portfolio • 📂 View Repository • ⭐ Star This Repo

---

📖 About

Welcome to my Web Projects Portfolio! This repository showcases a diverse collection of 17+ web development projects ranging from interactive games and utilities to landing pages and UI components. Each project demonstrates different aspects of modern web development including responsive design, JavaScript interactivity, and creative CSS animations.

✨ Key Features:

• 🎨 Beautiful, modern portfolio landing page
• 🔍 Live search functionality to filter projects
• 📱 Fully responsive design for all devices
• 🎯 Direct links to live demos and source code
• 🌈 Gradient animations and smooth transitions

---

🎯 Live Demo

Portfolio Homepage: https://asad2204.github.io/Web-Projects/

🎮 Featured Projects

Project	Category	Live Demo
🃏 BlackJack Game	Game	View Demo
🏀 Basketball Score Counter	Game	View Demo
🔐 Random Password Generator	Security	View Demo
📸 Oldagram (Instagram-like)	Clone	View Demo
👥 Passenger Counter	Utility	View Demo
🔢 Basic Calculator	Utility	View Demo
📏 Metric/Imperial Converter	Utility	View Demo
🔖 Lead Tracker Browser Extension	Extension	View Demo
🖼️ NFT Website	Landing Page	View Demo
💼 Co-working Space Site	Landing Page	View Demo
🎁 Birthday Gift Site	Landing Page	View Demo
🍪 Annoying Cookie Consent	UI Component	View Demo
📚 Book Article	Content	View Demo
🌍 Country Visit Tracker	Utility	View Demo
🎨 Daily Dribble	Portfolio	View Demo
📱 Facebook Signup Clone	Clone	View Demo

---

🛠️ Tech Stack

Core Technologies:

• HTML5 - Semantic markup and structure
• CSS3 - Modern styling with Flexbox, Grid, animations, and gradients
• JavaScript (ES6+) - Interactive functionality and DOM manipulation
• Google Fonts - Poppins & Space Grotesk typography
• GitHub Pages - Free hosting and deployment

---

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• Git installed on your machine
• Code editor (VS Code recommended)

Installation

1. Clone the repository

   git clone https://github.com/ASAD2204/Web-Projects.git

2. Navigate to the project directory

   cd Web-Projects

3. Open the portfolio

   • Simply open index.html in your browser
   • Or use a local development server:

   # Using Python 3
   python -m http.server 8000
   
   # Using Node.js (http-server)
   npx http-server

4. Browse projects

   • Navigate to individual project folders
   • Each project has its own index.html entry point

---

📁 Project Structure

Web-Projects/
├── index.html                          # Portfolio landing page
├── style.css                           # Main stylesheet
├── README.md                           # This file
│
├── AnnoyingCookieConset/              # Cookie consent popup
├── Basic Caculator/                    # Simple calculator
├── BasketBallScoreCounter/            # Basketball score tracker
├── BirthdayGiftSite/                  # Birthday gift page
├── BlackJackGame/                     # BlackJack card game
├── BookArticle/                       # Book article showcase
├── Co-workingSpaceSite/              # Co-working space website
├── CountryVisit/                      # Country visit tracker
├── DailyDribble/                      # Design showcase
├── FacebookSignupPage/                # Facebook signup clone
├── LeadTracker_Browser/              # Lead tracking extension
├── Matric_Imperial _UnitConvertor/   # Unit converter
├── NFT Website/                       # NFT showcase
├── Oldagram-InstagramLike/           # Instagram-like feed
├── PassengerCounter/                  # Passenger counter
├── RandomPasswordGenerator/          # Password generator
└── facebookSignupPage(old)/          # Legacy Facebook clone

---

🎨 Features

Portfolio Landing Page

• ✨ Animated gradient background with floating shapes
• 🎯 Hero section with gradient text and statistics
• 🔍 Live search to filter projects instantly
• 🎴 Project cards with icons, categories, and descriptions
• 🔗 Direct links to live demos and source code
• 📱 Responsive design for mobile, tablet, and desktop
• ♿ Accessibility features with keyboard navigation and ARIA labels

Individual Projects

Each project includes:

• Clean, semantic HTML structure
• Modern CSS with custom properties
• Vanilla JavaScript for interactivity
• Responsive design principles
• Cross-browser compatibility

---

🌐 How to Access Projects

Live Demo URL Pattern

https://asad2204.github.io/Web-Projects/<project-folder-name>

Examples:

• Passenger Counter: https://asad2204.github.io/Web-Projects/PassengerCounter
• BlackJack Game: https://asad2204.github.io/Web-Projects/BlackJackGame
• NFT Website: https://asad2204.github.io/Web-Projects/NFT%20Website

Note: Folder names with spaces are automatically URL-encoded by the browser.

Repository URL Pattern

https://github.com/ASAD2204/Web-Projects/tree/main/<project-folder-name>

---

📝 Adding New Projects

Want to add a new project to the portfolio? Follow these steps:

1. Create a new folder at the repository root

   mkdir "MyNewProject"

2. Add your project files

   • Must include an index.html as the entry point
   • Add CSS, JavaScript, images, etc.

3. Update the portfolio

   • Open index.html in the root directory
   • Add your project to the projectsData array:

   {
     name: "MyNewProject",
     icon: "🎉",  // Choose an emoji icon
     description: "Brief description of your project",
     category: "Category Name"
   }

4. Commit and push

   git add .
   git commit -m "Add MyNewProject"
   git push origin main

5. GitHub Pages will automatically deploy your project within minutes!

---

🎓 Learning Resources

These projects were built while learning web development. If you're learning too, here are some helpful resources:

• MDN Web Docs - Comprehensive web development documentation
• freeCodeCamp - Free coding courses
• JavaScript.info - Modern JavaScript tutorial
• CSS-Tricks - CSS tips and techniques
• Frontend Mentor - Real-world projects to practice

---

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

How to Contribute

1. Fork the repository
2. Create a new branch (git checkout -b feature/AmazingFeature)
3. Make your changes
4. Commit your changes (git commit -m 'Add some AmazingFeature')
5. Push to the branch (git push origin feature/AmazingFeature)
6. Open a Pull Request

---

📜 License

This project is open source and available under the MIT License.

---

👨‍💻 Author

ASAD2204

• GitHub: @ASAD2204
• Portfolio: https://asad2204.github.io/Web-Projects/

---

🌟 Show Your Support

If you found this helpful or inspiring, please consider:

• ⭐ Starring the repository
• 🍴 Forking the project
• 📢 Sharing with others

---

📊 Repository Stats

---

🎉 Thank you for visiting! 🎉

Made with ❤️ by ASAD2204

⬆ Back to Top