-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
331 lines (279 loc) · 13.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>AKLI Salma</title>
<meta content="Je m'appelle Akli Salma, je suis passionné par tout ce qui touche à la technologie. En 2021, j'ai rejoint l'UBO pour apprendre la programmation," name="description">
<meta content="html,css,stage,web,projet" name="keywords">
<!-- Favicons -->
<link href="https://image.freepik.com/photos-gratuite/gros-plan-image-programmeur-travaillant-son-bureau-dans-bureau_1098-18707.jpg" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- ======= Header ======= -->
<header id="header">
<div class="container">
<h1><a href="index.html">AKLI Salma</a></h1>
<h2> Codeuse dans l'âme et <span>exploratrice numérique </span></h2>
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link active" href="#header">Accueil</a></li>
<li><a class="nav-link" href="#about">A propos</a></li>
<li><a class="nav-link" href="#resume">Formation</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
<i class="bi bi-list text-success mobile-nav-toggle"></i>
</nav><!-- .navbar -->
<div class="social-links">
<a target="blank" href="https://github.com/aklisalma" class="github"><i class="bi bi-github"></i></a>
<a target="blank" href="https://www.linkedin.com/in/salma-akli-baba5a226/" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</header><!-- End Header -->
<!-- ======= About Section ======= -->
<section id="about" class="about">
<!-- ======= About Me ======= -->
<div class="about-me container">
<div class="section-title">
<h2>A propos</h2>
<p>A propos de moi</p>
</div>
<div class="row">
<div class="col-lg-4" data-aos="fade-right">
<img src="assets/img/Salma.jpg" class="img-fluid" alt="">
</div>
<div class="col-lg-8 pt-4 pt-lg-0 content" data-aos="fade-left">
<h3>Developpeuse front-end</h3>
<p class="fst-italic">
passionnée par le web et les nouvelles technologies
</p>
<div class="row">
<div class="col-lg-6">
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>Anniversaire:</strong> <span>13 Juin 2003</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Website:</strong> <span>aklisalma.github.io</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>e-mail:</strong> <span>[email protected]</span></li>
</ul>
</div>
<div class="col-lg-6">
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>Adresse:</strong> <span>Rennes, France</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Niveau:</strong> <span>Bac+1</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Permis:</strong> <span>Type B</span></li>
</ul>
</div>
</div>
<p>
Je m'appelle Salma et je suis passionnée par l'informatique, plus précisément par le développement web. J'aime explorer le monde du code, créer des interfaces conviviales, et apprendre constamment de nouvelles compétences pour repousser mes limites dans le domaine de la tech.
</p>
</div>
</div>
</div><!-- End About Me -->
<!-- ======= Skills ======= -->
<div class="skills container">
<div class="section-title">
<h2>Compètences</h2>
</div>
<div class="row skills-content">
<div class="col-lg-6">
<div class="progress">
<span class="skill">HTML <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">CSS <i class="val">60%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">PHP<i class="val">40%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="progress">
<span class="skill">Python<i class="val">40%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Langage C<i class="val">30%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">WORDPRESS / CMS<i class="val">35%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div><!-- End Skills -->
<!-- ======= Interests ======= -->
<div class="interests container">
<div class="section-title">
<h2>Compètences générales</h2>
</div>
<div class="row">
<div class="col-lg-6 col-md-4">
<div class="icon-box">
<i class="ri-team-fill" style="color: #e361ff;"></i>
<h3>Travailler en équipe</h3>
</div>
</div>
<div class="col-lg-6 col-md-4 mt-4 mt-md-0">
<div class="icon-box">
<i class="ri-user-smile-line" style="color: #5578ff;"></i>
<h3>Gestion de Stresse</h3>
</div>
</div>
<div class="col-lg-6 col-md-4 mt-4 mt-md-0">
<div class="icon-box">
<i class="ri-calendar-fill" style="color: #e80368;"></i>
<h3>Gestion de temps</h3>
</div>
</div>
<div class="col-lg-6 col-md-4 mt-4 mt-lg-0">
<div class="icon-box">
<i class="ri-lightbulb-fill" style="color: #ffbb2c;"></i>
<h3>creativité</h3>
</div>
</div>
</div>
</div><!-- End Interests -->
</section><!-- End About Section -->
<!-- ======= Resume Section ======= -->
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>FORMATION</h2>
</div>
<div class="row">
<div class="col-lg-6">
<h3 class="resume-title">Education</h3>
<div class="resume-item">
<h4>Bachelor INFORMATIQUE</h4>
<h5>2024 - 2027</h5>
<p><em>L'ESGI</em></p>
</div>
<div class="resume-item">
<h4>Licence MIASHS</h4>
<h5>2023 - 2024</h5>
<p><em>Université de Rennes</em></p>
</div>
<div class="resume-item">
<h4>Licence Informatique et sciences de l'ingénieur</h4>
<h5>2021 - 2023</h5>
<p><em>Université de Bretagne Occidentale (UBO)</em></p>
</div>
<div class="resume-item">
<h4>Baccalauréat physique chimie BIOF</h4>
<h5>2020 - 2021</h5>
<p><em>Lycéé Yaacoub El Mansour, Maroc</em></p>
</div>
</div>
<div class="col-lg-6">
<h3 class="resume-title">Projets</h3>
<div class="resume-item">
<h4><a target="blank" href="https://aklisalma.github.io/Netflix/">Site de bons plans</a></h4>
<h5>Octobre 2024</h5>
<p><em>Développement Web</em></p>
<p>J'ai réalisé un site de bons plans destiné aux étudiants, conçu pour rendre plus accessibles les offres et réductions du quotidien. Ce projet a été développé avec HTML, CSS et JavaScript, et met l'accent sur une interface simple et intuitive pour faciliter la navigation. Chaque fonctionnalité a été pensée pour améliorer l'expérience utilisateur, et j'ai pris soin de rendre le site responsive afin qu'il soit accessible depuis tout type d'appareil.</p>
</div>
<div class="resume-item">
<h4><a target="blank" href="https://aklisalma.github.io/Netflix/">Jeu 3D</a></h4>
<h5>Septembre 2024</h5>
<p><em>développement de jeux</em></p>
<p>J'ai réalisé ce jeu 3D avec Unity et C#, explorant la programmation et la conception d'interactions immersives. Ce projet reflète mon intérêt pour le développement de jeux et la création d'expériences engageantes. Un bel apprentissage de la physique et des animations en temps réel.</p>
</div>
<div class="resume-item">
<h4><a target="blank" href="https://aklisalma.github.io/Netflix/">Netflix UI</a></h4>
<h5>décembre 2021</h5>
<p><em>Développement Web</em></p>
<p>Après avoir appris de coder en étulisant (HTML et CSS) j'ai essayée de créer mon premier site Web qui présente Netflix UI.</p>
</div>
<div class="resume-item">
<h4><a target="blank" href="https://aklisalma.github.io/Developpement-Web/">Site WEB (info dév)</a></h4>
<h5>décembre 2021</h5>
<p><em>Développement Web</em></p>
<p>Après avoir appris de coder en étulisant (HTML et CSS) j'ai essayée de créer un site Web qui prèsente des informations sur le domaine du développement WEB.</p>
</div>
</div>
</div>
</div>
</section><!-- End Resume Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<div class="container">
<div class="section-title">
<h2>Contact</h2>
<p>Me contacter</p>
</div>
<div class="row mt-2">
<div class="col-md-6 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-map"></i>
<h3>Addresse</h3>
<p>Rennes, France</p>
</div>
</div>
<div class="col-md-6 mt-4 mt-md-0 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-share-alt"></i>
<h3>Réseaux sociaux</h3>
<div class="social-links">
<a target="blank" href="https://twitter.com/AkliSalma" class="twitter"><i class="bi bi-twitter"></i></a>
<a target="blank" href="https://github.com/aklisalma" class="github"><i class="bi bi-github"></i></a>
<a target="blank" href="https://www.linkedin.com/in/salma-akli-baba5a226/" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-md-6 mt-4 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-envelope"></i>
<h3>Email</h3>
<p>[email protected]</p>
</div>
</div>
<div class="col-md-6 mt-4 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-phone-call"></i>
<h3>Telegram</h3>
<p>@SalmaAkli</p>
</div>
</div>
</div>
</div>
</section><!-- End Contact Section -->
<!-- Vendor JS Files -->
<script src="assets/vendor/purecounter/purecounter.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>