-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
334 lines (326 loc) · 19 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
332
333
334
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Normalize.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;400;700&display=swap" rel="stylesheet">
<title>Portfolio - Pierre Lovergne</title>
</head>
<body>
<header>
<div class="top-bar">
<h1>Pierre Lovergne</h1>
<div class="navbar__button">
<div id="button-navbar" class="btn-close">
<div class="bars"></div>
</div>
</div>
</div>
</header>
<main>
<nav class="navbar">
<img class="img-profil" src="./img/Photo profil.jpg" alt="photo profil pierre Lovergne">
<ul class="navbar-elements">
<li class="navbar-element">
<div>
<svg class="icon-small" width="1em" height="1em" viewBox="0 0 512 487" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M503.401 216.208L460.148 176.798V46.1145C460.148 37.7995 453.407 31.0575 445.091 31.0575H340.976C332.661 31.0575 325.919 37.7985 325.919 46.1145V54.4885L273.683 6.8915C263.6 -2.2975 248.395 -2.2965 238.316 6.8905L8.59785 216.209C0.521848 223.569 -2.14715 234.909 1.79885 245.098C5.74585 255.287 15.3558 261.87 26.2828 261.87H62.9718V471.591C62.9718 479.906 69.7128 486.648 78.0288 486.648H203.942C212.257 486.648 218.999 479.907 218.999 471.591V344.255H293V471.592C293 479.907 299.741 486.65 308.057 486.65H433.965C442.28 486.65 449.022 479.908 449.021 471.592V261.871H485.718C496.644 261.871 506.255 255.287 510.202 245.099C514.147 234.909 511.479 223.569 503.401 216.208ZM433.965 231.757C425.65 231.757 418.908 238.498 418.908 246.814V456.535H323.115V329.198C323.115 320.883 316.373 314.141 308.058 314.141H203.942C195.627 314.141 188.885 320.882 188.885 329.198V456.535H93.0848V246.814C93.0848 238.499 86.3438 231.757 78.0278 231.757H36.2448L256.001 31.5175L330.837 99.7085C335.245 103.725 341.608 104.76 347.061 102.353C352.515 99.9425 356.034 94.5405 356.034 88.5785V61.1715H430.036V183.447C430.036 187.684 431.82 191.723 434.952 194.577L475.755 231.757H433.965Z"
fill="#94A1B2" />
</svg>
Home
</div>
</li>
<li class="navbar-element">
<div>
<svg class="icon-small" width="1em" height="1em" viewBox="0 0 512 512" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M252.352 246.633C286.234 246.633 315.57 234.48 339.547 210.504C363.516 186.531 375.672 157.199 375.672 123.312C375.672 89.4375 363.52 60.1016 339.543 36.1211C315.566 12.1523 286.23 0 252.352 0C218.465 0 189.133 12.1523 165.16 36.125C141.188 60.0977 129.031 89.4336 129.031 123.312C129.031 157.199 141.188 186.535 165.16 210.508C189.141 234.477 218.477 246.633 252.352 246.633V246.633ZM186.379 57.3398C204.773 38.9453 226.352 30.0039 252.352 30.0039C278.348 30.0039 299.93 38.9453 318.328 57.3398C336.723 75.7383 345.668 97.3203 345.668 123.312C345.668 149.312 336.723 170.891 318.328 189.289C299.93 207.688 278.348 216.629 252.352 216.629C226.359 216.629 204.781 207.684 186.379 189.289C167.98 170.895 159.035 149.312 159.035 123.312C159.035 97.3203 167.98 75.7383 186.379 57.3398Z"
fill="#94A1B2" />
<path
d="M468.129 393.703C467.438 383.727 466.039 372.844 463.98 361.352C461.902 349.773 459.227 338.828 456.023 328.824C452.711 318.484 448.215 308.273 442.648 298.488C436.879 288.332 430.098 279.488 422.488 272.211C414.531 264.598 404.789 258.477 393.523 254.012C382.297 249.57 369.855 247.32 356.547 247.32C351.32 247.32 346.266 249.465 336.504 255.82C330.496 259.738 323.469 264.27 315.625 269.281C308.918 273.555 299.832 277.559 288.609 281.184C277.66 284.727 266.543 286.523 255.566 286.523C244.598 286.523 233.48 284.727 222.523 281.184C211.312 277.562 202.223 273.559 195.527 269.285C187.758 264.32 180.727 259.789 174.629 255.816C164.875 249.461 159.82 247.316 154.594 247.316C141.281 247.316 128.844 249.57 117.621 254.016C106.363 258.473 96.6172 264.594 88.6523 272.215C81.043 279.496 74.2617 288.336 68.4961 298.488C62.9375 308.273 58.4375 318.48 55.125 328.828C51.9258 338.832 49.25 349.773 47.1719 361.352C45.1094 372.828 43.7148 383.715 43.0234 393.715C42.3438 403.492 42 413.668 42 423.949C42 450.676 50.4961 472.312 67.25 488.27C83.7969 504.016 105.688 512 132.316 512H378.848C405.469 512 427.359 504.016 443.91 488.27C460.668 472.324 469.164 450.68 469.164 423.945C469.16 413.629 468.813 403.453 468.129 393.703V393.703ZM423.223 466.531C412.289 476.938 397.773 481.996 378.844 481.996H132.316C113.383 481.996 98.8672 476.938 87.9375 466.535C77.2148 456.328 72.0039 442.395 72.0039 423.949C72.0039 414.355 72.3203 404.883 72.9531 395.789C73.5703 386.867 74.832 377.066 76.7031 366.652C78.5508 356.367 80.9023 346.715 83.6992 337.977C86.3828 329.598 90.043 321.301 94.582 313.309C98.9141 305.691 103.898 299.156 109.398 293.891C114.543 288.965 121.027 284.934 128.668 281.91C135.734 279.113 143.676 277.582 152.297 277.352C153.348 277.91 155.219 278.977 158.25 280.953C164.418 284.973 171.527 289.559 179.387 294.578C188.246 300.227 199.66 305.328 213.297 309.73C227.238 314.238 241.457 316.527 255.57 316.527C269.684 316.527 283.906 314.238 297.84 309.734C311.488 305.324 322.898 300.227 331.77 294.57C339.812 289.43 346.723 284.977 352.891 280.953C355.922 278.98 357.793 277.91 358.844 277.352C367.469 277.582 375.41 279.113 382.48 281.91C390.117 284.934 396.602 288.969 401.746 293.891C407.246 299.152 412.23 305.688 416.562 313.312C421.105 321.301 424.77 329.602 427.449 337.973C430.25 346.723 432.605 356.371 434.449 366.648C436.316 377.082 437.582 386.887 438.199 395.793V395.801C438.836 404.859 439.156 414.328 439.16 423.949C439.156 442.398 433.945 456.328 423.223 466.531V466.531Z"
fill="#94A1B2" />
</svg>
About
</div>
</li>
<li class="navbar-element">
<div>
<svg class="icon-small" width="1em" height="1em" viewBox="0 0 512 512" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M66 0V512H446V0H66ZM416 482H96V30H416V482Z" fill="#94A1B2" />
<path d="M373.34 272.5H138.67V302.5H373.34V272.5Z" fill="#94A1B2" />
<path d="M373.34 336.5H138.67V366.5H373.34V336.5Z" fill="#94A1B2" />
<path d="M373.34 400.5H138.67V430.5H373.34V400.5Z" fill="#94A1B2" />
<path d="M373.33 145.51H309.33V175.51H373.33V145.51Z" fill="#94A1B2" />
<path d="M373.33 209.51H309.33V239.51H373.33V209.51Z" fill="#94A1B2" />
<path d="M373.33 82.52H309.33V112.52H373.33V82.52Z" fill="#94A1B2" />
<path
d="M246.954 164.897C254.797 156.041 259.573 144.409 259.573 131.676C259.573 104.011 237.066 81.5031 209.4 81.5031C181.734 81.5031 159.227 104.011 159.227 131.676C159.227 144.408 164.003 156.041 171.846 164.897C152.076 177.397 138.909 199.437 138.909 224.507V239.507H279.891V224.507C279.891 199.437 266.724 177.397 246.954 164.897ZM209.399 111.502C220.523 111.502 229.572 120.552 229.572 131.675C229.572 142.799 220.522 151.848 209.399 151.848C198.276 151.848 189.226 142.798 189.226 131.675C189.226 120.552 198.276 111.502 209.399 111.502ZM171.787 209.507C177.761 194.585 192.37 184.016 209.399 184.016C226.429 184.016 241.038 194.584 247.01 209.507H171.787Z"
fill="#94A1B2" />
</svg>
Resume
</div>
</li>
<li class="navbar-element">
<div>
<svg class="icon-small" width="1em" height="1em" viewBox="0 0 512 512" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M497.094 91.0039C497.062 91.0039 497.031 91 497 91H361V76C361 51.1875 340.812 31 316 31H196C171.188 31 151 51.1875 151 76V91H15C6.64844 91 0 97.8438 0 106V436C0 460.812 20.1875 481 45 481H467C491.812 481 512 460.812 512 436V106.316C512 106.297 512 106.277 512 106.258C511.426 96.4063 505.367 91.0586 497.094 91.0039V91.0039ZM181 76C181 67.7305 187.73 61 196 61H316C324.27 61 331 67.7305 331 76V91H181V76ZM476.188 121L429.605 260.742C427.562 266.879 421.844 271 415.379 271H331V256C331 247.715 324.285 241 316 241H196C187.715 241 181 247.715 181 256V271H96.6211C90.1562 271 84.4375 266.879 82.3945 260.742L35.8125 121H476.188ZM301 271V301H211V271H301ZM482 436C482 444.27 475.27 451 467 451H45C36.7305 451 30 444.27 30 436V198.434L53.9336 270.23C60.0664 288.637 77.2227 301 96.6211 301H181V316C181 324.285 187.715 331 196 331H316C324.285 331 331 324.285 331 316V301H415.379C434.777 301 451.934 288.637 458.066 270.23L482 198.434V436Z"
fill="#94A1B2" />
</svg>
Portfolio
</div>
</li>
<li class="navbar-element">
<div>
<svg class="icon-small" width="1em" height="1em" viewBox="0 0 512 512" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M467 61H45C20.218 61 0 81.196 0 106V406C0 430.72 20.128 451 45 451H467C491.72 451 512 430.872 512 406V106C512 81.28 491.872 61 467 61ZM460.786 91L256.954 294.833L51.359 91H460.786ZM30 399.788V112.069L174.479 255.309L30 399.788ZM51.213 421L195.783 276.43L246.44 326.652C252.304 332.466 261.767 332.447 267.607 326.606L317 277.213L460.787 421H51.213ZM482 399.787L338.213 256L482 112.212V399.787Z"
fill="#94A1B2" />
</svg>
Contact
</div>
</li>
</ul>
<div class="socials">
<ul>
<li>
<a href="https://www.freecodecamp.org/fcca62d945f-20b1-4f60-93f5-1455bb16581a" target="_blank"
rel="noopener noreferrer">
<img class="icon-small"
src="https://cdn.glitch.com/a56d7f44-3f97-4b8e-8e48-62256ce3c8d1%2Ffcc_secondary_small.svg?v=1585843750729"
alt="logo FCC">
</a>
</li>
<li>
<a href="https://github.com/Rem0ld" target="_blank" rel="noopener noreferrer">
<img class="icon-small"
src="https://cdn.glitch.com/a56d7f44-3f97-4b8e-8e48-62256ce3c8d1%2Fgithub.svg?v=1585843748799"
width="32px" height="32px" alt="logo github" />
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/pierre-lovergne-433708133/" target="_blank" rel="noopener noreferrer">
<img class="icon-small"
src="https://cdn.glitch.com/a56d7f44-3f97-4b8e-8e48-62256ce3c8d1%2Flinkedin.svg?v=1585843746175"
width="32px" height="32px" alt="logo linkedin" />
</a>
</li>
<li>
<a href="https://glitch.com/@Rem0ld" target="_blank" rel="noopener noreferrer">
<img class="icon-small glitch"
src="https://cdn.glitch.com/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Flogo-day.svg" alt="logo glitch">
</a>
</li>
</ul>
</div>
</nav>
<!-- HOME -->
<section id="home" class="home">
<div class="intro">
<h2>I am Pierre Lovergne,</h2>
<p>I am Web Developer</p>
</div>
</section>
<!-- ABOUT -->
<section id="about" class="about hidden">
<div class="main-title-section main-title-section-about">
<h3>About me.</h3>
<img class="main-title-section-img icon-big" src="/img/icons/user.svg" alt="user icon">
</div>
<hr class="dashed" />
<div class="main-section">
<div class="sub-section">
<h4 class="sub-title uppercase">Développeur Web</h4>
<p class="sub-content-para">
Mon rôle de développeur Web est de participer à la création de votre image et/ou de créer l’application
qu’il vous faut.
J’utiliserai toute mon énergie et mon savoir faire pour rendre des sites webs qui vous ressemblent,
respectant le « responsive design » et les recommandations W3C.
Je m’assurerai aussi de me garder informé des « bonnes pratiques » et des dernières technologies pour
assurer un travail de qualité.
</p>
</div>
<div class="sub-section">
<h4 class="sub-title uppercase">Personal Information</h4>
<div class="personal">
<p><span class="underlined">Name:</span> Pierre Lovergne</p>
<p><span class="underlined">Age:</span> 29 Years</p>
<p><span class="underlined">Residence:</span> Paris, France</p>
<p><span class="underlined">Address:</span> Paris</p>
<p><span class="underlined">Email:</span> [email protected]</p>
<p><span class="underlined">Phone:</span> +33 7 66 86 14 77</p>
<button class="btn uppercase"><a href="./Cv - Pierre Lovergne.pdf" download>download
resume</a></button>
</div>
</div>
<div class="sub-section sub-section-service">
<h4 class="sub-title uppercase underlined">Services</h4>
<div class="sub-sub-section">
<div>
<img class="icon-medium" src="./img/icons/web-dev.svg" width="32px" height="32px"
alt="computer with tags inside">
<h5>Développement Web</h5>
<p class="sub-content-para">
J’utiliserai HTML5, CSS3 et Javascript(ES6) pour créer vos sites web
Il est aussi possible d’utiliser un CMS style Wordpress.
</p>
<hr class="dashed" />
</div>
<div>
<img class="icon-medium" src="./img/icons/web-app.svg" alt="icon">
<h5>Application Web</h5>
<p>
Elles n’ont jamais été aussi importante, j’utiliserai React et/ou Next.js.
Je fournirai un code propre et lisible tout en étant réutilisable et évolutif.
</p>
<hr class="dashed" />
</div>
<div>
<img class="icon-medium" src="./img/icons/responsive.svg" alt="icon">
<h5>Responsive Design</h5>
<p>
« Mobile first » est mon crédeau, je m’assurerai que vos sites web respectent les règles
d’accessibilité.
</p>
</div>
</div>
</div>
<div class="sub-section sub-section-clients">
<h4 class="sub-title uppercase underlined">Clients</h4>
<div class="logo-clients">
<img class="grayscale logo-client" src="/img/logo-sin-fondo-01.png" alt="logo terrasur abogados">
</div>
</div>
</div>
</section>
<!-- RESUME -->
<section id="resume" class="resume hidden">
<div class="main-title-section">
<h3>Resume</h3>
<img class="main-title-section-img icon-big" src="/img/icons/cv.svg" alt="resume icon">
</div>
<hr class="dashed" />
<div class="main-section">
<div class="sub-section experience">
<h4 class="sub-title uppercase underlined">Experience</h4>
<div class="small-container">
<p class="rm-margin">2020</p>
<div>
<h5 class="uppercase">Web Developer</h5>
<h6 class="uppercase">Chile</h6>
<p class="small-container--para">I developed a landing page using HTML5, CSS3(sass), and Javascript. I
also
hosted
it online using Cpanel for a lawer's studio (Terrasur Abogados).</p>
</div>
</div>
</div>
<div class="sub-section education">
<h4 class="sub-title uppercase underlined">Education</h4>
<div class="small-container">
<p class="rm-margin">2020</p>
<h5 class="uppercase">FreeCodeCamp</h5>
<h6 class="uppercase">Online course</h6>
</div>
<div class="small-container">
<p class="rm-margin">19/10/2020 - 25/06/2021</p>
<h5 class="uppercase">Titre professionnelle Développeur Web et Web Mobile</h5>
<h6 class="uppercase">Formation GRETA</h6>
</div>
</div>
<div class="sub-section skill">
<h4 class="sub-title uppercase underlined">Skills</h4>
<ul class="skill-list">
<li>HTML5</li>
<li>CSS3:
<ul class="sub-skill-list">
<li>Sass</li>
<li>Tailwind</li>
</ul>
</li>
<li>Javascript:
<ul class="sub-skill-list">
<li>React</li>
<li>Redux (notion)</li>
<li>Vue (notion)</li>
<li>Node.js</li>
</ul>
</li>
<li>PHP</li>
<li>MongoDB:
<ul class="sub-skill-list">
<li>Mongoose</li>
</ul>
</li>
<li>MySQL</li>
<li>Bash</li>
<li>Git/Github</li>
<li>NPM</li>
<li>Cpanel</li>
</ul>
</div>
</section>
<!-- PORTFOLIO -->
<section id="portfolio" class="portfolio hidden">
<div class="main-title-section">
<h3>Portfolio</h3>
<img class="main-title-section-img icon-big" src="/img/icons/suitcase.svg" alt="portfolio icon">
</div>
<hr class="dashed" />
<div class="section">
<div class="sub-section full-stack">
<h4 class="sub-title underlined uppercase">Full-Stack project</h4>
<div class="container-cards">
</div>
</div>
<div class="sub-section front-end">
<h4 class="sub-title underlined uppercase">Front-end project</h4>
<div class="container-cards">
</div>
</div>
<div class="sub-section back-end">
<h4 class="sub-title underlined uppercase">Back-end project</h4>
<div class="container-cards">
<a href="https://glitch.com/edit/#!/fccurlshortenerpierre">Url shortener</a>
</div>
</div>
</div>
</section>
<!-- CONTACT -->
<section id="contact" class="contact hidden">
<div class="main-title-section">
<h3>Contact Me</h3>
<img class="main-title-section-img icon-big" src="/img/icons/mail.svg" alt="envelope icon">
</div>
<hr class="dashed" />
<div>
<h4 class="sub-title uppercase">Feel free to contact me</h4>
<form action="https://formspree.io/xayprgpr" method="POST" class="contact-form">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="email">Email:</label>
<input type="email" name="email" id="email">
</div>
<div>
<label for="textarea">Reasons:</label>
<textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
</div>
<button type="submit" class="uppercase btn btn-submit">Send</button>
</form>
</section>
</main>
<script src="./javascript/script.js"></script>
<script src="./javascript/populate.js"></script>
</body>
</html>