6464 animation-delay: 0.4s;
6565 }
6666
67+ @keyframes gentleBounce {
68+ 0%, 100% {
69+ transform: translateY(0px);
70+ }
71+ 50% {
72+ transform: translateY(-8px);
73+ }
74+ }
75+
76+ .gentle-bounce {
77+ animation: gentleBounce 2s ease-in-out infinite;
78+ }
79+
6780 .glass-effect {
6881 background: rgba(255, 255, 255, 0.08);
6982 backdrop-filter: blur(20px);
7386 .profile-glow {
7487 box-shadow: 0 0 60px rgba(85, 118, 216, 0.4);
7588 }
76-
77- .music-button-wrapper {
78- position: fixed;
79- bottom: 2rem;
80- right: 2rem;
81- z-index: 50;
82- display: flex;
83- align-items: center;
84- }
85-
86- .music-button {
87- position: relative;
88- }
89-
90- .volume-slider-container {
91- position: absolute;
92- right: 100%;
93- top: 50%;
94- transform: translateY(-50%);
95- margin-right: 1rem;
96- opacity: 0;
97- transition: opacity 0.3s ease;
98- pointer-events: none;
99- }
100-
101- .music-button-wrapper:hover .volume-slider-container,
102- .music-button-wrapper.playing .volume-slider-container {
103- opacity: 1;
104- pointer-events: auto;
105- }
106-
107- .volume-slider {
108- width: 100px;
109- height: 4px;
110- border-radius: 2px;
111- background: rgba(255, 255, 255, 0.2);
112- outline: none;
113- -webkit-appearance: none;
114- }
115-
116- .volume-slider::-webkit-slider-thumb {
117- -webkit-appearance: none;
118- appearance: none;
119- width: 14px;
120- height: 14px;
121- border-radius: 50%;
122- background: #60a5fa;
123- cursor: pointer;
124- border: 2px solid white;
125- }
126-
127- .volume-slider::-moz-range-thumb {
128- width: 14px;
129- height: 14px;
130- border-radius: 50%;
131- background: #60a5fa;
132- cursor: pointer;
133- border: 2px solid white;
134- }
13589 </style >
13690</head >
13791<body class =" overflow-hidden"
162116 <!-- Buttons -->
163117 <div class =" flex gap-4 mb-8 fade-in-up delay-300"
164118 <a href =" /about" class =" flex-1"
165- <button class =" w-full px-6 py-3 bg-blue-400/50 text-white rounded-xl font-medium hover:bg-blue-400/70 hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-blue-400/50"
119+ <button class =" w-full px-6 py-3 bg-blue-400/50 text-white rounded-xl font-medium hover:bg-blue-400/70 hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-blue-400/50 cursor-pointer "
166120 About
167121 </button >
168122 </a >
169123 <a href =" /projects" class =" flex-1"
170- <button class =" w-full px-6 py-3 bg-white/20 text-white rounded-xl font-medium hover:bg-white/30 hover:scale-105 transition-all duration-300"
124+ <button class =" w-full px-6 py-3 bg-white/20 text-white rounded-xl font-medium hover:bg-white/30 hover:scale-105 transition-all duration-300 cursor-pointer "
171125 Projects
172126 </button >
173127 </a >
207161 </div >
208162 </div >
209163
210- <!-- Music Player Button -->
211- <div class =" music-button-wrapper"
212- <button id =" musicButton" class =" music-button w-14 h-14 rounded-full bg-blue-400/50 flex items-center justify-center hover:bg-blue-400/70 transition-all duration-300 shadow-lg border border-white/20 group"
213- <div class =" volume-slider-container"
214- <input type =" range" id =" volumeSlider" class =" volume-slider" min =" 0" max =" 100" value =" 70"
215- </div >
216- <!-- Muted icon (when not playing) -->
217- <svg id =" mutedIcon" class =" w-6 h-6 text-white" fill =" currentColor" viewBox =" 0 0 24 24"
218- <!-- Music note -->
219- <path d =" M12 3v9.28c-.47-.46-1.1-.72-1.8-.72-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" opacity =" 0.6"
220- <!-- Cross line -->
221- <line x1 =" 3" y1 =" 21" x2 =" 21" y2 =" 3" stroke =" currentColor" stroke-width =" 2" stroke-linecap =" round"
222- </svg >
223- <!-- Playing icon (when playing) -->
224- <svg id =" playingIcon" class =" w-6 h-6 text-white hidden" fill =" currentColor" viewBox =" 0 0 24 24"
225- <path d =" M12 3v9.28c-.47-.46-1.1-.72-1.8-.72-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"
226- </svg >
227- </button >
228- </div >
229-
230164 <script >
231- // Wait for Howler to load
232- function initializeMusic() {
233- if (typeof Howl === 'undefined') {
234- setTimeout(initializeMusic, 100);
235- return;
236- }
237-
238- const hoverSound = new Howl({
239- src: ['/hover-sound.mp3'],
240- volume: 0.5,
241- onload: () => console.log('Hover sound loaded')
242- });
243-
244- const musicPlayer = new Howl({
245- src: ['/music.mp3'],
246- volume: 0.7,
247- loop: true,
248- onload: () => console.log('Music loaded')
249- });
250-
251- let isPlaying = false;
252- const musicButton = document.getElementById('musicButton');
253- const musicButtonWrapper = musicButton?.parentElement;
254- const mutedIcon = document.getElementById('mutedIcon');
255- const playingIcon = document.getElementById('playingIcon');
256- const volumeSlider = document.getElementById('volumeSlider');
257-
258- if (musicButton && musicButtonWrapper) {
259- console.log('Music button found');
260-
261- // Hover sound effect
262- musicButton.addEventListener('mouseenter', () => {
263- console.log('Hover detected');
264- hoverSound.play();
265- });
266-
267- // Click to toggle music
268- musicButton.addEventListener('click', (e) => {
269- // Don't toggle if clicking on slider
270- if (e.target === volumeSlider || volumeSlider?.contains(e.target as Node)) {
271- return;
272- }
273- console.log('Click detected, isPlaying:', isPlaying);
274- if (isPlaying) {
275- musicPlayer.stop();
276- isPlaying = false;
277- mutedIcon.classList.remove('hidden');
278- playingIcon.classList.add('hidden');
279- musicButtonWrapper.classList.remove('playing');
280- } else {
281- musicPlayer.play();
282- isPlaying = true;
283- mutedIcon.classList.add('hidden');
284- playingIcon.classList.remove('hidden');
285- musicButtonWrapper.classList.add('playing');
286- }
287- });
288-
289- // Volume slider control
290- if (volumeSlider) {
291- // Prevent slider clicks from toggling music
292- volumeSlider.addEventListener('mousedown', (e) => {
293- e.stopPropagation();
294- });
295-
296- volumeSlider.addEventListener('input', (e) => {
297- e.stopPropagation();
298- const volume = (e.target as HTMLInputElement).value;
299- musicPlayer.volume(parseInt(volume) / 100);
300- console.log('Volume set to:', volume);
301- });
302- }
303- } else {
304- console.log('Music button not found');
305- }
306- }
307-
308- // Initialize when DOM is ready
309- if (document.readyState === 'loading') {
310- document.addEventListener('DOMContentLoaded', initializeMusic);
311- } else {
312- initializeMusic();
313- }
165+ // No music player here anymore - moved to Layout.astro
314166 </script >
315167</body >
316168</html >
0 commit comments