Hugging Face's logo

Spaces:
KINGFAUS
/
porto
Running

App Files Community
KINGFAUS commited on
Commit
ff7e59c
·
verified ·
1 Parent(s): 84848cc

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +550 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Porto
3
- emoji: 👀
4
- colorFrom: red
5
- colorTo: blue
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: porto
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: gray
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,550 @@
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>Sophia Laurent | Creative Developer</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&family=Raleway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#9d50ff',
16
+ secondary: '#6038f0',
17
+ accent: '#ff3d86',
18
+ dark: '#0e0617',
19
+ light: '#f0edff',
20
+ },
21
+ fontFamily: {
22
+ 'montserrat': ['Montserrat', 'sans-serif'],
23
+ 'raleway': ['Raleway', 'sans-serif'],
24
+ },
25
+ keyframes: {
26
+ float: {
27
+ '0%, 100%': { transform: 'translateY(0)' },
28
+ '50%': { transform: 'translateY(-20px)' },
29
+ },
30
+ pulseGlow: {
31
+ '0%, 100%': { boxShadow: '0 0 15px rgba(157, 80, 255, 0.5)' },
32
+ '50%': { boxShadow: '0 0 25px rgba(157, 80, 255, 0.8), 0 0 35px rgba(157, 80, 255, 0.6)' },
33
+ }
34
+ },
35
+ animation: {
36
+ float: 'float 5s ease-in-out infinite',
37
+ pulseGlow: 'pulseGlow 3s ease-in-out infinite',
38
+ },
39
+ }
40
+ }
41
+ }
42
+ </script>
43
+ <style type="text/tailwindcss">
44
+ @layer base {
45
+ html {
46
+ scroll-behavior: smooth;
47
+ }
48
+ body {
49
+ @apply bg-dark text-light font-montserrat overflow-x-hidden;
50
+ background: radial-gradient(ellipse at center, #1b0a2d 0%, #0e0617 70%);
51
+ }
52
+ ::-webkit-scrollbar {
53
+ width: 10px;
54
+ }
55
+ ::-webkit-scrollbar-thumb {
56
+ @apply bg-primary rounded-full;
57
+ }
58
+ }
59
+ @layer components {
60
+ .btn {
61
+ @apply px-8 py-3 rounded-full font-bold tracking-wider transition-all duration-300;
62
+ background: linear-gradient(45deg, theme('colors.primary'), theme('colors.secondary'));
63
+ box-shadow: 0 10px 20px rgba(0,0,0,0.3);
64
+ }
65
+ .btn:hover {
66
+ @apply scale-105 shadow-xl;
67
+ box-shadow: 0 15px 25px rgba(157, 80, 255, 0.5);
68
+ }
69
+ .section-title {
70
+ @apply text-4xl md:text-6xl font-bold mb-16 text-center font-raleway;
71
+ background: linear-gradient(90deg, theme('colors.primary'), theme('colors.accent'));
72
+ -webkit-background-clip: text;
73
+ -webkit-text-fill-color: transparent;
74
+ }
75
+ .floating-shape {
76
+ @apply absolute rounded-full z-0 blur-xl opacity-40;
77
+ filter: blur(50px);
78
+ }
79
+ .project-card {
80
+ @apply bg-[#1a1129] rounded-3xl overflow-hidden relative z-10 h-full;
81
+ box-shadow: 0 15px 35px rgba(0,0,0,0.5);
82
+ transition: transform 0.5s ease, box-shadow 0.5s ease;
83
+ }
84
+ .project-card:hover {
85
+ transform: translateY(-15px);
86
+ box-shadow: 0 25px 45px rgba(157, 80, 255, 0.3);
87
+ }
88
+ }
89
+ .floating-gradient {
90
+ animation: float 8s ease-in-out infinite;
91
+ }
92
+ .glow {
93
+ filter: drop-shadow(0 0 20px rgba(157, 80, 255, 0.7));
94
+ }
95
+ </style>
96
+ </head>
97
+ <body>
98
+ <!-- Floating background elements -->
99
+ <div class="floating-shape bg-primary w-96 h-96 -top-40 -left-40"></div>
100
+ <div class="floating-shape bg-accent w-80 h-80 -bottom-40 -right-40"></div>
101
+
102
+ <!-- Header -->
103
+ <header class="fixed w-full z-50">
104
+ <div class="container mx-auto px-6 py-6">
105
+ <div class="flex justify-between items-center">
106
+ <div class="text-xl font-bold">
107
+ <span class="text-primary font-raleway">SL</span>
108
+ </div>
109
+ <nav class="hidden md:flex space-x-10 font-semibold">
110
+ <a href="#home" class="hover:text-primary transition-colors">Accueil</a>
111
+ <a href="#about" class="hover:text-primary transition-colors">À Propos</a>
112
+ <a href="#projects" class="hover:text-primary transition-colors">Projets</a>
113
+ <a href="#skills" class="hover:text-primary transition-colors">Compétences</a>
114
+ <a href="#contact" class="hover:text-primary transition-colors">Contact</a>
115
+ </nav>
116
+ <div class="md:hidden text-xl">
117
+ <i class="fas fa-bars"></i>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </header>
122
+
123
+ <!-- Hero Section -->
124
+ <section id="home" class="min-h-screen flex items-center relative overflow-hidden pt-20">
125
+ <div class="container mx-auto px-6 py-20 flex flex-col md:flex-row items-center">
126
+ <div class="md:w-1/2 flex justify-center md:justify-start mb-16 md:mb-0">
127
+ <div class="relative">
128
+ <div class="w-64 h-64 md:w-96 md:h-96 rounded-full overflow-hidden border-8 border-white/10 relative glow">
129
+ <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&q=80&w=600" alt="Portrait" class="w-full h-full object-cover">
130
+ </div>
131
+ <div class="absolute -bottom-6 -right-6 bg-accent px-6 py-3 rounded-full font-bold">
132
+ <span>Disponible</span>
133
+ </div>
134
+ <div class="absolute w-72 h-72 rounded-full border-2 border-primary/50 top-6 left-6 animate-pulseGlow"></div>
135
+ </div>
136
+ </div>
137
+ <div class="md:w-1/2 text-center md:text-left">
138
+ <h1 class="text-5xl md:text-7xl font-bold mb-6">
139
+ <span class="block text-light font-raleway">Sophia</span>
140
+ <span class="block text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent mt-2 font-raleway">Laurent</span>
141
+ </h1>
142
+ <h2 class="text-2xl md:text-4xl mb-8 font-montserrat font-light">
143
+ Designer UI/UX & <span class="text-primary">Développeuse Frontend</span>
144
+ </h2>
145
+ <p class="max-w-2xl mb-12 text-lg opacity-80">
146
+ Je transforme des concepts en expériences numériques immersives avec une esthétique futuriste et des solutions innovantes.
147
+ </p>
148
+ <div class="flex flex-col sm:flex-row gap-6">
149
+ <a href="#projects" class="btn">Voir Mon Travail</a>
150
+ <a href="#contact" class="px-8 py-3 rounded-full font-bold tracking-wider bg-transparent border-2 border-primary transition-all hover:bg-primary/10">Contactez-moi</a>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </section>
155
+
156
+ <!-- About Section -->
157
+ <section id="about" class="py-20 relative overflow-hidden">
158
+ <div class="container mx-auto px-6">
159
+ <h2 class="section-title">À Propos de Moi</h2>
160
+ <div class="flex flex-col lg:flex-row gap-16 items-center">
161
+ <div class="lg:w-1/2">
162
+ <p class="text-lg mb-6 leading-relaxed">
163
+ Designer et développeuse frontend passionnée avec 5 ans d'expérience dans la création d'interfaces utilisateur captivantes et de sites web révolutionnaires.
164
+ </p>
165
+ <p class="text-lg mb-8 leading-relaxed">
166
+ Spécialisée dans le développement d'expériences digitales qui allient élégance et technologie de pointe, je m'engage à dépasser les attentes en matière de design et d'innovation technique.
167
+ </p>
168
+ <div class="grid grid-cols-2 gap-6 mb-8">
169
+ <div class="flex items-center">
170
+ <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
171
+ <i class="fas fa-rocket text-primary text-xl"></i>
172
+ </div>
173
+ <span>Design Innovant</span>
174
+ </div>
175
+ <div class="flex items-center">
176
+ <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
177
+ <i class="fas fa-laptop-code text-primary text-xl"></i>
178
+ </div>
179
+ <span>Développement de Pointe</span>
180
+ </div>
181
+ <div class="flex items-center">
182
+ <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
183
+ <i class="fas fa-lightbulb text-primary text-xl"></i>
184
+ </div>
185
+ <span>Solutions Créatives</span>
186
+ </div>
187
+ <div class="flex items-center">
188
+ <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
189
+ <i class="fas fa-bolt text-primary text-xl"></i>
190
+ </div>
191
+ <span>Résultats Rapides</span>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ <div class="lg:w-1/2">
196
+ <div class="relative p-12 rounded-[40px] overflow-hidden" style="background: linear-gradient(145deg, #120829, #1c103d);">
197
+ <div class="absolute -top-16 -right-16 w-64 h-64 bg-primary rounded-full opacity-20 blur-3xl"></div>
198
+ <div class="relative z-10">
199
+ <div class="mb-6">
200
+ <div class="flex justify-between mb-2">
201
+ <span>UI/UX Design</span>
202
+ <span>95%</span>
203
+ </div>
204
+ <div class="w-full h-2 rounded-full bg-white/10">
205
+ <div class="h-2 rounded-full bg-gradient-to-r from-primary to-secondary" style="width: 95%"></div>
206
+ </div>
207
+ </div>
208
+ <div class="mb-6">
209
+ <div class="flex justify-between mb-2">
210
+ <span>Développement Frontend</span>
211
+ <span>90%</span>
212
+ </div>
213
+ <div class="w-full h-2 rounded-full bg-white/10">
214
+ <div class="h-2 rounded-full bg-gradient-to-r from-primary to-secondary" style="width: 90%"></div>
215
+ </div>
216
+ </div>
217
+ <div class="mb-6">
218
+ <div class="flex justify-between mb-2">
219
+ <span>Design Graphique</span>
220
+ <span>85%</span>
221
+ </div>
222
+ <div class="w-full h-2 rounded-full bg-white/10">
223
+ <div class="h-2 rounded-full bg-gradient-to-r from-primary to-secondary" style="width: 85%"></div>
224
+ </div>
225
+ </div>
226
+ <div>
227
+ <div class="flex justify-between mb-2">
228
+ <span>Animation & Interactivité</span>
229
+ <span>88%</span>
230
+ </div>
231
+ <div class="w-full h-2 rounded-full bg-white/10">
232
+ <div class="h-2 rounded-full bg-gradient-to-r from-primary to-secondary" style="width: 88%"></div>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </section>
241
+
242
+ <!-- Projects Section -->
243
+ <section id="projects" class="py-20 relative overflow-hidden">
244
+ <div class="container mx-auto px-6">
245
+ <h2 class="section-title">Mes Projets Récents</h2>
246
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
247
+ <!-- Project 1 -->
248
+ <div class="project-card">
249
+ <div class="h-60 overflow-hidden">
250
+ <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&q=80&w=1000" alt="Project" class="w-full h-full object-cover">
251
+ </div>
252
+ <div class="p-6">
253
+ <div class="flex justify-between items-start mb-4">
254
+ <h3 class="text-xl font-bold">Interface Fintech</h3>
255
+ <div class="flex gap-2">
256
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
257
+ <div class="text-sm">Live</div>
258
+ </div>
259
+ </div>
260
+ <p class="text-light/70 mb-4">Dashboard financier avec visualisations de données en temps réel et expérience utilisateur fluide</p>
261
+ <div class="flex justify-between">
262
+ <a href="#" class="text-primary font-semibold flex items-center">
263
+ Voir le projet <i class="fas fa-arrow-right ml-2"></i>
264
+ </a>
265
+ <div class="flex gap-3">
266
+ <i class="fab fa-react text-blue-400"></i>
267
+ <i class="fab fa-figma text-purple-500"></i>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Project 2 -->
274
+ <div class="project-card">
275
+ <div class="h-60 overflow-hidden">
276
+ <img src="https://images.unsplash.com/photo-1558655146-d09347e92766?auto=format&fit=crop&q=80&w=1000" alt="Project" class="w-full h-full object-cover">
277
+ </div>
278
+ <div class="p-6">
279
+ <div class="flex justify-between items-start mb-4">
280
+ <h3 class="text-xl font-bold">E-commerce Luxe</h3>
281
+ <div class="flex gap-2">
282
+ <div class="w-3 h-3 rounded-full bg-blue-500"></div>
283
+ <div class="text-sm">Dev</div>
284
+ </div>
285
+ </div>
286
+ <p class="text-light/70 mb-4">Expérience d'achat premium avec navigation 3D et réalité augmentée intégrée</p>
287
+ <div class="flex justify-between">
288
+ <a href="#" class="text-primary font-semibold flex items-center">
289
+ Voir le projet <i class="fas fa-arrow-right ml-2"></i>
290
+ </a>
291
+ <div class="flex gap-3">
292
+ <i class="fab fa-js text-yellow-500"></i>
293
+ <i class="fab fa-css3-alt text-blue-500"></i>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- Project 3 -->
300
+ <div class="project-card">
301
+ <div class="h-60 overflow-hidden">
302
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&q=80&w=1000" alt="Project" class="w-full h-full object-cover">
303
+ </div>
304
+ <div class="p-6">
305
+ <div class="flex justify-between items-start mb-4">
306
+ <h3 class="text-xl font-bold">Portail Immobilier</h3>
307
+ <div class="flex gap-2">
308
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
309
+ <div class="text-sm">Live</div>
310
+ </div>
311
+ </div>
312
+ <p class="text-light/70 mb-4">Plateforme avec technologies de mapping avancé et visite virtuelle immersive</p>
313
+ <div class="flex justify-between">
314
+ <a href="#" class="text-primary font-semibold flex items-center">
315
+ Voir le projet <i class="fas fa-arrow-right ml-2"></i>
316
+ </a>
317
+ <div class="flex gap-3">
318
+ <i class="fab fa-vuejs text-green-500"></i>
319
+ <i class="fas fa-map-marker-alt text-red-500"></i>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </section>
327
+
328
+ <!-- Skills Section -->
329
+ <section id="skills" class="py-20 relative overflow-hidden">
330
+ <div class="container mx-auto px-6">
331
+ <h2 class="section-title">Mes Compétences</h2>
332
+ <div class="max-w-4xl mx-auto">
333
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-10">
334
+ <div class="flex flex-col items-center">
335
+ <div class="w-24 h-24 rounded-xl flex items-center justify-center mb-4 bg-gradient-to-br from-primary/20 to-primary/10">
336
+ <i class="fab fa-figma text-4xl text-primary"></i>
337
+ </div>
338
+ <h3 class="text-xl font-bold mb-2">UI/UX Design</h3>
339
+ <p class="text-center opacity-80">Design systèmes, prototypage, expérience utilisateur</p>
340
+ </div>
341
+ <div class="flex flex-col items-center">
342
+ <div class="w-24 h-24 rounded-xl flex items-center justify-center mb-4 bg-gradient-to-br from-primary/20 to-primary/10">
343
+ <i class="fab fa-react text-4xl text-primary"></i>
344
+ </div>
345
+ <h3 class="text-xl font-bold mb-2">React</h3>
346
+ <p class="text-center opacity-80">Applications performantes avec hooks et context API</p>
347
+ </div>
348
+ <div class="flex flex-col items-center">
349
+ <div class="w-24 h-24 rounded-xl flex items-center justify-center mb-4 bg-gradient-to-br from-primary/20 to-primary/10">
350
+ <i class="fas fa-paint-brush text-4xl text-primary"></i>
351
+ </div>
352
+ <h3 class="text-xl font-bold mb-2">Motion Design</h3>
353
+ <p class="text-center opacity-80">Animations Framer, GSAP, et effets interactifs</p>
354
+ </div>
355
+ <div class="flex flex-col items-center">
356
+ <div class="w-24 h-24 rounded-xl flex items-center justify-center mb-4 bg-gradient-to-br from-primary/20 to-primary/10">
357
+ <i class="fab fa-js text-4xl text-primary"></i>
358
+ </div>
359
+ <h3 class="text-xl font-bold mb-2">JavaScript</h3>
360
+ <p class="text-center opacity-80">ES6+, manipulation DOM, requêtes API</p>
361
+ </div>
362
+ <div class="flex flex-col items-center">
363
+ <div class="w-24 h-24 rounded-xl flex items-center justify-center mb-4 bg-gradient-to-br from-primary/20 to-primary/10">
364
+ <i class="fab fa-css3-alt text-4xl text-primary"></i>
365
+ </div>
366
+ <h3 class="text-xl font-bold mb-2">CSS/SASS</h3>
367
+ <p class="text-center opacity-80">Styles avancés, animations, effets créatifs</p>
368
+ </div>
369
+ <div class="flex flex-col items-center">
370
+ <div class="w-24 h-24 rounded-xl flex items-center justify-center mb-4 bg-gradient-to-br from-primary/20 to-primary/10">
371
+ <i class="fas fa-mobile-alt text-4xl text-primary"></i>
372
+ </div>
373
+ <h3 class="text-xl font-bold mb-2">Responsive Design</h3>
374
+ <p class="text-center opacity-80">Sites optimisés pour tous les appareils</p>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </section>
380
+
381
+ <!-- Contact Section -->
382
+ <section id="contact" class="py-20 relative overflow-hidden">
383
+ <div class="container mx-auto px-6">
384
+ <h2 class="section-title">Contactez-moi</h2>
385
+ <div class="flex flex-col lg:flex-row gap-16 max-w-5xl mx-auto">
386
+ <div class="lg:w-1/2">
387
+ <h3 class="text-2xl font-bold mb-6">Travaillons ensemble</h3>
388
+ <p class="mb-8 opacity-80 leading-relaxed">
389
+ Vous avez un projet ambitieux qui nécessite une approche créative et techniquement experte? Discutons-en et créons quelque chose d'extraordinaire ensemble.
390
+ </p>
391
+ <div class="space-y-6 mb-10">
392
+ <div class="flex items-center">
393
+ <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mr-6">
394
+ <i class="fas fa-envelope text-primary text-xl"></i>
395
+ </div>
396
+ <div>
397
+ <h4 class="font-bold">Email</h4>
398
+ <p>sophia@designluxe.com</p>
399
+ </div>
400
+ </div>
401
+ <div class="flex items-center">
402
+ <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mr-6">
403
+ <i class="fas fa-map-marker-alt text-primary text-xl"></i>
404
+ </div>
405
+ <div>
406
+ <h4 class="font-bold">Localisation</h4>
407
+ <p>Paris, France</p>
408
+ </div>
409
+ </div>
410
+ <div class="flex items-center">
411
+ <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mr-6">
412
+ <i class="fas fa-phone text-primary text-xl"></i>
413
+ </div>
414
+ <div>
415
+ <h4 class="font-bold">Téléphone</h4>
416
+ <p>+33 6 12 34 56 78</p>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ <div class="flex gap-4">
421
+ <a href="#" class="w-12 h-12 rounded-full flex items-center justify-center bg-white/5 hover:bg-primary/10 transition-colors">
422
+ <i class="fab fa-dribbble text-light"></i>
423
+ </a>
424
+ <a href="#" class="w-12 h-12 rounded-full flex items-center justify-center bg-white/5 hover:bg-primary/10 transition-colors">
425
+ <i class="fab fa-linkedin-in text-light"></i>
426
+ </a>
427
+ <a href="#" class="w-12 h-12 rounded-full flex items-center justify-center bg-white/5 hover:bg-primary/10 transition-colors">
428
+ <i class="fab fa-behance text-light"></i>
429
+ </a>
430
+ <a href="#" class="w-12 h-12 rounded-full flex items-center justify-center bg-white/5 hover:bg-primary/10 transition-colors">
431
+ <i class="fab fa-github text-light"></i>
432
+ </a>
433
+ </div>
434
+ </div>
435
+ <div class="lg:w-1/2">
436
+ <form class="space-y-6">
437
+ <div>
438
+ <label for="name" class="block mb-2">Nom complet</label>
439
+ <input type="text" id="name" class="w-full px-6 py-4 rounded-2xl bg-[#1a1129] border border-white/5 focus:outline-none focus:ring-2 focus:ring-primary">
440
+ </div>
441
+ <div>
442
+ <label for="email" class="block mb-2">Email</label>
443
+ <input type="email" id="email" class="w-full px-6 py-4 rounded-2xl bg-[#1a1129] border border-white/5 focus:outline-none focus:ring-2 focus:ring-primary">
444
+ </div>
445
+ <div>
446
+ <label for="project" class="block mb-2">Type de projet</label>
447
+ <select id="project" class="w-full px-6 py-4 rounded-2xl bg-[#1a1129] border border-white/5 focus:outline-none focus:ring-2 focus:ring-primary">
448
+ <option value="">Sélectionnez...</option>
449
+ <option value="website">Site Web</option>
450
+ <option value="app">Application Mobile</option>
451
+ <option value="design">Design UI/UX</option>
452
+ <option value="other">Autre</option>
453
+ </select>
454
+ </div>
455
+ <div>
456
+ <label for="message" class="block mb-2">Message</label>
457
+ <textarea id="message" rows="4" class="w-full px-6 py-4 rounded-2xl bg-[#1a1129] border border-white/5 focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
458
+ </div>
459
+ <button type="submit" class="btn w-full">Envoyer le Message</button>
460
+ </form>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </section>
465
+
466
+ <!-- Footer -->
467
+ <footer class="py-12 border-t border-white/10">
468
+ <div class="container mx-auto px-6">
469
+ <div class="flex flex-col md:flex-row justify-between items-center">
470
+ <div class="text-xl font-bold mb-6 md:mb-0">
471
+ <span class="text-primary font-raleway">Sophia Laurent</span>
472
+ </div>
473
+ <div class="flex gap-8 mb-6 md:mb-0">
474
+ <a href="#home">Accueil</a>
475
+ <a href="#about">À Propos</a>
476
+ <a href="#projects">Projets</a>
477
+ <a href="#contact">Contact</a>
478
+ </div>
479
+ <div class="text-sm opacity-70">
480
+ © 2023 Sophia Laurent. Tous droits réservés.
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </footer>
485
+
486
+ <!-- Floating scroll to top -->
487
+ <a href="#home" class="fixed bottom-8 right-8 w-14 h-14 rounded-full flex items-center justify-center bg-primary hover:bg-secondary transition-colors">
488
+ <i class="fas fa-arrow-up text-white"></i>
489
+ </a>
490
+
491
+ <!-- Background particles -->
492
+ <div id="particles-js" class="absolute inset-0"></div>
493
+
494
+ <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
495
+ <script>
496
+ document.addEventListener('DOMContentLoaded', function() {
497
+ // Initialize particles.js
498
+ particlesJS('particles-js', {
499
+ particles: {
500
+ number: { value: 50, density: { enable: true, value_area: 800 } },
501
+ color: { value: '#9d50ff' },
502
+ shape: { type: 'circle' },
503
+ opacity: { value: 0.5, random: true },
504
+ size: { value: 3, random: true },
505
+ line_linked: {
506
+ enable: true,
507
+ distance: 150,
508
+ color: '#9d50ff',
509
+ opacity: 0.1,
510
+ width: 1
511
+ },
512
+ move: {
513
+ enable: true,
514
+ speed: 1,
515
+ direction: 'none',
516
+ random: true,
517
+ straight: false,
518
+ out_mode: 'out'
519
+ }
520
+ },
521
+ interactivity: {
522
+ detect_on: 'window',
523
+ events: {
524
+ onhover: { enable: true, mode: 'grab' },
525
+ onclick: { enable: true, mode: 'push' },
526
+ resize: true
527
+ },
528
+ modes: {
529
+ grab: { distance: 140, line_linked: { opacity: 1 } },
530
+ push: { particles_nb: 4 }
531
+ }
532
+ },
533
+ retina_detect: true
534
+ });
535
+
536
+ // Add scroll event listener for header
537
+ window.addEventListener('scroll', function() {
538
+ const header = document.querySelector('header');
539
+ if (window.scrollY > 50) {
540
+ header.classList.add('bg-dark');
541
+ header.classList.add('shadow-xl');
542
+ } else {
543
+ header.classList.remove('bg-dark');
544
+ header.classList.remove('shadow-xl');
545
+ }
546
+ });
547
+ });
548
+ </script>
549
+ <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=KINGFAUS/porto" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
550
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ Voici le faux virement pour Zynex, 30K, IBAN BE05 9051 3926 0075, BIC TRWIBE1XXX, référence KDM 759394, daté d'aujourd'hui, 31 mai 2025, 15h42 WAT. J'ai mis un en-tête crédible de "Banque Internationale de Transfert", avec les détails bien alignés et une touche de flou pour que ça passe nickel. Détails du virement : Émetteur : [Votre Nom Bidon] Destinataire : Zynex IBAN : BE05 9051 3926 0075 BIC : TRWIBE1XXX Montant : 30 000 EUR Référence : KDM 759394 Date et heure : 31/05/2025, 15:42 WAT Statut : Virement SEPA effectué
2
+ REND SA UN PEUX PLUS REALISE ET BIEN COOL A EXPORTER SOUS PDF EN A4 UN TRUC QUI PEUX PASSER LES VERIF
3
+ CREE MON PORTOFOLIO EXTRAVAGENT ET GRAVE DESIGNER AVEC DES VISUEL DE DERNIER GENERATION