-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
235 lines (212 loc) · 10.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
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
<!DOCTYPE html>
<html lang="en">
<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">
<title>Ploquin Alban - Etudiant en Developpement Web</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- Banner -->
<div class="banner" id="banner">
<header>
<a href="" class="logo">ploquin alban</a>
<div class="menu">
<div class="toggle"></div>
<ul>
<li class="menuContent1"><a href="#banner">Accueil</a></li>
<li class="menuContent2"><a href="#about">À propos</a></li>
<li class="menuContent3"><a href="#competences">Compétences</a></li>
<li class="menuContent4"><a href="#projets">Projets</a></li>
<li class="menuContent5"><a href="#contact">Contact</a></li>
</ul>
</div>
</header>
<img src="assets/images/bg.jpg" alt="Fond représentant des personnes entrain de travailler">
<div class="content">
<h2>Bienvenue 👋</h2>
<p>Je suis Alban, étudiant en Développement Web et passioné par l'informatique
et l'Esport. Bienvenue sur mon CV en ligne retraçant mon parcours, mes projets,
ainsi que mes compétences.
</p>
</div>
<div class="button">
<a href="assets/pdf/PLOQUINAlban-cv.pdf" target="_blank">Voir mon CV</a>
</div>
</div>
<!-- About -->
<section class="about" id="about">
<div class="contentBx">
<h2 class="heading">À propos</h2>
<p class="text">Bonjour, je m'appelle Alban, je suis étudiant à l'Education
Gaming School à Mérignac en Nouvelle Aquitaine, je suis en deuxième année
de Bachelor Informatique orienté développement Web pour l'année scolaire 2020-2021.
Le site sur lequel vous naviguez à été entièrement coder par mes soins.
<br><br>
Je code depuis maintenant deux ans, je suis passé par la base, à savoir HTML et CSS,
et depuis un an j'appronfondis mes connaissances avec le PHP, MySQL et le JavaScript.
J'ai ainsi réalisé plusieurs petits projets et deux sites web entièrement fonctionnels
dont celui-ci.
<br><br>
Passioné de Jeux Vidéo, je m'investis depuis Novembre 2020 dans une équipe esport sur le Jeux
Vidéo Overwatch, pour lequel je suis Coach d'une équipe de six joueurs. J'ai en charge
l'organisation quotidienne de l'équipe et du développement personnel de chacun, de leur
bien être et de leur progression de jeu en équipe.
</p>
</div>
<div class="imgBx"></div>
</section>
<!-- Compétences -->
<section class="competences" id="competences">
<div class="head">
<h2 class="heading">Mes compétences</h2>
<p class="text">
Ci-dessous quelques une de mes compétences :<br><span>(passer votre souris
sur les icones pour plus d'informations)</span>
</p>
</div>
<div class="container">
<div class="competencesBx">
<div class="imgBx">
<img src="assets/images/icon1.png" alt="Icone désignant l'intégration Web">
<h2>Intégration Web</h2>
</div>
<div class="content">
<div class="details">
<h2>Intégration Web</h2>
<p>
Intégrations de vos sites ou applications Web en respectant les
normes et consignes
</p>
</div>
</div>
</div>
<div class="competencesBx">
<div class="imgBx" id="imgBx2">
<img src="assets/images/icon2.png" alt="Icone désignant le Développement
Front-End">
<h2>Développement<br>front-end</h2>
</div>
<div class="content">
<div class="details">
<h2>Développement<br>front-end</h2>
<p>
Une bonne ergonomie et une navigation optimale, des animations
smooth et fluides dans l'air du temps pour rendre vos sites ou
applications Web plus agréable et attractif
</p>
</div>
</div>
</div>
<div class="competencesBx">
<div class="imgBx">
<img src="assets/images/icon3.png" alt="Icone désignant l'intégration
Responsive">
<h2>Responsive</h2>
</div>
<div class="content">
<div class="details">
<h2>Responsive</h2>
<p>
Une adaptation à tout type de platforme, de l'écran d'Ordinateur
au téléphone portable, pour impacter le monde entier.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Technology -->
<section class="techno">
<div class="technoBx">
<div class="contentBx">
<h2 class="heading">Mes langages</h2>
<p class="text">Afin de pouvoir répondre à la mission qu'il me sera confiée,
ma formation de Développeur Web et Web mobile me permet d'utiliser principalement
ces langages de programmation : HTML5, CSS3, JavaScript et PHP. Ces programmes me
permettent aujourd'hui de créer des sites intéractifs, visuellement agréables mais
surtout adaptés à tous types de supports, grâce à la méthode Responsive.</p>
</div>
<div class="imgBx">
<img src="assets/images/tech.png" alt="Icone de langages de programmations">
</div>
</div>
</section>
<!-- Projet -->
<section class="projets" id="projets">
<h2 class="heading">Mes projets</h2>
<div class="container">
<div class="contentBx">
<div>
<h3>Tech B</h3>
<p>Projet scolaire en groupe, création d'un site vitrine pour une marque fictive
affiliée à Boulanger pour des périphériques gaming.</p>
<img src="assets/images/projetCover1.png" alt="Capture d'écrans montrant un rendu du projet">
</div>
</div>
<div class="contentBx">
<div>
<h3>CV en ligne</h3>
<p>Site Web responsive faisant office de CV interractif.</p>
<img src="assets/images/projetCover2.png" alt="Capture d'écrans montrant un rendu du projet">
</div>
</div>
</div>
</section>
<!-- Contact -->
<section class="contact" id="contact">
<h2 class="heading">Me contacter</h2>
<p class="text">Pour faciliter un échange, je vous invite à remplir ce formulaire
afin que je puisse vous recontacter si vous êtes intéressé(e) par mon profil. </p>
</section>
<section class="about">
<div class="contentBx redbg">
<div class="form">
<div class="inputBx">
<input type="text" name="nom" placeholder="Nom Prénom">
</div>
<div class="inputBx">
<input type="text" name="email" placeholder="Adresse Mail">
</div>
<div class="inputBx">
<input type="text" name="telephone" placeholder="Numéro de téléphone">
</div>
<div class="inputBx">
<textarea name="message" placeholder="Ecrivez votre message"></textarea>
</div>
<div class="inputBx">
<input type="submit" name="envoie" value="Envoyer">
</div>
</div>
</div>
<div class="imgBx2"></div>
</section>
<!-- Footer -->
<section class="footer">
<p class="text">Design & Developer par Ploquin Alban (inspiré du travail d'<a href="https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog">Online Tutorial</a>)</p>
<ul>
<p class="text">Retrouvez moi sur :</p>
<li><a href="https://twitter.com/Loaw__"><img src="assets/images/twitter.png" alt="Icone de Twitter"></a></li>
<li><a href="https://www.linkedin.com/in/ploquin-alban-188799203/"><img src="assets/images/linkedin.png" alt="Icone de Linkedin"></a></li>
</ul>
</section>
<script>
const toggle = document.querySelector(".toggle")
const menu1 = document.querySelector(".menuContent1")
const menu2 = document.querySelector(".menuContent2")
const menu3 = document.querySelector(".menuContent3")
const menu4 = document.querySelector(".menuContent4")
const menu5 = document.querySelector(".menuContent5")
const competencesBx = document.querySelector(".competencesBx")
toggle.onclick = function() {
toggle.classList.toggle('active')
menu1.classList.toggle('active')
menu2.classList.toggle('active')
menu3.classList.toggle('active')
menu4.classList.toggle('active')
menu5.classList.toggle('active')
}
</script>
</body>
</html>