forked from 1BlauNitrox/portfolio
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
408 lines (398 loc) · 50.2 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
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Portfolio</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="slider.css">
</head>
<body>
<div class="container">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" id="wave" style="transform:rotate(180deg); transition: 0.3s" viewBox="0 0 1440 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(103, 103, 255, 1)" offset="0%"/><stop stop-color="rgba(179.335, 179.335, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,20L24,26.7C48,33,96,47,144,51.7C192,57,240,53,288,51.7C336,50,384,50,432,53.3C480,57,528,63,576,60C624,57,672,43,720,31.7C768,20,816,10,864,18.3C912,27,960,53,1008,58.3C1056,63,1104,47,1152,41.7C1200,37,1248,43,1296,38.3C1344,33,1392,17,1440,8.3C1488,0,1536,0,1584,8.3C1632,17,1680,33,1728,36.7C1776,40,1824,30,1872,23.3C1920,17,1968,13,2016,10C2064,7,2112,3,2160,13.3C2208,23,2256,47,2304,56.7C2352,67,2400,63,2448,58.3C2496,53,2544,47,2592,51.7C2640,57,2688,73,2736,78.3C2784,83,2832,77,2880,75C2928,73,2976,77,3024,76.7C3072,77,3120,73,3168,60C3216,47,3264,23,3312,11.7C3360,0,3408,0,3432,0L3456,0L3456,100L3432,100C3408,100,3360,100,3312,100C3264,100,3216,100,3168,100C3120,100,3072,100,3024,100C2976,100,2928,100,2880,100C2832,100,2784,100,2736,100C2688,100,2640,100,2592,100C2544,100,2496,100,2448,100C2400,100,2352,100,2304,100C2256,100,2208,100,2160,100C2112,100,2064,100,2016,100C1968,100,1920,100,1872,100C1824,100,1776,100,1728,100C1680,100,1632,100,1584,100C1536,100,1488,100,1440,100C1392,100,1344,100,1296,100C1248,100,1200,100,1152,100C1104,100,1056,100,1008,100C960,100,912,100,864,100C816,100,768,100,720,100C672,100,624,100,576,100C528,100,480,100,432,100C384,100,336,100,288,100C240,100,192,100,144,100C96,100,48,100,24,100L0,100Z"/><defs><linearGradient id="sw-gradient-1" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(103, 103, 255, 1)" offset="0%"/><stop stop-color="rgba(103, 103, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 50px); opacity:0.9" fill="url(#sw-gradient-1)" d="M0,30L24,26.7C48,23,96,17,144,26.7C192,37,240,63,288,66.7C336,70,384,50,432,38.3C480,27,528,23,576,30C624,37,672,53,720,55C768,57,816,43,864,46.7C912,50,960,70,1008,73.3C1056,77,1104,63,1152,56.7C1200,50,1248,50,1296,56.7C1344,63,1392,77,1440,68.3C1488,60,1536,30,1584,28.3C1632,27,1680,53,1728,60C1776,67,1824,53,1872,45C1920,37,1968,33,2016,36.7C2064,40,2112,50,2160,55C2208,60,2256,60,2304,58.3C2352,57,2400,53,2448,53.3C2496,53,2544,57,2592,63.3C2640,70,2688,80,2736,70C2784,60,2832,30,2880,15C2928,0,2976,0,3024,10C3072,20,3120,40,3168,51.7C3216,63,3264,67,3312,60C3360,53,3408,37,3432,28.3L3456,20L3456,100L3432,100C3408,100,3360,100,3312,100C3264,100,3216,100,3168,100C3120,100,3072,100,3024,100C2976,100,2928,100,2880,100C2832,100,2784,100,2736,100C2688,100,2640,100,2592,100C2544,100,2496,100,2448,100C2400,100,2352,100,2304,100C2256,100,2208,100,2160,100C2112,100,2064,100,2016,100C1968,100,1920,100,1872,100C1824,100,1776,100,1728,100C1680,100,1632,100,1584,100C1536,100,1488,100,1440,100C1392,100,1344,100,1296,100C1248,100,1200,100,1152,100C1104,100,1056,100,1008,100C960,100,912,100,864,100C816,100,768,100,720,100C672,100,624,100,576,100C528,100,480,100,432,100C384,100,336,100,288,100C240,100,192,100,144,100C96,100,48,100,24,100L0,100Z"/></svg>
<div class="landing-page">
<div class="navigation"><div class="nav-about"><a href="#about-me">About me</a></div><div class="nav-skills"><a href="#skills">Skills</a></div><div class="nav-work"><a href="#work">Work</a></div><div class="nav-contact"><a href="#contact">Contact</a></div></div>
<div class="landing-page-content">
<div class="landing-page-content-text-container">
<div class="landing-page-content-text"><h2 id="me">Hey there! I'm Julius, </h2><h5>im building full-stack websites since 2019 focused on creative and responsive frontend designs. Let's build something amazing together!
<svg style="width: 35px; top: 10px; position: relative;" version="1.1" id="rocket" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<path style="fill:#FF5249;" d="M501.752,10.001c0,0-1.93,53.83-24.3,117.12l-92.82-92.82
C447.922,11.931,501.752,10.001,501.752,10.001z"/>
<path style="fill:#FFFFFF;" d="M384.632,34.301l92.82,92.82c-14.54,41.18-37.75,86.36-74.69,123.3
c-34.041,34.041-74.993,61.29-117.81,80.18l-103.8-103.8c12.64-28.65,30.28-59.22,53.59-88.17c8.16-10.13,17.01-20.06,26.59-29.64
C298.272,72.051,343.452,48.841,384.632,34.301z"/>
<path style="fill:#7BD8E8;" d="M388.612,123.141c15.62,15.62,15.62,40.95,0,56.57s-40.94,15.62-56.57,0
c-15.62-15.63-15.62-40.95,0-56.57S372.992,107.521,388.612,123.141z"/>
<g>
<path style="fill:#FF5249;" d="M374.472,278.701c51.54,77.31-44.94,127.28-98.99,127.28c28.28-28.28,20.02-64.83,20.02-64.83
l-10.55-10.55c28.65-12.64,59.22-30.28,88.17-53.59L374.472,278.701z"/>
<path style="fill:#FF5249;" d="M169.532,300.041l-1.62-1.62c-4.78-4.79-7.13-11.73-5.45-18.29c4.17-16.24,10.33-34.36,18.69-53.33
l103.8,103.8c-18.97,8.36-37.09,14.52-53.33,18.69c-6.56,1.68-13.5-0.67-18.29-5.45l-1.62-1.62L169.532,300.041z"/>
<path style="fill:#FF5249;" d="M233.052,137.281l1.69,1.35c-23.31,28.95-40.95,59.52-53.59,88.17l-10.55-10.55
c0,0-36.55-8.26-64.83,20.02C105.772,182.221,155.742,85.741,233.052,137.281z"/>
</g>
<path style="fill:#FFDD78;" d="M169.532,300.041l42.18,42.18c-3.03,11.99-10.22,24.61-21.09,35.48
c-23.43,23.43-84.85,28.28-84.85,28.28s4.85-61.42,28.28-84.85C144.922,310.261,157.542,303.071,169.532,300.041z"/>
<path d="M268.662,257.491c3.9-3.91,3.9-10.24,0-14.14c-3.91-3.91-10.24-3.91-14.15,0c-3.9,3.9-3.9,10.23,0,14.14
C258.422,261.391,264.752,261.391,268.662,257.491z"/>
<path d="M395.933,186.782c19.538-19.538,19.542-51.171,0-70.712c-19.54-19.539-51.172-19.54-70.713,0
c-19.489,19.489-19.49,51.209,0.003,70.714C344.719,206.268,376.439,206.276,395.933,186.782z M339.363,130.212
c11.723-11.723,30.703-11.725,42.428,0c11.723,11.722,11.725,30.703,0,42.427c-11.693,11.694-30.727,11.694-42.426,0.002
C327.67,160.939,327.669,141.905,339.363,130.212z"/>
<path d="M102.194,245.509c1.237,0.513,2.537,0.762,3.825,0.762c2.603,0,5.16-1.017,7.073-2.929
c20.083-20.083,44.854-18.827,52.946-17.763l3.502,3.502c-6.892,16.4-12.444,32.708-16.516,48.569
c-1.47,5.74-0.974,11.814,1.211,17.37c-9.628,4.437-18.917,10.952-27.005,19.04c-25.741,25.742-30.968,88.476-31.178,91.134
c-0.23,2.917,0.828,5.789,2.897,7.858c1.883,1.882,4.43,2.929,7.07,2.929c0.262,0,0.525-0.01,0.788-0.031
c2.658-0.209,65.394-5.436,91.135-31.177c8.085-8.085,14.599-17.373,19.036-26.999c5.882,2.313,11.936,2.598,17.38,1.203
c15.854-4.071,32.16-9.621,48.562-16.514l3.502,3.502c1.063,8.093,2.319,32.864-17.763,52.945c-2.859,2.86-3.715,7.161-2.167,10.897
c1.547,3.737,5.193,6.173,9.238,6.173c39.58,0,94.915-23.571,115.295-61.652c8.851-16.537,14.877-42.699-4.341-75.348
c8.147-6.886,15.994-14.086,23.396-21.488c33.02-33.02,58.942-75.763,77.048-127.039c22.62-63.998,24.783-117.834,24.864-120.094
c0.1-2.775-0.959-5.466-2.922-7.43c-1.964-1.963-4.644-3.027-7.43-2.922c-2.261,0.081-56.096,2.245-120.091,24.864
c-51.28,18.106-94.023,44.029-127.042,77.049c-7.399,7.399-14.599,15.245-21.488,23.396c-32.648-19.218-58.81-13.192-75.349-4.341
c-38.081,20.38-61.652,75.716-61.652,115.296C96.021,240.315,98.458,243.962,102.194,245.509z M183.8,370.63
c-13.75,13.75-46.005,21.002-66.392,23.963c2.962-20.388,10.215-52.642,23.964-66.391c7.7-7.7,16.628-13.538,25.602-16.826
l33.652,33.652C197.338,354.002,191.501,362.93,183.8,370.63z M229.39,339.603c-2.894,0.741-6.246-0.347-8.738-2.835
c-48.541-48.54,13.77,13.771-45.412-45.412c-2.494-2.499-3.582-5.85-2.843-8.739c3.203-12.474,7.392-25.272,12.486-38.193
l82.695,82.695C254.655,332.214,241.859,336.402,229.39,339.603z M373.394,344.891c-13.102,24.479-46.09,42.523-76.152,48.734
c9.585-18.037,11.698-40.998,8.196-54.921c-0.813-3.234-2.923-4.86-3.041-5.051c24.233-11.737,47.182-25.818,68.486-42.015
C381.29,310.652,382.147,328.535,373.394,344.891z M473.311,108.587l-69.896-69.896c38.081-11.828,71.21-16.257,87.746-17.849
C489.568,37.381,485.138,70.51,473.311,108.587z M268.653,116.062c29.625-29.626,67.859-53.204,113.671-70.176l83.792,83.792
c-16.97,45.811-40.548,84.045-70.176,113.672c-9.011,9.01-18.714,17.715-28.84,25.872c-24.342,19.6-51.134,36.202-79.718,49.418
l-94.02-94.018c13.216-28.586,29.818-55.378,49.416-79.717C250.942,134.772,259.646,125.068,268.653,116.062z M167.111,138.608
c16.359-8.754,34.24-7.896,53.252,2.511c-16.197,21.302-30.278,44.252-42.015,68.487c-0.149-0.092-1.949-2.355-5.293-3.109
c-1.375-0.311-27.834-6.002-54.679,8.265C124.588,184.699,142.631,151.71,167.111,138.608z"/>
<path d="M212.093,455.481l28.28-28.29c3.904-3.906,3.903-10.238-0.002-14.142c-3.907-3.905-10.239-3.903-14.143,0.002l-28.28,28.29
c-3.904,3.906-3.903,10.238,0.002,14.142C201.857,459.387,208.189,459.387,212.093,455.481z"/>
<path d="M70.661,314.053l28.29-28.28c3.906-3.904,3.907-10.236,0.003-14.142s-10.235-3.906-14.142-0.002l-28.29,28.28
c-3.906,3.904-3.907,10.236-0.003,14.142C60.422,317.955,66.753,317.959,70.661,314.053z"/>
<path d="M155.521,427.199l-67.74,67.73c-3.906,3.905-3.906,10.237-0.001,14.142c3.903,3.905,10.236,3.907,14.142,0.001l67.74-67.73
c3.906-3.905,3.906-10.237,0.001-14.142C165.76,423.295,159.427,423.295,155.521,427.199z"/>
<path d="M75.521,427.199l-67.74,67.73c-3.906,3.905-3.906,10.237-0.001,14.142c3.903,3.905,10.236,3.907,14.142,0.001l67.74-67.73
c3.906-3.905,3.906-10.237,0.001-14.142C85.759,423.295,79.426,423.295,75.521,427.199z"/>
<path d="M17.073,424.221l67.73-67.74c3.905-3.906,3.905-10.237-0.001-14.143c-3.904-3.904-10.237-3.904-14.142,0.001l-67.73,67.74
c-3.905,3.906-3.905,10.237,0.001,14.143C6.836,428.127,13.168,428.127,17.073,424.221z"/>
<path d="M296.943,229.202l14.14-14.14c3.905-3.905,3.905-10.237,0-14.143c-3.906-3.905-10.236-3.905-14.143,0l-14.14,14.14
c-3.905,3.905-3.905,10.237,0,14.143C286.706,233.107,293.037,233.107,296.943,229.202z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g></svg>
</h5></div>
<div class="landing-page-content-buttons">
<a href="#about-me" class="btn btn-filled">Read more</a>
<a href="#contact" class="btn btn-outline">Contact me</a>
</div>
</div>
<div class="landing-page-content-image-container">
<div class="landing-page-content-image">
<img src="images/20240310_150926.jpg" alt="">
<div class="image-shadow"></div>
</div>
</div>
</div>
</div>
<svg id="about-me" class="section-transition" xmlns:xlink="http://www.w3.org/1999/xlink" id="wave" style="transform:rotate(0deg); transition: 0.3s" viewBox="0 0 1440 170" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(103, 103, 255, 1)" offset="0%"/><stop stop-color="rgba(179.335, 179.335, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,0L24,19.8C48,40,96,79,144,99.2C192,119,240,119,288,110.5C336,102,384,85,432,76.5C480,68,528,68,576,65.2C624,62,672,57,720,56.7C768,57,816,62,864,79.3C912,96,960,125,1008,136C1056,147,1104,142,1152,121.8C1200,102,1248,68,1296,48.2C1344,28,1392,23,1440,25.5C1488,28,1536,40,1584,59.5C1632,79,1680,108,1728,116.2C1776,125,1824,113,1872,116.2C1920,119,1968,136,2016,130.3C2064,125,2112,96,2160,87.8C2208,79,2256,91,2304,99.2C2352,108,2400,113,2448,96.3C2496,79,2544,40,2592,42.5C2640,45,2688,91,2736,104.8C2784,119,2832,102,2880,96.3C2928,91,2976,96,3024,99.2C3072,102,3120,102,3168,104.8C3216,108,3264,113,3312,107.7C3360,102,3408,85,3432,76.5L3456,68L3456,170L3432,170C3408,170,3360,170,3312,170C3264,170,3216,170,3168,170C3120,170,3072,170,3024,170C2976,170,2928,170,2880,170C2832,170,2784,170,2736,170C2688,170,2640,170,2592,170C2544,170,2496,170,2448,170C2400,170,2352,170,2304,170C2256,170,2208,170,2160,170C2112,170,2064,170,2016,170C1968,170,1920,170,1872,170C1824,170,1776,170,1728,170C1680,170,1632,170,1584,170C1536,170,1488,170,1440,170C1392,170,1344,170,1296,170C1248,170,1200,170,1152,170C1104,170,1056,170,1008,170C960,170,912,170,864,170C816,170,768,170,720,170C672,170,624,170,576,170C528,170,480,170,432,170C384,170,336,170,288,170C240,170,192,170,144,170C96,170,48,170,24,170L0,170Z"/><defs><linearGradient id="sw-gradient-1" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(103, 103, 255, 1)" offset="0%"/><stop stop-color="rgba(103, 103, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 50px); opacity:0.9" fill="url(#sw-gradient-1)" d="M0,51L24,59.5C48,68,96,85,144,90.7C192,96,240,91,288,79.3C336,68,384,51,432,56.7C480,62,528,91,576,96.3C624,102,672,85,720,82.2C768,79,816,91,864,79.3C912,68,960,34,1008,36.8C1056,40,1104,79,1152,79.3C1200,79,1248,40,1296,39.7C1344,40,1392,79,1440,99.2C1488,119,1536,119,1584,113.3C1632,108,1680,96,1728,76.5C1776,57,1824,28,1872,34C1920,40,1968,79,2016,90.7C2064,102,2112,85,2160,73.7C2208,62,2256,57,2304,68C2352,79,2400,108,2448,110.5C2496,113,2544,91,2592,82.2C2640,74,2688,79,2736,85C2784,91,2832,96,2880,87.8C2928,79,2976,57,3024,62.3C3072,68,3120,102,3168,121.8C3216,142,3264,147,3312,147.3C3360,147,3408,142,3432,138.8L3456,136L3456,170L3432,170C3408,170,3360,170,3312,170C3264,170,3216,170,3168,170C3120,170,3072,170,3024,170C2976,170,2928,170,2880,170C2832,170,2784,170,2736,170C2688,170,2640,170,2592,170C2544,170,2496,170,2448,170C2400,170,2352,170,2304,170C2256,170,2208,170,2160,170C2112,170,2064,170,2016,170C1968,170,1920,170,1872,170C1824,170,1776,170,1728,170C1680,170,1632,170,1584,170C1536,170,1488,170,1440,170C1392,170,1344,170,1296,170C1248,170,1200,170,1152,170C1104,170,1056,170,1008,170C960,170,912,170,864,170C816,170,768,170,720,170C672,170,624,170,576,170C528,170,480,170,432,170C384,170,336,170,288,170C240,170,192,170,144,170C96,170,48,170,24,170L0,170Z"/></svg>
<div class="about-me section">
<div class="section-heading"><h3>About me</h3></div>
<div class="about-me-container">
<div class="about-me-text-container">
<h3 class="reveal">The beginning</h3>
<p class="reveal">I began my journey in programming in 2018. My initial foray was into Java, motivated by the desire to created our own Minecraft server together with friends. Throughout the initial years, I continuously honed my skills in Java and delved into utilizing technologies such as Git and Maven. As the network development progressed, opportunities arose in web development, including requests for our own website and forum. Eager to broaden my expertise, I delved into both frontend and backend languages. Subsequently, I embarked on a series of projects, progressively expanding my knowledge base.</p>
<h3 class="reveal">Nowadays</h3>
<p class="reveal">In addition to internships within the IT sector, including internships at PwC, ThyssenKrupp Steel, and the New Zealand-based company WekaOnline, I have also contributed to various smaller projects and startups. My most recent engagement is with the Muenster-based startup Scripzy, where I worked as a Frontend Developer, and continue to provide support on select projects. Throughout these experiences, I have honed my specialization in frontend development, significantly expanding my proficiency in JavaScript and CSS. I have particularly focused on enhancing skills related to responsiveness and animations within frontend development.</p>
<h3 class="reveal">Me</h3>
<p class="reveal">I'm a person full of energy and enthusiasm, especially when it comes to programming and pursuing my passions. Tennis has been my go-to sport for over ten years, but I'm also a big fan of trying out different activities.<br>I also like to travel a lot. One of my favorite experiences was interning in New Zealand. It wasn't just about work; it was about soaking up every bit of the culture and scenery, and it left me hungry for more adventures.<br>When it comes to working with others, I'm all about collaboration. I'm friendly, always ready to lend a hand, and someone you can rely on. I enjoy working in teams where we can bounce ideas off each other and create something amazing together.</p>
</div>
<div class="about-me-image-container">
<img id="about-me-gif" src="gif/about-me_entrance.gif">
</div>
</div>
</div>
<svg class="section-transition-top" xmlns:xlink="http://www.w3.org/1999/xlink" id="wave" style="transform:rotate(180deg); transition: 0.3s" viewBox="0 0 1440 170" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(103, 103, 255, 1)" offset="0%"/><stop stop-color="rgba(179.335, 179.335, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,102L24,93.5C48,85,96,68,144,62.3C192,57,240,62,288,70.8C336,79,384,91,432,85C480,79,528,57,576,53.8C624,51,672,68,720,68C768,68,816,51,864,48.2C912,45,960,57,1008,53.8C1056,51,1104,34,1152,39.7C1200,45,1248,74,1296,79.3C1344,85,1392,68,1440,73.7C1488,79,1536,108,1584,110.5C1632,113,1680,91,1728,85C1776,79,1824,91,1872,87.8C1920,85,1968,68,2016,73.7C2064,79,2112,108,2160,99.2C2208,91,2256,45,2304,39.7C2352,34,2400,68,2448,79.3C2496,91,2544,79,2592,70.8C2640,62,2688,57,2736,45.3C2784,34,2832,17,2880,17C2928,17,2976,34,3024,51C3072,68,3120,85,3168,90.7C3216,96,3264,91,3312,73.7C3360,57,3408,28,3432,14.2L3456,0L3456,170L3432,170C3408,170,3360,170,3312,170C3264,170,3216,170,3168,170C3120,170,3072,170,3024,170C2976,170,2928,170,2880,170C2832,170,2784,170,2736,170C2688,170,2640,170,2592,170C2544,170,2496,170,2448,170C2400,170,2352,170,2304,170C2256,170,2208,170,2160,170C2112,170,2064,170,2016,170C1968,170,1920,170,1872,170C1824,170,1776,170,1728,170C1680,170,1632,170,1584,170C1536,170,1488,170,1440,170C1392,170,1344,170,1296,170C1248,170,1200,170,1152,170C1104,170,1056,170,1008,170C960,170,912,170,864,170C816,170,768,170,720,170C672,170,624,170,576,170C528,170,480,170,432,170C384,170,336,170,288,170C240,170,192,170,144,170C96,170,48,170,24,170L0,170Z"/><defs><linearGradient id="sw-gradient-1" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(103, 103, 255, 1)" offset="0%"/><stop stop-color="rgba(103, 103, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 50px); opacity:0.9" fill="url(#sw-gradient-1)" d="M0,51L24,53.8C48,57,96,62,144,70.8C192,79,240,91,288,85C336,79,384,57,432,56.7C480,57,528,79,576,79.3C624,79,672,57,720,39.7C768,23,816,11,864,22.7C912,34,960,68,1008,79.3C1056,91,1104,79,1152,79.3C1200,79,1248,91,1296,93.5C1344,96,1392,91,1440,93.5C1488,96,1536,108,1584,104.8C1632,102,1680,85,1728,65.2C1776,45,1824,23,1872,11.3C1920,0,1968,0,2016,2.8C2064,6,2112,11,2160,17C2208,23,2256,28,2304,51C2352,74,2400,113,2448,116.2C2496,119,2544,85,2592,68C2640,51,2688,51,2736,53.8C2784,57,2832,62,2880,70.8C2928,79,2976,91,3024,90.7C3072,91,3120,79,3168,65.2C3216,51,3264,34,3312,36.8C3360,40,3408,62,3432,73.7L3456,85L3456,170L3432,170C3408,170,3360,170,3312,170C3264,170,3216,170,3168,170C3120,170,3072,170,3024,170C2976,170,2928,170,2880,170C2832,170,2784,170,2736,170C2688,170,2640,170,2592,170C2544,170,2496,170,2448,170C2400,170,2352,170,2304,170C2256,170,2208,170,2160,170C2112,170,2064,170,2016,170C1968,170,1920,170,1872,170C1824,170,1776,170,1728,170C1680,170,1632,170,1584,170C1536,170,1488,170,1440,170C1392,170,1344,170,1296,170C1248,170,1200,170,1152,170C1104,170,1056,170,1008,170C960,170,912,170,864,170C816,170,768,170,720,170C672,170,624,170,576,170C528,170,480,170,432,170C384,170,336,170,288,170C240,170,192,170,144,170C96,170,48,170,24,170L0,170Z"/></svg>
<div class="skills section" id="skills">
<div class="section-heading section-heading-blue"><h3>Skills</h3></div>
<div class="skills-container">
<div class="skill reveal">
<div class="skill-image"><img src="images/html.png" alt=""></div>
<div class="skill-heading">HTML 5</div>
<div class="skill-description">Embarking on my web development journey in 2018, HTML became my foundational language. Crafting numerous projects honed my skills, from structuring content to mastering the latest features. HTML remains the cornerstone of my expertise. <span class="skill-level">Level: Expert</span></div>
</div>
<div class="skill reveal">
<div class="skill-image"><img src="images/css-3.png" alt=""></div>
<div class="skill-heading">CSS 3</div>
<div class="skill-description">In tandem with HTML, I ventured into the world of CSS to infuse my projects with creativity and style. With each design challenge, I explored the vast capabilities of CSS, transforming concepts into visually captivating experiences.<span class="skill-level">Level: Expert</span></div>
</div>
<div class="skill reveal">
<div class="skill-image"><img src="images/js.png" alt=""></div>
<div class="skill-heading">JavaScript</div>
<div class="skill-description">JavaScript, the dynamic heart of web development, opened doors to interactivity and innovation. From enhancing user experiences to building complex applications, JavaScript continues to fuel my passion for crafting dynamic and responsive web solutions.<span class="skill-level">Level: Intermediate</span></div>
</div>
<div class="skill reveal">
<div class="skill-image"><img src="images/php.png" alt=""></div>
<div class="skill-heading">PHP</div>
<div class="skill-description">Fueling the backend of my projects, PHP empowered me to create robust and scalable web applications. Harnessing its power, I ventured into server-side scripting, seamlessly integrating functionality and efficiency into my projects.<span class="skill-level">Level: Intermediate</span></div>
</div>
<div class="skill reveal">
<div class="skill-image"><img src="images/sql.png" alt=""></div>
<div class="skill-heading">SQL</div>
<div class="skill-description">Delving into database management, SQL became my tool of choice for storing, retrieving, and manipulating data. From crafting complex queries to optimizing database performance, SQL has been instrumental in shaping the backend of my projects.<span class="skill-level">Level: Intermediate</span></div>
</div>
<div class="skill reveal">
<div class="skill-image"><img src="images/java.png" alt=""></div>
<div class="skill-heading">JAVA</div>
<div class="skill-description">My programming journey began with Java in 2018, sparked by the ambition to create a Minecraft server with friends. Since then, I've journeyed through the depths of Java, mastering its intricacies to develop a wide array of applications and solutions.<span class="skill-level">Level: Expert</span></div>
</div>
<div class="skill reveal">
<div class="skill-image"><img src="images/gitlab.png" alt=""></div>
<div class="skill-heading">Git</div>
<div class="skill-description">In the realm of version control, Git emerged as my trusted companion, facilitating collaboration and streamlining development workflows. From managing code repositories to implementing seamless deployment strategies, Git has been integral to my success.<span class="skill-level">Level: Basic</span></div>
</div>
</div>
</div>
<svg id="work" class="section-transition" xmlns:xlink="http://www.w3.org/1999/xlink" id="wave" style="transform:rotate(0deg); transition: 0.3s" viewBox="0 0 1440 170" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(103, 103, 255, 1)" offset="0%"/><stop stop-color="rgba(179.335, 179.335, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,119L24,121.8C48,125,96,130,144,121.8C192,113,240,91,288,73.7C336,57,384,45,432,59.5C480,74,528,113,576,119C624,125,672,96,720,90.7C768,85,816,102,864,96.3C912,91,960,62,1008,59.5C1056,57,1104,79,1152,96.3C1200,113,1248,125,1296,107.7C1344,91,1392,45,1440,45.3C1488,45,1536,91,1584,116.2C1632,142,1680,147,1728,138.8C1776,130,1824,108,1872,102C1920,96,1968,108,2016,102C2064,96,2112,74,2160,59.5C2208,45,2256,40,2304,36.8C2352,34,2400,34,2448,51C2496,68,2544,102,2592,96.3C2640,91,2688,45,2736,25.5C2784,6,2832,11,2880,14.2C2928,17,2976,17,3024,36.8C3072,57,3120,96,3168,113.3C3216,130,3264,125,3312,127.5C3360,130,3408,142,3432,147.3L3456,153L3456,170L3432,170C3408,170,3360,170,3312,170C3264,170,3216,170,3168,170C3120,170,3072,170,3024,170C2976,170,2928,170,2880,170C2832,170,2784,170,2736,170C2688,170,2640,170,2592,170C2544,170,2496,170,2448,170C2400,170,2352,170,2304,170C2256,170,2208,170,2160,170C2112,170,2064,170,2016,170C1968,170,1920,170,1872,170C1824,170,1776,170,1728,170C1680,170,1632,170,1584,170C1536,170,1488,170,1440,170C1392,170,1344,170,1296,170C1248,170,1200,170,1152,170C1104,170,1056,170,1008,170C960,170,912,170,864,170C816,170,768,170,720,170C672,170,624,170,576,170C528,170,480,170,432,170C384,170,336,170,288,170C240,170,192,170,144,170C96,170,48,170,24,170L0,170Z"/><defs><linearGradient id="sw-gradient-1" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(103, 103, 255, 1)" offset="0%"/><stop stop-color="rgba(103, 103, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 50px); opacity:0.9" fill="url(#sw-gradient-1)" d="M0,68L24,59.5C48,51,96,34,144,36.8C192,40,240,62,288,85C336,108,384,130,432,141.7C480,153,528,153,576,138.8C624,125,672,96,720,70.8C768,45,816,23,864,17C912,11,960,23,1008,39.7C1056,57,1104,79,1152,79.3C1200,79,1248,57,1296,48.2C1344,40,1392,45,1440,48.2C1488,51,1536,51,1584,59.5C1632,68,1680,85,1728,85C1776,85,1824,68,1872,76.5C1920,85,1968,119,2016,110.5C2064,102,2112,51,2160,51C2208,51,2256,102,2304,113.3C2352,125,2400,96,2448,82.2C2496,68,2544,68,2592,82.2C2640,96,2688,125,2736,138.8C2784,153,2832,153,2880,153C2928,153,2976,153,3024,153C3072,153,3120,153,3168,130.3C3216,108,3264,62,3312,59.5C3360,57,3408,96,3432,116.2L3456,136L3456,170L3432,170C3408,170,3360,170,3312,170C3264,170,3216,170,3168,170C3120,170,3072,170,3024,170C2976,170,2928,170,2880,170C2832,170,2784,170,2736,170C2688,170,2640,170,2592,170C2544,170,2496,170,2448,170C2400,170,2352,170,2304,170C2256,170,2208,170,2160,170C2112,170,2064,170,2016,170C1968,170,1920,170,1872,170C1824,170,1776,170,1728,170C1680,170,1632,170,1584,170C1536,170,1488,170,1440,170C1392,170,1344,170,1296,170C1248,170,1200,170,1152,170C1104,170,1056,170,1008,170C960,170,912,170,864,170C816,170,768,170,720,170C672,170,624,170,576,170C528,170,480,170,432,170C384,170,336,170,288,170C240,170,192,170,144,170C96,170,48,170,24,170L0,170Z"/></svg>
<div class="work section">
<div class="section-heading"><h3>Projects</h3></div>
<div class="project-container">
<div class="project reveal">
<div class="project-images">
<img src="images/projects/lyrotopia-2.png" alt="">
<img src="images/projects/lyrotopia-1.png" alt="">
<img src="images/projects/lyrotopia-3.png" alt="">
</div>
<div class="project-description">
<h3>Lyrotopia</h3>
<h5>This project is a full-stack Website for a Minecraft Server. This site offered detailed information about the server, its games, team members, and support services. Users could explore game details, connect with the server team, access support resources, and manage their accounts. With features like login, email verification, ticketing system, and user profiles, it was challenging project to enhance my backend skills while providing a vibrant community experience.</h5>
<a href="../Lyrotopia/html/index.php" target="_blank" class="btn btn-outline-reverse">View Project</a>
</div>
</div>
<div class="project project-reverse reveal">
<div class="project-images">
<img src="images/projects/projektkurs-2.png" alt="">
<img src="images/projects/projektkurs-1.png" alt="">
<img src="images/projects/projektkurs-3.png" alt="">
</div>
<div class="project-description">
<h3>Projektkurs</h3>
<h5>A school project, happening in my project class, that is all about creating a cool website to show off our group results in a creative way. We've collaborated with a local politician who gave us a lot of input with his opinion, experience and expertise.<br>The website has some neat features like a login system to keep things private. Moreover I used JavaScript APIs like Chart.js to make some fancy animated charts that really bring our data to life. On the one hand this project enhanced my js skills by working with such apis and on the other hand my skills with css and responsiveness.</h5>
<a href="projects/achieve/Projektkurs/Q2/beruflicheshandeln/index.html" target="_blank" class="btn btn-outline-reverse">View Project</a>
</div>
</div>
<div class="project reveal">
<div class="project-images">
<img src="images/projects/scripzy-2.png" alt="">
<img src="images/projects/scripzy-1.png" alt="">
<img src="images/projects/scripzy-3.png" alt="">
</div>
<div class="project-description">
<h3>Scripzy</h3>
<h5>In my role as a frontend developer for a German startup, thats one of my latest project: the waitlist website. This site serves as a key component of the pre-launch strategy, encouraging users to sign up for updates on the upcoming products and services. As the frontend developer, I created the entire frontend architecture from scratch, focusing on user-friendly design and captivating animations using HTML, CSS, and JavaScript. This project not only improved my frontend skills, particularly in animation and custom CSS imagery, but also contributed to the startup's growth by attracting and retaining users.</h5>
<a href="projects/preview/Scripzy/index.html" target="_blank" class="btn btn-outline-reverse">View Project</a>
</div>
</div>
</div>
</div>
<svg class="section-transition-top" xmlns:xlink="http://www.w3.org/1999/xlink" id="wave" style="transform:rotate(180deg); transition: 0.3s" viewBox="0 0 1440 170" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(103, 103, 255, 1)" offset="0%"/><stop stop-color="rgba(179.335, 179.335, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,153L24,138.8C48,125,96,96,144,76.5C192,57,240,45,288,36.8C336,28,384,23,432,28.3C480,34,528,51,576,59.5C624,68,672,68,720,70.8C768,74,816,79,864,68C912,57,960,28,1008,14.2C1056,0,1104,0,1152,0C1200,0,1248,0,1296,5.7C1344,11,1392,23,1440,31.2C1488,40,1536,45,1584,62.3C1632,79,1680,108,1728,119C1776,130,1824,125,1872,102C1920,79,1968,40,2016,39.7C2064,40,2112,79,2160,99.2C2208,119,2256,119,2304,124.7C2352,130,2400,142,2448,133.2C2496,125,2544,96,2592,79.3C2640,62,2688,57,2736,51C2784,45,2832,40,2880,36.8C2928,34,2976,34,3024,45.3C3072,57,3120,79,3168,79.3C3216,79,3264,57,3312,59.5C3360,62,3408,91,3432,104.8L3456,119L3456,170L3432,170C3408,170,3360,170,3312,170C3264,170,3216,170,3168,170C3120,170,3072,170,3024,170C2976,170,2928,170,2880,170C2832,170,2784,170,2736,170C2688,170,2640,170,2592,170C2544,170,2496,170,2448,170C2400,170,2352,170,2304,170C2256,170,2208,170,2160,170C2112,170,2064,170,2016,170C1968,170,1920,170,1872,170C1824,170,1776,170,1728,170C1680,170,1632,170,1584,170C1536,170,1488,170,1440,170C1392,170,1344,170,1296,170C1248,170,1200,170,1152,170C1104,170,1056,170,1008,170C960,170,912,170,864,170C816,170,768,170,720,170C672,170,624,170,576,170C528,170,480,170,432,170C384,170,336,170,288,170C240,170,192,170,144,170C96,170,48,170,24,170L0,170Z"/><defs><linearGradient id="sw-gradient-1" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(103, 103, 255, 1)" offset="0%"/><stop stop-color="rgba(103, 103, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 50px); opacity:0.9" fill="url(#sw-gradient-1)" d="M0,0L24,5.7C48,11,96,23,144,48.2C192,74,240,113,288,119C336,125,384,96,432,87.8C480,79,528,91,576,99.2C624,108,672,113,720,110.5C768,108,816,96,864,79.3C912,62,960,40,1008,42.5C1056,45,1104,74,1152,70.8C1200,68,1248,34,1296,25.5C1344,17,1392,34,1440,45.3C1488,57,1536,62,1584,56.7C1632,51,1680,34,1728,45.3C1776,57,1824,96,1872,104.8C1920,113,1968,91,2016,85C2064,79,2112,91,2160,85C2208,79,2256,57,2304,39.7C2352,23,2400,11,2448,19.8C2496,28,2544,57,2592,76.5C2640,96,2688,108,2736,99.2C2784,91,2832,62,2880,48.2C2928,34,2976,34,3024,28.3C3072,23,3120,11,3168,8.5C3216,6,3264,11,3312,19.8C3360,28,3408,40,3432,45.3L3456,51L3456,170L3432,170C3408,170,3360,170,3312,170C3264,170,3216,170,3168,170C3120,170,3072,170,3024,170C2976,170,2928,170,2880,170C2832,170,2784,170,2736,170C2688,170,2640,170,2592,170C2544,170,2496,170,2448,170C2400,170,2352,170,2304,170C2256,170,2208,170,2160,170C2112,170,2064,170,2016,170C1968,170,1920,170,1872,170C1824,170,1776,170,1728,170C1680,170,1632,170,1584,170C1536,170,1488,170,1440,170C1392,170,1344,170,1296,170C1248,170,1200,170,1152,170C1104,170,1056,170,1008,170C960,170,912,170,864,170C816,170,768,170,720,170C672,170,624,170,576,170C528,170,480,170,432,170C384,170,336,170,288,170C240,170,192,170,144,170C96,170,48,170,24,170L0,170Z"/></svg>
<div class="contact section" id="contact">
<div class="section-heading section-heading-blue"><h3>Let's get in touch!</h3></div>
<div class="contact-form">
<form>
<div class="form-input">
<input id="name" type="text" name="name" onfocusout="validateValue(this, 'name')" required>
<div class="underline"></div>
<label for="name">Name</label>
<svg id="light" class="input-icon" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m21.5 21h-19c-1.378 0-2.5-1.122-2.5-2.5v-13c0-1.378 1.122-2.5 2.5-2.5h19c1.378 0 2.5 1.122 2.5 2.5v13c0 1.378-1.122 2.5-2.5 2.5zm-19-17c-.827 0-1.5.673-1.5 1.5v13c0 .827.673 1.5 1.5 1.5h19c.827 0 1.5-.673 1.5-1.5v-13c0-.827-.673-1.5-1.5-1.5z"/></g><g><path d="m7.5 12c-1.378 0-2.5-1.122-2.5-2.5s1.122-2.5 2.5-2.5 2.5 1.122 2.5 2.5-1.122 2.5-2.5 2.5zm0-4c-.827 0-1.5.673-1.5 1.5s.673 1.5 1.5 1.5 1.5-.673 1.5-1.5-.673-1.5-1.5-1.5z"/></g><g><path d="m11.5 17c-.276 0-.5-.224-.5-.5v-1c0-.827-.673-1.5-1.5-1.5h-4c-.827 0-1.5.673-1.5 1.5v1c0 .276-.224.5-.5.5s-.5-.224-.5-.5v-1c0-1.378 1.122-2.5 2.5-2.5h4c1.378 0 2.5 1.122 2.5 2.5v1c0 .276-.224.5-.5.5z"/></g><g><path d="m20.5 9h-6c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h6c.276 0 .5.224.5.5s-.224.5-.5.5z"/></g><g><path d="m20.5 13h-6c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h6c.276 0 .5.224.5.5s-.224.5-.5.5z"/></g><g><path d="m20.5 17h-6c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h6c.276 0 .5.224.5.5s-.224.5-.5.5z"/></g></svg>
</div>
<div class="form-input">
<input id="email" type="text" name="email" onfocusout="validateValue(this, 'email')" required>
<div class="underline"></div>
<label for="email">Email</label>
<svg class="input-icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M467,76H45C20.137,76,0,96.262,0,121v270c0,24.885,20.285,45,45,45h422c24.655,0,45-20.03,45-45V121
C512,96.306,491.943,76,467,76z M460.698,106c-9.194,9.145-167.415,166.533-172.878,171.967c-8.5,8.5-19.8,13.18-31.82,13.18
s-23.32-4.681-31.848-13.208C220.478,274.284,64.003,118.634,51.302,106H460.698z M30,384.894V127.125L159.638,256.08L30,384.894z
M51.321,406l129.587-128.763l22.059,21.943c14.166,14.166,33,21.967,53.033,21.967c20.033,0,38.867-7.801,53.005-21.939
l22.087-21.971L460.679,406H51.321z M482,384.894L352.362,256.08L482,127.125V384.894z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</div>
<div class="form-input">
<textarea id="message" type="text" name="message" onfocusout="validateValue(this, 'message')" rows="1" required></textarea>
<div class="underline"></div>
<label for="message">Message</label>
<svg class="input-icon" height="512" viewBox="0 0 32 32" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_2" data-name="Layer 2"><path d="m2.87 28.56a1.88 1.88 0 0 1 -1.87-1.87v-15.38a3.88 3.88 0 0 1 3.87-3.87h18.25a3.88 3.88 0 0 1 3.88 3.87v10.25a3.88 3.88 0 0 1 -3.87 3.88h-15.22a.82.82 0 0 0 -.48.16l-3.43 2.59a1.89 1.89 0 0 1 -1.13.37zm2-19.12a1.88 1.88 0 0 0 -1.87 1.87v15.13l3.23-2.44a2.84 2.84 0 0 1 1.68-.56h15.21a1.88 1.88 0 0 0 1.88-1.88v-10.25a1.88 1.88 0 0 0 -1.87-1.87z"/><circle cx="17.94" cy="16.53" r="1"/><circle cx="14.06" cy="16.53" r="1"/><circle cx="10.06" cy="16.53" r="1"/><path d="m30 18.44a1 1 0 0 1 -1-1v-10.13a1.88 1.88 0 0 0 -1.87-1.87h-20.13a1 1 0 0 1 -1-1 1 1 0 0 1 1-1h20.13a3.88 3.88 0 0 1 3.87 3.87v10.13a1 1 0 0 1 -1 1z"/></g></svg>
</div>
<div class="form-submit-container">
<a class="btn btn-filled form-submit" onclick="formhash()">Submit
<svg id="paperplane" enable-background="new 0 0 24 24" fill="green" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg">
<path d="m8.75 17.612v4.638c0 .324.208.611.516.713.077.025.156.037.234.037.234 0 .46-.11.604-.306l2.713-3.692z"/>
<path d="m23.685.139c-.23-.163-.532-.185-.782-.054l-22.5 11.75c-.266.139-.423.423-.401.722.023.3.222.556.505.653l6.255 2.138 13.321-11.39-10.308 12.419 10.483 3.583c.078.026.16.04.242.04.136 0 .271-.037.39-.109.19-.116.319-.311.352-.53l2.75-18.5c.041-.28-.077-.558-.307-.722z"/>
</svg>
</a>
</div>
<p id="form-response" class="form-response-success"></p>
</form>
<div class="contact-image-container">
<img id="contact-gif" src="gif/contact_entrance.gif">
</div>
</div>
</div>
<div class="footer">
<div class="footer-container">
<div class="footer-text">Website made with
<svg id="footer-heart" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 391.837 391.837" style="enable-background:new 0 0 391.837 391.837;" xml:space="preserve">
<g>
<path style="fill:#D7443E;" d="M285.257,35.528c58.743,0.286,106.294,47.836,106.58,106.58
c0,107.624-195.918,214.204-195.918,214.204S0,248.165,0,142.108c0-58.862,47.717-106.58,106.58-106.58l0,0
c36.032-0.281,69.718,17.842,89.339,48.065C215.674,53.517,249.273,35.441,285.257,35.528z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>by me
</div>
<div class="social-media">
<a id="tooltip" onclick="copyDiscord()">
<span id="tooltip-text">Copy Tag</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512" height="512">
<g>
<path d="M227.9,270.06c0,20.56-14.73,37.29-33.25,37.29c-18.23,0-33.25-16.73-33.25-37.29c0-20.55,14.73-37.29,33.25-37.29 C213.31,232.77,228.19,249.66,227.9,270.06z"/>
<path d="M350.83,270.06c0,20.56-14.58,37.29-33.25,37.29c-18.23,0-33.25-16.73-33.25-37.29c0-20.55,14.73-37.29,33.25-37.29 C336.25,232.77,351.12,249.66,350.83,270.06z"/>
<path d="M256,0C114.62,0,0,114.62,0,256s114.62,256,256,256s256-114.62,256-256S397.38,0,256,0z M438.91,350.25 c-31.64,23.24-62.3,37.35-92.53,46.7c-0.48,0.15-1-0.03-1.3-0.44c-6.98-9.72-13.32-19.97-18.88-30.73 c-0.32-0.63-0.03-1.39,0.63-1.64c10.07-3.81,19.65-8.36,28.87-13.74c0.73-0.43,0.77-1.47,0.1-1.97c-1.95-1.45-3.89-2.98-5.74-4.51 c-0.35-0.28-0.82-0.34-1.21-0.15c-59.84,27.65-125.39,27.65-185.94,0c-0.39-0.17-0.86-0.11-1.19,0.17 c-1.85,1.52-3.79,3.04-5.73,4.49c-0.67,0.5-0.62,1.54,0.11,1.97c9.22,5.28,18.8,9.93,28.86,13.75c0.66,0.25,0.97,1,0.64,1.63 c-5.43,10.78-11.78,21.02-18.89,30.74c-0.31,0.4-0.82,0.58-1.3,0.43c-30.09-9.35-60.74-23.46-92.39-46.7 c-0.26-0.21-0.45-0.53-0.48-0.87c-6.44-69.03,6.7-138.92,54.66-210.58c0.12-0.19,0.29-0.34,0.5-0.42 c23.59-10.84,48.88-18.81,75.3-23.36c0.48-0.07,0.96,0.15,1.21,0.57c3.27,5.79,7,13.2,9.53,19.26c27.85-4.25,56.14-4.25,84.58,0 c2.52-5.93,6.12-13.47,9.37-19.26c0.25-0.44,0.73-0.66,1.21-0.57c26.44,4.56,51.73,12.54,75.31,23.36 c0.21,0.08,0.38,0.23,0.48,0.44c41.78,61.45,62.42,130.77,54.7,210.58C439.36,349.74,439.19,350.04,438.91,350.25z"/>
</g>
</svg>
</a>
<a href="https://github.com/1BlauNitrox" target="_blank"><svg id="Bold" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m12 .5c-6.63 0-12 5.28-12 11.792 0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56 4.801-1.548 8.236-5.97 8.236-11.173 0-6.512-5.373-11.792-12-11.792z"/></svg></a>
<a href="https://www.instagram.com/julius_krgr5/" target="_blank"><svg viewBox="0 0 512.00096 512.00096" xmlns="http://www.w3.org/2000/svg"><path d="m373.40625 0h-234.8125c-76.421875 0-138.59375 62.171875-138.59375 138.59375v234.816406c0 76.417969 62.171875 138.589844 138.59375 138.589844h234.816406c76.417969 0 138.589844-62.171875 138.589844-138.589844v-234.816406c0-76.421875-62.171875-138.59375-138.59375-138.59375zm108.578125 373.410156c0 59.867188-48.707031 108.574219-108.578125 108.574219h-234.8125c-59.871094 0-108.578125-48.707031-108.578125-108.574219v-234.816406c0-59.871094 48.707031-108.578125 108.578125-108.578125h234.816406c59.867188 0 108.574219 48.707031 108.574219 108.578125zm0 0"/><path d="m256 116.003906c-77.195312 0-139.996094 62.800782-139.996094 139.996094s62.800782 139.996094 139.996094 139.996094 139.996094-62.800782 139.996094-139.996094-62.800782-139.996094-139.996094-139.996094zm0 249.976563c-60.640625 0-109.980469-49.335938-109.980469-109.980469 0-60.640625 49.339844-109.980469 109.980469-109.980469 60.644531 0 109.980469 49.339844 109.980469 109.980469 0 60.644531-49.335938 109.980469-109.980469 109.980469zm0 0"/><path d="m399.34375 66.285156c-22.8125 0-41.367188 18.558594-41.367188 41.367188 0 22.8125 18.554688 41.371094 41.367188 41.371094s41.371094-18.558594 41.371094-41.371094-18.558594-41.367188-41.371094-41.367188zm0 52.71875c-6.257812 0-11.351562-5.09375-11.351562-11.351562 0-6.261719 5.09375-11.351563 11.351562-11.351563 6.261719 0 11.355469 5.089844 11.355469 11.351563 0 6.257812-5.09375 11.351562-11.355469 11.351562zm0 0"/></svg></a>
</div>
</div>
</div>
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Function to be called when the target element is intersecting
function handleIntersection(entries, observer, gifSrc) {
entries.forEach(entry => {
if (entry.isIntersecting) {
document.getElementById(`${gifSrc}-gif`).src = `gif/${gifSrc}_entrance.gif`;
observer.disconnect();
setTimeout(() => {
document.getElementById(`${gifSrc}-gif`).src = `gif/${gifSrc}_loop.gif`;
}, 3000);
}
});
}
const options = {
root: null,
rootMargin: '0px',
threshold: 0
};
// Observer for the "contact-gif"
const observerContact = new IntersectionObserver(entries => handleIntersection(entries, observerContact, 'contact'), options);
const targetImgContact = document.getElementById('contact-gif');
observerContact.observe(targetImgContact);
// Observer for the "about-me-gif"
const observerAboutMe = new IntersectionObserver(entries => handleIntersection(entries, observerAboutMe, 'about-me'), options);
const targetImgAboutMe = document.getElementById('about-me-gif');
observerAboutMe.observe(targetImgAboutMe);
</script>
<script defer src="scripts/fade-in.js"></script>
<script defer src="scripts/text-animation.js"></script>
<script defer src="scripts/contact.js"></script>
</body>
</html>