fix: update music display and base styles

src/App.tsx

@@ -1,15 +1,15 @@
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Navbar from '@/components/Navbar';
-import AboutPage from '@/pages/AboutPage';
-import ProjectsPage from '@/pages/ProjectsPage';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Navbar from "@/components/Navbar";
+import AboutPage from "@/pages/AboutPage";
+import ProjectsPage from "@/pages/ProjectsPage";
 
 const App = () => {
     return (
         <Router>
-            <div className="min-h-screen bg-background-primary relative">
+            <div className="min-h-screen bg-background-primary">
                 {/* Background Logo */}
                 <div className="fixed inset-0 z-behind pointer-events-none">
-                    <div className="absolute inset-0 bg-background-primary">
+                    <div className="absolute inset-0">
                         <img 
                             src="/logo.jpg" 
                             alt="Background Logo" 
@@ -19,15 +19,15 @@ const App = () => {
                 </div>
                 
                 {/* Main Content */}
-                <div className="relative z-0">
+                <div className="relative">
                     <Navbar />
-                    <main className="container mx-auto px-4 py-8 space-y-8">
+                    <main className="content-wrapper section-spacing">
                         <Routes>
                             <Route path="/" element={<AboutPage />} />
                             <Route path="/projects" element={<ProjectsPage />} />
                             <Route path="*" element={
-                                <div className="flex flex-col items-center justify-center min-h-[60vh]">
-                                    <h1 className="text-4xl font-bold text-glow mb-4">404: Page Not Found</h1>
+                                <div className="flex flex-col items-center justify-center min-h-[60vh] space-y-4">
+                                    <h1 className="text-4xl font-bold text-glow">404: Page Not Found</h1>
                                     <p className="text-xl text-text-primary/80">This fox couldn't find what you're looking for.</p>
                                 </div>
                             } />

src/components/MusicDisplay.tsx

@@ -1,26 +1,42 @@
-import { useState, useEffect } from 'react';
-import { Music, Loader } from 'lucide-react';
+import { useState, useEffect } from "react";
+import { Music, Loader } from "lucide-react";
 
-const playlists = [
-    "58ggvvTcs95yhcSeSxLGks",  // Playlist 1
-    "6e2q3GgjEDxMWJBSln2Py5"   // Playlist 2
+interface Track {
+    name: string;
+    artist: string;
+    playlistId?: string;
+}
+
+const PLAYLISTS = [
+    "58ggvvTcs95yhcSeSxLGks",
+    "6e2q3GgjEDxMWJBSln2Py5"
 ];
 
 const MusicDisplay = () => {
-    const [currentTrack, setCurrentTrack] = useState(null);
+    const [currentTrack, setCurrentTrack] = useState<Track | null>(null);
     const [loading, setLoading] = useState(true);
 
     useEffect(() => {
-        const getRandomPlaylist = () => playlists[Math.floor(Math.random() * playlists.length)];
+        const getRandomPlaylist = () => PLAYLISTS[Math.floor(Math.random() * PLAYLISTS.length)];
         
         const updateTrack = async () => {
-            setLoading(true);
-            const playlist = getRandomPlaylist();
-            setCurrentTrack({ 
-                name: "Music from Playlist",
-                artist: "Current Mix"
-            });
-            setLoading(false);
+            try {
+                setLoading(true);
+                const playlistId = getRandomPlaylist();
+                
+                const track: Track = { 
+                    name: "Music from Playlist",
+                    artist: "Current Mix",
+                    playlistId
+                };
+                
+                setCurrentTrack(track);
+            } catch (error) {
+                console.error("Failed to update track:", error);
+                setCurrentTrack(null);
+            } finally {
+                setLoading(false);
+            }
         };
 
         updateTrack();
@@ -30,31 +46,40 @@ const MusicDisplay = () => {
 
     if (loading) {
         return (
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-3 p-4">
                 <Loader size={20} className="animate-spin" />
                 <span>Loading music...</span>
             </div>
         );
     }
 
+    if (!currentTrack) {
+        return (
+            <div className="flex items-center gap-3 p-4">
+                <Music size={20} className="text-accent-primary" />
+                <span>No track available</span>
+            </div>
+        );
+    }
+
     return (
-        <div className="flex items-center gap-4 p-4 bg-background-secondary/50 rounded-lg">
-            <div className="relative w-8 h-8">
+        <div className="flex items-center gap-6 p-6 bg-background-secondary/50 rounded-lg">
+            <div className="relative w-10 h-10">
                 {[...Array(3)].map((_, i) => (
                     <div
                         key={i}
                         className="absolute bottom-0 w-2 bg-accent-neon animate-float"
                         style={{
-                            left: `${i * 12}px`,
+                            left: `${i * 14}px`,
                             height: `${Math.random() * 100}%`,
                             animationDelay: `${i * 0.2}s`
                         }}
                     />
                 ))}
             </div>
-            <div>
-                <p className="font-medium">{currentTrack?.name}</p>
-                <p className="text-sm opacity-80">{currentTrack?.artist}</p>
+            <div className="space-y-2">
+                <p className="font-medium text-lg">{currentTrack.name}</p>
+                <p className="text-sm opacity-80">{currentTrack.artist}</p>
             </div>
         </div>
     );

src/styles/base.css

@@ -19,14 +19,31 @@
 
   body {
     @apply bg-background-primary text-text-primary;
-    font-family: 'Inter', sans-serif;
+    font-family: "Inter", sans-serif;
+  }
+
+  /* Global spacing */
+  .content-wrapper {
+    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
+  }
+
+  .section-spacing {
+    @apply space-y-12;
+  }
+
+  .card-spacing {
+    @apply space-y-8;
+  }
+
+  .element-spacing {
+    @apply space-y-4;
   }
 }
 
 @layer components {
   .nav-link {
-    @apply flex items-center gap-2 px-4 py-2 rounded-lg transition-all
-           hover:bg-accent-primary/10 hover:text-accent-neon;
+    @apply flex items-center gap-3 px-4 py-2 rounded-lg transition-all
+           hover:bg-accent-primary/10 hover:text-accent-neon my-1;
   }
 
   .nav-link.active {
@@ -34,20 +51,17 @@
   }
 
   .fox-card {
-    @apply relative bg-gradient-card rounded-xl p-6 border border-accent-primary/20
+    @apply relative bg-gradient-card rounded-xl p-8 border border-accent-primary/20
            transition-all hover:border-accent-neon/40 hover:shadow-lg
-           hover:shadow-accent-primary/10;
+           hover:shadow-accent-primary/10 mb-8;
   }
 
   .text-glow {
     @apply text-text-primary drop-shadow-[0_0_10px_rgba(224,170,255,0.5)];
   }
-}
 
-.content-grid {
-  @apply grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3;
-}
-
-.card-spacing > * + * {
-  @apply mt-8;
+  /* Card Grid */
+  .content-grid {
+    @apply grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3;
+  }
 }