GameHub Platform

About Project: A gaming community platform where players create matches, compete online, and connect with gamers worldwide. Built with modular JavaScript components, JSON data structure for easy content management, Tailwind CSS for responsive styling, and smooth scroll interactions. Features live match displays, gaming store, blog section, and sticky navigation all organized with clean separation of concerns for easy updates, and much more.

What I learned: Implemented modular ES6 component architecture with separate render functions, used async/await for JSON data fetching, created dynamic content rendering with template literals, and built mobile-first responsive layouts using Tailwind utility classes, and much more.

Personal Note: I started building HTML, CSS, and JavaScript projects in 2022.
At that time, I focused on learning first and began uploading to GitHub recently.
Now I'm working with React.js and Next.js, and seeking opportunities as a frontend or web developer.

Project More Details

What's Inside

• Top Bar - Promotional banner with countdown days and social media links (desktop only)
• Sticky Header - Fixed navigation that appears on scroll with logo and menu links
• Mobile Menu - Slide-down navigation with smooth animation and close button
• Hero Section - Full-screen background image with title, description, and call-to-action button
• Brand Partners - Horizontal scrollable partner logos with hover opacity effects
• Latest Matches - Game cards with category badges, titles, and entry fees in overlay design
• Live Arena - Video banner with play button, team logos, and match countdown timer
• Featured Games - Grid layout cards with hover overlay effects showing game titles and platforms
• Gaming Store - Product cards with images, category badges, prices, and cart buttons
• Blog Section - News articles with author info, dates, excerpts, and read more links
• Footer - Brand description, product links, help resources, social icons, and newsletter signup
• Back to Top - Floating button that appears after scrolling down the page

Technologies Used

• HTML5 - Semantic structure with root elements for component injection
• Tailwind CSS - Utility-first styling with responsive breakpoints and custom configuration
• JavaScript (ES6+) - Modular components with async/await, template literals, and DOM manipulation
• JSON - Structured data files for all content sections (header, hero, blog, shop, etc.)
• Google Fonts - Oxanium and Poppins font families for gaming aesthetic
• Ionicons - Icon library for UI elements and social media
• ES6 Modules - Import/export syntax for component separation
• Fetch API - Asynchronous data loading from JSON files

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
    

Key Features

• Modular Architecture - Separate JavaScript files for each section with clean component structure
• JSON-Driven Content - All content stored in JSON files for easy updates without touching code
• Fully Responsive - Mobile-first design with Tailwind breakpoints for all screen sizes
• Sticky Navigation - Header becomes fixed with shadow after scrolling 120px down
• Mobile Menu Animation - Smooth slide-down menu with dynamic height calculation and icon toggle
• Horizontal Scrolling - Touch-friendly card carousels for brands, games, and products
• Hover Effects - Image zoom, overlay transitions, and color changes on cards and buttons
• Background Overlays - Semi-transparent black backgrounds on hero and live sections
• Interactive Elements - Play button on video, cart buttons on products, read more links
• Back to Top Button - Floating button with smooth scroll appears after 300px scroll
• Newsletter Form - Email subscription input with submit button in footer
• Social Media Links - Color-coded social icons with brand colors
• Easy Customization - Tailwind utilities and JSON structure allow quick styling and content changes

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 content in JSON files inside <code>assets/data/</code> folder</li>
      <li>Modify Tailwind classes in component files inside <code>assets/js/</code></li>
      <li>Replace images in <code>assets/images/</code> folder</li>
      <li>Update meta tags and title in <code>index.html</code></li>
    </ul>
  </li>
</ol>

Customization

• Text Content: Edit JSON files in assets/data/ - update game titles, descriptions, prices, blog posts, and footer information
• Colors: Modify Tailwind classes in component render functions or update the Tailwind config in index.html

  tailwind.config = {
    theme: {
      extend: {
        colors: {
          primary: '#facc15',     // Yellow accent color
          dark: '#171717',        // Dark background
        }
      }
    }
  }

• Images: Replace files inside assets/images/ with your own gaming photos and keep the same filenames, or update the JSON file paths
• Fonts: Change Google Fonts link in HTML <head> and update the fontFamily in Tailwind config
• Navigation Menu: Add or remove menu items by editing header.json menu array
• Games/Products: Add new items by duplicating objects in respective JSON arrays (latest.json, featured.json, shop.json)
• Blog Posts: Update blog.json with new articles, images, dates, and excerpts
• Footer Links: Modify product links, help resources, and social media in footer.json
• Components: Create new sections by adding a new JS file in assets/js/, importing it in app.js, and adding a root element in index.html

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

You can view the live project here ➜ Live Demo