Skip to content

v2.0.0 - Real-Time Discord Integration & Complete Redesign

Latest

Choose a tag to compare

@KaloudasDev KaloudasDev released this 19 Feb 23:28
· 7 commits to main since this release

v2.0.0 - Real-Time Discord Integration & Complete Redesign

February 20, 2026

Major New Features

Live Discord Presence

  • Real-time status tracking (Online, Idle, DND, Offline)
  • Auto-refresh every 5 seconds via Lanyard REST API
  • Dynamic status indicators with colored dots and pulse animations
  • Instant status updates without page refresh

Spotify Integration

  • Live Now Playing display with high-quality album artwork
  • Real-time song details and artist information
  • Automatic image fallback on load errors
  • Smooth transitions between tracks

Game Activity Tracking

  • Live game presence display with custom artwork
  • Game details and state information
  • Support for all Discord game activities
  • Activity type detection (playing, listening, watching)

Complete Visual Redesign

Animated Gradient Orbs Background

  • Three floating gradient orbs with smooth 20s animations:
    • Orb 1: Neon yellow (#dbf602) at top-left
    • Orb 2: Discord blurple (#5865f2) at bottom-right
    • Orb 3: Soft red (#ff5e5e) centered
  • 80px blur effect for soft, dreamy glow
  • Independent animation delays for dynamic movement

Glass Morphism Design System

  • Backdrop blur (12px) on all cards and containers
  • Semi-transparent backgrounds with rgba values
  • Subtle border glows with accent colors
  • Smooth hover effects with scale transforms (1.02)
  • Box shadows for depth (0 20px 40px -10px)

Dark Theme Excellence

  • Deep navy background (#0a0f1e) for eye comfort
  • Optimized contrast ratios for readability
  • Consistent neon yellow (#dbf602) accent throughout
  • Smooth theme transitions (0.3s ease)

Technical Foundation

Framework Migration

  • Complete migration to Next.js 14
  • Optimized image loading with next/image configuration
  • Improved build performance and code splitting
  • Better development experience with Fast Refresh

Enhanced Responsiveness

  • Refined mobile breakpoints for all screen sizes
  • Optimized card sizing on small devices (440px max-width)
  • Improved touch targets for mobile users
  • Flexible grid layouts that adapt to any viewport

Performance Optimizations

  • Reduced bundle size with tree shaking
  • Optimized font loading with next/font
  • Efficient re-rendering with React hooks
  • 5-second Discord status refresh interval

Project Structure

linkhub-website/
├── app/
│   ├── components/
│   │   ├── Footer.js     # Social links footer
│   │   └── Navbar.js      # Minimal navbar with logo
│   ├── globals.css        # Complete styling system
│   ├── layout.js          # Root layout with metadata
│   └── page.js            # Main page with Discord logic
├── next.config.mjs        # Next.js configuration
└── package.json           # Dependencies and scripts

Full Changelog

New Features:

  • Real-time Discord status tracking
  • Live Spotify activity with album art
  • Game presence display
  • Animated gradient orbs background
  • Glass morphism card design
  • Complete dark theme overhaul

Improvements:

  • Migrated to Next.js 14 framework
  • Enhanced mobile responsiveness
  • Optimized performance and loading
  • Better error handling for images
  • Smooth animations throughout

Fixes:

  • Cross-browser compatibility
  • Font loading optimization
  • Icon alignment issues
  • Mobile touch targets
  • Image fallback handling

Credits