Game Hub

About the Project: GameHub is a gaming platform website built with a component-based JavaScript architecture. It showcases match listings, a live match arena, featured games, a store, and a blog — all powered by JSON data files and rendered dynamically through modular JS components.

Key Highlights: Component-driven structure with JSON-powered content, sticky header, mobile-responsive layout, smooth scroll interactions, and a clean dark gaming aesthetic using Tailwind CSS.

Project Details

What's Inside

• Header — Sticky navigation with top bar and mobile menu toggle.
• Hero Section — Full-screen banner with headline, description, and call-to-action.
• Brand Section — Scrollable partner logos with hover opacity effect.
• Latest Matches — Game cards showing category, title, and entry fee.
• Live Match Arena — Match countdown display with team logos and video banner.
• Featured Games — Hover-reveal cards showing game title and platform.
• Store Section — Product cards with category badges, prices, and add-to-cart button.
• Blog Section — Article cards with author, date, excerpt, and read more link.
• Footer — Brand info, links, social icons, and newsletter form.
• Back to Top — Fixed button that appears on scroll and returns to top smoothly.

Key Features

• Component-Based Architecture — Each section is a separate, reusable JavaScript module.
• JSON-Driven Content — All section data is stored in JSON files for easy updates.
• Sticky Header — Header sticks to the top with a shadow effect on scroll.
• Mobile Navigation — Smooth animated menu toggle for small screen devices.
• Hover Interactions — Featured game cards reveal content on hover with smooth transitions.
• Back to Top Button — Appears after scrolling 300px and scrolls smoothly to the top.
• Responsive Layout — Fully responsive design using Tailwind CSS utility classes.

Technologies Used

• HTML5 — Semantic markup with modular root elements for each component.
• Tailwind CSS (CDN) — Utility-first CSS framework for layout and styling.
• JavaScript (ES6 Modules) — Component rendering and DOM manipulation using modules.
• JSON — Structured data files for all section content and configuration.
• Ionicons — Icon library used for UI icons throughout the project.
• Google Fonts — Oxanium and Poppins fonts for a modern gaming look.

Project Structure

game-hub/
│
├── index.html                 # Main HTML with root elements for components
│
├── assets/
│   ├── data/
│   │   ├── header.json        # Navigation menu and top bar data
│   │   ├── hero.json          # Hero section content
│   │   ├── brand.json         # Partner logos
│   │   ├── latest.json        # Latest matches data
│   │   ├── live.json          # Live match information
│   │   ├── featured.json      # Featured games
│   │   ├── shop.json          # Store products
│   │   ├── blog.json          # Blog posts
│   │   └── footer.json        # Footer content
│   │
│   ├── js/
│   │   ├── app.js             # Main entry point, initializes all components
│   │   ├── header.js          # Header render with sticky scroll and mobile menu
│   │   ├── hero.js            # Hero section render
│   │   ├── brand.js           # Brand partners render
│   │   ├── latest.js          # Latest matches render
│   │   ├── live.js            # Live match arena render
│   │   ├── featured.js        # Featured games render
│   │   ├── shop.js            # Store section render
│   │   ├── blog.js            # Blog section render
│   │   ├── footer.js          # Footer render
│   │   └── backTop.js         # Back to top button functionality
│   │
│   └── images/                # Background images, game covers, blog images, logos
│
└── README.md                  # Project documentation
    

Quick Start

1. Clone the repository:

   git clone https://github.com/nawazdevx/game-hub.git

  <li>
    <strong>Open the project:</strong>
    <ul>
      <li>Open <code>index.html</code> directly in your browser</li>
      <li>Or run a local server:</li>
    </ul>
    <pre><code>python -m http.server 3000</code></pre>
    Then visit <code>http://localhost:3000</code>
  </li>

  <li>
    <strong>Start Customizing:</strong>
    <ul>
      <li>Update hero text and background in <code>hero.json</code></li>
      <li>Add or edit game cards in <code>latest.json</code> and <code>featured.json</code></li>
      <li>Manage store products in <code>shop.json</code></li>
      <li>Edit blog posts in <code>blog.json</code></li>
      <li>Update navigation links and logo in <code>header.json</code></li>
    </ul>
  </li>
</ol>

License: This project is licensed under the MIT License.

Contact: Connect with me on LinkedIn or visit my Portfolio.

Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.

Project Preview

Live project ➜ Live Demo