-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (192 loc) · 11.6 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
<!DOCTYPE html>
<html lang="fr-Fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./public/assets/img/avatar.png" type="image/x-icon">
<link rel="stylesheet" href="./public/css/style.css">
<script defer src="./public/js/script.js"></script>
<title>Mathieu Dacheux | Développeur web</title>
<meta name="description" content="Actuellement en formation de développeur web
et web mobile au sein de La Manu, école supérieure du numérique.">
</head>
<body>
<div class="containerWidth">
<!-- HeroBanner du Portfolio -->
<header>
<nav>
<div class="containerNav">
<div class="containerLogo">
<img src="./public/assets/icons/logo.png" alt="Logo de Mathieu Dacheux">
</div>
<div class="containerLinks">
<ul>
<li><a class="navLinks" href="#history">Présentation</a></li>
<li><a class="navLinks" href="#skills">Compétences</a></li>
<li><a class="navLinks" href="#projects">Projets</a></li>
</ul>
</div>
</div>
</nav>
<div class="containerContent">
<h1>Salut, c'est Mathieu</h1>
<p class="subtitle">Développeur web junior en formation à La Manu</p>
</div>
<div class="containerObject">
<div class="containerObjectLeft">
<img src="./public/assets/img/airpods_1.png" alt="Laptop" class="objectTransitionLeft">
</div>
<div class="containerObjectRight">
<img src="./public/assets/img/airpods_2.png" alt="écouteurs" class="objectTransitionRight">
</div>
</div>
</header>
<!-- Contenu principal du Portfolio -->
<main>
<!-- Section présentation du Portfolio -->
<section id="history" class="reveal">
<div class="containerContentTitle reveal-2">
<h2>👋 Hey 👋</h2>
</div>
<div class="containerContentSection reveal-3">
<p>
Je m'appelle Mathieu, 24 ans et je suis actuellement en formation au sein de
<a href="https://lamanu.fr/" target="_blank">La Manu - L'école Supérieure des métiers du Numériques</a>
pour devenir <span>"Développeur Web et Web Mobile"</span>.
</p>
<p>
Passionné par les nouvelles technologies et notamment celles liées aux Blockchains,
les Progressive Web Apps, et la santé connectée. C'est donc pour cela que je souhaite poursuivre l'année prochaine la formation de
<span>"Concepteur développeur d'applications"</span> en alternance afin d'acquérir l'ensemble des
compétences techniques nécessaires ainsi que de l'expérience dans ce domaine pour être force de propositions.
</p>
<p>
Avant ce changement de carrière, j'ai été diplômé en 2018 d'un <span>"DUT Techniques de Commercialisation"</span>
pour ensuite travailler en tant que coursier à vélo pour les entreprises de la Gig Economie tels que Ubers Eats et Deliveroo.<br>
Puis en 2020, j'ai co-fondé une coopérative de coursiers à vélo au nom de <a href="https://www.beefast.fr/" target="_blank">"Beefast | Les coursiers Amiénois"</a>
proposant un service de livraison B2C et B2B pour les commerçants et restaurateurs Amiénois.
</p>
</div>
</section>
<!-- Section compétences du portfolio -->
<section id="skills" class="reveal">
<div class="containerContentTitle reveal-2">
<h2>🛠 Compétences 🛠</h2>
</div>
<div class="containerIconsSection reveal-3">
<div class="containerTitleIconsSection">
<h3>Logiciel</h3>
</div>
<div class="containerIcons reveal-4">
<div class="centerIcons">
<i class="fa-brands fa-windows iconsContainer iconsDisplay"></i>
</div>
<div class="centerIcons">
<i class="fa-brands fa-apple iconsContainer iconsDisplay"></i>
</div>
<div class="centerIcons">
<i class="fa-brands fa-git-alt iconsContainer iconsDisplay"></i>
</div>
<div class="centerIcons">
<i class="fa-brands fa-figma iconsContainer"></i>
</div>
</div>
<div class="containerTitleIconsSection reveal-3">
<h3>Langages "Front"</h3>
</div>
<div class="containerIcons reveal-4">
<div class="centerIcons">
<i class="fa-brands fa-html5 iconsContainer iconsDisplay"></i>
</div>
<div class="centerIcons">
<i class="fa-brands fa-css3-alt iconsContainer iconsDisplay"></i>
</div>
<div class="centerIcons">
<i class="fa-brands fa-bootstrap iconsContainer iconsDisplay"></i>
</div>
<div class="centerIcons">
<i class="fa-brands fa-js-square iconsContainer"></i>
</div>
</div>
<div class="containerTitleIconsSection reveal-3">
<h3>Langages "Back"</h3>
</div>
<div class="containerIconsLast reveal-4">
<div class="centerIcons">
<i class="fa-brands fa-php iconsContainer iconsDisplay"></i>
</div>
<div class="centerIcons">
<i class="fa-brands fa-symfony iconsContainer iconsDisplay"></i>
</div>
<div class="centerIcons">
<i class="fa-brands fa-wordpress iconsContainer iconsDisplay"></i>
</div>
<div class="centerIcons">
<i class="fa-solid fa-database iconsContainer"></i>
</div>
</div>
</div>
</section>
<!-- Section projets du Portfolio -->
<section id="projects" class="reveal">
<div class="containerContentTitle reveal-2">
<h2>🏗 Mes projets 🏗</h2>
</div>
<div class="containerGridSection">
<div class="gridProjectFirst reveal-3">
<a href="https://github.com/MathieuDacheux/versusGame_4monthsDev" target="_blank"><img src="./public/assets/img/shavelKnight.png" alt="Projet HTML CSS JS PHP pour travailler la programmation orientée objet"></a>
</div>
<div class="gridProjectsRest reveal-3">
<a href="https://github.com/MathieuDacheux/formVerification_4monthsDev" target="_blank"><img src="./public/assets/img/formVerification.png" alt="Projet HTML CSS JS PHP pour travailler le nettoyage et la validation des données d'un formulaire"></a>
</div>
<div class="gridProjectsRest reveal-3">
<a href="https://github.com/MathieuDacheux/calendarGenerator_3monthsDev" target="_blank"><img src="./public/assets/img/calendar.png" alt="Projet HTML CSS PHP pour travailler l'objet date et l'utilisation d'un JSON d'événements"></a>
</div>
<div class="gridProjectsRest reveal-3">
<a href="https://mathieudacheux.github.io/todoList_FrontEndMentor/" target="_blank"><img src="./public/assets/img/todoList.png" alt="Projet HTML CSS JS pour travailler l'intégration via le DOM ainsi que le JSON"></a>
</div>
<div class="gridProjectsRest reveal-3">
<a href="https://mathieudacheux.github.io/huddleLandingPage_FrontEndMentor/" target="_blank"><img src="./public/assets/img/huddleLandingPage.png" alt="Projet HTML CSS pour travailler l'intégration"></a>
</div>
<div class="gridProjectFirst reveal-3">
<a href="https://mathieudacheux.github.io/dataStorageComponent_FrontEndMentor/" target="_blank"><img src="./public/assets/img/dataStorage.png" alt="Projet intégration HTML CSS à partir d'une maquette"></a>
</div>
<div class="gridProjectsRest reveal-3">
<a href="https://mathieudacheux.github.io/shiFuMi_1.5monthsDev/" target="_blank"><img src="./public/assets/img/shiFuMi.png" alt="Projet HTML CSS JS pour travailler sur l'algorithmie et le DOM"></a>
</div>
<div class="gridProjectsRest reveal-3">
<a href="https://mathieudacheux.github.io/bourseHighTech_2weeksDev/" target="_blank"><img src="./public/assets/img/bourseHighTech.png" alt="Projet HTML CSS afin de découvrir l'intégration et la responsivité d'un site par Bootstrap sur le thème d'une bourse High-Tech"></a>
</div>
<div class="gridProjectsRest reveal-3">
<a href="https://mathieudacheux.github.io/cardProject_1weekDev/" target="_blank"><img src="./public/assets/img/coinCard.png" alt="Projet HTML CSS afin de découvrir les cards sur le thème des crypto-monnaies"></a>
</div>
</div>
</section>
</main>
<footer>
<div class="footerContainerLeft">
<p>
Si vous souhaitez que l'on travaille ensemble sur un projet ou simplement discuter,
n'hésitez pas à me contacter par l'intermédiaire du bouton.
</p>
<button><a href="mailto:mathieu.dacheux@icloud.com">Envoyez moi un e-mail</a></button>
</div>
<div class="footerContainerRight">
<div class="footerLinks">
<ul>
<li><a class="navLinks" href="#history">Présentation</a></li>
<li><a class="navLinks" href="#skills">Compétences</a></li>
<li><a class="navLinks" href="#projects">Projets</a></li>
</ul>
</div>
<div class="footerLogo">
<a href="https://github.com/MathieuDacheux" target="_blank"><i class="fa-brands fa-github footerIcons"></i></a>
<a href="https://www.linkedin.com/in/mathieudachx" target="_blank"><i class="fa-brands fa-linkedin footerIcons"></i></a>
</div>
</div>
</footer>
</div>
<script src="https://kit.fontawesome.com/7e7d0f0a78.js" crossorigin="anonymous"></script>
</body>
</html>