Hugging Face's logo

Spaces:
luis-poe
/
metalsite
Running

App Files Community
luis-poe commited on
Commit
ac2af89
·
verified ·
1 Parent(s): bc2aef6

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +407 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Metalsite
3
- emoji: 👀
4
- colorFrom: purple
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: metalsite
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,407 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Luis Poehlmann | Nature Climber & Metalhead</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Montserrat:wght@300;400;700&display=swap');
11
+
12
+ .black-metal-font {
13
+ font-family: 'UnifrakturMaguntia', cursive;
14
+ }
15
+
16
+ .body-font {
17
+ font-family: 'Montserrat', sans-serif;
18
+ }
19
+
20
+ .hero-image {
21
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1517649763962-0c623066013b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
22
+ background-size: cover;
23
+ background-position: center;
24
+ }
25
+
26
+ .climbing-image {
27
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1518604666860-9ed391f76460?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
28
+ background-size: cover;
29
+ background-position: center;
30
+ }
31
+
32
+ .metal-image {
33
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
34
+ background-size: cover;
35
+ background-position: center;
36
+ }
37
+
38
+ .nature-image {
39
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2074&q=80');
40
+ background-size: cover;
41
+ background-position: center;
42
+ }
43
+
44
+ .nav-link {
45
+ position: relative;
46
+ }
47
+
48
+ .nav-link::after {
49
+ content: '';
50
+ position: absolute;
51
+ width: 0;
52
+ height: 2px;
53
+ bottom: -2px;
54
+ left: 0;
55
+ background-color: #f43f5e;
56
+ transition: width 0.3s ease;
57
+ }
58
+
59
+ .nav-link:hover::after {
60
+ width: 100%;
61
+ }
62
+
63
+ .album-cover {
64
+ transition: transform 0.3s ease;
65
+ }
66
+
67
+ .album-cover:hover {
68
+ transform: scale(1.05);
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="bg-gray-900 text-gray-100 body-font">
73
+ <!-- Navigation -->
74
+ <nav class="fixed w-full z-10 bg-black bg-opacity-90 backdrop-blur-sm">
75
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
76
+ <div class="flex items-center justify-between h-16">
77
+ <div class="flex items-center">
78
+ <span class="black-metal-font text-2xl text-rose-500">LUIS POEHLMANN</span>
79
+ </div>
80
+ <div class="hidden md:block">
81
+ <div class="ml-10 flex items-baseline space-x-8">
82
+ <a href="#home" class="nav-link px-3 py-2 text-sm font-medium">HOME</a>
83
+ <a href="#about" class="nav-link px-3 py-2 text-sm font-medium">ABOUT</a>
84
+ <a href="#climbing" class="nav-link px-3 py-2 text-sm font-medium">CLIMBING</a>
85
+ <a href="#metal" class="nav-link px-3 py-2 text-sm font-medium">BLACK METAL</a>
86
+ <a href="#contact" class="nav-link px-3 py-2 text-sm font-medium">CONTACT</a>
87
+ </div>
88
+ </div>
89
+ <div class="md:hidden">
90
+ <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none">
91
+ <i class="fas fa-bars text-xl"></i>
92
+ </button>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Mobile menu -->
98
+ <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-95">
99
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
100
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium">HOME</a>
101
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium">ABOUT</a>
102
+ <a href="#climbing" class="block px-3 py-2 rounded-md text-base font-medium">CLIMBING</a>
103
+ <a href="#metal" class="block px-3 py-2 rounded-md text-base font-medium">BLACK METAL</a>
104
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium">CONTACT</a>
105
+ </div>
106
+ </div>
107
+ </nav>
108
+
109
+ <!-- Hero Section -->
110
+ <section id="home" class="hero-image min-h-screen flex items-center justify-center pt-16">
111
+ <div class="text-center px-4">
112
+ <h1 class="black-metal-font text-5xl md:text-8xl mb-6 text-rose-500">LUIS POEHLMANN</h1>
113
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Climbing mountains by day. Summoning darkness by night.</p>
114
+ <div class="flex justify-center space-x-4">
115
+ <a href="#about" class="px-6 py-3 bg-rose-600 hover:bg-rose-700 rounded-md font-medium transition duration-300">LEARN MORE</a>
116
+ <a href="#contact" class="px-6 py-3 border border-rose-600 hover:bg-rose-900 rounded-md font-medium transition duration-300">CONTACT ME</a>
117
+ </div>
118
+ </div>
119
+ </section>
120
+
121
+ <!-- About Section -->
122
+ <section id="about" class="py-20 nature-image">
123
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
124
+ <div class="bg-black bg-opacity-80 p-8 md:p-12 rounded-lg backdrop-blur-sm">
125
+ <h2 class="black-metal-font text-4xl md:text-6xl mb-8 text-rose-500">ABOUT ME</h2>
126
+ <div class="grid md:grid-cols-2 gap-8">
127
+ <div>
128
+ <p class="mb-6 text-lg">I'm Luis Poehlmann, a passionate climber, nature enthusiast, and black metal aficionado. My life is a balance between scaling peaks and descending into the abyss of extreme music.</p>
129
+ <p class="mb-6 text-lg">Born and raised in the mountains, I've always felt a deep connection with nature. The raw power of the wilderness inspires both my climbing and my appreciation for the atmospheric sounds of black metal.</p>
130
+ <p class="text-lg">When I'm not hanging off a cliff face or lost in a forest, you'll find me collecting vinyl records, writing about my adventures, or photographing the darker, more mysterious aspects of nature.</p>
131
+ </div>
132
+ <div class="flex items-center justify-center">
133
+ <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-rose-600">
134
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Luis Poehlmann" class="w-full h-full object-cover">
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </section>
141
+
142
+ <!-- Climbing Section -->
143
+ <section id="climbing" class="py-20 climbing-image">
144
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
145
+ <div class="bg-black bg-opacity-80 p-8 md:p-12 rounded-lg backdrop-blur-sm">
146
+ <h2 class="black-metal-font text-4xl md:text-6xl mb-8 text-rose-500">CLIMBING</h2>
147
+ <p class="mb-12 text-lg max-w-3xl">Climbing is my meditation, my challenge, and my way of connecting with the primal forces of nature. Here are some of my recent adventures and favorite spots.</p>
148
+
149
+ <div class="grid md:grid-cols-3 gap-8 mb-12">
150
+ <div class="bg-gray-800 rounded-lg overflow-hidden">
151
+ <div class="h-48 overflow-hidden">
152
+ <img src="https://images.unsplash.com/photo-1516633630673-67bbad747022?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Rock Climbing" class="w-full h-full object-cover transition duration-500 hover:scale-110">
153
+ </div>
154
+ <div class="p-6">
155
+ <h3 class="text-xl font-bold mb-2">Rock Climbing</h3>
156
+ <p class="text-gray-300">Traditional and sport climbing in the most challenging terrains. My current project is El Capitan in Yosemite.</p>
157
+ </div>
158
+ </div>
159
+
160
+ <div class="bg-gray-800 rounded-lg overflow-hidden">
161
+ <div class="h-48 overflow-hidden">
162
+ <img src="https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2076&q=80" alt="Ice Climbing" class="w-full h-full object-cover transition duration-500 hover:scale-110">
163
+ </div>
164
+ <div class="p-6">
165
+ <h3 class="text-xl font-bold mb-2">Ice Climbing</h3>
166
+ <p class="text-gray-300">Conquering frozen waterfalls in Norway and Canada. There's nothing like the sound of ice axes biting into blue ice.</p>
167
+ </div>
168
+ </div>
169
+
170
+ <div class="bg-gray-800 rounded-lg overflow-hidden">
171
+ <div class="h-48 overflow-hidden">
172
+ <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Mountaineering" class="w-full h-full object-cover transition duration-500 hover:scale-110">
173
+ </div>
174
+ <div class="p-6">
175
+ <h3 class="text-xl font-bold mb-2">Mountaineering</h3>
176
+ <p class="text-gray-300">High-altitude expeditions in the Himalayas and Andes. The thin air and endless vistas are addictive.</p>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="bg-gray-800 rounded-lg p-6">
182
+ <h3 class="text-2xl font-bold mb-4">Climbing Philosophy</h3>
183
+ <p class="mb-4">"Climbing isn't about conquering the mountain. It's about confronting yourself, pushing your limits, and becoming one with the rock. The same intensity I feel when climbing is what draws me to black metal - both are raw, unfiltered expressions of existence."</p>
184
+ <p>- Luis Poehlmann</p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </section>
189
+
190
+ <!-- Black Metal Section -->
191
+ <section id="metal" class="py-20 metal-image">
192
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
193
+ <div class="bg-black bg-opacity-80 p-8 md:p-12 rounded-lg backdrop-blur-sm">
194
+ <h2 class="black-metal-font text-4xl md:text-6xl mb-8 text-rose-500">BLACK METAL</h2>
195
+ <p class="mb-12 text-lg max-w-3xl">The atmospheric, raw power of black metal speaks to my soul. Here's my current rotation and some thoughts on the genre.</p>
196
+
197
+ <div class="grid md:grid-cols-2 gap-8 mb-12">
198
+ <div>
199
+ <h3 class="text-2xl font-bold mb-4">Current Obsessions</h3>
200
+ <ul class="space-y-4">
201
+ <li class="flex items-start">
202
+ <span class="text-rose-500 mr-3 mt-1"><i class="fas fa-skull"></i></span>
203
+ <div>
204
+ <h4 class="font-bold">Mgła</h4>
205
+ <p class="text-gray-300">Exercises in Futility - The perfect soundtrack for existential climbs</p>
206
+ </div>
207
+ </li>
208
+ <li class="flex items-start">
209
+ <span class="text-rose-500 mr-3 mt-1"><i class="fas fa-mountain"></i></span>
210
+ <div>
211
+ <h4 class="font-bold">Wolves in the Throne Room</h4>
212
+ <p class="text-gray-300">Celestial Lineage - Nature worship in musical form</p>
213
+ </div>
214
+ </li>
215
+ <li class="flex items-start">
216
+ <span class="text-rose-500 mr-3 mt-1"><i class="fas fa-cloud"></i></span>
217
+ <div>
218
+ <h4 class="font-bold">Drudkh</h4>
219
+ <p class="text-gray-300">Blood in Our Wells - Epic, folk-infused black metal</p>
220
+ </div>
221
+ </li>
222
+ <li class="flex items-start">
223
+ <span class="text-rose-500 mr-3 mt-1"><i class="fas fa-tree"></i></span>
224
+ <div>
225
+ <h4 class="font-bold">Agalloch</h4>
226
+ <p class="text-gray-300">The Mantle - The perfect album for forest wanderings</p>
227
+ </div>
228
+ </li>
229
+ </ul>
230
+ </div>
231
+
232
+ <div>
233
+ <h3 class="text-2xl font-bold mb-4">Essential Albums</h3>
234
+ <div class="grid grid-cols-2 gap-4">
235
+ <div class="album-cover">
236
+ <img src="https://upload.wikimedia.org/wikipedia/en/4/4f/Transilvanian_Hunger.jpg" alt="Darkthrone - Transilvanian Hunger" class="w-full rounded shadow-lg">
237
+ </div>
238
+ <div class="album-cover">
239
+ <img src="https://upload.wikimedia.org/wikipedia/en/6/6e/De_Mysteriis_Dom_Sathanas.jpg" alt="Mayhem - De Mysteriis Dom Sathanas" class="w-full rounded shadow-lg">
240
+ </div>
241
+ <div class="album-cover">
242
+ <img src="https://upload.wikimedia.org/wikipedia/en/3/3f/In_the_Nightside_Eclipse.jpg" alt="Emperor - In the Nightside Eclipse" class="w-full rounded shadow-lg">
243
+ </div>
244
+ <div class="album-cover">
245
+ <img src="https://upload.wikimedia.org/wikipedia/en/3/3b/Burzum_-_Filosofem.jpg" alt="Burzum - Filosofem" class="w-full rounded shadow-lg">
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <div class="bg-gray-800 rounded-lg p-6">
252
+ <h3 class="text-2xl font-bold mb-4">Black Metal & Nature</h3>
253
+ <p class="mb-4">"To me, black metal isn't just music - it's an expression of the raw, untamed power of nature. The cold winds, the towering mountains, the endless forests - these are the same forces that inspire the greatest black metal. When I climb, I often hear black metal riffs in my head, pushing me forward through the pain and exhaustion."</p>
254
+ <p>- Luis Poehlmann</p>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </section>
259
+
260
+ <!-- Contact Section -->
261
+ <section id="contact" class="py-20 bg-gray-900">
262
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
263
+ <h2 class="black-metal-font text-4xl md:text-6xl mb-12 text-center text-rose-500">CONTACT</h2>
264
+
265
+ <div class="grid md:grid-cols-2 gap-12">
266
+ <div>
267
+ <h3 class="text-2xl font-bold mb-6">Get In Touch</h3>
268
+ <p class="mb-8 text-lg">Want to discuss climbing routes, black metal recommendations, or potential collaborations? Reach out!</p>
269
+
270
+ <div class="space-y-6">
271
+ <div class="flex items-start">
272
+ <span class="text-rose-500 mr-4 mt-1"><i class="fas fa-envelope"></i></span>
273
+ <div>
274
+ <h4 class="font-bold">Email</h4>
275
+ <p class="text-gray-300">luis@poehlmann.com</p>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="flex items-start">
280
+ <span class="text-rose-500 mr-4 mt-1"><i class="fab fa-instagram"></i></span>
281
+ <div>
282
+ <h4 class="font-bold">Instagram</h4>
283
+ <p class="text-gray-300">@luis_poehlmann</p>
284
+ </div>
285
+ </div>
286
+
287
+ <div class="flex items-start">
288
+ <span class="text-rose-500 mr-4 mt-1"><i class="fab fa-strava"></i></span>
289
+ <div>
290
+ <h4 class="font-bold">Strava</h4>
291
+ <p class="text-gray-300">Luis Poehlmann</p>
292
+ </div>
293
+ </div>
294
+
295
+ <div class="flex items-start">
296
+ <span class="text-rose-500 mr-4 mt-1"><i class="fas fa-map-marker-alt"></i></span>
297
+ <div>
298
+ <h4 class="font-bold">Location</h4>
299
+ <p class="text-gray-300">Based in the Alps, often found in Norway</p>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+ <div>
306
+ <form class="space-y-6">
307
+ <div>
308
+ <label for="name" class="block text-sm font-medium mb-1">Name</label>
309
+ <input type="text" id="name" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-rose-500">
310
+ </div>
311
+
312
+ <div>
313
+ <label for="email" class="block text-sm font-medium mb-1">Email</label>
314
+ <input type="email" id="email" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-rose-500">
315
+ </div>
316
+
317
+ <div>
318
+ <label for="subject" class="block text-sm font-medium mb-1">Subject</label>
319
+ <select id="subject" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-rose-500">
320
+ <option>Climbing Inquiry</option>
321
+ <option>Music Discussion</option>
322
+ <option>Collaboration</option>
323
+ <option>Other</option>
324
+ </select>
325
+ </div>
326
+
327
+ <div>
328
+ <label for="message" class="block text-sm font-medium mb-1">Message</label>
329
+ <textarea id="message" rows="5" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-rose-500"></textarea>
330
+ </div>
331
+
332
+ <button type="submit" class="px-6 py-3 bg-rose-600 hover:bg-rose-700 rounded-md font-medium transition duration-300 w-full">SEND MESSAGE</button>
333
+ </form>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </section>
338
+
339
+ <!-- Footer -->
340
+ <footer class="bg-black py-8">
341
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
342
+ <div class="flex flex-col md:flex-row justify-between items-center">
343
+ <div class="mb-4 md:mb-0">
344
+ <span class="black-metal-font text-2xl text-rose-500">LUIS POEHLMANN</span>
345
+ </div>
346
+ <div class="flex space-x-6">
347
+ <a href="#" class="text-gray-400 hover:text-rose-500 transition duration-300">
348
+ <i class="fab fa-instagram text-xl"></i>
349
+ </a>
350
+ <a href="#" class="text-gray-400 hover:text-rose-500 transition duration-300">
351
+ <i class="fab fa-strava text-xl"></i>
352
+ </a>
353
+ <a href="#" class="text-gray-400 hover:text-rose-500 transition duration-300">
354
+ <i class="fab fa-spotify text-xl"></i>
355
+ </a>
356
+ <a href="#" class="text-gray-400 hover:text-rose-500 transition duration-300">
357
+ <i class="fab fa-youtube text-xl"></i>
358
+ </a>
359
+ </div>
360
+ </div>
361
+ <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
362
+ <p>&copy; 2023 Luis Poehlmann. All rights reserved. Hail nature, hail darkness.</p>
363
+ </div>
364
+ </div>
365
+ </footer>
366
+
367
+ <script>
368
+ // Mobile menu toggle
369
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
370
+ const menu = document.getElementById('mobile-menu');
371
+ menu.classList.toggle('hidden');
372
+ });
373
+
374
+ // Smooth scrolling for anchor links
375
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
376
+ anchor.addEventListener('click', function (e) {
377
+ e.preventDefault();
378
+
379
+ const targetId = this.getAttribute('href');
380
+ const targetElement = document.querySelector(targetId);
381
+
382
+ if (targetElement) {
383
+ // Close mobile menu if open
384
+ const mobileMenu = document.getElementById('mobile-menu');
385
+ mobileMenu.classList.add('hidden');
386
+
387
+ // Scroll to target
388
+ window.scrollTo({
389
+ top: targetElement.offsetTop - 80,
390
+ behavior: 'smooth'
391
+ });
392
+ }
393
+ });
394
+ });
395
+
396
+ // Change navbar style on scroll
397
+ window.addEventListener('scroll', function() {
398
+ const nav = document.querySelector('nav');
399
+ if (window.scrollY > 50) {
400
+ nav.classList.add('shadow-lg');
401
+ } else {
402
+ nav.classList.remove('shadow-lg');
403
+ }
404
+ });
405
+ </script>
406
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=luis-poe/metalsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
407
+ </html>