-
Notifications
You must be signed in to change notification settings - Fork 0
/
en.html
249 lines (228 loc) · 11.4 KB
/
en.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
<!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>Nicolas Ettlin</title>
<link rel="stylesheet" href="resources/style/normalize.css">
<link rel="stylesheet" href="resources/style/style.css">
<link rel="alternate" hreflang="fr" href="/fr">
</head>
<body>
<nav class="main-nav">
<label for="language-select" class="sr-only">Language</label>
<select id="language-select" class="language-select">
<option value="fr" lang="fr">Français</option>
<option value="en" lang="en" selected>English</option>
</select>
</nav>
<section class="section-hero">
<div class="section-hero-image">
<img sizes="100vw" srcset="
resources/images/hero/700.jpg 700w,
resources/images/hero/1222.jpg 1222w,
resources/images/hero/1603.jpg 1603w,
resources/images/hero/1616.jpg 1616w,
resources/images/hero/2282.jpg 2282w,
resources/images/hero/2616.jpg 2616w,
resources/images/hero/2456.jpg 2456w,
resources/images/hero/2991.jpg 2991w,
resources/images/hero/2800.jpg 2800w,
resources/images/hero/2931.jpg 2931w,
resources/images/hero/3151.jpg 3151w,
resources/images/hero/3177.jpg 3177w,
resources/images/hero/3240.jpg 3240w,
resources/images/hero/3468.jpg 3468w,
resources/images/hero/3579.jpg 3579w,
resources/images/hero/3673.jpg 3673w,
resources/images/hero/3831.jpg 3831w,
resources/images/hero/3840.jpg 3840w" src="resources/images/hero/3840.jpg" alt="">
</div>
<div class="formatted-content">
<h1>Hi! My name is Nicolas Ettlin and I’m passionate about computers.</h1>
<p>
I love conceiving software.
I’ve created the public transit app
<a href="https://www.nicolapps.ch/tpgwidget/" class="icon-link">
<span><img src="resources/images/links/tpgwidget.png" alt=""> TPGwidget</span>
</a>
and participated to the development of the online board game
<a href="https://www.loups-garous-en-ligne.com" class="icon-link"><span><img
src="resources/images/links/lgel.png" alt=""> Loups-Garous</span> en ligne</a>.
</p>
<p>
During my software development apprenticeship in Geneva,
I participated to professional championships in the “Web Development”
category, achieving 1<sup>st</sup> place at SwissSkills 2018 and
2<sup>nd</sup> place at WorldSkills 2019 in Russia.
</p>
<p>
I’m currently a student at
<a href="https://www.epfl.ch/fr/" class="icon-link">EPFL</a>,
and I was previously an exchange student at
<a href="https://www.cmu.edu/" class="icon-link">Carnegie Mellon University</a>.
</p>
</div>
</section>
<section class="section-projects">
<h2 class="sr-only">My projects</h2>
<div class="projects-grid">
<a class="project-card project-card-tpgw" href="https://www.nicolapps.ch/tpgwidget/" target="_blank">
<svg class="project-card-layer" width="100" height="100" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" role="presentation">
<rect x="0" y="0" width="100" height="100" fill="url(#tpgw-gradient)" />
<linearGradient id="tpgw-gradient" x1="0" y1="0" x2="50" y2="100" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FD9426" />
<stop offset="1" stop-color="#D04321" />
</linearGradient>
</svg>
<div class="project-card-layer project-card-title">
<h3>
TPGwidget
</h3>
<div class="project-card-subtitle">
iOS/Android app
</div>
</div>
<img class="project-card-layer project-card-tpgw-phone-layer" sizes="
(max-width: 575px) 330px,
(max-width: 767px) 50vw,
(max-width: 991px) 400px,
(max-width: 1199px) 500px,
(max-width: 1399px) 560px,
560px" srcset="
resources/images/card-tpgw/330.png 330w,
resources/images/card-tpgw/691.png 691w,
resources/images/card-tpgw/982.png 982w,
resources/images/card-tpgw/1215.png 1215w,
resources/images/card-tpgw/1437.png 1437w,
resources/images/card-tpgw/1630.png 1630w" src="resources/images/card-tpgw/1630.png" alt="">
</a>
<a class="project-card" href="https://www.loups-garous-en-ligne.com" target="_blank">
<img class="project-card-layer" sizes="
(max-width: 575px) 320px,
(max-width: 767px) 50vw,
(max-width: 991px) 350px,
(max-width: 1199px) 451px,
(max-width: 1399px) 516px,
560px" srcset="
resources/images/card-lgel/330.jpg 330w,
resources/images/card-lgel/542.jpg 542w,
resources/images/card-lgel/688.jpg 688w,
resources/images/card-lgel/875.jpg 875w,
resources/images/card-lgel/973.jpg 973w,
resources/images/card-lgel/997.jpg 997w" src="resources/images/card-lgel/997.jpg" alt="">
<div class="project-card-layer project-card-title">
<h3>
Loups-Garous en ligne
</h3>
<div class="project-card-subtitle">
Online game development
</div>
</div>
</a>
<a class="project-card project-card-gsc" href="https://2020.genevaskills.ch" target="_blank">
<img class="project-card-layer" sizes="
(max-width: 575px) 320px,
(max-width: 767px) 50vw,
(max-width: 991px) 350px,
(max-width: 1199px) 451px,
(max-width: 1399px) 516px,
560px" srcset="
resources/images/card-gsc/200.jpg 200w,
resources/images/card-gsc/545.jpg 545w,
resources/images/card-gsc/810.jpg 810w,
resources/images/card-gsc/1023.jpg 1023w,
resources/images/card-gsc/1200.jpg 1200w" src="resources/images/card-gsc/1200.png" alt="">
<div class="project-card-layer project-card-shadow-layer"></div>
<svg class="project-card-layer" width="1200" height="1200" viewBox="0 0 1200 1200"
xmlns="http://www.w3.org/2000/svg" role="presentation">
<path d="M1200 1200V831.638L1002.6 1019.27L619.403 1200H1200Z" fill="#FECA55" />
<path d="M0 0V851.703L171.524 223.572L849.338 0H0Z" fill="#FEE063" />
</svg>
<div class="project-card-layer project-card-title">
<h3>
GenevaSkills
</h3>
<div class="project-card-subtitle">
Website creation
</div>
</div>
</a>
<a class="project-card" href="https://sgea.ch" target="_blank">
<img class="project-card-layer" sizes="
(max-width: 575px) 320px,
(max-width: 767px) 50vw,
(max-width: 991px) 350px,
(max-width: 1199px) 451px,
(max-width: 1399px) 516px,
560px" srcset="
resources/images/card-sgea/330.jpg 330w,
resources/images/card-sgea/544.jpg 544w,
resources/images/card-sgea/773.jpg 773w,
resources/images/card-sgea/859.jpg 859w,
resources/images/card-sgea/999.jpg 999w,
resources/images/card-sgea/1000.jpg 1000w" src="resources/images/card-sgea/1000.jpg" alt="">
<div class="project-card-layer project-card-shadow-layer"></div>
<div class="project-card-layer project-card-title">
<h3>
Société Genevoise d’Études Allemandes
</h3>
<div class="project-card-subtitle">
Website creation
</div>
</div>
</a>
<a class="project-card" href="https://www.pique-assiette.ch" target="_blank">
<img class="project-card-layer" sizes="
(max-width: 575px) 320px,
(max-width: 767px) 50vw,
(max-width: 991px) 350px,
(max-width: 1199px) 451px,
(max-width: 1399px) 516px,
560px" srcset="
resources/images/card-pa/330.jpg 330w,
resources/images/card-pa/542.jpg 542w,
resources/images/card-pa/713.jpg 713w,
resources/images/card-pa/869.jpg 869w,
resources/images/card-pa/983.jpg 983w,
resources/images/card-pa/992.jpg 992w" src="resources/images/card-pa/992.jpg" alt="">
<div class="project-card-layer project-card-shadow-layer"></div>
<div class="project-card-layer project-card-title">
<h3>
Pique-assiette
</h3>
<div class="project-card-subtitle">
Website creation
</div>
</div>
</a>
<a class="project-card project-card-ges" href="https://www.ge-soif.ch" target="_blank">
<img class="project-card-layer" sizes="
(max-width: 575px) 320px,
(max-width: 767px) 50vw,
(max-width: 991px) 350px,
(max-width: 1199px) 451px,
(max-width: 1399px) 516px,
560px" srcset="
resources/images/card-ges/330.png 330w,
resources/images/card-ges/572.png 572w,
resources/images/card-ges/762.png 762w,
resources/images/card-ges/912.png 912w,
resources/images/card-ges/1000.png 1000w" src="resources/images/card-ges/1000.png" alt="">
<div class="project-card-layer project-card-title">
<h3>
GE-Soif
</h3>
<div class="project-card-subtitle">
Visual overhaul and development
</div>
</div>
</a>
</div>
</section>
<script src="resources/scripts/vanilla-tilt.min.js"></script>
<script src="resources/scripts/index.js"></script>
</body>
</html>