Chihuahua|
Projects

TCG Hub

Landing page for Trading Card Game managers with glassmorphism design and per-game brand theming

Andres Aguilar
Andres Aguilar
March 2, 2026
  • nextjs
  • react
  • typescript
  • scss
  • tcg
Visit projectavsolem.com/tcg
TCG Hub - Image 1

Overview

A polished hub page serving as the entry point to multiple Trading Card Game management tools. Features glassmorphism cards with per-game brand color theming, subtle hover animations, and responsive layout.

Features

  • 5 TCG Games: Yu-Gi-Oh!, Pokémon, Magic: The Gathering, Digimon, One Piece
  • Glassmorphism Design: Backdrop blur, gradient borders, accent glow effects
  • Brand Theming: Each card uses CSS custom properties for its unique accent color
  • Coming Soon States: Graceful handling of unreleased game managers
  • Responsive Grid: 3 columns → 2 columns → 1 column

Technical Details

  • CSS Custom Properties for per-card color theming without duplicating selectors
  • SCSS Modules for complex pseudo-elements and keyframe animations
  • Next.js Image optimization for all logos
  • Touch-device optimizations (disables hover transforms for mobile)