From 9579b729ec02ccf8ef5ca00d1c37edf272aa8af8 Mon Sep 17 00:00:00 2001
From: Mackenzie <slaylish@tuta.io>
Date: Fri, 9 Jan 2026 16:25:30 +0100
Subject: [PATCH] Redesign profile page with Tailwind and improved UI

Migrated the profile page to use Tailwind CSS with a custom config for a macOS-inspired aesthetic. Refactored HTML structure for a modern, responsive layout, replaced FontAwesome with Phosphor icons, and improved accessibility and styling. Updated script.js for new DOM structure, enhanced Spotify integration, and removed legacy UI elements. Added package.json and tailwind.config.js for local Tailwind builds.
---
 index.html         |  644 +++++++++++++-------------
 package.json       |   18 +
 script.js          | 1071 +++++++++++++++++++++++++-------------------
 styles.css         | 1023 +-----------------------------------------
 tailwind.config.js |   49 ++
 5 files changed, 1012 insertions(+), 1793 deletions(-)
 create mode 100644 package.json
 create mode 100644 tailwind.config.js
diff --git a/index.html b/index.html
index a649714..a7fe351 100644
--- a/index.html
+++ b/index.html
@@ -1,354 +1,356 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark scroll-smooth">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Stuffmaker</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="styles.css">
-        <meta name="description" content="Stuffmaker's personal Discord profile page with dynamic activities and Spotify integration.">
+    <meta name="description"
+        content="Stuffmaker's personal Discord profile page with dynamic activities and Spotify integration.">
     <meta name="keywords" content="Stuffmaker, Discord, Profile, Spotify, Activities, Webpage">
     <meta name="author" content="Stuffmaker">
     <meta property="og:title" content="Stuffmaker's Discord Profile">
     <meta property="og:description" content="Check out Stuffmaker's personal Discord profile">
     <meta property="og:image" content="/img/logo.png">
     <link rel="icon" href="/img/logo.png" type="image/x-icon">
+
+    <!-- Fonts & Icons -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=cal-sans:wght@400;500;600&family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap"
+        rel="stylesheet">
+
+    <!-- Custom CSS (Cursor, Particles) -->
+    <!-- Tailwind CDN (Restored for reliable styling) -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'], // SF Pro like
+                        display: ['Outfit', 'sans-serif'],
+                    },
+                    colors: {
+                        // Override Zinc to force macOS aesthetic on script-generated elements
+                        zinc: {
+                            50: '#f9fafb',
+                            100: '#f4f5f7',
+                            200: '#e4e7eb',
+                            300: '#d5d9df',
+                            400: '#9da3ae', // Text muted
+                            500: '#767c88',
+                            600: '#525866',
+                            700: 'rgba(255, 255, 255, 0.1)', // Border (used by script) -> Translucent white
+                            800: 'rgba(30, 30, 30, 0.4)',    // Component Bg (used by script) -> Translucent black
+                            900: 'rgba(20, 20, 20, 0.6)',    // Darker surface
+                            950: '#000000',                  // Background -> Pure black
+                        },
+                        // MacOS inspired grays
+                        'mac': {
+                            'bg': '#000000',
+                            'surface': '#1c1c1e',
+                            'glass': 'rgba(30, 30, 30, 0.6)',
+                            'border': 'rgba(255, 255, 255, 0.12)',
+                            'accent': '#0A84FF',
+                        },
+                        discord: {
+                            bg: '#36393f',
+                            dark: '#2f3136',
+                            modifier: '#202225',
+                            text: '#dcddde',
+                            muted: '#72767d',
+                            green: '#43b581',
+                            yellow: '#faa61a',
+                            red: '#f04747',
+                            gray: '#747f8d',
+                            blurple: '#5865F2'
+                        },
+                        spotify: {
+                            green: '#1DB954',
+                            dark: '#191414'
+                        }
+                    },
+                    boxShadow: {
+                        'glass': '0 8px 32px 0 rgba(0, 0, 0, 0.37)',
+                    },
+                    animation: {
+                        'fade-in': 'fadeIn 0.5s ease-out forwards',
+                        'flow': 'flow 15s ease infinite',
+                    },
+                    keyframes: {
+                        fadeIn: {
+                            '0%': { opacity: '0', transform: 'scale(0.95)' },
+                            '100%': { opacity: '1', transform: 'scale(1)' },
+                        },
+                        flow: {
+                            '0%': { backgroundPosition: '0% 50%' },
+                            '50%': { backgroundPosition: '100% 50%' },
+                            '100%': { backgroundPosition: '0% 50%' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style type="text/tailwindcss">
+        @layer utilities {
+            .mac-window {
+                @apply bg-zinc-900/60 backdrop-blur-3xl border border-white/5 shadow-2xl rounded-[2.5rem] ring-1 ring-white/10;
+            }
+            .mac-card {
+                @apply bg-white/5 backdrop-blur-xl border border-white/5 rounded-3xl hover:bg-white/10 transition-all duration-500 ease-out;
+            }
+            .mac-btn {
+                @apply bg-white/5 hover:bg-white/10 active:bg-white/5 transition-all rounded-2xl border border-white/5 backdrop-blur-md;
+            }
+            .liquid-bg {
+                background: linear-gradient(-45deg, #000000, #18181b, #0f172a, #000000);
+                background-size: 400% 400%;
+                animation: flow 15s ease infinite;
+            }
+        }
+    </style>
 </head>
-    <script src="script.js"></script>
-<body>
-    <div id="site-preloader" style="position:fixed;z-index:9999;top:0;left:0;width:100vw;height:100vh;background:rgba(20,20,30,0.95);display:flex;align-items:center;justify-content:center;">
-    <div>
-        <i class="fas fa-spinner fa-spin" style="font-size:3rem;color:#fff;"></i>
-        <p style="color:#fff;text-align:center;">Loading...</p>
+
+<body
+    class="liquid-bg text-zinc-200 font-sans min-h-screen flex items-center justify-center p-4 selection:bg-indigo-500 selection:text-white overflow-x-hidden antialiased relative">
+
+    <!-- Ambient Liquid Orbs -->
+    <div
+        class="fixed top-[-10%] left-[-10%] w-[500px] h-[500px] bg-blue-600/20 rounded-full blur-[100px] pointer-events-none mix-blend-screen animate-pulse z-0">
     </div>
-</div>
-    <div class="floating-particles" id="particles"></div>
-    
-    <div class="container">
-        <div class="glass-card">
-            <div id="loading" class="loading">
-                <i class="fas fa-spinner fa-spin"></i>
-                <p>Loading Discord profile...</p>
-            </div>
-            
-            <div id="error" class="error" style="display: none;">
-                <i class="fas fa-exclamation-triangle"></i>
-                <p>Failed to load profile data</p>
+    <div class="fixed bottom-[-10%] right-[-10%] w-[500px] h-[500px] bg-purple-600/20 rounded-full blur-[100px] pointer-events-none mix-blend-screen animate-pulse z-0"
+        style="animation-delay: 2s"></div>
+
+    <!-- Main Container -->
+    <div class="container max-w-2xl w-full relative z-10">
+
+        <!-- Profile Card -->
+        <div class="mac-window p-8 md:p-12 relative overflow-hidden">
+
+            <!-- Error State -->
+            <div id="error"
+                class="hidden flex flex-col items-center justify-center py-4 space-y-2 mb-4 bg-red-500/10 border border-red-500/20 rounded-lg">
+                <div class="flex items-center gap-2 text-red-500">
+                    <i class="ph-fill ph-warning"></i>
+                    <p class="text-sm">Failed to retrieve status data</p>
+                </div>
             </div>
-            
-            <div id="profile" style="display: none;">
-                <div class="profile-header">
-                    <div class="avatar-container">
-                            <img id="avatar" class="avatar" src="/img/loader.gif" alt="Avatar">
-                            <div id="status" class="status-indicator" style="margin-top:-30px;"></div>
+
+            <!-- Profile Content -->
+            <div id="profile" class="space-y-8">
+
+                <!-- Header -->
+                <div class="profile-header flex flex-col items-center relative">
+                    <div class="avatar-container relative group cursor-pointer" id="avatar-container">
+                        <img id="avatar"
+                            class="avatar relative w-24 h-24 rounded-full ring-4 ring-zinc-900 shadow-xl object-cover bg-zinc-800"
+                            src="/img/loader.gif" alt="Avatar">
+
+                        <div id="status"
+                            class="status-indicator absolute bottom-0.5 right-0.5 w-5 h-5 rounded-full ring-4 ring-zinc-900 bg-zinc-500 shadow-sm"
+                            style="margin: 0;"></div>
+                    </div>
+
+                    <div class="text-center mt-4">
+                        <h1 id="username" class="font-display text-2xl font-semibold text-zinc-100 tracking-tight">
+                            Stuffmaker</h1>
+                        <div id="discriminator" class="font-mono text-xs text-zinc-500 hidden"></div>
+                        <!-- Platform Indicators -->
+                        <div class="platform-indicators flex items-center justify-center gap-2 mt-3"
+                            id="platform-indicators"></div>
+                    </div>
+                </div>
+
+                <!-- Bento Grid Layout -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+                    <!-- Bio Section (Full Width) -->
+                    <div class="bio-section col-span-1 md:col-span-2">
+                        <div class="mac-card p-5">
+                            <div class="flex items-center gap-2 mb-2 text-zinc-400">
+                                <i class="ph-fill ph-fingerprint text-base"></i>
+                                <span class="text-[10px] font-bold uppercase tracking-wider">About Me</span>
+                            </div>
+                            <div class="bio-text text-zinc-300 text-sm leading-relaxed" id="bio-text">
+                                <script>
+                                    document.getElementById('bio-text').innerText = atob('SSBkbyBzdHVmZiBvbiB0aGUgaW50ZXJuZXQ='); 
+                                </script>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Activities Section -->
+                    <div id="activities" class="activity-section col-span-1 md:col-span-2 space-y-3">
+                        <!-- Dynamic Activities populated by JS -->
+                    </div>
+
+                    <!-- Spotify / LastFM Section (Full Width if active) -->
+                    <div class="col-span-1 md:col-span-2">
+                        <!-- Spotify -->
+                        <div id="spotify"
+                            class="spotify-section hidden relative overflow-hidden rounded-3xl bg-[#1DB954] text-white p-5 shadow-2xl group hover:shadow-[#1DB954]/30 hover:shadow-2xl transition-all duration-300 ring-1 ring-white/10">
+                            <div class="absolute top-0 right-0 p-4 opacity-20">
+                                <i
+                                    class="ph-fill ph-spotify-logo text-6xl transform rotate-12 -translate-y-2 translate-x-2"></i>
+                            </div>
+
+                            <div class="relative z-10 flex gap-4 items-center spotify-content">
+                                <div class="album-cover-container relative group/cover shrimp-card"
+                                    style="box-shadow: 0 8px 24px rgba(0,0,0,0.3);">
+                                    <img id="album-cover"
+                                        class="w-16 h-16 rounded-md object-cover shadow-lg transition-transform hover:scale-105 cursor-pointer"
+                                        src="/img/loader.gif" alt="Album Cover">
+                                </div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex items-center gap-2 mb-1">
+                                        <div class="h-1.5 w-1.5 rounded-full bg-white animate-pulse"></div>
+                                        <span class="text-[0.65rem] font-bold uppercase tracking-wider opacity-90">Now
+                                            Playing</span>
+                                    </div>
+                                    <div id="song-title"
+                                        class="font-display font-bold text-lg truncate leading-tight mb-0.5"></div>
+                                    <div id="song-artist" class="text-sm opacity-90 truncate font-light"></div>
+                                    <div id="album-tooltip" class="hidden"></div>
+                                </div>
+                            </div>
+
+                            <!-- Progress -->
+                            <div class="relative mt-4 z-10">
+                                <div class="flex justify-between text-[0.65rem] font-medium opacity-80 mb-1 font-mono">
+                                    <span id="current-time">0:00</span>
+                                    <span id="total-time">0:00</span>
+                                </div>
+                                <div class="h-1 bg-black/20 rounded-full overflow-hidden backdrop-blur-sm">
+                                    <div id="progress-bar"
+                                        class="h-full bg-white rounded-full transition-all duration-1000 ease-linear w-0">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Sync Indicator (Hidden but present for logic) -->
+                            <div id="sync-indicator" class="hidden"></div>
                         </div>
-                     <div id="username" class="username"></div>
-                     <div id="discriminator" class="discriminator"></div>
-                <div class="platform-indicators" id="platform-indicators">
-    <!-- Platform icons will be dynamically added here -->
-</div>
+
+                        <!-- LastFM -->
+                        <div id="lastfm"
+                            class="hidden rounded-lg bg-[#b90000]/10 border border-[#b90000]/20 p-5 relative overflow-hidden">
+                            <div class="absolute top-0 right-0 p-4 opacity-20">
+                                <i class="ph-fill ph-music-note text-6xl transform -rotate-12 text-[#b90000]"></i>
+                            </div>
+                            <div class="relative z-10 flex gap-4 items-center lastfm-content">
+                                <img id="lastfm-album-cover"
+                                    class="w-14 h-14 rounded-md object-cover shadow-sm border border-[#b90000]/20"
+                                    src="" alt="Album Cover" />
+                                <div>
+                                    <div class="text-[0.65rem] font-bold uppercase tracking-wider text-[#b90000] mb-1">
+                                        Last
+                                        Played</div>
+                                    <div id="lastfm-song-title" class="font-medium text-zinc-200 text-lg truncate">
+                                    </div>
+                                    <div id="lastfm-song-artist" class="text-sm text-zinc-400 truncate"></div>
+                                    <div id="lastfm-album-tooltip" class="hidden"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
-                <div class="bio-section">
-    <div class="bio-card">
-        <div class="bio-title">
-            <i class="fas fa-user"></i>
-            About Me
-        </div>
-        <div class="bio-text" id="bio-text">
-           <script>
-document.getElementById('bio-text').innerText = atob('SSBkbyBzdHVmZiBvbiB0aGUgaW50ZXJuZXQ='); 
-// (Above: Fun logic which decrypts atob. Comment this line and uncomment the next line to use normal text)
-//          document.getElementById('bio-text').innerText = 'This is a description text'; 
-           </script><!--Bio text-->
+                <!-- Links Section -->
+                <div class="links-section mt-6">
+                    <div class="links-grid grid grid-cols-4 md:grid-cols-5 gap-3" id="links-grid">
+                        <!-- Buttons generated by JS -->
+                    </div>
+                </div>
+            </div>
         </div>
-    </div>
-</div>
-
-                <div id="activities" class="activity-section"></div>
-                
-                <div id="spotify" class="spotify-section" style="display: none;">
-                    <div id="lastfm" style="display:none;">
-    <div class="lastfm-content">
-        <img id="lastfm-album-cover" class="album-cover" src="" alt="Album Cover" />
-        <div>
-            <div id="lastfm-song-title"></div>
-            <div id="lastfm-song-artist"></div>
-            <div id="lastfm-album-tooltip" class="album-tooltip"></div>
+
+        <!-- Footer / Version -->
+        <div id="version-info"
+            class="mt-6 flex items-center justify-center gap-2 text-xs text-zinc-600 hover:text-zinc-400 transition-colors cursor-pointer group">
+            <i class="ph-fill ph-git-branch group-hover:text-zinc-300 transition-colors"></i>
+            <span id="commit-hash" class="font-mono">Loading...</span>
         </div>
     </div>
-</div>
-    <div class="spotify-header">
-        <i class="fab fa-spotify spotify-icon"></i>
-        <span>Listening to Spotify</span>
-      <!-- class="sync-indicator"--><div id="sync-indicator"></div>
-    </div>
-    <div class="spotify-content spotify-transition">
-        <div class="album-cover-container">
-            <img id="album-cover" class="album-cover" src="/img/loader.gif" alt="Album Cover">
-            <div class="tooltip" id="album-tooltip"></div>
-            <!-- Download button removed from here -->
-        </div>
-        <div class="song-details">
-            <div class="song-info">
-                <div id="song-title" class="song-title"></div>
-                <div id="song-artist" class="song-artist"></div>
-            </div>
-            <div class="progress-container">
-                <div id="progress-bar" class="progress-bar"></div>
+
+
+    <!-- Modals -->
+    <!-- Spotify Modal -->
+    <div id="modal-overlay"
+        class="fixed inset-0 z-[100] bg-black/80 backdrop-blur-md flex items-center justify-center opacity-0 invisible transition-all duration-300">
+        <div
+            class="modal-content relative mac-window p-6 max-w-sm w-[90vw] transform scale-90 transition-all duration-300">
+            <button id="modal-close"
+                class="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-white text-black flex items-center justify-center hover:scale-110 transition-transform shadow-lg z-20">
+                <i class="ph-bold ph-x text-sm"></i>
+            </button>
+            <div class="relative aspect-square mb-4 rounded-xl overflow-hidden shadow-2xl">
+                <img id="modal-image" class="w-full h-full object-cover" src="/img/loader.gif" alt="Album Cover">
             </div>
-            <div class="progress-time">
-                <span id="current-time">0:00</span>
-                <span id="total-time">0:00</span>
+            <div class="modal-info text-center">
+                <div id="modal-song-title" class="font-display font-bold text-xl text-white mb-1"></div>
+                <div id="modal-song-details" class="text-gray-400 text-sm mb-4"></div>
+                <button id="download-cover-btn"
+                    class="w-full py-2.5 rounded-xl bg-[#1db954] text-white font-medium text-sm hover:bg-[#1ed760] transition-colors flex items-center justify-center gap-2">
+                    <i class="ph-bold ph-download-simple"></i> Download Cover
+                </button>
             </div>
         </div>
     </div>
-</div>
 
-                <div class="links-section">
-    <div class="links-grid" id="links-grid">
-        <!-- Buttons will be generated here -->
-    </div>
-</div>
+    <!-- Avatar Modal -->
+    <div id="avatar-modal-overlay"
+        class="fixed inset-0 z-[100] bg-black/80 backdrop-blur-md flex items-center justify-center opacity-0 invisible transition-all duration-300">
+        <div class="avatar-modal-content relative flex flex-col items-center">
+
+            <div class="relative group">
+                <img id="avatar-modal-image"
+                    class="w-64 h-64 md:w-80 md:h-80 rounded-full border-4 border-white/10 shadow-2xl object-cover bg-gray-900"
+                    src="/img/loader.gif" alt="Avatar">
             </div>
-        </div>
-        <div class="version-info" id="version-info" style="cursor: pointer;">
-    <i class="fas fa-code-branch"></i>
-    <span id="commit-hash">Loading...</span>
-</div>
-    </div>
 
-    <div id="modal-overlay" class="modal-overlay">
-    <div class="modal-content">
-        <img id="modal-image" class="modal-image" src="/img/loader.gif" alt="Album Cover">
-        <button class="modal-close" id="modal-close">
-            <i class="fas fa-times"></i>
-        </button>
-        <div class="modal-info">
-            <div class="modal-song-title" id="modal-song-title"></div>
-            <div class="modal-song-details" id="modal-song-details"></div>
-            <!-- Move download button INSIDE modal-info, below song details -->
-            <button id="download-cover-btn" style="margin-top:1em;padding:0.4em 1em;border-radius:6px;background:#1db954;color:#fff;border:none;cursor:pointer;font-size:0.95em;">
-                <i class="fas fa-download"></i> Download Cover
-            </button>
-        </div>
-    </div>
-</div>
-<div id="avatar-modal-overlay" class="avatar-modal-overlay">
-    <div class="avatar-modal-content">
-        <div class="avatar-modal-info">
-            <div class="avatar-modal-username" id="avatar-modal-username"></div>
-            <div class="avatar-modal-id" id="avatar-modal-id"></div>
-        </div>
-        <img id="avatar-modal-image" class="avatar-modal-image" src="/img/loader.gif" alt="Avatar">
-        <button class="avatar-modal-close" id="avatar-modal-close">
-            <i class="fas fa-times"></i>
-        </button>
-        <div class="avatar-modal-actions">
-            <button class="avatar-action-btn download" id="download-avatar">
-                <i class="fas fa-download"></i>
-                Download Avatar
-            </button>
-            <!--<button class="avatar-action-btn" id="copy-avatar-url">
-                <i class="fas fa-copy"></i>
-                Copy URL
-            </button>-->
-        </div>
-        <!-- Stats for Nerds always visible, styled -->
-        <div class="stats-nerds-card" style="margin-top:1em;">
-            <div style="display:flex;align-items:center;margin-bottom:0.5em;">
-                <i class="fas fa-terminal" style="margin-right:0.5em;color:#4fc3f7;"></i>
-                <span style="font-weight:bold;font-size:1.1em;color:#e0e0e0">Stats for Nerds | Written Lines</span>
-                <br>
+            <div class="avatar-modal-info mt-6 text-center mac-window p-6 min-w-[300px]">
+                <div id="avatar-modal-username" class="font-display text-2xl font-bold text-white mb-1"></div>
+                <div id="avatar-modal-id"
+                    class="font-mono text-xs text-gray-500 mb-6 bg-black/30 px-2 py-1 rounded inline-block"></div>
+
+                <div class="flex gap-3 justify-center">
+                    <button id="download-avatar"
+                        class="flex-1 py-2 px-4 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-white text-sm font-medium transition-all flex items-center justify-center gap-2">
+                        <i class="ph-bold ph-download-simple"></i> Download
+                    </button>
+                    <!-- <button id="copy-avatar-url" class="...">...</button> -->
+                </div>
+
+                <!-- Stats -->
+                <div class="mt-6 pt-6 border-t border-white/5 text-left">
+                    <div class="flex items-center gap-2 mb-2 text-sky-400 text-xs font-bold uppercase tracking-wider">
+                        <i class="ph-fill ph-terminal-window"></i>
+                        <span>Stats for Nerds</span>
+                    </div>
+                    <div id="avatar-stats-lines" class="font-mono text-xs text-gray-400 space-y-1"></div>
+                </div>
             </div>
-            <div id="avatar-stats-lines" style="font-size:0.95em;color:#e0e0e0;"></div>
+
+            <button id="avatar-modal-close"
+                class="absolute -top-12 right-0 md:-right-12 w-10 h-10 rounded-full bg-white/10 border border-white/10 text-white flex items-center justify-center hover:bg-white/20 transition-all">
+                <i class="ph-bold ph-x"></i>
+            </button>
         </div>
     </div>
-</div>
-
-<script>
-function countLines(text) {
-    return text.split(/\r?\n/).length;
-}
-
-async function getFileLines(url) {
-    try {
-        const res = await fetch(url);
-        if (!res.ok) return 0;
-        const text = await res.text();
-        return countLines(text);
-    } catch {
-        return 0;
-    }
-}
-
-async function showAvatarStats() {
-    const htmlLines = countLines(document.documentElement.outerHTML);
-    const cssLines = await getFileLines('styles.css');
-    const jsLines = await getFileLines('script.js');
-    const total = htmlLines + cssLines + jsLines;
-    document.getElementById('avatar-stats-lines').innerHTML =
-        `<b>HTML:</b> ${htmlLines}<br>
-         <b>CSS:</b> ${cssLines}<br>
-         <b>JS:</b> ${jsLines}<br>
-         <b>Total:</b> ${total}`;
-}
-
-// Show stats when avatar modal is opened
-document.getElementById('avatar-modal-overlay').addEventListener('transitionend', function() {
-    if (this.style.display !== 'none') showAvatarStats();
-});
-
-// Also show on DOMContentLoaded in case modal is already open
-window.addEventListener('DOMContentLoaded', showAvatarStats);
-</script>
 
-</body>
-<script>
-window.addEventListener('DOMContentLoaded', function() {
-    // Safari detection (both desktop and iOS)
-    var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-    if (isSafari) {
-        // Create system message popup (centered, modal style)
-        var popupBg = document.createElement('div');
-        popupBg.style.position = 'fixed';
-        popupBg.style.top = '0';
-        popupBg.style.left = '0';
-        popupBg.style.width = '100vw';
-        popupBg.style.height = '100vh';
-        popupBg.style.background = 'rgba(0,0,0,0.25)';
-        popupBg.style.zIndex = '10001';
-        popupBg.style.display = 'flex';
-        popupBg.style.alignItems = 'center';
-        popupBg.style.justifyContent = 'center';
-
-        var popup = document.createElement('div');
-        popup.style.background = '#fff';
-        popup.style.color = '#222';
-        popup.style.borderRadius = '12px';
-        popup.style.boxShadow = '0 4px 24px rgba(0,0,0,0.18)';
-        popup.style.padding = '2em 2.5em';
-        popup.style.maxWidth = '90vw';
-        popup.style.width = '350px';
-        popup.style.textAlign = 'center';
-        popup.style.position = 'relative';
-        popup.innerHTML = `
-            <i class="fas fa-exclamation-triangle" style="font-size:2.5rem;color:#ff8c00;margin-bottom:1rem;"></i>
-            <h3 style="margin:0 0 0.5em 0;">Safari Browser Warning</h3>
-            <div style="font-size:1em;margin-bottom:1.5em;">
-                This page may not work correctly on Apple Safari browsers due to the iOS 26 fuckup.<br>
-                Please use Chrome, Firefox, Brave, or another browser for best experience.
-            </div>
-            <button id="safari-popup-close" style="background:#ff8c00;color:#fff;border:none;padding:0.5em 1.2em;border-radius:6px;font-size:1em;cursor:pointer;">
-                OK
-            </button>
-        `;
-
-        popupBg.appendChild(popup);
-        document.body.appendChild(popupBg);
-
-        document.getElementById('safari-popup-close').onclick = function() {
-            popupBg.remove();
-        };
-    }
-
-    // Wait for all images (including background images) to load
-    const images = Array.from(document.images);
-    let loaded = 0;
-    if (images.length === 0) {
-        document.getElementById('site-preloader').style.display = 'none';
-        return;
-    }
-    images.forEach(img => {
-        if (img.complete) {
-            loaded++;
-            if (loaded === images.length) {
-                document.getElementById('site-preloader').style.display = 'none';
-            }
-        } else {
-            img.addEventListener('load', () => {
-                loaded++;
-                if (loaded === images.length) {
-                    document.getElementById('site-preloader').style.display = 'none';
-                }
-            });
-            img.addEventListener('error', () => {
-                loaded++;
-                if (loaded === images.length) {
-                    document.getElementById('site-preloader').style.display = 'none';
-                }
-            });
-        }
-    });
-
-    // Fetch links from links.json and dynamically create buttons
-    fetch('links.json')
-        .then(response => response.json())
-        .then(links => {
-            const grid = document.getElementById('links-grid');
-            grid.innerHTML = ''; // Clear any existing content
-            links.forEach(link => {
-                const btn = document.createElement('button');
-                btn.className = 'link-item';
-                btn.innerHTML = `<i class="${link.icon} link-icon"></i><span class="link-label">${link.label}</span>`;
-                btn.onclick = () => window.open(link.url, '_blank');
-                // Special handling for email links
-                if (link.url.startsWith('mailto:')) {
-                    btn.onclick = () => window.location.href = link.url;
-                }
-                grid.appendChild(btn);
-            });
-        });
-});
-</script>
-<script>
-// Download Spotify album cover function
-document.addEventListener('DOMContentLoaded', function() {
-    const downloadBtn = document.getElementById('download-cover-btn');
-    if (downloadBtn) {
-        downloadBtn.addEventListener('click', function() {
-            const img = document.getElementById('modal-image');
-            if (!img || !img.src || img.src.endsWith('loader.gif')) return;
-            fetch(img.src)
-                .then(res => res.blob())
-                .then(blob => {
-                    const url = URL.createObjectURL(blob);
-                    const a = document.createElement('a');
-                    a.href = url;
-                    a.download = 'spotify-cover.jpg';
-                    document.body.appendChild(a);
-                    a.click();
-                    setTimeout(() => {
-                        document.body.removeChild(a);
-                        URL.revokeObjectURL(url);
-                    }, 100);
-                });
+    <!-- Script Imports -->
+    <script src="script.js"></script>
+    <script>
+        // Inline check for specific Safari bug
+        window.addEventListener('scroll', () => {
+            // force repaint fix
         });
-    }
-});
-</script>
-<script>
-// Fetch the latest commit hash from GitHub API
-let commitUrl = '';
-
-fetch('https://api.github.com/repos/Stuffmaker-Development/stuffmaker.top/commits')
-    .then(response => response.json())
-    .then(data => {
-        if (data && data[0] && data[0].sha) {
-            const shortHash = data[0].sha.substring(0, 7);
-            document.getElementById('commit-hash').textContent = shortHash;
-            commitUrl = data[0].html_url;
-            
-            document.getElementById('version-info').addEventListener('click', () => {
-                window.open(commitUrl, '_blank');
-            });
-        } else {
-            throw new Error('Invalid response format');
-        }
-    })
-    .catch(error => {
-        document.getElementById('commit-hash').textContent = 'Unknown';
-        console.error('Failed to fetch commit hash:', error);
-    });
-</script>
+    </script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..f6a7e26
--- /dev/null
+++ b/package.json
@@ -0,0 +1,18 @@
+{
+    "name": "stuffmaker-profile",
+    "version": "1.0.0",
+    "description": "Personal Discord profile page",
+    "main": "script.js",
+    "scripts": {
+        "build": "tailwindcss -i ./styles.css -o ./dist/output.css",
+        "watch": "tailwindcss -i ./styles.css -o ./dist/output.css --watch"
+    },
+    "keywords": [],
+    "author": "Stuffmaker",
+    "license": "ISC",
+    "devDependencies": {
+        "autoprefixer": "^10.4.16",
+        "postcss": "^8.4.32",
+        "tailwindcss": "^3.4.0"
+    }
+}
\ No newline at end of file
diff --git a/script.js b/script.js
index 758eaae..5450d77 100644
--- a/script.js
+++ b/script.js
@@ -1,314 +1,303 @@
 // Replace with your Discord User ID
-        const DISCORD_USER_ID = '213586333677912064'; // My ID - replace with yours
-        
-        let spotifyUpdateInterval;
-        let spotifyCheckInterval;
-        let progressValidationInterval;
-        let currentSpotifyData = null;
-        let lastSongId = null;
-        let lastValidatedProgress = 0;
-        let progressDriftThreshold = 3000; // 3 seconds tolerance
-
-        // Create floating particles
-        function createParticles() {
-            const particlesContainer = document.getElementById('particles');
-            
-            setInterval(() => {
-                const particle = document.createElement('div');
-                particle.className = 'particle';
-                particle.style.left = Math.random() * 100 + '%';
-                particle.style.width = particle.style.height = Math.random() * 10 + 5 + 'px';
-                particle.style.animationDuration = Math.random() * 3 + 3 + 's';
-                particle.style.animationDelay = Math.random() * 2 + 's';
-                
-                particlesContainer.appendChild(particle);
-                
-                setTimeout(() => {
-                    particle.remove();
-                }, 6000);
-            }, 300);
-        }
+const DISCORD_USER_ID = '213586333677912064'; // My ID - replace with yours
+
+let spotifyUpdateInterval;
+let spotifyCheckInterval;
+let progressValidationInterval;
+let currentSpotifyData = null;
+let lastSongId = null;
+let lastValidatedProgress = 0;
+let progressDriftThreshold = 3000; // 3 seconds tolerance
+
+// Particles removed for cleaner UI
+
+// Format time from milliseconds
+function formatTime(ms) {
+    const seconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+}
+
+// Update sync indicator
+function updateSyncIndicator(status) {
+    const indicator = document.getElementById('sync-indicator');
+    indicator.className = `sync-indicator ${status}`;
+}
 
-        // Format time from milliseconds
-        function formatTime(ms) {
-            const seconds = Math.floor(ms / 1000);
-            const minutes = Math.floor(seconds / 60);
-            const remainingSeconds = seconds % 60;
-            return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+// Validate and correct Spotify progress
+async function validateSpotifyProgress() {
+    if (!currentSpotifyData) return;
+
+    try {
+        const response = await fetch(`https://api.lanyard.rest/v1/users/${DISCORD_USER_ID}`);
+        const data = await response.json();
+
+        if (!data.success || !data.data.spotify) {
+            updateSyncIndicator('error');
+            return;
         }
 
-        // Update sync indicator
-        function updateSyncIndicator(status) {
-            const indicator = document.getElementById('sync-indicator');
-            indicator.className = `sync-indicator ${status}`;
+        const freshSpotifyData = data.data.spotify;
+        const currentSongId = `${freshSpotifyData.song}-${freshSpotifyData.artist}-${freshSpotifyData.album}`;
+
+        // Check if it's still the same song
+        if (currentSongId !== lastSongId) {
+            // Song changed, update display
+            updateSpotifyDisplay(freshSpotifyData);
+            return;
         }
 
-        // Validate and correct Spotify progress
-        async function validateSpotifyProgress() {
-            if (!currentSpotifyData) return;
-            
-            try {
-                const response = await fetch(`https://api.lanyard.rest/v1/users/${DISCORD_USER_ID}`);
-                const data = await response.json();
-                
-                if (!data.success || !data.data.spotify) {
-                    updateSyncIndicator('error');
-                    return;
-                }
-
-                const freshSpotifyData = data.data.spotify;
-                const currentSongId = `${freshSpotifyData.song}-${freshSpotifyData.artist}-${freshSpotifyData.album}`;
-                
-                // Check if it's still the same song
-                if (currentSongId !== lastSongId) {
-                    // Song changed, update display
-                    updateSpotifyDisplay(freshSpotifyData);
-                    return;
-                }
-                
-                // Calculate current progress based on our local timer
-                const now = Date.now();
-                const localProgress = now - currentSpotifyData.timestamps.start;
-                
-                // Calculate actual progress from fresh data
-                const actualProgress = now - freshSpotifyData.timestamps.start;
-                
-                // Check if there's significant drift
-                const progressDifference = Math.abs(localProgress - actualProgress);
-                
-                if (progressDifference > progressDriftThreshold) {
-                    // Significant drift detected, correct it
-                    updateSyncIndicator('correcting');
-                    console.log(`Progress drift detected: ${progressDifference}ms, correcting...`);
-                    
-                    // Update our reference data
-                    currentSpotifyData.timestamps = freshSpotifyData.timestamps;
-                    
-                    // Smoothly correct the progress bar
-                    const progressBar = document.getElementById('progress-bar');
-                    progressBar.classList.add('correcting');
-                    
-                    const total = currentSpotifyData.timestamps.end - currentSpotifyData.timestamps.start;
-                    const correctedPercentage = Math.min((actualProgress / total) * 100, 100);
-                    
-                    progressBar.style.width = correctedPercentage + '%';
-                    document.getElementById('current-time').textContent = formatTime(actualProgress);
-                    
-                    // Remove correcting class after animation
-                    setTimeout(() => {
-                        progressBar.classList.remove('correcting');
-                        updateSyncIndicator('synced');
-                    }, 500);
-                    
-                } else {
-                    // Progress is accurate
-                    updateSyncIndicator('synced');
-                }
-                
-                lastValidatedProgress = actualProgress;
-                
-            } catch (error) {
-                console.error('Error validating Spotify progress:', error);
-                updateSyncIndicator('error');
-            }
+        // Calculate current progress based on our local timer
+        const now = Date.now();
+        const localProgress = now - currentSpotifyData.timestamps.start;
+
+        // Calculate actual progress from fresh data
+        const actualProgress = now - freshSpotifyData.timestamps.start;
+
+        // Check if there's significant drift
+        const progressDifference = Math.abs(localProgress - actualProgress);
+
+        if (progressDifference > progressDriftThreshold) {
+            // Significant drift detected, correct it
+            updateSyncIndicator('correcting');
+            console.log(`Progress drift detected: ${progressDifference}ms, correcting...`);
+
+            // Update our reference data
+            currentSpotifyData.timestamps = freshSpotifyData.timestamps;
+
+            // Smoothly correct the progress bar
+            const progressBar = document.getElementById('progress-bar');
+            progressBar.classList.add('correcting');
+
+            const total = currentSpotifyData.timestamps.end - currentSpotifyData.timestamps.start;
+            const correctedPercentage = Math.min((actualProgress / total) * 100, 100);
+
+            progressBar.style.width = correctedPercentage + '%';
+            document.getElementById('current-time').textContent = formatTime(actualProgress);
+
+            // Remove correcting class after animation
+            setTimeout(() => {
+                progressBar.classList.remove('correcting');
+                updateSyncIndicator('synced');
+            }, 500);
+
+        } else {
+            // Progress is accurate
+            updateSyncIndicator('synced');
         }
 
-        // Update Spotify progress
-        function updateSpotifyProgress(spotify) {
-            if (!spotify) return;
-            
-            const now = Date.now();
-            const progress = now - spotify.timestamps.start;
-            const total = spotify.timestamps.end - spotify.timestamps.start;
-            const percentage = Math.min((progress / total) * 100, 100);
-            
-            document.getElementById('progress-bar').style.width = percentage + '%';
-            document.getElementById('current-time').textContent = formatTime(progress);
-            document.getElementById('total-time').textContent = formatTime(total);
-            
-            // Check if song has ended
-            if (progress >= total) {
-                checkForNewSpotifySong();
-            }
+        lastValidatedProgress = actualProgress;
+
+    } catch (error) {
+        console.error('Error validating Spotify progress:', error);
+        updateSyncIndicator('error');
+    }
+}
+
+// Update Spotify progress
+function updateSpotifyProgress(spotify) {
+    if (!spotify) return;
+
+    const now = Date.now();
+    const progress = now - spotify.timestamps.start;
+    const total = spotify.timestamps.end - spotify.timestamps.start;
+    const percentage = Math.min((progress / total) * 100, 100);
+
+    document.getElementById('progress-bar').style.width = percentage + '%';
+    document.getElementById('current-time').textContent = formatTime(progress);
+    document.getElementById('total-time').textContent = formatTime(total);
+
+    // Check if song has ended
+    if (progress >= total) {
+        checkForNewSpotifySong();
+    }
+}
+
+// Check if Spotify song has changed
+async function checkForNewSpotifySong() {
+    try {
+        const response = await fetch(`https://api.lanyard.rest/v1/users/${DISCORD_USER_ID}`);
+        const data = await response.json();
+
+        if (!data.success) {
+            throw new Error('Failed to fetch data');
         }
 
-        // Check if Spotify song has changed
-        async function checkForNewSpotifySong() {
-            try {
-                const response = await fetch(`https://api.lanyard.rest/v1/users/${DISCORD_USER_ID}`);
-                const data = await response.json();
-                
-                if (!data.success) {
-                    throw new Error('Failed to fetch data');
-                }
-
-                const user = data.data;
-                
-                // Check if Spotify status has changed
-                if (user.spotify) {
-                    const newSongId = `${user.spotify.song}-${user.spotify.artist}-${user.spotify.album}`;
-                    
-                    // If song has changed or no song was playing before
-                    if (newSongId !== lastSongId) {
-                        updateSpotifyDisplay(user.spotify);
-                    }
-                } else if (currentSpotifyData && !user.spotify) {
-                    // User stopped listening to Spotify
-                    hideSpotifySection();
-                }
-                
-            } catch (error) {
-                console.error('Error checking for new Spotify song:', error);
-                updateSyncIndicator('error');
+        const user = data.data;
+
+        // Check if Spotify status has changed
+        if (user.spotify) {
+            const newSongId = `${user.spotify.song}-${user.spotify.artist}-${user.spotify.album}`;
+
+            // If song has changed or no song was playing before
+            if (newSongId !== lastSongId) {
+                updateSpotifyDisplay(user.spotify);
             }
+        } else if (currentSpotifyData && !user.spotify) {
+            // User stopped listening to Spotify
+            hideSpotifySection();
         }
 
-        // Update Spotify display with animation
-        function updateSpotifyDisplay(spotify) {
-            const spotifySection = document.getElementById('spotify');
-            const spotifyContent = spotifySection.querySelector('.spotify-content');
-            
-            // If this is the first song (no previous song)
-            if (!currentSpotifyData) {
-                displaySpotify(spotify);
-                return;
-            }
-            
-            // Animate transition
-            spotifyContent.classList.add('fade-out');
-            
-            setTimeout(() => {
-                // Update content
-                document.getElementById('song-title').textContent = spotify.song;
-                document.getElementById('song-artist').textContent = `by ${spotify.artist}`;
-                
-                // Set album cover
-                const albumCover = document.getElementById('album-cover');
-                albumCover.src = spotify.album_art_url;
-                albumCover.alt = `${spotify.album} - Album Cover`;
-                
-                // Set tooltip text
-                document.getElementById('album-tooltip').textContent = spotify.album;
-                
-                // Update current song data
-                currentSpotifyData = spotify;
-                lastSongId = `${spotify.song}-${spotify.artist}-${spotify.album}`;
-                
-                // Reset progress bar
-                document.getElementById('progress-bar').style.width = '0%';
-                document.getElementById('current-time').textContent = '0:00';
-                document.getElementById('total-time').textContent = formatTime(spotify.timestamps.end - spotify.timestamps.start);
-                
-                // Fade back in
-                spotifyContent.classList.remove('fade-out');
-                spotifyContent.classList.add('song-change-animation');
-                
-                // Clear and restart intervals
-                if (spotifyUpdateInterval) {
-                    clearInterval(spotifyUpdateInterval);
-                }
-                if (progressValidationInterval) {
-                    clearInterval(progressValidationInterval);
-                }
-                
-                spotifyUpdateInterval = setInterval(() => {
-                    updateSpotifyProgress(spotify);
-                }, 1000);
-                
-                // Start progress validation (every 10 seconds)
-                progressValidationInterval = setInterval(validateSpotifyProgress, 10000);
-                
-                // Show section if hidden
-                spotifySection.style.display = 'block';
-                updateSyncIndicator('synced');
-                
-                // Remove animation class after animation completes
-                setTimeout(() => {
-                    spotifyContent.classList.remove('song-change-animation');
-                }, 500);
-                
-            }, 300); // Wait for fade-out to complete
+    } catch (error) {
+        console.error('Error checking for new Spotify song:', error);
+        updateSyncIndicator('error');
+    }
+}
+
+// Update Spotify display with animation
+function updateSpotifyDisplay(spotify) {
+    const spotifySection = document.getElementById('spotify');
+    const spotifyContent = spotifySection.querySelector('.spotify-content');
+
+    // If this is the first song (no previous song)
+    if (!currentSpotifyData) {
+        displaySpotify(spotify);
+        return;
+    }
+
+    // Animate transition
+    spotifyContent.classList.add('opacity-0');
+
+    setTimeout(() => {
+        // Update content
+        document.getElementById('song-title').textContent = spotify.song;
+        document.getElementById('song-artist').textContent = `by ${spotify.artist}`;
+
+        // Set album cover
+        const albumCover = document.getElementById('album-cover');
+        albumCover.src = spotify.album_art_url;
+        albumCover.alt = `${spotify.album} - Album Cover`;
+
+        // Set tooltip text
+        document.getElementById('album-tooltip').textContent = spotify.album;
+
+        // Update current song data
+        currentSpotifyData = spotify;
+        lastSongId = `${spotify.song}-${spotify.artist}-${spotify.album}`;
+
+        // Reset progress bar
+        document.getElementById('progress-bar').style.width = '0%';
+        document.getElementById('current-time').textContent = '0:00';
+        document.getElementById('total-time').textContent = formatTime(spotify.timestamps.end - spotify.timestamps.start);
+
+        // Fade back in
+        spotifyContent.classList.remove('opacity-0');
+        spotifyContent.classList.add('song-change-animation');
+
+        // Clear and restart intervals
+        if (spotifyUpdateInterval) {
+            clearInterval(spotifyUpdateInterval);
+        }
+        if (progressValidationInterval) {
+            clearInterval(progressValidationInterval);
         }
 
-        // Hide Spotify section
-        function hideSpotifySection() {
-            const spotifySection = document.getElementById('spotify');
-            const spotifyContent = spotifySection.querySelector('.spotify-content');
-            
-            spotifyContent.classList.add('fade-out');
-            
-            setTimeout(() => {
-                spotifySection.style.display = 'none';
-                currentSpotifyData = null;
-                lastSongId = null;
-                
-                if (spotifyUpdateInterval) {
-                    clearInterval(spotifyUpdateInterval);
-                    spotifyUpdateInterval = null;
-                }
-                if (progressValidationInterval) {
-                    clearInterval(progressValidationInterval);
-                    progressValidationInterval = null;
-                }
-            }, 300);
+        spotifyUpdateInterval = setInterval(() => {
+            updateSpotifyProgress(spotify);
+        }, 1000);
+
+        // Start progress validation (every 10 seconds)
+        progressValidationInterval = setInterval(validateSpotifyProgress, 10000);
+
+        // Show section if hidden
+        spotifySection.classList.remove('hidden');
+        // updateSyncIndicator('synced');
+
+        // Remove animation class after animation completes
+        setTimeout(() => {
+            spotifyContent.classList.remove('song-change-animation');
+        }, 500);
+
+    }, 300); // Wait for fade-out to complete
+}
+
+// Hide Spotify section
+function hideSpotifySection() {
+    const spotifySection = document.getElementById('spotify');
+    const spotifyContent = spotifySection.querySelector('.spotify-content');
+
+    spotifyContent.classList.add('opacity-0', 'translate-y-2'); // Tailwind fade out
+
+    setTimeout(() => {
+        spotifySection.classList.add('hidden'); // Tailwind hide
+        currentSpotifyData = null;
+        lastSongId = null;
+
+        if (spotifyUpdateInterval) {
+            clearInterval(spotifyUpdateInterval);
+            spotifyUpdateInterval = null;
         }
+        if (progressValidationInterval) {
+            clearInterval(progressValidationInterval);
+            progressValidationInterval = null;
+        }
+    }, 300);
+}
 
-        // Fetch Discord data from Lanyard API
-        async function fetchDiscordData() {
-            try {
-                const response = await fetch(`https://api.lanyard.rest/v1/users/${DISCORD_USER_ID}`);
-                const data = await response.json();
-                
-                if (!data.success) {
-                    throw new Error('Failed to fetch data');
-                }
-
-                const user = data.data;
-                displayProfile(user);
-                displayLastfmActivity(user);
-                
-            } catch (error) {
-                console.error('Error fetching Discord data:', error);
-                document.getElementById('loading').style.display = 'none';
-                document.getElementById('error').style.display = 'block';
-            }
+// Fetch Discord data from Lanyard API
+async function fetchDiscordData() {
+    try {
+        const response = await fetch(`https://api.lanyard.rest/v1/users/${DISCORD_USER_ID}`);
+        const data = await response.json();
+
+        if (!data.success) {
+            throw new Error('Failed to fetch data');
         }
 
-        // Display profile data
-        function displayProfile(user) {
-            document.getElementById('loading').style.display = 'none';
-            document.getElementById('profile').style.display = 'block';
-
-            // Basic profile info
-            document.getElementById('avatar').src = `https://cdn.discordapp.com/avatars/${user.discord_user.id}/${user.discord_user.avatar}.png?size=1024`;
-            document.getElementById('username').textContent = user.discord_user.global_name || user.discord_user.username;
-            document.getElementById('discriminator').textContent = `@${user.discord_user.username}`;
-
-            // Status
-            const statusElement = document.getElementById('status');
-            statusElement.className = `status-indicator status-${user.discord_status}`;
-
-            // Platform indicators
-            displayPlatformIndicators(user);
-
-            // Activities
-            displayActivities(user.activities);
-
-            // Spotify
-            if (user.spotify) {
-                const newSongId = `${user.spotify.song}-${user.spotify.artist}-${user.spotify.album}`;
-                
-                // Only update if song has changed or no song was playing before
-                if (newSongId !== lastSongId) {
-                    updateSpotifyDisplay(user.spotify);
-                }
-            } else if (currentSpotifyData && !user.spotify) {
-                // User stopped listening to Spotify
-                hideSpotifySection();
-            }
+        const user = data.data;
+        displayProfile(user);
+        displayLastfmActivity(user);
+
+    } catch (error) {
+        console.error('Error fetching Discord data:', error);
+        const errorEl = document.getElementById('error');
+        if (errorEl) errorEl.classList.remove('hidden');
+    }
+}
+
+// Display profile data
+function displayProfile(user) {
+    // document.getElementById('loading').classList.add('hidden'); // Removed
+    // document.getElementById('profile').classList.remove('hidden'); // Removed
+
+    // Basic profile info
+    document.getElementById('avatar').src = `https://cdn.discordapp.com/avatars/${user.discord_user.id}/${user.discord_user.avatar}.png?size=1024`;
+    document.getElementById('username').textContent = user.discord_user.global_name || user.discord_user.username;
+    document.getElementById('discriminator').textContent = `@${user.discord_user.username}`;
+
+    // Status
+    const statusElement = document.getElementById('status');
+    // Mapping discord status to colors
+    const statusColors = {
+        online: 'bg-green-500',
+        idle: 'bg-yellow-500',
+        dnd: 'bg-red-500',
+        offline: 'bg-gray-500'
+    };
+    statusElement.className = `status-indicator absolute bottom-1 right-1 w-6 h-6 rounded-full border-[3px] border-[#1a1a20] shadow-lg transition-colors duration-300 ${statusColors[user.discord_status] || 'bg-gray-500'}`;
+
+    // Platform indicators
+    displayPlatformIndicators(user);
+
+    // Activities
+    displayActivities(user.activities);
+
+    // Spotify
+    if (user.spotify) {
+        const newSongId = `${user.spotify.song}-${user.spotify.artist}-${user.spotify.album}`;
+
+        // Only update if song has changed or no song was playing before
+        if (newSongId !== lastSongId) {
+            updateSpotifyDisplay(user.spotify);
         }
+    } else if (currentSpotifyData && !user.spotify) {
+        // User stopped listening to Spotify
+        hideSpotifySection();
+    }
+}
 
-        // Display platform indicators
+// Display platform indicators
 function displayPlatformIndicators(user) {
     const platformContainer = document.getElementById('platform-indicators');
     platformContainer.innerHTML = '';
@@ -318,7 +307,7 @@ function displayPlatformIndicators(user) {
     if (user.active_on_discord_desktop) {
         platforms.push({
             type: 'desktop',
-            icon: 'fas fa-desktop',
+            icon: 'ph-fill ph-desktop',
             label: 'Online on Desktop'
         });
     }
@@ -326,7 +315,7 @@ function displayPlatformIndicators(user) {
     if (user.active_on_discord_mobile) {
         platforms.push({
             type: 'mobile',
-            icon: 'fas fa-mobile-alt',
+            icon: 'ph-fill ph-mobile',
             label: 'Online on Mobile'
         });
     }
@@ -334,99 +323,134 @@ function displayPlatformIndicators(user) {
     if (user.active_on_discord_web) {
         platforms.push({
             type: 'web',
-            icon: 'fas fa-globe',
+            icon: 'ph-fill ph-globe',
             label: 'Online on Web'
         });
     }
 
     platforms.forEach((platform, index) => {
         const platformIcon = document.createElement('div');
-        platformIcon.className = `platform-icon ${platform.type}`;
-        platformIcon.style.animationDelay = `${0.4 + (index * 0.1)}s`;
-        
-        platformIcon.innerHTML = `
-            <i class="${platform.icon}"></i>
-            <div class="platform-tooltip">${platform.label}</div>
-        `;
+        platformIcon.className = `platform-icon bg-zinc-800/50 p-1.5 rounded-md border border-zinc-700/50 text-zinc-400 hover:text-white hover:bg-zinc-700 transition-all duration-300 relative group cursor-help`;
+        platformIcon.innerHTML = `<i class="${platform.icon}"></i>`;
+
+        // Tooltip
+        const tooltip = document.createElement('div');
+        tooltip.className = 'absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-zinc-900 text-white text-[10px] rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap shadow-xl border border-zinc-800 font-medium z-50';
+        tooltip.textContent = platform.label;
 
+        platformIcon.appendChild(tooltip);
         platformContainer.appendChild(platformIcon);
     });
 
     // Show container only if there are platforms
     if (platforms.length > 0) {
-        platformContainer.style.display = 'flex';
+        platformContainer.classList.remove('hidden');
+        platformContainer.classList.add('flex');
     } else {
-        platformContainer.style.display = 'none';
+        platformContainer.classList.add('hidden');
+        platformContainer.classList.remove('flex');
     }
 }
 
-        // Display activities
-        function displayActivities(activities) {
-            const activitiesContainer = document.getElementById('activities');
-            activitiesContainer.innerHTML = '';
-
-            const nonSpotifyActivities = activities.filter(activity => activity.type !== 2);
-
-            nonSpotifyActivities.forEach(activity => {
-                const activityCard = document.createElement('div');
-                activityCard.className = 'activity-card';
-
-                let activityIcon = '';
-                let activityType = '';
-
-                switch (activity.type) {
-                    case 0: // Playing
-                        activityIcon = '<i class="fas fa-gamepad"></i>';
-                        activityType = 'Playing';
-                        break;
-                    case 1: // Streaming
-                        activityIcon = '<i class="fas fa-video"></i>';
-                        activityType = 'Streaming';
-                        break;
-                    case 3: // Watching
-                        activityIcon = '<i class="fas fa-eye"></i>';
-                        activityType = 'Watching';
-                        break;
-                    case 5: // Competing
-                        activityIcon = '<i class="fas fa-trophy"></i>';
-                        activityType = 'Competing in';
-                        break;
-                    default:
-                        activityIcon = '<i class="fas fa-circle"></i>';
-                        activityType = 'Activity';
-                }
-
-                activityCard.innerHTML = `
-                    <div class="activity-title">
-                        ${activityIcon}
-                        ${activityType} ${activity.name}
-                    </div>
-                    <div class="activity-details">
-                        ${activity.details || ''}
-                        ${activity.state ? `<br>${activity.state}` : ''}
-                    </div>
-                `;
-
-                activitiesContainer.appendChild(activityCard);
-            });
+// Display activities
+function displayActivities(activities) {
+    const activitiesContainer = document.getElementById('activities');
+    activitiesContainer.innerHTML = '';
+
+    const nonSpotifyActivities = activities.filter(activity => activity.type !== 2);
+
+    nonSpotifyActivities.forEach(activity => {
+        // Activity Card
+        const card = document.createElement('div');
+        card.className = 'activity-card bg-zinc-800/50 p-4 rounded-lg border border-zinc-700/50 flex items-center gap-4 hover:bg-zinc-800 transition-colors group relative overflow-hidden';
+
+        let activityIcon = '';
+        let activityType = '';
+
+        switch (activity.type) {
+            case 0: // Playing
+                activityIcon = '<i class="ph-fill ph-game-controller text-indigo-400"></i>';
+                activityType = 'Playing';
+                break;
+            case 1: // Streaming
+                activityIcon = '<i class="ph-fill ph-video-camera text-purple-400"></i>';
+                activityType = 'Streaming';
+                break;
+            case 3: // Watching
+                activityIcon = '<i class="ph-fill ph-eye text-emerald-400"></i>';
+                activityType = 'Watching';
+                break;
+            case 5: // Competing
+                activityIcon = '<i class="ph-fill ph-trophy text-yellow-400"></i>';
+                activityType = 'Competing in';
+                break;
+            default:
+                activityIcon = '<i class="ph-fill ph-circle text-gray-400"></i>';
+                activityType = 'Activity';
         }
 
-        // Display Spotify
-        function displaySpotify(spotify) {
+        // Icon container
+        const iconDiv = document.createElement('div');
+        iconDiv.className = 'p-2 rounded-md bg-zinc-900/50 border border-zinc-800 text-lg flex items-center justify-center h-12 w-12 shrink-0';
+        iconDiv.innerHTML = activityIcon;
+
+        // Content
+        const contentDiv = document.createElement('div');
+        contentDiv.className = 'flex-1 min-w-0 z-10';
+
+        const typeDiv = document.createElement('div');
+        typeDiv.className = 'text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-0.5';
+        typeDiv.textContent = activityType;
+
+        const nameDiv = document.createElement('div');
+        nameDiv.className = 'font-medium text-zinc-200 truncate pr-2';
+        nameDiv.textContent = activity.name;
+
+        const detailsDiv = document.createElement('div');
+        detailsDiv.className = 'text-xs text-zinc-400 truncate';
+        detailsDiv.textContent = activity.state || activity.details || '';
+
+        contentDiv.appendChild(typeDiv);
+        contentDiv.appendChild(nameDiv);
+        contentDiv.appendChild(detailsDiv);
+
+        card.appendChild(iconDiv);
+        card.appendChild(contentDiv);
+
+        // If there's an image/large asset
+        if (activity.assets && activity.assets.large_image) {
+            const imgId = activity.assets.large_image.startsWith('mp:') ? activity.assets.large_image.replace('mp:', '') : activity.assets.large_image;
+            const imgUrl = `https://cdn.discordapp.com/app-assets/${activity.application_id}/${imgId}.png`;
+
+            // Replace icon with image
+            iconDiv.innerHTML = '';
+            const img = document.createElement('img');
+            img.src = imgUrl;
+            img.className = 'w-full h-full object-cover rounded';
+            iconDiv.className = 'w-12 h-12 rounded-md overflow-hidden bg-zinc-900/50 border border-zinc-800 flex-shrink-0';
+            iconDiv.appendChild(img);
+        }
+
+        activitiesContainer.appendChild(card);
+    });
+}
+
+// Display Spotify
+function displaySpotify(spotify) {
     const spotifySection = document.getElementById('spotify');
     spotifySection.style.display = 'block';
 
     document.getElementById('song-title').textContent = spotify.song;
     document.getElementById('song-artist').textContent = `by ${spotify.artist}`;
-    
+
     // Set album cover
     const albumCover = document.getElementById('album-cover');
     albumCover.src = spotify.album_art_url;
     albumCover.alt = `${spotify.album} - Album Cover`;
-    
+
     // Set tooltip text
     document.getElementById('album-tooltip').textContent = spotify.album;
-    
+
     // Update current song data
     currentSpotifyData = spotify;
     lastSongId = `${spotify.song}-${spotify.artist}-${spotify.album}`;
@@ -444,14 +468,16 @@ function displayPlatformIndicators(user) {
     spotifyUpdateInterval = setInterval(() => {
         updateSpotifyProgress(spotify);
     }, 1000);
-    
+
     // Start progress validation (every 10 seconds)
     progressValidationInterval = setInterval(validateSpotifyProgress, 10000);
-    
-    updateSyncIndicator('synced');
+
+    progressValidationInterval = setInterval(validateSpotifyProgress, 10000);
+
+    // updateSyncIndicator('synced');
 }
 
-        // Modal functionality
+// Modal functionality
 function initializeModal() {
     const albumCover = document.getElementById('album-cover');
     const modalOverlay = document.getElementById('modal-overlay');
@@ -465,13 +491,15 @@ function initializeModal() {
         modalImage.src = albumCover.src;
         modalSongTitle.textContent = document.getElementById('song-title').textContent;
         modalSongDetails.textContent = `${document.getElementById('song-artist').textContent} • ${document.getElementById('album-tooltip').textContent}`;
-        modalOverlay.classList.add('active');
+        modalOverlay.classList.remove('opacity-0', 'invisible');
+        modalOverlay.classList.add('opacity-100', 'visible');
         document.body.style.overflow = 'hidden';
     });
 
     // Close modal
     function closeModal() {
-        modalOverlay.classList.remove('active');
+        modalOverlay.classList.remove('opacity-100', 'visible');
+        modalOverlay.classList.add('opacity-0', 'invisible');
         document.body.style.overflow = 'auto';
     }
 
@@ -484,7 +512,7 @@ function initializeModal() {
 
     // Close modal with Escape key
     document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && modalOverlay.classList.contains('active')) {
+        if (e.key === 'Escape' && modalOverlay.classList.contains('visible')) {
             closeModal();
         }
     });
@@ -514,13 +542,15 @@ function initializeAvatarModal() {
         avatarModalImage.src = currentAvatarUrl;
         avatarModalUsername.textContent = currentUsername;
         avatarModalId.textContent = `ID: ${currentUserId}`;
-        avatarModalOverlay.classList.add('active');
+        avatarModalOverlay.classList.remove('opacity-0', 'invisible');
+        avatarModalOverlay.classList.add('opacity-100', 'visible');
         document.body.style.overflow = 'hidden';
     });
 
     // Close avatar modal
     function closeAvatarModal() {
-        avatarModalOverlay.classList.remove('active');
+        avatarModalOverlay.classList.remove('opacity-100', 'visible');
+        avatarModalOverlay.classList.add('opacity-0', 'invisible');
         document.body.style.overflow = 'auto';
     }
 
@@ -544,53 +574,55 @@ function initializeAvatarModal() {
             a.click();
             document.body.removeChild(a);
             window.URL.revokeObjectURL(url);
-            
+
             // Show success feedback
-            downloadAvatarBtn.innerHTML = '<i class="fas fa-check"></i> Downloaded!';
+            downloadAvatarBtn.innerHTML = '<i class="ph-bold ph-check"></i> Downloaded!';
             setTimeout(() => {
-                downloadAvatarBtn.innerHTML = '<i class="fas fa-download"></i> Download Avatar';
+                downloadAvatarBtn.innerHTML = '<i class="ph-bold ph-download-simple"></i> Download Avatar';
             }, 2000);
         } catch (error) {
             console.error('Download failed:', error);
-            downloadAvatarBtn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Failed';
+            downloadAvatarBtn.innerHTML = '<i class="ph-bold ph-warning"></i> Failed';
             setTimeout(() => {
-                downloadAvatarBtn.innerHTML = '<i class="fas fa-download"></i> Download Avatar';
+                downloadAvatarBtn.innerHTML = '<i class="ph-bold ph-download-simple"></i> Download Avatar';
             }, 2000);
         }
     });
 
     // Copy avatar URL
-    copyAvatarUrlBtn.addEventListener('click', async () => {
-        try {
-            await navigator.clipboard.writeText(currentAvatarUrl);
-            copyAvatarUrlBtn.innerHTML = '<i class="fas fa-check"></i> Copied!';
-            setTimeout(() => {
-                copyAvatarUrlBtn.innerHTML = '<i class="fas fa-copy"></i> Copy URL';
-            }, 2000);
-        } catch (error) {
-            console.error('Copy failed:', error);
-            copyAvatarUrlBtn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Failed';
-            setTimeout(() => {
-                copyAvatarUrlBtn.innerHTML = '<i class="fas fa-copy"></i> Copy URL';
-            }, 2000);
-        }
-    });
+    if (copyAvatarUrlBtn) {
+        copyAvatarUrlBtn.addEventListener('click', async () => {
+            try {
+                await navigator.clipboard.writeText(currentAvatarUrl);
+                copyAvatarUrlBtn.innerHTML = '<i class="ph-bold ph-check"></i> Copied!';
+                setTimeout(() => {
+                    copyAvatarUrlBtn.innerHTML = '<i class="ph-bold ph-copy"></i> Copy URL';
+                }, 2000);
+            } catch (error) {
+                console.error('Copy failed:', error);
+                copyAvatarUrlBtn.innerHTML = '<i class="ph-bold ph-warning"></i> Failed';
+                setTimeout(() => {
+                    copyAvatarUrlBtn.innerHTML = '<i class="ph-bold ph-copy"></i> Copy URL';
+                }, 2000);
+            }
+        });
+    }
 
     // Close avatar modal with Escape key
     document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && avatarModalOverlay.classList.contains('active')) {
+        if (e.key === 'Escape' && avatarModalOverlay.classList.contains('visible')) {
             closeAvatarModal();
         }
     });
 }
 
-        // Display Last.fm-like activity from Discord data only if no Spotify activity
+// Display Last.fm-like activity from Discord data only if no Spotify activity
 function displayLastfmActivity(user) {
     const lastfmSection = document.getElementById('lastfm');
 
     // If Spotify is active, hide Last.fm section and return
     if (user.spotify) {
-        lastfmSection.style.display = 'none';
+        lastfmSection.classList.add('hidden');
         return;
     }
 
@@ -599,7 +631,7 @@ function displayLastfmActivity(user) {
 
     if (!musicActivity) {
         // Hide section if not listening
-        lastfmSection.style.display = 'none';
+        lastfmSection.classList.add('hidden');
         return;
     }
 
@@ -619,55 +651,113 @@ function displayLastfmActivity(user) {
     document.getElementById('lastfm-album-cover').src = coverUrl;
     document.getElementById('lastfm-album-tooltip').textContent = album;
 
-    lastfmSection.style.display = 'block';
+    lastfmSection.classList.remove('hidden');
 }
 
-// Initialize
-        document.addEventListener('DOMContentLoaded', () => {
-            createParticles();
-            fetchDiscordData();
-            initializeModal();
-            initializeAvatarModal();
-            
-            // Refresh data every 5 seconds
-            setInterval(fetchDiscordData, 5000);
-            
-            // Check for song changes more frequently
-            spotifyCheckInterval = setInterval(checkForNewSpotifySong, 5000);
-        });
+// Initialize Application
+async function initApp() {
+    try {
+        // 1. Console Art
+        printConsoleArt();
 
-        // Add smooth scroll behavior
-        document.documentElement.style.scrollBehavior = 'smooth';
-
-        // DATA LOAD
-        document.addEventListener("DOMContentLoaded", function() {
-    fetch('/links.json')
-        .then(response => response.json())
-        .then(links => {
-            const grid = document.getElementById('links-grid');
-            grid.innerHTML = '';
-            links.forEach(link => {
-                const a = document.createElement('a');
-                a.href = link.url;
-                a.className = 'link-item';
-                if (!link.url.startsWith('mailto:')) a.target = '_blank';
-
-                const icon = document.createElement('i');
-                icon.className = link.icon + ' link-icon';
-
-                const span = document.createElement('span');
-                span.className = 'link-label';
-                span.textContent = link.label;
-
-                a.appendChild(icon);
-                a.appendChild(span);
-                grid.appendChild(a);
-            });
-        })
-        .catch(err => {
-            console.error('Failed to load links:', err);
-        });
-});
+
+        // 1. Create Particles - Removed
+        // createParticles();
+
+        // 2. Initialize UI Interactions
+        initializeModal();
+        initializeAvatarModal();
+
+        // 3. Load Links (Static Data)
+        await loadLinks();
+
+        // 4. Start Data Fetching (Dynamic Data - Last)
+        console.log('Starting data fetch...');
+        await fetchDiscordData();
+
+        // 5. Start Intervals
+        setInterval(fetchDiscordData, 5000);
+        spotifyCheckInterval = setInterval(checkForNewSpotifySong, 5000);
+
+        console.log('Application Initialized Successfully');
+    } catch (err) {
+        console.error('Initialization failed:', err);
+    }
+}
+
+// Load Links Helper
+// Load Links Helper (Synchronous - No Fetch)
+function loadLinks() {
+    const links = [
+        {
+            "label": "GitHub",
+            "url": "https://github.com/MrStuffmaker",
+            "icon": "ph-fill ph-github-logo"
+        },
+        {
+            "label": "Donate",
+            "url": "https://paypal.me/mrstuffmaker",
+            "icon": "ph-fill ph-paypal-logo"
+        },
+        {
+            "label": "Telegram",
+            "url": "https://telegram.me/Remzcore",
+            "icon": "ph-fill ph-telegram-logo"
+        },
+        {
+            "label": "Email",
+            "url": "mailto:support@stuffmaker.org",
+            "icon": "ph-fill ph-envelope"
+        },
+        {
+            "label": "Mastodon",
+            "url": "https://mastodon.social/@stuffmaker",
+            "icon": "ph-fill ph-mastodon-logo"
+        },
+        {
+            "label": "Discord",
+            "url": "https://discord.fish/stuffmaker",
+            "icon": "ph-fill ph-discord-logo"
+        }
+    ];
+
+    const grid = document.getElementById('links-grid');
+    if (!grid) return;
+    grid.innerHTML = '';
+
+    links.forEach(link => {
+        const a = document.createElement('a');
+        a.href = link.url;
+        a.className = 'flex flex-col items-center justify-center p-3 rounded-lg bg-zinc-800/50 border border-zinc-700/50 hover:bg-zinc-800 hover:border-zinc-600 transition-all duration-300 group relative text-center aspect-square';
+        if (!link.url.startsWith('mailto:')) a.target = '_blank';
+
+        const icon = document.createElement('i');
+        icon.className = link.icon + ' text-xl mb-2 text-zinc-500 group-hover:text-zinc-200 transition-all duration-300';
+
+        const span = document.createElement('span');
+        span.className = 'text-[10px] font-bold uppercase tracking-wider text-zinc-600 group-hover:text-zinc-400 transition-colors';
+        span.textContent = link.label;
+
+        a.appendChild(icon);
+        a.appendChild(span);
+        grid.appendChild(a);
+    });
+
+    return Promise.resolve(); // Keep Promise interface for initApp await
+}
+
+// Start when DOM is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initApp);
+} else {
+    initApp();
+}
+
+// Add smooth scroll behavior
+document.documentElement.style.scrollBehavior = 'smooth';
+
+// Removed old data load logic to prevent duplicates
+// document.addEventListener("DOMContentLoaded", ... replaced by initApp
 
 document.addEventListener('DOMContentLoaded', () => {
     const dcBtn = document.getElementById('dc-btn');
@@ -679,40 +769,81 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 });
 
-window.addEventListener('DOMContentLoaded', function() {
-    // Preloader logic
-    const images = Array.from(document.images);
-    let loaded = 0;
-    if (images.length === 0) {
-        document.getElementById('site-preloader').style.display = 'none';
+// Legacy preloader logic removed
+// Stats for Nerds Logic
+function countLines(text) {
+    return text.split(/\r?\n/).length;
+}
+
+async function getFileLines(url) {
+    try {
+        const res = await fetch(url);
+        if (!res.ok) return 0;
+        const text = await res.text();
+        return countLines(text);
+    } catch {
+        return 0;
     }
-    images.forEach(img => {
-        if (img.complete) {
-            loaded++;
-            if (loaded === images.length) {
-                document.getElementById('site-preloader').style.display = 'none';
+}
+
+async function showAvatarStats() {
+    const htmlLines = countLines(document.documentElement.outerHTML);
+    const cssLines = await getFileLines('styles.css');
+    const jsLines = await getFileLines('script.js');
+    const total = htmlLines + cssLines + jsLines;
+
+    // Tailwind styled output
+    const output = `
+        <div class="flex justify-between"><span>HTML:</span> <span class="text-white">${htmlLines}</span></div>
+        <div class="flex justify-between"><span>CSS:</span> <span class="text-white">${cssLines}</span></div>
+        <div class="flex justify-between"><span>JS:</span> <span class="text-white">${jsLines}</span></div>
+        <div class="border-t border-white/10 mt-1 pt-1 flex justify-between font-bold text-indigo-400"><span>Total:</span> <span>${total}</span></div>
+    `;
+
+    const statsEl = document.getElementById('avatar-stats-lines');
+    if (statsEl) statsEl.innerHTML = output;
+}
+
+// Show stats when avatar modal is opened
+const avatarModalOverlay = document.getElementById('avatar-modal-overlay');
+if (avatarModalOverlay) {
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.target.classList.contains('visible')) {
+                showAvatarStats();
             }
-        } else {
-            img.addEventListener('load', () => {
-                loaded++;
-                if (loaded === images.length) {
-                    document.getElementById('site-preloader').style.display = 'none';
-                }
-            });
-            img.addEventListener('error', () => {
-                loaded++;
-                if (loaded === images.length) {
-                    document.getElementById('site-preloader').style.display = 'none';
-                }
-            });
-   }
-  });
-// OTHER LOGIC DONT TOUCH 
-
-    // Discord avatar logic
-    // Replace these with your actual Discord user ID and avatar hash
-//    const discordUserId = 'YOUR_USER_ID';
-//    const discordAvatarHash = 'YOUR_AVATAR_HASH';
-//    const avatarUrl = `https://cdn.discordapp.com/avatars/${discordUserId}/${discordAvatarHash}.png?size=1024`;
-//    document.getElementById('avatar').src = avatarUrl;
- });
\ No newline at end of file
+        });
+    });
+    observer.observe(avatarModalOverlay, { attributes: true, attributeFilter: ['class'] });
+}
+
+// Console Art
+function printConsoleArt() {
+    const art = `
+          _____                   _______                   _____                _____          
+         /\\    \\                 /::\\    \\                 /\\    \\              |\\    \\         
+        /::\\____\\               /::::\\    \\               /::\\____\\             |:\\____\\        
+       /::::|   |              /::::::\\    \\             /::::|   |             |::|   |        
+      /:::::|   |             /::::::::\\    \\           /:::::|   |             |::|   |        
+     /::::::|   |            /:::/~~\\:::\\    \\         /::::::|   |             |::|   |        
+    /:::/|::|   |           /:::/    \\:::\\    \\       /:::/|::|   |             |::|   |        
+   /:::/ |::|   |          /:::/    / \\:::\\    \\     /:::/ |::|   |             |::|   |        
+  /:::/  |::|   | _____   /:::/____/   \\:::\\____\\   /:::/  |::|   | _____       |::|___|______  
+ /:::/   |::|   |/\\    \\ |:::|    |     |:::|    | /:::/   |::|   |/\\    \\      /::::::::\\    \\ 
+/:: /    |::|   /::\\____\\|:::|____|     |:::|    |/:: /    |::|   /::\\____\\    /::::::::::\\____\\
+\\::/    /|::|  /:::/    / \\:::\\    \\   /:::/    / \\::/    /|::|  /:::/    /   /:::/~~~~/~~      
+ \\/____/ |::| /:::/    /   \\:::\\    \\ /:::/    /   \\/____/ |::| /:::/    /   /:::/    /         
+         |::|/:::/    /     \\:::\\    /:::/    /            |::|/:::/    /   /:::/    /          
+         |::::::/    /       \\:::\\__/:::/    /             |::::::/    /   /:::/    /           
+         |:::::/    /         \\::::::::/    /              |:::::/    /    \\::/    /            
+         |::::/    /           \\::::::/    /               |::::/    /      \\/____/             
+         /:::/    /             \\::::/    /                /:::/    /                           
+        /:::/    /               \\::/____/                /:::/    /                            
+        \\::/    /                 ~~                      \\::/    /                             
+         \\/____/                                           \\/____/                              
+                                                                                                `;
+    console.log(
+        `%c${art}`,
+        'font-weight: bold; background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); -webkit-background-clip: text; color: transparent; line-height: 1.2;'
+    );
+}
diff --git a/styles.css b/styles.css
index 729841d..7fd2ec3 100644
--- a/styles.css
+++ b/styles.css
@@ -1,1022 +1,41 @@
-* {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-             cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><circle cx="16" cy="16" r="12" fill="black" fill-opacity="0.4"/></svg>') 16 16, auto;
-        }
+/* Custom Cursor & Scrollbar Styles */
 
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 20px;
-            overflow-x: hidden;
-        }
-
-        .container {
-            max-width: 500px;
-            width: 100%;
-            position: relative;
-        }
-
-        .glass-card {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(20px);
-            border-radius: 20px;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            padding: 30px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-            transition: all 0.3s ease;
-            animation: slideUp 0.8s ease-out;
-        }
-
-        .glass-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
-        }
-
-        @keyframes slideUp {
-            from {
-                opacity: 0;
-                transform: translateY(50px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .profile-header {
-            text-align: center;
-            margin-bottom: 25px;
-        }
-
-        .avatar-container {
-            position: relative;
-            display: inline-block;
-            margin-bottom: 15px;
-        }
-
-        .avatar {
-            width: 100px;
-            height: 100px;
-            border-radius: 50%;
-            border: 4px solid rgba(255, 255, 255, 0.3);
-            transition: all 0.3s ease;
-            animation: pulse 2s infinite;
-            cursor: pointer;
-        }
-
-        .avatar:hover {
-            transform: scale(1.05);
-            border-color: rgba(255, 255, 255, 0.5);
-            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
-        }
-
-        @keyframes pulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-        }
-
-        .status-indicator {
-            position: absolute;
-            bottom: 5px;
-            right: 5px;
-            width: 25px;
-            height: 25px;
-            border-radius: 50%;
-            border: 3px solid white;
-            transition: all 0.3s ease;
-        }
-
-        .status-online { background: #43b581; }
-        .status-idle { background: #faa61a; }
-        .status-dnd { background: #f04747; }
-        .status-offline { background: #747f8d; }
-
-        .platform-indicators {
-    display: flex;
-    justify-content: center;
-    gap: 8px;
-    margin-top: 10px;
-    opacity: 0;
-    animation: fadeIn 1s ease-out 0.4s forwards;
-}
-
-.platform-icon {
-    width: 28px;
-    height: 28px;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-size: 12px;
-    transition: all 0.3s ease;
-    backdrop-filter: blur(10px);
-    position: relative;
-    overflow: hidden;
-}
-
-.platform-icon::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    transition: left 0.5s ease;
-}
-
-.platform-icon:hover::before {
-    left: 100%;
-}
-
-.platform-icon:hover {
-    background: rgba(255, 255, 255, 0.2);
-    transform: translateY(-2px) scale(1.05);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-}
-
-.platform-icon.desktop {
-    background: rgba(116, 127, 141, 0.2);
-    border-color: rgba(116, 127, 141, 0.4);
-}
-
-.platform-icon.desktop:hover {
-    background: rgba(116, 127, 141, 0.3);
-    box-shadow: 0 4px 15px rgba(116, 127, 141, 0.3);
-}
-
-.platform-icon.mobile {
-    background: rgba(67, 181, 129, 0.2);
-    border-color: rgba(67, 181, 129, 0.4);
-}
-
-.platform-icon.mobile:hover {
-    background: rgba(67, 181, 129, 0.3);
-    box-shadow: 0 4px 15px rgba(67, 181, 129, 0.3);
-}
-
-.platform-icon.web {
-    background: rgba(88, 101, 242, 0.2);
-    border-color: rgba(88, 101, 242, 0.4);
-}
-
-.platform-icon.web:hover {
-    background: rgba(88, 101, 242, 0.3);
-    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
+/* Base Styles */
+body {
+    cursor: default;
 }
 
-.platform-tooltip {
-    position: absolute;
-    bottom: 35px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: rgba(0, 0, 0, 0.9);
-    color: white;
-    padding: 6px 10px;
-    border-radius: 4px;
-    font-size: 11px;
-    white-space: nowrap;
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.3s ease;
-    z-index: 1000;
-    pointer-events: none;
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
 }
 
-.platform-tooltip::after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border: 4px solid transparent;
-    border-top-color: rgba(0, 0, 0, 0.9);
+::-webkit-scrollbar-track {
+    background: #09090b;
 }
 
-.platform-icon:hover .platform-tooltip {
-    opacity: 1;
-    visibility: visible;
-    transform: translateX(-50%) translateY(-3px);
+::-webkit-scrollbar-thumb {
+    background: #27272a;
+    border-radius: 3px;
 }
 
-@media (max-width: 480px) {
-    .platform-icon {
-        width: 24px;
-        height: 24px;
-        font-size: 10px;
-    }
-    
-    .platform-indicators {
-        gap: 6px;
-    }
-}
-
-        .username {
-            color: white;
-            font-size: 24px;
-            font-weight: 600;
-            margin-bottom: 5px;
-            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-        }
-
-        .discriminator {
-            color: rgba(255, 255, 255, 0.7);
-            font-size: 16px;
-            margin-bottom: 10px;
-        }
-
-        .bio-section {
-    margin: 20px 0;
-    opacity: 0;
-    animation: fadeIn 1s ease-out 0.3s forwards;
-}
-
-.bio-card {
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 15px;
-    padding: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    transition: all 0.3s ease;
-    text-align: center;
-}
-
-.bio-card:hover {
-    background: rgba(255, 255, 255, 0.1);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-}
-
-.bio-title {
-    color: white;
-    font-size: 16px;
-    font-weight: 600;
-    margin-bottom: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-}
-
-.bio-text {
-    color: rgba(255, 255, 255, 0.85);
-    font-size: 14px;
-    line-height: 1.6;
-    text-align: left;
-    max-width: 100%;
-    word-wrap: break-word;
-}
-
-.bio-text::first-letter {
-    font-size: 1.2em;
-    font-weight: 600;
-    color: white;
-}
-
-        .activity-section {
-            margin: 20px 0;
-            opacity: 0;
-            animation: fadeIn 1s ease-out 0.5s forwards;
-        }
-
-        @keyframes fadeIn {
-            to { opacity: 1; }
-        }
-
-        .activity-card {
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 15px;
-            padding: 15px;
-            margin-bottom: 15px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            transition: all 0.3s ease;
-        }
-
-        .activity-card:hover {
-            background: rgba(255, 255, 255, 0.1);
-            transform: scale(1.02);
-        }
-
-        .activity-title {
-            color: white;
-            font-size: 14px;
-            font-weight: 600;
-            margin-bottom: 8px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .activity-details {
-            color: rgba(255, 255, 255, 0.8);
-            font-size: 12px;
-            line-height: 1.4;
-        }
-
-        .spotify-section {
-            background: linear-gradient(135deg, #1db954, #1ed760);
-            border-radius: 15px;
-            padding: 15px;
-            margin: 15px 0;
-            color: white;
-            transition: all 0.3s ease;
-            opacity: 0;
-            animation: slideInLeft 0.8s ease-out 0.7s forwards;
-        }
-
-        @keyframes slideInLeft {
-            from {
-                opacity: 0;
-                transform: translateX(-50px);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-
-        .spotify-section:hover {
-            transform: scale(1.02);
-            box-shadow: 0 8px 25px rgba(29, 185, 84, 0.3);
-        }
-
-        .spotify-header {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            margin-bottom: 10px;
-        }
-
-        .spotify-icon {
-            font-size: 18px;
-        }
-
-        .song-info {
-            margin-bottom: 10px;
-        }
-
-        .song-title {
-            font-weight: 600;
-            font-size: 14px;
-            margin-bottom: 2px;
-        }
-
-        .song-artist {
-            font-size: 12px;
-            opacity: 0.9;
-        }
-
-        .progress-container {
-            background: rgba(255, 255, 255, 0.2);
-            height: 4px;
-            border-radius: 2px;
-            overflow: hidden;
-            margin-bottom: 5px;
-        }
-
-        .progress-bar {
-            height: 100%;
-            background: white;
-            border-radius: 2px;
-            transition: width 1s linear;
-            animation: progressPulse 2s infinite;
-        }
-
-        .progress-bar.correcting {
-            transition: width 0.5s ease;
-        }
-
-        @keyframes progressPulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.8; }
-        }
-
-        .progress-time {
-            display: flex;
-            justify-content: space-between;
-            font-size: 10px;
-            opacity: 0.8;
-        }
-
-        .spotify-content {
-    display: flex;
-    gap: 15px;
-    align-items: center;
-}
-
-.album-cover-container {
-    position: relative;
-    flex-shrink: 0;
-}
-
-.album-cover {
-    width: 60px;
-    height: 60px;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-}
-
-.album-cover:hover {
-    transform: scale(1.05);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
-}
-
-.song-details {
-    flex: 1;
-    min-width: 0;
-}
-
-.tooltip {
-    position: absolute;
-    bottom: 70px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: rgba(0, 0, 0, 0.9);
-    color: white;
-    padding: 8px 12px;
-    border-radius: 6px;
-    font-size: 12px;
-    white-space: nowrap;
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.3s ease;
-    z-index: 1000;
-    pointer-events: none;
-}
-
-.tooltip::after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border: 5px solid transparent;
-    border-top-color: rgba(0, 0, 0, 0.9);
-}
-
-.album-cover-container:hover .tooltip {
-    opacity: 1;
-    visibility: visible;
-    transform: translateX(-50%) translateY(-5px);
-}
-
-.spotify-transition {
-    transition: all 0.5s ease;
-}
-
-.spotify-transition.fade-out {
-    opacity: 0;
-    transform: translateY(-10px);
-}
-
-.spotify-transition.fade-in {
-    opacity: 1;
-    transform: translateY(0);
+::-webkit-scrollbar-thumb:hover {
+    background: #3f3f46;
 }
 
+/* Song Change Animation */
 .song-change-animation {
-    animation: songChange 0.5s ease;
+    animation: fadeIn 0.5s ease-in-out;
 }
 
-@keyframes songChange {
-    0% {
+@keyframes fadeIn {
+    from {
         opacity: 0;
-        transform: translateY(10px);
+        transform: translateY(5px);
     }
-    100% {
+
+    to {
         opacity: 1;
         transform: translateY(0);
     }
-}
-
-.sync-indicator {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.3);
-    transition: all 0.3s ease;
-}
-
-.sync-indicator.synced {
-    background: #43b581;
-    box-shadow: 0 0 8px rgba(67, 181, 129, 0.5);
-}
-
-.sync-indicator.correcting {
-    background: #faa61a;
-    animation: syncPulse 1s infinite;
-}
-
-.sync-indicator.error {
-    background: #f04747;
-}
-
-@keyframes syncPulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-}
-
-.modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.8);
-    backdrop-filter: blur(10px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2000;
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.3s ease;
-}
-
-.modal-overlay.active {
-    opacity: 1;
-    visibility: visible;
-}
-
-.modal-content {
-    position: relative;
-    max-width: 90vw;
-    max-height: 90vh;
-    transform: scale(0.8);
-    transition: all 0.3s ease;
-}
-
-.modal-overlay.active .modal-content {
-    transform: scale(1);
-}
-
-.modal-image {
-    width: 100%;
-    height: auto;
-    border-radius: 15px;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-    max-width: 500px;
-}
-
-.modal-close {
-    position: absolute;
-    top: -15px;
-    right: -15px;
-    width: 40px;
-    height: 40px;
-    background: rgba(255, 255, 255, 0.9);
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-    color: #333;
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-}
-
-.modal-close:hover {
-    background: white;
-    transform: scale(1.1);
-}
-
-.modal-info {
-    position: absolute;
-    bottom: -60px;
-    left: 0;
-    right: 0;
-    text-align: center;
-    color: white;
-    background: rgba(0, 0, 0, 0.7);
-    padding: 15px;
-    border-radius: 10px;
-    backdrop-filter: blur(10px);
-}
-
-.modal-song-title {
-    font-size: 18px;
-    font-weight: 600;
-    margin-bottom: 5px;
-}
-
-.modal-song-details {
-    font-size: 14px;
-    opacity: 0.9;
-}
-
-.avatar-modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.8);
-    backdrop-filter: blur(10px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2000;
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.3s ease;
-}
-
-.avatar-modal-overlay.active {
-    opacity: 1;
-    visibility: visible;
-}
-
-.avatar-modal-content {
-    position: relative;
-    max-width: 90vw;
-    max-height: 90vh;
-    transform: scale(0.8);
-    transition: all 0.3s ease;
-}
-
-.avatar-modal-overlay.active .avatar-modal-content {
-    transform: scale(1);
-}
-
-.avatar-modal-image {
-    width: 100%;
-    height: auto;
-    border-radius: 50%;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-    max-width: 400px;
-    border: 6px solid rgba(255, 255, 255, 0.3);
-    transition: all 0.3s ease;
-}
-
-.avatar-modal-close {
-    position: absolute;
-    top: -15px;
-    right: -15px;
-    width: 40px;
-    height: 40px;
-    background: rgba(255, 255, 255, 0.9);
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-    color: #333;
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-}
-
-.avatar-modal-close:hover {
-    background: white;
-    transform: scale(1.1);
-}
-
-.avatar-modal-actions {
-    position: absolute;
-    bottom: -70px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    gap: 15px;
-    width: 100%;
-    justify-content: center;
-}
-
-.avatar-action-btn {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: white;
-    padding: 12px 20px;
-    border-radius: 25px;
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 500;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-}
-
-.avatar-action-btn:hover {
-    background: rgba(255, 255, 255, 0.2);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-}
-
-.avatar-action-btn.download {
-    background: rgba(67, 181, 129, 0.2);
-    border-color: rgba(67, 181, 129, 0.4);
-}
-
-.avatar-action-btn.download:hover {
-    background: rgba(67, 181, 129, 0.3);
-    box-shadow: 0 8px 25px rgba(67, 181, 129, 0.3);
-}
-
-.avatar-modal-info {
-    position: absolute;
-    top: -60px;
-    left: 0;
-    right: 0;
-    text-align: center;
-    color: white;
-    background: rgba(0, 0, 0, 0.7);
-    padding: 15px;
-    border-radius: 10px;
-    backdrop-filter: blur(10px);
-}
-
-.avatar-modal-username {
-    font-size: 18px;
-    font-weight: 600;
-    margin-bottom: 5px;
-}
-
-.avatar-modal-id {
-    font-size: 12px;
-    opacity: 0.7;
-    font-family: 'Courier New', monospace;
-}
-
-        .links-section {
-            margin-top: 25px;
-            opacity: 0;
-            animation: fadeIn 1s ease-out 0.9s forwards;
-        }
-
-        .links-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));
-            gap: 15px;
-        }
-        .link-item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 15px;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 12px;
-            text-decoration: none;
-            color: white;
-            transition: all 0.3s ease;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .link-item:hover {
-            background: rgba(255, 255, 255, 0.15);
-            transform: translateY(-3px);
-            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-        }
-
-        .link-icon {
-            font-size: 20px;
-            margin-bottom: 8px;
-            transition: all 0.3s ease;
-        }
-
-        .link-item:hover .link-icon {
-            transform: scale(1.2);
-        }
-
-        .link-label {
-            font-size: 12px;
-            font-weight: 500;
-        }
-
-        .loading {
-            text-align: center;
-            color: rgba(255, 255, 255, 0.7);
-            padding: 20px;
-        }
-
-        .error {
-            text-align: center;
-            color: #f04747;
-            padding: 20px;
-            background: rgba(240, 71, 71, 0.1);
-            border-radius: 10px;
-            border: 1px solid rgba(240, 71, 71, 0.3);
-        }
-
-        @media (max-width: 480px) {
-            .glass-card {
-                padding: 20px;
-            }
-            
-            .username {
-                font-size: 20px;
-            }
-            
-            .links-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .bio-text {
-                font-size: 13px;
-            }
-
-            .bio-title {
-                font-size: 15px;
-            }
-        }
-
-        .floating-particles {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: -1;
-        }
-
-        .particle {
-            position: absolute;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 50%;
-            animation: float 6s infinite linear;
-        }
-
-        @keyframes float {
-            0% {
-                transform: translateY(100vh) rotate(0deg);
-                opacity: 0;
-            }
-            10% {
-                opacity: 1;
-            }
-            90% {
-                opacity: 1;
-            }
-            100% {
-                transform: translateY(-100px) rotate(360deg);
-                opacity: 0;
-            }
-        }
-/*IPAD*/
-@media (max-width: 1024px) and (min-width: 600px) {
-    html, body {
-        height: 100vh;
-        min-height: 100vh;
-        overflow: hidden;
-    }
-    .container {
-        max-width: 95vw;
-        width: 100vw;
-        min-height: 90vh;
-        padding: 10px 0;
-    }
-    .glass-card {
-        padding: 18px;
-    }
-    .bio-section,
-    .activity-section,
-    .links-section {
-        margin: 12px 0;
-    }
-    .username {
-        font-size: 18px;
-    }
-    .bio-text {
-        font-size: 13px;
-    }
-    .link-label {
-        font-size: 11px;
-    }
-    .links-grid {
-        grid-template-columns: repeat(3, 1fr);
-        gap: 10px;
-    }
-}
-/*BANGER DISCORD THING*/
-/* From Uiverse.io by kamehame-ha */ 
-.light-button button.bt {
-  position: relative;
-  height: 200px;
-  display: flex;
-  align-items: flex-end;
-  outline: none;
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.light-button button.bt .button-holder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100px;
-  width: 100px;
-  background-color: #0a0a0a;
-  border-radius: 5px;
-  color: #0f0f0f;
-  font-weight: 700;
-  transition: 300ms;
-  outline: #0f0f0f 2px solid;
-  outline-offset: 20;
-}
-
-.light-button button.bt .button-holder svg {
-  height: 50px;
-  fill: #0f0f0f;
-  transition: 300ms;
-}
-
-.light-button button.bt .light-holder {
-  position: absolute;
-  height: 200px;
-  width: 100px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.light-button button.bt .light-holder .dot {
-  position: absolute;
-  top: 0;
-  width: 10px;
-  height: 10px;
-  background-color: #0a0a0a;
-  border-radius: 10px;
-  z-index: 2;
-}
-
-.light-button button.bt .light-holder .light {
-  position: absolute;
-  top: 0;
-  width: 200px;
-  height: 200px;
-  clip-path: polygon(50% 0%, 25% 100%, 75% 100%);
-  background: transparent;
-}
-
-.light-button button.bt:hover .button-holder svg {
-  fill: rgba(88, 101, 242, 1);
-}
-
-.light-button button.bt:hover .button-holder {
-  color: rgba(88, 101, 242, 1);
-  outline: rgba(88, 101, 242, 1) 2px solid;
-  outline-offset: 2px;
-}
-
-.light-button button.bt:hover .light-holder .light {
-  background: rgb(255, 255, 255);
-  background: linear-gradient(
-    180deg,
-    rgba(88, 101, 242, 1) 0%,
-    rgba(255, 255, 255, 0) 75%,
-    rgba(255, 255, 255, 0) 100%
-  );
-}
-.light-button {
-    position: relative;
-    margin-top: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.version-info {
-    position: fixed;
-    bottom: 10px;
-    right: 10px;
-    font-size: 0.8em;
-    color: rgba(255, 255, 255, 0.5);
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    z-index: 100;
-    background: rgba(0, 0, 0, 0.3);
-    padding: 5px 10px;
-    border-radius: 4px;
-}
-
-.version-info i {
-    font-size: 0.9em;
-}
-
-.version-info:hover {
-    color: rgba(255, 255, 255, 0.8);
-    background: rgba(0, 0, 0, 0.5);
-    transition: all 0.2s ease;
 }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..38da71d
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,49 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ["./index.html", "./script.js"],
+    darkMode: 'class',
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['Inter', 'sans-serif'],
+                display: ['Outfit', 'sans-serif'],
+            },
+            colors: {
+                discord: {
+                    bg: '#36393f',
+                    dark: '#2f3136',
+                    modifier: '#202225',
+                    text: '#dcddde',
+                    muted: '#72767d',
+                    green: '#43b581',
+                    yellow: '#faa61a',
+                    red: '#f04747',
+                    gray: '#747f8d',
+                    blurple: '#5865F2'
+                },
+                spotify: {
+                    green: '#1DB954',
+                    dark: '#191414'
+                }
+            },
+            animation: {
+                'blob': 'blob 10s infinite',
+                'float': 'float 6s ease-in-out infinite',
+                'spin-slow': 'spin 3s linear infinite',
+            },
+            keyframes: {
+                blob: {
+                    '0%': { transform: 'translate(0px, 0px) scale(1)' },
+                    '33%': { transform: 'translate(30px, -50px) scale(1.1)' },
+                    '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
+                    '100%': { transform: 'translate(0px, 0px) scale(1)' },
+                },
+                float: {
+                    '0%, 100%': { transform: 'translateY(0)' },
+                    '50%': { transform: 'translateY(-10px)' },
+                }
+            }
+        }
+    },
+    plugins: [],
+}
