Hugging Face's logo

Spaces:
Adama99
/
adauu
Running

App Files Community
Adama99 commited on
Commit
cd6fb7e
·
verified ·
1 Parent(s): 36aca78

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +584 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Adauu
3
- emoji: 🏃
4
- colorFrom: red
5
- colorTo: indigo
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: adauu
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
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,584 @@
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>Mon Portfolio Créatif</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
+ /* Animation personnalisée */
11
+ @keyframes fadeIn {
12
+ from { opacity: 0; transform: translateY(20px); }
13
+ to { opacity: 1; transform: translateY(0); }
14
+ }
15
+
16
+ .animate-fadeIn {
17
+ animation: fadeIn 1s ease-out forwards;
18
+ }
19
+
20
+ /* Effet de survol personnalisé pour les cartes de projet */
21
+ .project-card {
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .project-card:hover {
26
+ transform: translateY(-10px);
27
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
28
+ }
29
+
30
+ /* Style personnalisé pour la barre de navigation */
31
+ .nav-link {
32
+ position: relative;
33
+ }
34
+
35
+ .nav-link::after {
36
+ content: '';
37
+ position: absolute;
38
+ width: 0;
39
+ height: 2px;
40
+ bottom: 0;
41
+ left: 0;
42
+ background-color: #3B82F6;
43
+ transition: width 0.3s ease;
44
+ }
45
+
46
+ .nav-link:hover::after {
47
+ width: 100%;
48
+ }
49
+
50
+ /* Animation pour le bouton de contact */
51
+ .contact-btn {
52
+ transition: all 0.3s ease;
53
+ }
54
+
55
+ .contact-btn:hover {
56
+ transform: scale(1.05);
57
+ box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
58
+ }
59
+ </style>
60
+ </head>
61
+ <body class="bg-gray-50 font-sans text-gray-800">
62
+ <!-- Barre de navigation -->
63
+ <nav class="fixed w-full bg-white shadow-sm z-50">
64
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
65
+ <div class="flex justify-between h-16">
66
+ <div class="flex items-center">
67
+ <a href="#" class="text-xl font-bold text-blue-500">Portfolio</a>
68
+ </div>
69
+ <div class="hidden md:flex items-center space-x-8">
70
+ <a href="#accueil" class="nav-link text-gray-700 hover:text-blue-500">Accueil</a>
71
+ <a href="#projets" class="nav-link text-gray-700 hover:text-blue-500">Projets</a>
72
+ <a href="#competences" class="nav-link text-gray-700 hover:text-blue-500">Compétences</a>
73
+ <a href="#a-propos" class="nav-link text-gray-700 hover:text-blue-500">À propos</a>
74
+ <a href="#contact" class="contact-btn bg-blue-500 text-white px-4 py-2 rounded-md">Contact</a>
75
+ </div>
76
+ <div class="md:hidden flex items-center">
77
+ <button id="menu-btn" class="text-gray-700">
78
+ <i class="fas fa-bars text-xl"></i>
79
+ </button>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- Menu mobile -->
85
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
86
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
87
+ <a href="#accueil" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Accueil</a>
88
+ <a href="#projets" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Projets</a>
89
+ <a href="#competences" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Compétences</a>
90
+ <a href="#a-propos" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md">À propos</a>
91
+ <a href="#contact" class="block px-3 py-2 bg-blue-500 text-white rounded-md">Contact</a>
92
+ </div>
93
+ </div>
94
+ </nav>
95
+
96
+ <!-- Section Hero -->
97
+ <section id="accueil" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-r from-blue-50 to-indigo-50">
98
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
99
+ <div class="flex flex-col md:flex-row items-center">
100
+ <div class="md:w-1/2 mb-10 md:mb-0 animate-fadeIn">
101
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Bonjour, je suis <span class="text-blue-500">Alex</span></h1>
102
+ <h2 class="text-2xl md:text-3xl font-semibold text-gray-600 mb-6">Développeur Web Créatif</h2>
103
+ <p class="text-gray-600 mb-8 text-lg">Je crée des expériences numériques exceptionnelles avec un design moderne et des solutions techniques innovantes.</p>
104
+ <div class="flex space-x-4">
105
+ <a href="#projets" class="contact-btn bg-blue-500 text-white px-6 py-3 rounded-md">Voir mes projets</a>
106
+ <a href="#contact" class="contact-btn border border-blue-500 text-blue-500 px-6 py-3 rounded-md">Me contacter</a>
107
+ </div>
108
+ </div>
109
+ <div class="md:w-1/2 flex justify-center animate-fadeIn" style="animation-delay: 0.3s;">
110
+ <div class="relative">
111
+ <div class="w-64 h-64 md:w-80 md:h-80 bg-blue-500 rounded-full opacity-10 absolute -top-6 -left-6"></div>
112
+ <div class="w-64 h-64 md:w-80 md:h-80 bg-indigo-500 rounded-full opacity-10 absolute -bottom-6 -right-6"></div>
113
+ <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
114
+ alt="Photo de profil"
115
+ class="relative w-64 h-64 md:w-80 md:h-80 object-cover rounded-full border-4 border-white shadow-xl">
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </section>
121
+
122
+ <!-- Section Projets -->
123
+ <section id="projets" class="py-16 bg-white">
124
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
125
+ <div class="text-center mb-16">
126
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Mes Projets Récents</h2>
127
+ <p class="text-gray-600 max-w-2xl mx-auto">Découvrez une sélection de mes réalisations les plus marquantes, alliant design et fonctionnalité.</p>
128
+ </div>
129
+
130
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
131
+ <!-- Projet 1 -->
132
+ <div class="project-card bg-white rounded-lg overflow-hidden shadow-md animate-fadeIn" style="animation-delay: 0.1s;">
133
+ <div class="h-48 bg-gradient-to-r from-blue-400 to-indigo-500 flex items-center justify-center">
134
+ <i class="fas fa-laptop-code text-white text-6xl"></i>
135
+ </div>
136
+ <div class="p-6">
137
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Application Web E-commerce</h3>
138
+ <p class="text-gray-600 mb-4">Plateforme complète avec paiement en ligne, gestion de stock et interface admin.</p>
139
+ <div class="flex flex-wrap gap-2 mb-4">
140
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">React</span>
141
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Node.js</span>
142
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">MongoDB</span>
143
+ </div>
144
+ <a href="#" class="text-blue-500 font-medium hover:text-blue-700">Voir le projet →</a>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Projet 2 -->
149
+ <div class="project-card bg-white rounded-lg overflow-hidden shadow-md animate-fadeIn" style="animation-delay: 0.2s;">
150
+ <div class="h-48 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center">
151
+ <i class="fas fa-mobile-alt text-white text-6xl"></i>
152
+ </div>
153
+ <div class="p-6">
154
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Application Mobile de Fitness</h3>
155
+ <p class="text-gray-600 mb-4">Suivi d'activité, programmes personnalisés et intégration avec wearables.</p>
156
+ <div class="flex flex-wrap gap-2 mb-4">
157
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Flutter</span>
158
+ <span class="bg-pink-100 text-pink-800 text-xs px-3 py-1 rounded-full">Firebase</span>
159
+ <span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">API REST</span>
160
+ </div>
161
+ <a href="#" class="text-blue-500 font-medium hover:text-blue-700">Voir le projet →</a>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Projet 3 -->
166
+ <div class="project-card bg-white rounded-lg overflow-hidden shadow-md animate-fadeIn" style="animation-delay: 0.3s;">
167
+ <div class="h-48 bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center">
168
+ <i class="fas fa-chart-line text-white text-6xl"></i>
169
+ </div>
170
+ <div class="p-6">
171
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Tableau de Bord Analytique</h3>
172
+ <p class="text-gray-600 mb-4">Visualisation de données en temps réel avec filtres avancés et export PDF.</p>
173
+ <div class="flex flex-wrap gap-2 mb-4">
174
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Vue.js</span>
175
+ <span class="bg-teal-100 text-teal-800 text-xs px-3 py-1 rounded-full">D3.js</span>
176
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Python</span>
177
+ </div>
178
+ <a href="#" class="text-blue-500 font-medium hover:text-blue-700">Voir le projet →</a>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <div class="text-center mt-12 animate-fadeIn" style="animation-delay: 0.4s;">
184
+ <a href="#" class="inline-block contact-btn bg-gray-800 text-white px-6 py-3 rounded-md hover:bg-gray-700">
185
+ Voir tous les projets <i class="fas fa-arrow-right ml-2"></i>
186
+ </a>
187
+ </div>
188
+ </div>
189
+ </section>
190
+
191
+ <!-- Section Compétences -->
192
+ <section id="competences" class="py-16 bg-gray-50">
193
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
194
+ <div class="text-center mb-16">
195
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Mes Compétences</h2>
196
+ <p class="text-gray-600 max-w-2xl mx-auto">Un ensemble diversifié de compétences techniques et créatives pour répondre à tous vos besoins numériques.</p>
197
+ </div>
198
+
199
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
200
+ <!-- Compétence 1 -->
201
+ <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 animate-fadeIn" style="animation-delay: 0.1s;">
202
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
203
+ <i class="fas fa-code text-blue-500 text-2xl"></i>
204
+ </div>
205
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Développement Frontend</h3>
206
+ <p class="text-gray-600 mb-4">Création d'interfaces utilisateur réactives et accessibles avec les dernières technologies web.</p>
207
+ <div class="flex flex-wrap gap-2">
208
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">HTML5</span>
209
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">CSS3</span>
210
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">JavaScript</span>
211
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">React</span>
212
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Vue.js</span>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Compétence 2 -->
217
+ <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 animate-fadeIn" style="animation-delay: 0.2s;">
218
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
219
+ <i class="fas fa-server text-indigo-500 text-2xl"></i>
220
+ </div>
221
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Développement Backend</h3>
222
+ <p class="text-gray-600 mb-4">Construction d'API robustes et sécurisées pour alimenter vos applications.</p>
223
+ <div class="flex flex-wrap gap-2">
224
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Node.js</span>
225
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Express</span>
226
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Python</span>
227
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Django</span>
228
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">PHP</span>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Compétence 3 -->
233
+ <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 animate-fadeIn" style="animation-delay: 0.3s;">
234
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
235
+ <i class="fas fa-paint-brush text-purple-500 text-2xl"></i>
236
+ </div>
237
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Design UI/UX</h3>
238
+ <p class="text-gray-600 mb-4">Conception d'expériences utilisateur intuitives et esthétiques pour maximiser l'engagement.</p>
239
+ <div class="flex flex-wrap gap-2">
240
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Figma</span>
241
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Adobe XD</span>
242
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Photoshop</span>
243
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Illustrator</span>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Graphique de compétences -->
249
+ <div class="mt-16 bg-white p-8 rounded-lg shadow-sm animate-fadeIn" style="animation-delay: 0.4s;">
250
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Maîtrise des Technologies</h3>
251
+ <div class="space-y-6">
252
+ <div>
253
+ <div class="flex justify-between mb-1">
254
+ <span class="text-gray-700">JavaScript</span>
255
+ <span class="text-gray-500">90%</span>
256
+ </div>
257
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
258
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 90%"></div>
259
+ </div>
260
+ </div>
261
+
262
+ <div>
263
+ <div class="flex justify-between mb-1">
264
+ <span class="text-gray-700">React</span>
265
+ <span class="text-gray-500">85%</span>
266
+ </div>
267
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
268
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 85%"></div>
269
+ </div>
270
+ </div>
271
+
272
+ <div>
273
+ <div class="flex justify-between mb-1">
274
+ <span class="text-gray-700">Node.js</span>
275
+ <span class="text-gray-500">80%</span>
276
+ </div>
277
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
278
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 80%"></div>
279
+ </div>
280
+ </div>
281
+
282
+ <div>
283
+ <div class="flex justify-between mb-1">
284
+ <span class="text-gray-700">UI/UX Design</span>
285
+ <span class="text-gray-500">75%</span>
286
+ </div>
287
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
288
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 75%"></div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </section>
295
+
296
+ <!-- Section À propos -->
297
+ <section id="a-propos" class="py-16 bg-white">
298
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
299
+ <div class="flex flex-col md:flex-row items-center">
300
+ <div class="md:w-1/2 mb-10 md:mb-0 animate-fadeIn">
301
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">À propos de moi</h2>
302
+ <p class="text-gray-600 mb-6">Passionné par la technologie depuis mon plus jeune âge, j'ai transformé cette passion en une carrière enrichissante dans le développement web et mobile.</p>
303
+
304
+ <div class="space-y-4 mb-8">
305
+ <div class="flex items-start">
306
+ <div class="flex-shrink-0 mt-1">
307
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
308
+ <i class="fas fa-check text-blue-500"></i>
309
+ </div>
310
+ </div>
311
+ <div class="ml-3">
312
+ <p class="text-gray-700">Plus de 5 ans d'expérience dans le développement web</p>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="flex items-start">
317
+ <div class="flex-shrink-0 mt-1">
318
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
319
+ <i class="fas fa-check text-blue-500"></i>
320
+ </div>
321
+ </div>
322
+ <div class="ml-3">
323
+ <p class="text-gray-700">Diplômé en Informatique de l'Université de Paris</p>
324
+ </div>
325
+ </div>
326
+
327
+ <div class="flex items-start">
328
+ <div class="flex-shrink-0 mt-1">
329
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
330
+ <i class="fas fa-check text-blue-500"></i>
331
+ </div>
332
+ </div>
333
+ <div class="ml-3">
334
+ <p class="text-gray-700">Plus de 20 projets réalisés pour des clients variés</p>
335
+ </div>
336
+ </div>
337
+ </div>
338
+
339
+ <a href="#" class="contact-btn inline-flex items-center bg-blue-500 text-white px-6 py-3 rounded-md">
340
+ <i class="fas fa-download mr-2"></i> Télécharger mon CV
341
+ </a>
342
+ </div>
343
+
344
+ <div class="md:w-1/2 md:pl-12 animate-fadeIn" style="animation-delay: 0.3s;">
345
+ <div class="bg-gray-50 p-8 rounded-lg">
346
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Mon Parcours</h3>
347
+
348
+ <div class="space-y-8">
349
+ <!-- Expérience 1 -->
350
+ <div class="flex">
351
+ <div class="flex-shrink-0 mr-4">
352
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
353
+ <i class="fas fa-briefcase text-blue-500"></i>
354
+ </div>
355
+ </div>
356
+ <div>
357
+ <h4 class="font-medium text-gray-800">Développeur Frontend Senior</h4>
358
+ <p class="text-sm text-gray-500 mb-1">TechSolutions Inc. • 2020 - Présent</p>
359
+ <p class="text-gray-600">Responsable de la conception et de l'implémentation des interfaces utilisateur pour les applications web de l'entreprise.</p>
360
+ </div>
361
+ </div>
362
+
363
+ <!-- Expérience 2 -->
364
+ <div class="flex">
365
+ <div class="flex-shrink-0 mr-4">
366
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center">
367
+ <i class="fas fa-briefcase text-indigo-500"></i>
368
+ </div>
369
+ </div>
370
+ <div>
371
+ <h4 class="font-medium text-gray-800">Développeur Full Stack</h4>
372
+ <p class="text-sm text-gray-500 mb-1">WebCraft Studio • 2017 - 2020</p>
373
+ <p class="text-gray-600">Développement d'applications web complètes, de la base de données à l'interface utilisateur.</p>
374
+ </div>
375
+ </div>
376
+
377
+ <!-- Expérience 3 -->
378
+ <div class="flex">
379
+ <div class="flex-shrink-0 mr-4">
380
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
381
+ <i class="fas fa-briefcase text-purple-500"></i>
382
+ </div>
383
+ </div>
384
+ <div>
385
+ <h4 class="font-medium text-gray-800">Stagiaire en Développement</h4>
386
+ <p class="text-sm text-gray-500 mb-1">Digital Innovations • Été 2016</p>
387
+ <p class="text-gray-600">Première expérience professionnelle dans le développement web et mobile.</p>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ </section>
396
+
397
+ <!-- Section Contact -->
398
+ <section id="contact" class="py-16 bg-gray-50">
399
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
400
+ <div class="text-center mb-16">
401
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Contactez-moi</h2>
402
+ <p class="text-gray-600 max-w-2xl mx-auto">Vous avez un projet en tête ou souhaitez discuter d'une opportunité ? Je serais ravi d'échanger avec vous.</p>
403
+ </div>
404
+
405
+ <div class="flex flex-col md:flex-row">
406
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-8 animate-fadeIn">
407
+ <div class="bg-white p-8 rounded-lg shadow-sm">
408
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Informations de contact</h3>
409
+
410
+ <div class="space-y-6">
411
+ <div class="flex items-start">
412
+ <div class="flex-shrink-0 mt-1">
413
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
414
+ <i class="fas fa-envelope text-blue-500"></i>
415
+ </div>
416
+ </div>
417
+ <div class="ml-4">
418
+ <h4 class="text-sm font-medium text-gray-500">Email</h4>
419
+ <p class="text-gray-700">[email protected]</p>
420
+ </div>
421
+ </div>
422
+
423
+ <div class="flex items-start">
424
+ <div class="flex-shrink-0 mt-1">
425
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
426
+ <i class="fas fa-phone-alt text-blue-500"></i>
427
+ </div>
428
+ </div>
429
+ <div class="ml-4">
430
+ <h4 class="text-sm font-medium text-gray-500">Téléphone</h4>
431
+ <p class="text-gray-700">+33 6 12 34 56 78</p>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="flex items-start">
436
+ <div class="flex-shrink-0 mt-1">
437
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
438
+ <i class="fas fa-map-marker-alt text-blue-500"></i>
439
+ </div>
440
+ </div>
441
+ <div class="ml-4">
442
+ <h4 class="text-sm font-medium text-gray-500">Adresse</h4>
443
+ <p class="text-gray-700">123 Rue du Développeur, 75000 Paris, France</p>
444
+ </div>
445
+ </div>
446
+ </div>
447
+
448
+ <div class="mt-8">
449
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Réseaux sociaux</h3>
450
+ <div class="flex space-x-4">
451
+ <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 hover:bg-blue-500 hover:text-white transition-colors duration-300">
452
+ <i class="fab fa-linkedin-in"></i>
453
+ </a>
454
+ <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 hover:bg-blue-500 hover:text-white transition-colors duration-300">
455
+ <i class="fab fa-github"></i>
456
+ </a>
457
+ <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 hover:bg-blue-500 hover:text-white transition-colors duration-300">
458
+ <i class="fab fa-twitter"></i>
459
+ </a>
460
+ <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 hover:bg-blue-500 hover:text-white transition-colors duration-300">
461
+ <i class="fab fa-dribbble"></i>
462
+ </a>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+
468
+ <div class="md:w-1/2 animate-fadeIn" style="animation-delay: 0.3s;">
469
+ <div class="bg-white p-8 rounded-lg shadow-sm">
470
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Envoyez-moi un message</h3>
471
+
472
+ <form>
473
+ <div class="mb-6">
474
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Nom complet</label>
475
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Votre nom">
476
+ </div>
477
+
478
+ <div class="mb-6">
479
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Adresse email</label>
480
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="[email protected]">
481
+ </div>
482
+
483
+ <div class="mb-6">
484
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-2">Sujet</label>
485
+ <input type="text" id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Objet de votre message">
486
+ </div>
487
+
488
+ <div class="mb-6">
489
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-2">Message</label>
490
+ <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Décrivez votre projet ou votre demande"></textarea>
491
+ </div>
492
+
493
+ <button type="submit" class="contact-btn w-full bg-blue-500 text-white px-6 py-3 rounded-md hover:bg-blue-600">
494
+ Envoyer le message <i class="fas fa-paper-plane ml-2"></i>
495
+ </button>
496
+ </form>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </section>
502
+
503
+ <!-- Footer -->
504
+ <footer class="bg-gray-800 text-white py-8">
505
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
506
+ <div class="flex flex-col md:flex-row justify-between items-center">
507
+ <div class="mb-4 md:mb-0">
508
+ <a href="#" class="text-xl font-bold">Portfolio</a>
509
+ <p class="text-gray-400 mt-2">© 2023 Mon Portfolio. Tous droits réservés.</p>
510
+ </div>
511
+
512
+ <div class="flex space-x-6">
513
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
514
+ <i class="fab fa-linkedin-in"></i>
515
+ </a>
516
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
517
+ <i class="fab fa-github"></i>
518
+ </a>
519
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
520
+ <i class="fab fa-twitter"></i>
521
+ </a>
522
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
523
+ <i class="fab fa-dribbble"></i>
524
+ </a>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ </footer>
529
+
530
+ <script>
531
+ // Menu mobile
532
+ const menuBtn = document.getElementById('menu-btn');
533
+ const mobileMenu = document.getElementById('mobile-menu');
534
+
535
+ menuBtn.addEventListener('click', () => {
536
+ mobileMenu.classList.toggle('hidden');
537
+ });
538
+
539
+ // Animation au défilement
540
+ document.addEventListener('DOMContentLoaded', () => {
541
+ const animateElements = document.querySelectorAll('.animate-fadeIn');
542
+
543
+ const observer = new IntersectionObserver((entries) => {
544
+ entries.forEach(entry => {
545
+ if (entry.isIntersecting) {
546
+ entry.target.style.opacity = 1;
547
+ entry.target.style.transform = 'translateY(0)';
548
+ }
549
+ });
550
+ }, {
551
+ threshold: 0.1
552
+ });
553
+
554
+ animateElements.forEach(element => {
555
+ element.style.opacity = 0;
556
+ element.style.transform = 'translateY(20px)';
557
+ element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
558
+ observer.observe(element);
559
+ });
560
+
561
+ // Smooth scrolling pour les liens
562
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
563
+ anchor.addEventListener('click', function (e) {
564
+ e.preventDefault();
565
+
566
+ const targetId = this.getAttribute('href');
567
+ if (targetId === '#') return;
568
+
569
+ const targetElement = document.querySelector(targetId);
570
+ if (targetElement) {
571
+ window.scrollTo({
572
+ top: targetElement.offsetTop - 80,
573
+ behavior: 'smooth'
574
+ });
575
+
576
+ // Fermer le menu mobile si ouvert
577
+ mobileMenu.classList.add('hidden');
578
+ }
579
+ });
580
+ });
581
+ });
582
+ </script>
583
+ <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=Adama99/adauu" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
584
+ </html>