Skip to content

Commit 82388a2

Browse files
System-EndSystem-End
committed
.
1 parent 32e3e38 commit 82388a2

File tree

3 files changed

+82
-43
lines changed

3 files changed

+82
-43
lines changed

‎src/App.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
2-
import Navbar from '@/components/Navbar';
3-
import AboutPage from '@/pages/AboutPage';
4-
import ProjectsPage from '@/pages/ProjectsPage';
1+
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
2+
import Navbar from "@/components/Navbar";
3+
import AboutPage from "@/pages/AboutPage";
4+
import ProjectsPage from "@/pages/ProjectsPage";
55

66
const App = () => {
77
return (
88
<Router>
9-
<div className="min-h-screen bg-background-primary relative">
9+
<div className="min-h-screen bg-background-primary">
1010
{/* Background Logo */}
1111
<div className="fixed inset-0 z-behind pointer-events-none">
12-
<div className="absolute inset-0 bg-background-primary">
12+
<div className="absolute inset-0">
1313
<img
1414
src="/logo.jpg"
1515
alt="Background Logo"
@@ -19,15 +19,15 @@ const App = () => {
1919
</div>
2020

2121
{/* Main Content */}
22-
<div className="relative z-0">
22+
<div className="relative">
2323
<Navbar />
24-
<main className="container mx-auto px-4 py-8 space-y-8">
24+
<main className="content-wrapper section-spacing">
2525
<Routes>
2626
<Route path="/" element={<AboutPage />} />
2727
<Route path="/projects" element={<ProjectsPage />} />
2828
<Route path="*" element={
29-
<div className="flex flex-col items-center justify-center min-h-[60vh]">
30-
<h1 className="text-4xl font-bold text-glow mb-4">404: Page Not Found</h1>
29+
<div className="flex flex-col items-center justify-center min-h-[60vh] space-y-4">
30+
<h1 className="text-4xl font-bold text-glow">404: Page Not Found</h1>
3131
<p className="text-xl text-text-primary/80">This fox couldn't find what you're looking for.</p>
3232
</div>
3333
} />

‎src/components/MusicDisplay.tsx‎

Lines changed: 46 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,42 @@
1-
import { useState, useEffect } from 'react';
2-
import { Music, Loader } from 'lucide-react';
1+
import { useState, useEffect } from "react";
2+
import { Music, Loader } from "lucide-react";
33

4-
const playlists = [
5-
"58ggvvTcs95yhcSeSxLGks", // Playlist 1
6-
"6e2q3GgjEDxMWJBSln2Py5" // Playlist 2
4+
interface Track {
5+
name: string;
6+
artist: string;
7+
playlistId?: string;
8+
}
9+
10+
const PLAYLISTS = [
11+
"58ggvvTcs95yhcSeSxLGks",
12+
"6e2q3GgjEDxMWJBSln2Py5"
713
];
814

915
const MusicDisplay = () => {
10-
const [currentTrack, setCurrentTrack] = useState(null);
16+
const [currentTrack, setCurrentTrack] = useState<Track | null>(null);
1117
const [loading, setLoading] = useState(true);
1218

1319
useEffect(() => {
14-
const getRandomPlaylist = () => playlists[Math.floor(Math.random() * playlists.length)];
20+
const getRandomPlaylist = () => PLAYLISTS[Math.floor(Math.random() * PLAYLISTS.length)];
1521

1622
const updateTrack = async () => {
17-
setLoading(true);
18-
const playlist = getRandomPlaylist();
19-
setCurrentTrack({
20-
name: "Music from Playlist",
21-
artist: "Current Mix"
22-
});
23-
setLoading(false);
23+
try {
24+
setLoading(true);
25+
const playlistId = getRandomPlaylist();
26+
27+
const track: Track = {
28+
name: "Music from Playlist",
29+
artist: "Current Mix",
30+
playlistId
31+
};
32+
33+
setCurrentTrack(track);
34+
} catch (error) {
35+
console.error("Failed to update track:", error);
36+
setCurrentTrack(null);
37+
} finally {
38+
setLoading(false);
39+
}
2440
};
2541

2642
updateTrack();
@@ -30,31 +46,40 @@ const MusicDisplay = () => {
3046

3147
if (loading) {
3248
return (
33-
<div className="flex items-center gap-2">
49+
<div className="flex items-center gap-3 p-4">
3450
<Loader size={20} className="animate-spin" />
3551
<span>Loading music...</span>
3652
</div>
3753
);
3854
}
3955

56+
if (!currentTrack) {
57+
return (
58+
<div className="flex items-center gap-3 p-4">
59+
<Music size={20} className="text-accent-primary" />
60+
<span>No track available</span>
61+
</div>
62+
);
63+
}
64+
4065
return (
41-
<div className="flex items-center gap-4 p-4 bg-background-secondary/50 rounded-lg">
42-
<div className="relative w-8 h-8">
66+
<div className="flex items-center gap-6 p-6 bg-background-secondary/50 rounded-lg">
67+
<div className="relative w-10 h-10">
4368
{[...Array(3)].map((_, i) => (
4469
<div
4570
key={i}
4671
className="absolute bottom-0 w-2 bg-accent-neon animate-float"
4772
style={{
48-
left: `${i * 12}px`,
73+
left: `${i * 14}px`,
4974
height: `${Math.random() * 100}%`,
5075
animationDelay: `${i * 0.2}s`
5176
}}
5277
/>
5378
))}
5479
</div>
55-
<div>
56-
<p className="font-medium">{currentTrack?.name}</p>
57-
<p className="text-sm opacity-80">{currentTrack?.artist}</p>
80+
<div className="space-y-2">
81+
<p className="font-medium text-lg">{currentTrack.name}</p>
82+
<p className="text-sm opacity-80">{currentTrack.artist}</p>
5883
</div>
5984
</div>
6085
);

‎src/styles/base.css‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,35 +19,49 @@
1919

2020
body {
2121
@apply bg-background-primary text-text-primary;
22-
font-family: 'Inter', sans-serif;
22+
font-family: "Inter", sans-serif;
23+
}
24+
25+
/* Global spacing */
26+
.content-wrapper {
27+
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
28+
}
29+
30+
.section-spacing {
31+
@apply space-y-12;
32+
}
33+
34+
.card-spacing {
35+
@apply space-y-8;
36+
}
37+
38+
.element-spacing {
39+
@apply space-y-4;
2340
}
2441
}
2542

2643
@layer components {
2744
.nav-link {
28-
@apply flex items-center gap-2 px-4 py-2 rounded-lg transition-all
29-
hover:bg-accent-primary/10 hover:text-accent-neon;
45+
@apply flex items-center gap-3 px-4 py-2 rounded-lg transition-all
46+
hover:bg-accent-primary/10 hover:text-accent-neon my-1;
3047
}
3148

3249
.nav-link.active {
3350
@apply bg-accent-primary/20 text-accent-neon;
3451
}
3552

3653
.fox-card {
37-
@apply relative bg-gradient-card rounded-xl p-6 border border-accent-primary/20
54+
@apply relative bg-gradient-card rounded-xl p-8 border border-accent-primary/20
3855
transition-all hover:border-accent-neon/40 hover:shadow-lg
39-
hover:shadow-accent-primary/10;
56+
hover:shadow-accent-primary/10 mb-8;
4057
}
4158

4259
.text-glow {
4360
@apply text-text-primary drop-shadow-[0_0_10px_rgba(224,170,255,0.5)];
4461
}
45-
}
4662

47-
.content-grid {
48-
@apply grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3;
49-
}
50-
51-
.card-spacing > * + * {
52-
@apply mt-8;
63+
/* Card Grid */
64+
.content-grid {
65+
@apply grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3;
66+
}
5367
}

0 commit comments

Comments
 (0)