Skip to content

Latest commit

 

History

History
130 lines (92 loc) · 6.02 KB

README.md

File metadata and controls

130 lines (92 loc) · 6.02 KB

Home of The Games - Interactive Gaming Portal

Welcome to Home of The Games, an engaging and visually stunning web-based gaming portal developed by [Ibrahim Ahmed Abdelazim]. This project showcases a collection of interactive games like Maze and Tic-Tac-Toe, built with modern web technologies, and highlights smooth animations and transitions to create an immersive user experience.

🚀 Overview

"Home of The Games" is a dynamic web application that serves as a hub for fun, browser-based games. The portal features a sleek, user-friendly interface with captivating animations, kinetic effects, and seamless transitions to enhance user engagement. Whether you're navigating the menu, playing a game, or exploring the site, the focus on visual fluidity and interactivity makes this project stand out.

🎮 Features

  • Interactive Games: Play classic games like Maze and Tic-Tac-Toe directly in your browser.
  • Stunning Animations: Smooth kinetic effects, smoke animations, and button transitions for an engaging experience.
  • Responsive Design: Fully responsive layout that works seamlessly across desktops, tablets, and mobile devices.
  • Dark Mode Toggle: A stylish dark mode option for a personalized user experience.
  • Navigation Menu: A collapsible hamburger menu with sleek animations for easy navigation.
  • Loading Animation: A visually appealing loading text animation that builds anticipation before gameplay.

🛠 Technologies Used

  • HTML5: For structuring the web pages and games.
  • CSS3: For styling, including custom animations, transitions, and responsive design.
    • JavaScript: For interactivity, game logic, and dynamic animations.
  • Font Awesome: For iconic buttons and visual enhancements.

📁 Project Structure

The project is organized into clear directories for easy maintenance and scalability. Here’s a breakdown of the folder structure:

IBRAHIMAHMEDABDELAZIM_HOME_OF_THE_GAMES/
│
├── css/                    # CSS files for styling
│   ├── footer.css          # Styles for the footer section
│   ├── global.css          # Global styles for the entire site
│   ├── header.css          # Styles for the header and navigation
│   ├── maze.css            # Styles specific to the Maze game
│   ├── register.css        # Styles for the registration page
│   ├── singin.css          # Styles for the login page
│   └── tic.css             # Styles for the Tic-Tac-Toe game
│
├── html/                   # HTML files for different pages and games
│   ├── Maze.html           # Maze game page
│   ├── register.html       # Registration page
│   ├── singin.html         # Login page
│   └── Tic-tac-toc.html    # Tic-Tac-Toe game page
│
├── images/                 # Image assets for the project
│
├── JS/                     # JavaScript files for interactivity
│   ├── Maze.js             # Logic for the Maze game
│   └── Tic-tac-toc.js      # Logic for the Tic-Tac-Toe game
│
├── index.html              # Main entry point of the application
├── main.js                 # Core JavaScript for animations and site functionality
└── README.md               # This file (project documentation)

🌟 Highlighted Animations and Transitions

The project emphasizes visually appealing animations and transitions to create a polished and professional user experience. Here are some key features:

1. Kinetic Effects

  • The kinetic class in the header and main sections uses CSS animations to create fluid, particle-like motion, giving the site a dynamic feel.
  • These effects are lightweight and optimized for performance, ensuring smooth rendering across devices.

2. Smoke Animation

  • A smokeCanvas element in the navigation uses JavaScript and Canvas API to generate a mesmerizing smoke-like animation, adding a modern and playful touch to the navigation bar.

3. Button Transitions

  • Buttons (e.g., "Let's play Games!", navigation links) feature hover and click animations with CSS transitions, including scaling, color changes, and shadow effects for a responsive feel.
  • The hamburger menu toggle (open/close buttons) includes smooth rotations and transitions for an intuitive user experience.

4. Loading Text Animation

  • The loading-text element animates from "0%" to "100%" with a smooth, incremental effect, building excitement before the user interacts with the games.

5. Dark Mode Toggle

  • The dark mode toggle button features a subtle animation when clicked, smoothly transitioning the site’s color scheme for a seamless user experience.

🧑‍💻 Getting Started

Prerequisites

  • A modern web browser (Chrome, Firefox, Safari, etc.)
  • Basic understanding of HTML, CSS, and JavaScript (optional for customization)

Installation

  1. Clone or download this repository to your local machine.
  2. Open index.html in your web browser to launch the portal.

Running the Games

  • Navigate to the games via the menu:
    • Click "Maze" to play the Maze game.
    • Click "Tic Tac Toe" to play the Tic-Tac-Toe game.
  • Use the "Login" and "Register" links to explore authentication pages (optional for future expansion).

🤝 Contributing

Contributions are welcome! If you’d like to enhance the animations, add new games, or improve the codebase, feel free to:

  1. Fork this repository.
  2. Create a new branch for your feature or bug fix.
  3. Submit a pull request with your changes.

Please ensure your code follows the project’s structure and maintains the focus on animations and transitions.

📜 License

This project is developed by Ibrahim Ahmed Abdelazim and is licensed under the MIT License (or specify your preferred license). © 2025.

🙏 Acknowledgments

  • Inspired by the love for interactive web experiences and classic games.
  • Special thanks to the open-source community, including Font Awesome for icons and CDNJS for libraries.