Hacker Hub - Web Development Projects Portfolio 🚀

A collection of web development projects showcasing skills in HTML, CSS, JavaScript, and Bootstrap

📋 Overview

Hacker Hub is a portfolio website containing multiple web development projects, ranging from simple HTML/CSS designs to more complex JavaScript implementations. The projects demonstrate progressive learning in web development techniques and frameworks.

🌐 Live Demo

View the Hacker Hub Portfolio

🔗 Repository

GitHub Repository

📂 Project Structure

The repository is organized into multiple tasks and challenges:

project/
├── index.html                      # Main landing page
├── flip card game/                 # Memory matching card game
├── hash calculator in js/          # Cryptographic hash calculator
├── malware game/                   # JavaScript game simulation
├── task1/                          # Basic portfolio webpage
├── task2/                          # Frontend mentor challenges
│   ├── challenge1/                 # Profile card design
│   └── challenge2/recipe-page-main # Recipe page design
├── task3/                          # Coffee shop website
├── task4/                          # Sound Hub website (custom CSS)
├── task5/                          # Sound Hub website (Bootstrap)
├── task6/                          # JavaScript challenges
├── task8/                          # Todo list application
└── node_modules/                   # Dependencies (Bootstrap, Popper.js)

🚀 Projects Description

🎮 Interactive Projects

1. 🃏 Flip Card Game

   • Interactive memory matching game built with HTML, CSS, and JavaScript
   • Tests memory skills by flipping cards to find matching pairs

2. 🔐 Hash Calculator

   • Cryptographic hash function generator
   • Converts input text to various hash formats

3. 💻 Malware Game

   • Simulation game with terminal-like interface
   • JavaScript-based interactive experience

📚 Learning Tasks

4. 👤 Task 1: Basic Portfolio

   • Simple personal portfolio webpage
   • Introduction to HTML structure and basic styling

5. 🎨 Task 2: Frontend Mentor Challenges

   • Challenge 1: Social links profile card
   • Challenge 2: Recipe page with detailed styling

6. ☕ Task 3: Coffee Shop Website

   • Basic responsive design for a coffee shop
   • Implementation of CSS styling techniques

7. 🎵 Task 4: Sound Hub Website

   • Music hub interface with custom styling
   • Advanced CSS implementation

8. 🅱️ Task 5: Bootstrap Version

   • Rebuild of Sound Hub using Bootstrap framework
   • Demonstration of framework-based development

9. 📝 Task 6: JavaScript Problems

   • Collection of JavaScript programming challenges
   • Solutions to common coding problems

10. ✅ Task 8: Todo List

    • Task management application
    • CRUD operations with JavaScript

💻 Technologies Used

✨ Features

• 📱 Responsive design across all projects
• 🖱️ Interactive JavaScript elements
• 🎯 Modern UI/UX patterns
• 📈 Progressive complexity from basic to advanced concepts

🚦 Getting Started

To run this project locally:

1. Clone the repository

   git clone https://github.com/Amr-Khaled-Ahmed/GDG-front-end.git

2. Navigate to the project directory

   cd GDG-front-end

3. Open index.html in your browser

   • You can use a local development server or simply open the file directly

📦 Dependencies

• 
• 
• 

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

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

📬 Contact

• Amr Khaled Ahmed
• GitHub: Amr-Khaled-Ahmed

---

_{Built with ❤️ by Amr Khaled Ahmed}