-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
179 lines (148 loc) · 7.18 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
<!DOCTYPE html>
<html lang="fr">
<head>
<!--Propriétés : -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--CSS-->
<link rel="stylesheet" href="assets/css/style.css">
<!--CDN Google font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,900;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700;1,6..96,800;1,6..96,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!--CDN Fontawesome (online)-->
<script src="https://kit.fontawesome.com/8b4000456f.js" crossorigin="anonymous"></script>
<!--Favicon-->
<link rel="shortcut icon" href="assets/image/origami-fox.png" type="image/x-icon">
<!--Titre de l'onglet page-->
<title>Portfolio</title>
</head>
<body>
<header id="home">
<!-- Menu (avec ancres)-->
<nav>
<ul class="menu">
<li>
<a href="#home" target="_self">Accueil</a>
</li>
<li>
<a href="#project" target="_self">Projets</a>
</li>
<li>
<a href="#techno" target="_self">Technologies</a>
</li>
<li>
<a href="#contact" target="_self">Contact</a>
</li>
</ul>
</nav>
<!--Présentation-->
<h1 class="title">Bienvenue</h1>
<p class="intro text-justify">
Je suis <strong>Magali Kimberly Moreau, Développeuse Web Junior.</strong>
Actuellement en formation <strong>Développeur.se Web & Web Mobile</strong> avec Simplon.co, je recherche un stage pour valider mon titre professionel.
Un de mes hobbies est de faire de l'origami. Si vous croisez le chemin d'une grenouille sauteuse ou d'une grue, il se peut que ce soit une de mes créations !
</p>
</header>
<!--Contenu principal-->
<main>
<section id="project">
<h2 class="title">Projets</h2>
<!--Image et texte d'illustration-->
<div class="project">
<img src="assets/image/projet-citations.PNG" alt="image d'illustration pour le projet générateur de citations" class="photo">
<p class="text-justify paragraph">
Création d'une application générant des citations aléatoires selon deux thèmes au choix : la sagesse et la nourriture. Possibilité pour l'utilisateur de choisir le nombre de citations.
<br>
Projet déposé sur mon Github, accessible <a href="https://mikaocko.github.io/Generateur-de-citations/" target="_blank" rel="noopener noreferrer">ICI.</a>
</p>
</div>
<!--Texte et photo d'illustration-->
<div class="project">
<p class="text-justify paragraph">
Création d'une application reponsive pour trouver les lieux de restauration CROUS à Lille (carte interactive) en utilisant <strong>Leaflet JS et l'API de Lille Métropole.</strong>
Possibilité de stocker ses adresses favorites dans un autre onglet.
<br>
Projet déposé sur mon Github, accessible <a href="https://mikaocko.github.io/Crous-RU/" target="_blank" rel="noopener noreferrer">ICI.</a>
</p>
<img src="assets/image/projet-crous.PNG" alt="image d'illustration pour le projet carte interactive des lieux de restauration à Lille" class="photo">
</div>
<!--Plus de projets :
paragraphe caché qui apparaît quand on clique sur le bouton (si pas de nouveaux projets)-->
<!--
<div>
<dl>
<dt>
<button type="button" class="btn">
Voir plus de Projets
</button>
</dt>
<dd>
<p class="text-center paragraph paragraph-hidden">
Désolé, pas de nouveaux projets pour le moment.
</p>
</dd>
</dl>
</div>
-->
</section>
<!--Slider/caroussel horizontal montrant les différentes technos et/ou logiciels utilisés (logo sur fond blanc)-->
<section id="techno">
<h2 class="title">Technologies</h2>
<div class="caroussel">
<div class="caroussel-container">
<div class="caroussel-item slider1">
<img src="assets/image/illustrator-logo.png" alt="logo de Illustrator Adobe" class="logo">
</div>
<div class="caroussel-item slider2">
<img src="assets/image/indesign-logo.png" alt="logo de Indesign Adobe" class="logo">
</div>
<div class="caroussel-item slider3">
<img src="assets/image/photoshop-logo.png" alt="logo de Photoshop Adobe" class="logo">
</div>
<div class="caroussel-item slider4">
<img src="assets/image/figma-logo.png" alt="logo de Figma" class="logo">
</div>
<div class="caroussel-item slider5">
<img src="assets/image/html-logo.png" alt="logo de HTML5" class="logo">
</div>
<div class="caroussel-item slider6">
<img src="assets/image/css-logo.png" alt="logo de CSS3" class="logo">
</div>
</div>
</div>
</section>
</main>
<!--Bouton "retour en haut"-->
<a href="#home">
<i class="fa-solid fa-circle-arrow-up fa-4x fa-bounce icon-up"></i>
</a>
<!--footer-->
<footer id="contact">
<h2 class="title">Contact</h2>
<!-- Réseaux sociaux-->
<ul>
<!--linkedin profil-->
<li>
<a href="https://fr.linkedin.com/in/magali-k-moreau">
<i class="fa-brands fa-linkedin fa-3x" title="Linkedin"></i>
</a>
</li>
<!--GitHub profil-->
<li>
<a href="https://github.com/MikaOcko">
<i class="fa-brands fa-square-github fa-3x" title="Github"></i>
</a>
</li>
<!--Téléchargement CV-->
<li>
<a href="assets/document/cv.pdf" download="Magali Kimberly Moreau-CV" title="Télécharger mon CV">
<i class="fa-solid fa-file-arrow-down fa-3x fa-shake icon-download"></i>
</a>
</li>
</ul>
</footer>
</body>
</html>