Hugging Face's logo

Spaces:
108HTZ
/
locus-niger
Running

App Files Community
108HTZ commited on
Commit
dadeded
·
verified ·
1 Parent(s): 6929d22

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +628 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Locus Niger
3
- emoji: 🐨
4
- colorFrom: yellow
5
- colorTo: pink
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: locus-niger
3
+ emoji: 🐳
4
+ colorFrom: gray
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,628 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Locus Niger | Studio Mathématique</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'locus-dark': '#0a0a0a',
15
+ 'locus-gold': '#d4af37',
16
+ 'locus-light': '#f0f0f0',
17
+ },
18
+ fontFamily: {
19
+ 'sans': ['"Helvetica Neue"', 'Arial', 'sans-serif'],
20
+ 'serif': ['"Times New Roman"', 'serif'],
21
+ 'mono': ['"Courier New"', 'monospace'],
22
+ 'math': ['"Latin Modern Math"', 'serif'],
23
+ },
24
+ animation: {
25
+ 'float': 'float 6s ease-in-out infinite',
26
+ 'pulse-slow': 'pulse 5s infinite',
27
+ },
28
+ keyframes: {
29
+ float: {
30
+ '0%, 100%': { transform: 'translateY(0)' },
31
+ '50%': { transform: 'translateY(-20px)' },
32
+ }
33
+ }
34
+ }
35
+ }
36
+ }
37
+ </script>
38
+ <style>
39
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
40
+
41
+ .math-bg {
42
+ background-image: radial-gradient(circle, rgba(212, 175, 55, 0.1) 1px, transparent 1px);
43
+ background-size: 30px 30px;
44
+ }
45
+
46
+ .gold-border {
47
+ position: relative;
48
+ }
49
+
50
+ .gold-border::after {
51
+ content: '';
52
+ position: absolute;
53
+ bottom: 0;
54
+ left: 50%;
55
+ transform: translateX(-50%);
56
+ width: 50%;
57
+ height: 2px;
58
+ background: linear-gradient(90deg, transparent, #d4af37, transparent);
59
+ }
60
+
61
+ .fractal-pattern {
62
+ background-image:
63
+ linear-gradient(45deg, #0a0a0a 25%, transparent 25%),
64
+ linear-gradient(-45deg, #0a0a0a 25%, transparent 25%),
65
+ linear-gradient(45deg, transparent 75%, #0a0a0a 75%),
66
+ linear-gradient(-45deg, transparent 75%, #0a0a0a 75%);
67
+ background-size: 20px 20px;
68
+ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
69
+ }
70
+
71
+ .equation {
72
+ font-family: 'Latin Modern Math', serif;
73
+ font-size: 1.2rem;
74
+ }
75
+
76
+ .gold-hover:hover {
77
+ color: #d4af37;
78
+ transition: color 0.3s ease;
79
+ }
80
+
81
+ .project-card {
82
+ transition: all 0.3s ease;
83
+ transform-style: preserve-3d;
84
+ }
85
+
86
+ .project-card:hover {
87
+ transform: perspective(1000px) rotateY(10deg) translateY(-10px);
88
+ box-shadow: 0 25px 50px -12px rgba(212, 175, 55, 0.25);
89
+ }
90
+
91
+ .gold-text-shadow {
92
+ text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
93
+ }
94
+
95
+ @keyframes rotate {
96
+ from { transform: rotate(0deg); }
97
+ to { transform: rotate(360deg); }
98
+ }
99
+
100
+ .rotate-slow {
101
+ animation: rotate 20s linear infinite;
102
+ }
103
+ </style>
104
+ </head>
105
+ <body class="bg-locus-dark text-locus-light font-sans overflow-x-hidden">
106
+ <!-- Navigation -->
107
+ <nav class="fixed w-full z-50 bg-black bg-opacity-90 backdrop-filter backdrop-blur-sm">
108
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
109
+ <div class="flex justify-between h-24 items-center">
110
+ <div class="flex-shrink-0 flex items-center">
111
+ <span class="text-2xl font-serif text-locus-gold">Locus Niger</span>
112
+ <span class="ml-2 text-xs text-locus-gold opacity-70">by Laurent Hiriart</span>
113
+ </div>
114
+ <div class="hidden md:block">
115
+ <div class="ml-10 flex items-baseline space-x-8">
116
+ <a href="#home" class="gold-hover px-3 py-2 text-sm font-medium">Accueil</a>
117
+ <a href="#about" class="gold-hover px-3 py-2 text-sm font-medium">Concept</a>
118
+ <a href="#work" class="gold-hover px-3 py-2 text-sm font-medium">Projets</a>
119
+ <a href="#process" class="gold-hover px-3 py-2 text-sm font-medium">Processus</a>
120
+ <a href="#contact" class="gold-hover px-3 py-2 text-sm font-medium">Contact</a>
121
+ </div>
122
+ </div>
123
+ <div class="md:hidden">
124
+ <button class="mobile-menu-button p-2 rounded-md text-locus-gold">
125
+ <i class="fas fa-bars text-xl"></i>
126
+ </button>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </nav>
131
+
132
+ <!-- Mobile Menu -->
133
+ <div class="mobile-menu hidden md:hidden fixed inset-0 z-40 bg-black bg-opacity-95 backdrop-filter backdrop-blur-sm">
134
+ <div class="flex flex-col items-center justify-center h-full">
135
+ <button class="absolute top-6 right-6 p-2 text-locus-gold">
136
+ <i class="fas fa-times text-2xl"></i>
137
+ </button>
138
+ <a href="#home" class="block px-3 py-4 text-2xl font-medium gold-hover">Accueil</a>
139
+ <a href="#about" class="block px-3 py-4 text-2xl font-medium gold-hover">Concept</a>
140
+ <a href="#work" class="block px-3 py-4 text-2xl font-medium gold-hover">Projets</a>
141
+ <a href="#process" class="block px-3 py-4 text-2xl font-medium gold-hover">Processus</a>
142
+ <a href="#contact" class="block px-3 py-4 text-2xl font-medium gold-hover">Contact</a>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Hero Section -->
147
+ <section id="home" class="relative h-screen flex items-center justify-center overflow-hidden">
148
+ <div class="absolute inset-0 fractal-pattern opacity-20"></div>
149
+ <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-70"></div>
150
+
151
+ <div class="absolute top-1/2 left-1/2 w-64 h-64 rounded-full bg-locus-gold opacity-10 filter blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
152
+
153
+ <div class="relative z-10 text-center px-4 max-w-4xl mx-auto">
154
+ <h1 class="text-5xl md:text-7xl font-serif font-bold mb-6 text-locus-gold gold-text-shadow">
155
+ <span class="block">Locus Niger</span>
156
+ </h1>
157
+ <p class="text-xl md:text-2xl mb-8 font-light max-w-2xl mx-auto">
158
+ L'intersection entre les mathématiques pures et le motion design expérimental
159
+ </p>
160
+ <div class="equation text-locus-gold text-lg mb-12">
161
+ <span class="italic">f(x) = </span>
162
+ <span class="font-math">∫<sub>0</sub><sup>∞</sup> e<sup>−x²</sup> dx = √π/2</span>
163
+ </div>
164
+ <a href="#work" class="inline-block px-8 py-3 border border-locus-gold text-locus-gold hover:bg-locus-gold hover:text-black transition-all duration-300">
165
+ Explorer les projets
166
+ </a>
167
+ </div>
168
+
169
+ <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
170
+ <a href="#about" class="text-locus-gold">
171
+ <i class="fas fa-chevron-down text-2xl"></i>
172
+ </a>
173
+ </div>
174
+ </section>
175
+
176
+ <!-- About Section -->
177
+ <section id="about" class="py-20 math-bg">
178
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
179
+ <div class="text-center mb-16">
180
+ <h2 class="text-3xl md:text-4xl font-serif font-bold text-locus-gold mb-4 gold-border pb-4">Concept Mathématique</h2>
181
+ <p class="max-w-3xl mx-auto text-lg opacity-90">
182
+ Locus Niger explore les structures géométriques cachées dans le mouvement et la forme
183
+ </p>
184
+ </div>
185
+
186
+ <div class="grid md:grid-cols-3 gap-12">
187
+ <div class="bg-black bg-opacity-50 p-8 rounded-lg border border-locus-gold border-opacity-30 hover:border-opacity-100 transition-all duration-300">
188
+ <div class="text-locus-gold text-4xl mb-4">
189
+ <i class="fas fa-atom rotate-slow"></i>
190
+ </div>
191
+ <h3 class="text-xl font-serif text-locus-gold mb-3">Topologie Visuelle</h3>
192
+ <p class="opacity-80">
193
+ Application des principes topologiques pour créer des transitions fluides et des morphings organiques.
194
+ </p>
195
+ </div>
196
+
197
+ <div class="bg-black bg-opacity-50 p-8 rounded-lg border border-locus-gold border-opacity-30 hover:border-opacity-100 transition-all duration-300">
198
+ <div class="text-locus-gold text-4xl mb-4">
199
+ <i class="fas fa-infinity"></i>
200
+ </div>
201
+ <h3 class="text-xl font-serif text-locus-gold mb-3">Fractals Dynamiques</h3>
202
+ <p class="opacity-80">
203
+ Génération algorithmique de motifs fractals animés, révélant l'infini dans des espaces finis.
204
+ </p>
205
+ </div>
206
+
207
+ <div class="bg-black bg-opacity-50 p-8 rounded-lg border border-locus-gold border-opacity-30 hover:border-opacity-100 transition-all duration-300">
208
+ <div class="text-locus-gold text-4xl mb-4">
209
+ <i class="fas fa-project-diagram"></i>
210
+ </div>
211
+ <h3 class="text-xl font-serif text-locus-gold mb-3">Géométrie Algébrique</h3>
212
+ <p class="opacity-80">
213
+ Visualisation des équations polynomiales complexes comme base de systèmes de mouvement.
214
+ </p>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="mt-20 max-w-5xl mx-auto bg-black bg-opacity-50 p-8 md:p-12 rounded-lg border border-locus-gold border-opacity-30">
219
+ <div class="flex flex-col md:flex-row items-center">
220
+ <div class="md:w-1/3 mb-8 md:mb-0 md:pr-8">
221
+ <div class="w-40 h-40 mx-auto rounded-full bg-gradient-to-br from-locus-gold to-transparent p-1">
222
+ <div class="w-full h-full rounded-full bg-black bg-opacity-70 flex items-center justify-center">
223
+ <i class="fas fa-user-astronaut text-5xl text-locus-gold"></i>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ <div class="md:w-2/3">
228
+ <h3 class="text-2xl font-serif text-locus-gold mb-4">Laurent Hiriart</h3>
229
+ <p class="mb-4 opacity-90">
230
+ Artiste numérique et mathématicien visuel, je fusionne la rigueur analytique avec l'expression artistique pour créer des expériences visuelles uniques.
231
+ </p>
232
+ <p class="opacity-80">
233
+ Diplômé en mathématiques appliquées et en arts numériques, mon travail explore les frontières entre la science exacte et l'abstraction créative.
234
+ </p>
235
+ <div class="mt-6 flex space-x-4">
236
+ <a href="#" class="text-locus-gold hover:text-white transition-colors">
237
+ <i class="fab fa-vimeo-v text-xl"></i>
238
+ </a>
239
+ <a href="#" class="text-locus-gold hover:text-white transition-colors">
240
+ <i class="fab fa-instagram text-xl"></i>
241
+ </a>
242
+ <a href="#" class="text-locus-gold hover:text-white transition-colors">
243
+ <i class="fab fa-linkedin-in text-xl"></i>
244
+ </a>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </section>
251
+
252
+ <!-- Work Section -->
253
+ <section id="work" class="py-20 bg-black">
254
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
255
+ <div class="text-center mb-16">
256
+ <h2 class="text-3xl md:text-4xl font-serif font-bold text-locus-gold mb-4 gold-border pb-4">Projets Récents</h2>
257
+ <p class="max-w-3xl mx-auto text-lg opacity-90">
258
+ Explorations visuelles aux frontières des mathématiques et du motion design
259
+ </p>
260
+ </div>
261
+
262
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
263
+ <div class="project-card bg-locus-dark rounded-lg overflow-hidden border border-locus-gold border-opacity-20">
264
+ <div class="relative h-64 bg-gradient-to-br from-locus-dark to-locus-gold flex items-center justify-center">
265
+ <div class="absolute inset-0 flex items-center justify-center">
266
+ <div class="w-32 h-32 rounded-full border-2 border-locus-gold border-dashed animate-spin-slow"></div>
267
+ </div>
268
+ <h3 class="relative z-10 text-2xl font-serif text-locus-gold">Torus Flux</h3>
269
+ </div>
270
+ <div class="p-6">
271
+ <p class="text-sm opacity-80 mb-4">
272
+ Animation topologique explorant les propriétés des surfaces toriques en transformation continue.
273
+ </p>
274
+ <div class="flex justify-between items-center">
275
+ <span class="text-xs text-locus-gold">2023</span>
276
+ <a href="#" class="text-locus-gold hover:text-white text-sm flex items-center">
277
+ Voir projet <i class="fas fa-arrow-right ml-2"></i>
278
+ </a>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="project-card bg-locus-dark rounded-lg overflow-hidden border border-locus-gold border-opacity-20">
284
+ <div class="relative h-64 bg-gradient-to-br from-locus-dark to-locus-gold flex items-center justify-center">
285
+ <div class="absolute inset-0 flex items-center justify-center">
286
+ <div class="w-32 h-32">
287
+ <div class="relative w-full h-full">
288
+ <div class="absolute inset-0 border-t-2 border-l-2 border-locus-gold w-1/2 h-1/2"></div>
289
+ <div class="absolute bottom-0 right-0 border-b-2 border-r-2 border-locus-gold w-1/2 h-1/2"></div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ <h3 class="relative z-10 text-2xl font-serif text-locus-gold">Escher Morph</h3>
294
+ </div>
295
+ <div class="p-6">
296
+ <p class="text-sm opacity-80 mb-4">
297
+ Hommage algorithmique aux illusions d'Escher avec transitions impossibles générées par des matrices 4D.
298
+ </p>
299
+ <div class="flex justify-between items-center">
300
+ <span class="text-xs text-locus-gold">2022</span>
301
+ <a href="#" class="text-locus-gold hover:text-white text-sm flex items-center">
302
+ Voir projet <i class="fas fa-arrow-right ml-2"></i>
303
+ </a>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <div class="project-card bg-locus-dark rounded-lg overflow-hidden border border-locus-gold border-opacity-20">
309
+ <div class="relative h-64 bg-gradient-to-br from-locus-dark to-locus-gold flex items-center justify-center">
310
+ <div class="absolute inset-0 flex items-center justify-center">
311
+ <div class="w-32 h-32">
312
+ <div class="relative w-full h-full">
313
+ <div class="absolute inset-0 border border-locus-gold opacity-30"></div>
314
+ <div class="absolute inset-1/4 border border-locus-gold opacity-50"></div>
315
+ <div class="absolute inset-1/2 border border-locus-gold"></div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ <h3 class="relative z-10 text-2xl font-serif text-locus-gold">Prime Flow</h3>
320
+ </div>
321
+ <div class="p-6">
322
+ <p class="text-sm opacity-80 mb-4">
323
+ Visualisation des nombres premiers comme particules dans un champ vectoriel dynamique.
324
+ </p>
325
+ <div class="flex justify-between items-center">
326
+ <span class="text-xs text-locus-gold">2023</span>
327
+ <a href="#" class="text-locus-gold hover:text-white text-sm flex items-center">
328
+ Voir projet <i class="fas fa-arrow-right ml-2"></i>
329
+ </a>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <div class="text-center mt-16">
336
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-locus-gold text-locus-gold hover:bg-locus-gold hover:text-black transition-all duration-300">
337
+ <span>Voir tous les projets</span>
338
+ <i class="fas fa-long-arrow-alt-right ml-3"></i>
339
+ </a>
340
+ </div>
341
+ </div>
342
+ </section>
343
+
344
+ <!-- Process Section -->
345
+ <section id="process" class="py-20 math-bg">
346
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
347
+ <div class="text-center mb-16">
348
+ <h2 class="text-3xl md:text-4xl font-serif font-bold text-locus-gold mb-4 gold-border pb-4">Processus Créatif</h2>
349
+ <p class="max-w-3xl mx-auto text-lg opacity-90">
350
+ De l'équation mathématique à l'animation visuelle
351
+ </p>
352
+ </div>
353
+
354
+ <div class="relative">
355
+ <div class="absolute left-1/2 top-0 h-full w-0.5 bg-locus-gold bg-opacity-30 hidden md:block"></div>
356
+
357
+ <div class="grid md:grid-cols-9 gap-6 mb-16">
358
+ <div class="md:col-span-4 md:text-right">
359
+ <div class="relative">
360
+ <div class="hidden md:block absolute -right-5 top-1/2 transform translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-locus-gold"></div>
361
+ <h3 class="text-xl font-serif text-locus-gold mb-2">Conceptualisation Mathématique</h3>
362
+ <p class="opacity-80">
363
+ Identification des structures et théorèmes mathématiques pouvant générer des motifs visuels intéressants.
364
+ </p>
365
+ </div>
366
+ </div>
367
+ <div class="md:col-span-1 flex justify-center">
368
+ <div class="w-12 h-12 rounded-full bg-locus-gold bg-opacity-20 flex items-center justify-center text-locus-gold md:hidden">
369
+ <i class="fas fa-1"></i>
370
+ </div>
371
+ </div>
372
+ <div class="md:col-span-4">
373
+ <div class="bg-black bg-opacity-50 p-6 rounded-lg border border-locus-gold border-opacity-20 md:hidden">
374
+ <p class="equation text-sm">
375
+ <span class="font-math">∀ε > 0, ∃δ > 0 : |x - a| < δ ⇒ |f(x) - L| < ε</span>
376
+ </p>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <div class="grid md:grid-cols-9 gap-6 mb-16">
382
+ <div class="md:col-span-4 md:text-right order-3 md:order-1">
383
+ <div class="bg-black bg-opacity-50 p-6 rounded-lg border border-locus-gold border-opacity-20">
384
+ <p class="equation">
385
+ <span class="font-math">z<sub>n+1</sub> = z<sub>n</sub>² + c</span>
386
+ </p>
387
+ </div>
388
+ </div>
389
+ <div class="md:col-span-1 flex justify-center order-2">
390
+ <div class="w-12 h-12 rounded-full bg-locus-gold bg-opacity-20 flex items-center justify-center text-locus-gold">
391
+ <i class="fas fa-2"></i>
392
+ </div>
393
+ </div>
394
+ <div class="md:col-span-4 order-1 md:order-3">
395
+ <div class="relative">
396
+ <div class="hidden md:block absolute -left-5 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-locus-gold"></div>
397
+ <h3 class="text-xl font-serif text-locus-gold mb-2">Implémentation Algorithmique</h3>
398
+ <p class="opacity-80">
399
+ Traduction des concepts en code, utilisant souvent Processing, GLSL ou des frameworks JavaScript.
400
+ </p>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="grid md:grid-cols-9 gap-6">
406
+ <div class="md:col-span-4 md:text-right">
407
+ <div class="relative">
408
+ <div class="hidden md:block absolute -right-5 top-1/2 transform translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-locus-gold"></div>
409
+ <h3 class="text-xl font-serif text-locus-gold mb-2">Animation & Rendu</h3>
410
+ <p class="opacity-80">
411
+ Ajout de la dimension temporelle et des effets visuels pour créer une expérience cinétique.
412
+ </p>
413
+ </div>
414
+ </div>
415
+ <div class="md:col-span-1 flex justify-center">
416
+ <div class="w-12 h-12 rounded-full bg-locus-gold bg-opacity-20 flex items-center justify-center text-locus-gold">
417
+ <i class="fas fa-3"></i>
418
+ </div>
419
+ </div>
420
+ <div class="md:col-span-4">
421
+ <div class="bg-black bg-opacity-50 p-6 rounded-lg border border-locus-gold border-opacity-20">
422
+ <div class="flex space-x-4">
423
+ <div class="w-8 h-8 rounded bg-locus-gold animate-pulse"></div>
424
+ <div class="w-8 h-8 rounded bg-locus-gold animate-pulse delay-100"></div>
425
+ <div class="w-8 h-8 rounded bg-locus-gold animate-pulse delay-200"></div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </section>
433
+
434
+ <!-- Contact Section -->
435
+ <section id="contact" class="py-20 bg-black relative overflow-hidden">
436
+ <div class="absolute inset-0">
437
+ <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent z-10"></div>
438
+ <div class="absolute inset-0 opacity-20">
439
+ <div class="w-full h-full" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyMTIsMTc1LDU1LDAuMDUpIj48L3JlY3Q+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3BhdHRlcm4pIj48L3JlY3Q+PC9zdmc+'); background-size: 40px 40px;"></div>
440
+ </div>
441
+ </div>
442
+
443
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-20">
444
+ <div class="text-center mb-16">
445
+ <h2 class="text-3xl md:text-4xl font-serif font-bold text-locus-gold mb-4 gold-border pb-4">Collaborations</h2>
446
+ <p class="max-w-3xl mx-auto text-lg opacity-90">
447
+ Pour les projets spéciaux, les commandes ou les collaborations artistiques
448
+ </p>
449
+ </div>
450
+
451
+ <div class="grid md:grid-cols-2 gap-12">
452
+ <div>
453
+ <form class="space-y-6">
454
+ <div>
455
+ <label for="name" class="block text-sm font-medium text-locus-gold mb-1">Nom</label>
456
+ <input type="text" id="name" class="w-full bg-locus-dark border border-locus-gold border-opacity-30 focus:border-opacity-100 focus:ring-1 focus:ring-locus-gold rounded-md px-4 py-2 text-white transition-all duration-300" placeholder="Votre nom">
457
+ </div>
458
+ <div>
459
+ <label for="email" class="block text-sm font-medium text-locus-gold mb-1">Email</label>
460
+ <input type="email" id="email" class="w-full bg-locus-dark border border-locus-gold border-opacity-30 focus:border-opacity-100 focus:ring-1 focus:ring-locus-gold rounded-md px-4 py-2 text-white transition-all duration-300" placeholder="votre@email.com">
461
+ </div>
462
+ <div>
463
+ <label for="project" class="block text-sm font-medium text-locus-gold mb-1">Type de projet</label>
464
+ <select id="project" class="w-full bg-locus-dark border border-locus-gold border-opacity-30 focus:border-opacity-100 focus:ring-1 focus:ring-locus-gold rounded-md px-4 py-2 text-white appearance-none transition-all duration-300">
465
+ <option>Sélectionnez une option</option>
466
+ <option>Animation algorithmique</option>
467
+ <option>Installation interactive</option>
468
+ <option>Visualisation scientifique</option>
469
+ <option>Projet sur mesure</option>
470
+ </select>
471
+ </div>
472
+ <div>
473
+ <label for="message" class="block text-sm font-medium text-locus-gold mb-1">Message</label>
474
+ <textarea id="message" rows="5" class="w-full bg-locus-dark border border-locus-gold border-opacity-30 focus:border-opacity-100 focus:ring-1 focus:ring-locus-gold rounded-md px-4 py-2 text-white transition-all duration-300" placeholder="Décrivez votre projet..."></textarea>
475
+ </div>
476
+ <div>
477
+ <button type="submit" class="w-full bg-locus-gold bg-opacity-10 hover:bg-opacity-100 border border-locus-gold text-locus-gold hover:text-black py-3 px-6 rounded-md transition-all duration-300 flex items-center justify-center">
478
+ <span>Envoyer le message</span>
479
+ <i class="fas fa-paper-plane ml-3"></i>
480
+ </button>
481
+ </div>
482
+ </form>
483
+ </div>
484
+
485
+ <div class="flex flex-col justify-between">
486
+ <div class="bg-black bg-opacity-50 p-8 rounded-lg border border-locus-gold border-opacity-20 h-full">
487
+ <h3 class="text-xl font-serif text-locus-gold mb-6">Coordonnées</h3>
488
+ <div class="space-y-6">
489
+ <div class="flex items-start">
490
+ <div class="text-locus-gold mr-4 mt-1">
491
+ <i class="fas fa-map-marker-alt"></i>
492
+ </div>
493
+ <div>
494
+ <h4 class="text-locus-gold font-medium mb-1">Studio</h4>
495
+ <p class="opacity-80">15 Rue des Équations<br>75006 Paris, France</p>
496
+ </div>
497
+ </div>
498
+ <div class="flex items-start">
499
+ <div class="text-locus-gold mr-4 mt-1">
500
+ <i class="fas fa-envelope"></i>
501
+ </div>
502
+ <div>
503
+ <h4 class="text-locus-gold font-medium mb-1">Email</h4>
504
+ <p class="opacity-80">contact@locusniger.com</p>
505
+ </div>
506
+ </div>
507
+ <div class="flex items-start">
508
+ <div class="text-locus-gold mr-4 mt-1">
509
+ <i class="fas fa-phone-alt"></i>
510
+ </div>
511
+ <div>
512
+ <h4 class="text-locus-gold font-medium mb-1">Téléphone</h4>
513
+ <p class="opacity-80">+33 6 12 34 56 78</p>
514
+ </div>
515
+ </div>
516
+ </div>
517
+ </div>
518
+
519
+ <div class="mt-8">
520
+ <h4 class="text-locus-gold font-medium mb-4">Disponibilités</h4>
521
+ <div class="grid grid-cols-2 gap-4">
522
+ <div class="bg-black bg-opacity-50 p-4 rounded-lg border border-locus-gold border-opacity-10">
523
+ <div class="text-locus-gold mb-2">
524
+ <i class="far fa-calendar-alt"></i>
525
+ </div>
526
+ <p class="text-sm opacity-80">Projets à moyen terme</p>
527
+ <p class="text-xs text-locus-gold mt-1">3-6 mois</p>
528
+ </div>
529
+ <div class="bg-black bg-opacity-50 p-4 rounded-lg border border-locus-gold border-opacity-10">
530
+ <div class="text-locus-gold mb-2">
531
+ <i class="far fa-clock"></i>
532
+ </div>
533
+ <p class="text-sm opacity-80">Consultations</p>
534
+ <p class="text-xs text-locus-gold mt-1">Sur rendez-vous</p>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </section>
542
+
543
+ <!-- Footer -->
544
+ <footer class="bg-black py-12 border-t border-locus-gold border-opacity-10">
545
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
546
+ <div class="flex flex-col md:flex-row justify-between items-center">
547
+ <div class="mb-6 md:mb-0">
548
+ <span class="text-xl font-serif text-locus-gold">Locus Niger</span>
549
+ <p class="text-sm opacity-60 mt-2">© 2023 Laurent Hiriart. Tous droits réservés.</p>
550
+ </div>
551
+ <div class="flex space-x-6">
552
+ <a href="#" class="text-locus-gold hover:text-white transition-colors">
553
+ <i class="fab fa-vimeo-v"></i>
554
+ </a>
555
+ <a href="#" class="text-locus-gold hover:text-white transition-colors">
556
+ <i class="fab fa-instagram"></i>
557
+ </a>
558
+ <a href="#" class="text-locus-gold hover:text-white transition-colors">
559
+ <i class="fab fa-linkedin-in"></i>
560
+ </a>
561
+ <a href="#" class="text-locus-gold hover:text-white transition-colors">
562
+ <i class="fab fa-github"></i>
563
+ </a>
564
+ </div>
565
+ </div>
566
+ <div class="mt-8 pt-8 border-t border-locus-gold border-opacity-10 text-center text-sm opacity-60">
567
+ <p>Locus Niger est un studio de recherche visuelle explorant les intersections entre les mathématiques pures et le motion design expérimental.</p>
568
+ </div>
569
+ </div>
570
+ </footer>
571
+
572
+ <script>
573
+ // Mobile menu toggle
574
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
575
+ const mobileMenu = document.querySelector('.mobile-menu');
576
+ const mobileMenuClose = document.querySelector('.mobile-menu button');
577
+
578
+ mobileMenuButton.addEventListener('click', () => {
579
+ mobileMenu.classList.remove('hidden');
580
+ document.body.style.overflow = 'hidden';
581
+ });
582
+
583
+ mobileMenuClose.addEventListener('click', () => {
584
+ mobileMenu.classList.add('hidden');
585
+ document.body.style.overflow = '';
586
+ });
587
+
588
+ // Smooth scrolling for anchor links
589
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
590
+ anchor.addEventListener('click', function (e) {
591
+ e.preventDefault();
592
+
593
+ const targetId = this.getAttribute('href');
594
+ if (targetId === '#') return;
595
+
596
+ const targetElement = document.querySelector(targetId);
597
+ if (targetElement) {
598
+ // Close mobile menu if open
599
+ mobileMenu.classList.add('hidden');
600
+ document.body.style.overflow = '';
601
+
602
+ window.scrollTo({
603
+ top: targetElement.offsetTop - 80,
604
+ behavior: 'smooth'
605
+ });
606
+ }
607
+ });
608
+ });
609
+
610
+ // Scroll reveal animation
611
+ const animateOnScroll = () => {
612
+ const elements = document.querySelectorAll('.project-card, .equation, [class*="hover"]');
613
+
614
+ elements.forEach(element => {
615
+ const elementPosition = element.getBoundingClientRect().top;
616
+ const windowHeight = window.innerHeight;
617
+
618
+ if (elementPosition < windowHeight - 100) {
619
+ element.classList.add('animate__animated', 'animate__fadeInUp');
620
+ }
621
+ });
622
+ };
623
+
624
+ window.addEventListener('scroll', animateOnScroll);
625
+ window.addEventListener('load', animateOnScroll);
626
+ </script>
627
+ <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=108HTZ/locus-niger" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
628
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ site style Mathematic Studio nommé Locus Niger site de Laurent Hiriart motion designer