-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
430 lines (420 loc) · 27.5 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
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
<!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" />
<meta name="description" content="Personal portfolio to showcase the projects I've been working on and to provide a means of contacting me easily" />
<meta name="keywords" content="Computer Science, Student, Developer, Julian Jesacher, Software Engineer, Computer Science Student" />
<title>Julian Jesacher</title>
<link rel="stylesheet" href="styles/styles.css" />
<link rel="stylesheet" href="styles/about-me-section.styles.css" />
<link rel="stylesheet" href="styles/contact-me-page.styles.css" />
<link rel="stylesheet" href="styles/darkmode-toggle.styles.css" />
<link rel="stylesheet" href="styles/footer-section.styles.css" />
<link rel="stylesheet" href="styles/projects-section.styles.css" />
<link rel="stylesheet" href="styles/utils.styles.css" />
<link rel="stylesheet" href="styles/welcome-section.styles.css" />
<link rel="stylesheet" href="styles/mobile-menu.styles.css" />
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-VJPG3QHY84"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-VJPG3QHY84');
</script>
</head>
<body>
<header>
<nav>
<div class="navbar-wrapper">
<div class="navbar">
<div class="navbar-content-left">
<div class="logo-wrapper navbar-item"><span>Logo</span></div>
</div>
<div class="navbar-content-right">
<li><a href="#about-me" class="navbar-item transition">About me</a></li>
<!--
<li><a href="#" class="navbar-item transition">Technologies</a></li>
-->
<li><a href="#projects" class="navbar-item transition">Projects</a></li>
<li>
<div class="darkmode-slider">
<label for="darkmode-checkbox">
<input type="checkbox" id="darkmode-checkbox" />
<div class="slider"></div>
</label>
</div>
</li>
<li><button class="navbar-contact-btn contact-btn">Contact me!</button></li>
</div>
<button class="navbar-item" id="open-mobile-menu">Menu</button>
</div>
</div>
</nav>
</header>
<section class="welcome-section">
<div class="welcome-wrapper">
<div class="welcome-content">
<span class="transition">Hi, my name is</span>
<h1 class="transition">Julian<br />Jesacher</h1>
<p>
I'm a computer science student<br />
at the technical university of munich<br />
>Welcome to <span>my portfolio.</span>
</p>
<div class="welcome-btn-social-wrapper">
<button class="welcome-contact-btn contact-btn">Contact me!</button>
<div class="welcome-social-icons-wrapper">
<a href="https://www.linkedin.com/in/julian-jesacher-08b262203/" title="LinkedIn Profile" class="transition social-icon-wrapper">
<lottie-player
class="social-icon dark"
src="https://assets9.lottiefiles.com/packages/lf20_48gweasv.json"
background="transparent"
speed="1"
style="width: 65%"
hover
loop
></lottie-player>
<lottie-player
class="social-icon light"
src="https://assets5.lottiefiles.com/packages/lf20_z06en56h.json"
background="transparent"
speed="1"
style="width: 65%"
hover
loop
></lottie-player>
</a>
<a href="https://www.instagram.com/_julian_jsc/" title="Instagram Profile" class="transition social-icon-wrapper">
<lottie-player
class="social-icon dark"
src="https://assets7.lottiefiles.com/packages/lf20_ljxwdbyy.json"
background="transparent"
speed="1"
style="width: 100%; transform: scale(1.5)"
hover
loop
></lottie-player>
<lottie-player
class="social-icon light"
src="https://assets8.lottiefiles.com/packages/lf20_6hd2hbd9.json"
background="transparent"
speed="1"
style="width: 100%; transform: scale(1.5)"
hover
loop
></lottie-player>
</a>
<a href="https://github.com/JulianJesacher" title="Github Profile" class="transition social-icon-wrapper">
<lottie-player
class="social-icon dark"
src="https://assets4.lottiefiles.com/packages/lf20_pbgriaz0.json"
background="transparent"
speed="1"
style="width: 70%"
hover
loop
></lottie-player>
<lottie-player
class="social-icon light"
src="https://assets5.lottiefiles.com/packages/lf20_vb2mcaz9.json"
background="transparent"
speed="1"
style="width: 70%"
hover
loop
></lottie-player>
</a>
</div>
</div>
</div>
<img class="welcome-portrait" src="/assets/portrait.webp" alt="Portrait of myself" />
</div>
</section>
<section class="about-me-section" id="about-me">
<!--
<svg class="about-me-background" width="1920" height="1228" viewBox="0 0 1920 1228" xmlns="http://www.w3.org/2000/svg">
<path d="M1893.77 0L35.4566 131H0V1228L1920 1127.5V0H1893.77Z" />
</svg>
-->
<div class="about-me-wrapper">
<div class="about-me-content-wrapper">
<div class="about-me-laptop-wrapper"></div>
<div class="about-me-content">
<h2>About me</h2>
<p>
Hello! My name is Julian, I am 19 years old and currently studying computer science at the technical university of munich.<br />
In my free time I really enjoy to work on my own software projects. I am working on all kinds of stuff but currently focusing on
building web applications.<br />
If you have any questions or if you want to get in touch, feel free to contact me!
</p>
</div>
</div>
</div>
</section>
<section class="projects-section" id="projects">
<div class="section-title">
<h2>Projects</h2>
<p>These are some of my coolest projects</p>
</div>
<div class="projects-container" id="projects-container"></div>
</section>
<section class="footer-section">
<div class="footer-content">
<h2>Any more questions?</h2>
<span>Don't hesitate to contact me!</span>
<button class="contact-me-footer-btn contact-btn">Contact me</button>
<div class="footer-social-icons-wrapper">
<a href="https://www.linkedin.com/in/julian-jesacher-08b262203/" title="LinkedIn" class="transition social-icon-wrapper">
<lottie-player
class="social-icon"
src="https://assets9.lottiefiles.com/packages/lf20_48gweasv.json"
background="transparent"
speed="1"
style="width: 65%"
hover
loop
></lottie-player>
</a>
<a href="https://www.instagram.com/_julian_jsc/" title="Instagram" class="transition social-icon-wrapper">
<lottie-player
class="social-icon"
src="https://assets7.lottiefiles.com/packages/lf20_ljxwdbyy.json"
background="transparent"
speed="1"
style="width: 100%; transform: scale(1.5)"
hover
loop
></lottie-player>
</a>
<a href="https://github.com/JulianJesacher" title="Github" class="transition social-icon-wrapper">
<lottie-player
class="social-icon"
src="https://assets4.lottiefiles.com/packages/lf20_pbgriaz0.json"
background="transparent"
speed="1"
style="width: 70%"
hover
loop
></lottie-player>
</a>
</div>
<svg
class="footer-background"
width="2122"
height="699"
viewBox="0 0 2122 699"
fill="none"
overflow="visible"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<clipPath id="footer-background-clipPath">
<path
fill="red"
d="M2143 594.5C2249.5 731.5 2069.73 935.672 2009.5 976C1919.72 1036.11 866.966 1128.73 760.597 1147.67C647.754 1167.76 520.928 1133.86 434.585 1058.48C347.758 982.678 -37.5002 910 3.49979 733.5C44.4998 557 278.808 532.601 294.019 424.628C310.408 308.288 301.452 166.53 392.697 92.517C485.636 17.1307 625.522 76.091 744.049 59.5906C841.486 46.0261 932.124 -14.4139 1028.77 3.96711C1126.69 22.5919 1195.29 104.277 1277.26 161.003C1373.58 227.665 1507.41 204.943 1550 309.499C1604.36 442.944 1637.5 496 1749.5 512C1861.5 528 2036.5 457.5 2143 594.5Z"
/>
</clipPath>
</defs>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2143 594.5C2249.5 731.5 2069.73 935.672 2009.5 976C1919.72 1036.11 866.966 1128.73 760.597 1147.67C647.754 1167.76 520.928 1133.86 434.585 1058.48C347.758 982.678 -37.5002 910 3.49979 733.5C44.4998 557 278.808 532.601 294.019 424.628C310.408 308.288 301.452 166.53 392.697 92.517C485.636 17.1307 625.522 76.091 744.049 59.5906C841.486 46.0261 932.124 -14.4139 1028.77 3.96711C1126.69 22.5919 1195.29 104.277 1277.26 161.003C1373.58 227.665 1507.41 204.943 1550 309.499C1604.36 442.944 1637.5 496 1749.5 512C1861.5 528 2036.5 457.5 2143 594.5Z"
/>
<text x="721" y="65" class="footer-background-text">JULIAN</text>
<g id="footer-backgound-text-group" clip-path="url(#footer-background-clipPath)">
<text x="721" y="65" class="footer-background-text">JULIAN</text>
</g>
</svg>
</div>
<div class="footer-background-limiter">
<div>
<img class="footer-background-decorator" src="/assets/Footer-background-decorator.svg" alt="Decorator" />
</div>
</div>
</section>
<div class="contact-me-page mobile" id="contact-me-page">
<div class="contact-me-wrapper">
<div class="contact-me-content">
<form autocomplete="off" id="contact-me-form">
<h1>Let<span>'</span>s Talk</h1>
<div class="contact-me-form">
<div class="input-wrapper">
<input name="name" type="text" placeholder=" " required />
<label for="nameInput">
<span style="transition-delay: 0ms">N</span>
<span style="transition-delay: 50ms">a</span>
<span style="transition-delay: 100ms">m</span>
<span style="transition-delay: 150ms">e</span>
<span style="transition-delay: 200ms">*</span>
</label>
</div>
<div class="input-wrapper">
<input name="email" type="email" placeholder=" " required />
<label for="emailInput">
<span style="transition-delay: 0ms">E</span>
<span style="transition-delay: 50ms">m</span>
<span style="transition-delay: 100ms">a</span>
<span style="transition-delay: 150ms">i</span>
<span style="transition-delay: 200ms">l</span>
<span style="transition-delay: 250ms">*</span>
</label>
</div>
<div class="input-wrapper">
<textarea name="message" cols="30" rows="10" required></textarea>
<label for="messageInput">
<span style="transition-delay: 0ms">M</span>
<span style="transition-delay: 50ms">e</span>
<span style="transition-delay: 100ms">s</span>
<span style="transition-delay: 150ms">s</span>
<span style="transition-delay: 200ms">a</span>
<span style="transition-delay: 250ms">g</span>
<span style="transition-delay: 300ms">e</span>
<span style="transition-delay: 350ms">*</span>
</label>
</div>
<!--recaptcha-->
<div
class="g-recaptcha"
data-sitekey="6Ld54R0hAAAAABQR3pqp0bns77cKtHRVcj7akLuF"
data-callback="captchaSuccessful"
data-expired-callback="captchaExpired"
></div>
<button id="sendEmailButton" class="contact-btn" type="submit" disabled>Submit</button>
<lottie-player
id="success-lottie"
src="https://assets4.lottiefiles.com/packages/lf20_rc5d0f61.json"
background="transparent"
speed="1"
style="height: 5em"
loop
autoplay
></lottie-player>
<lottie-player
id="error-lottie"
src="https://assets8.lottiefiles.com/packages/lf20_sii02z44.json"
background="transparent"
speed="1"
style="height: 5em"
loop
autoplay
></lottie-player>
</div>
</form>
</div>
<div class="contact-me-background-wrapper">
<div>
<!--Mobile-->
<!--Shadow-->
<svg class="contact-page-shadow mobile" viewBox="0 0 657 1043" fill="none" xmlns="http://www.w3.org/2000/svg" pointer-events="painted">
<g>
<path
d="M25.1559 65.3232C26.2461 48.7818 37.4443 34.8951 53.5642 31.0282C99.2971 20.0575 200.543 0 329.5 0C465.546 0 534.622 26.1419 559.466 38.3523C566.88 41.9961 571.953 48.5401 574.51 56.3951C590.003 103.989 645.345 289.74 650.5 529C655.229 748.505 641.011 922.662 634.775 986.596C633.209 1002.65 621.907 1015.76 606.106 1019.03C563.677 1027.79 469.789 1043 329.5 1043C188.513 1043 94.3907 1027.63 52.2651 1018.9C36.7972 1015.69 25.5948 1003.04 23.6781 987.359C15.4329 919.907 -4.82587 728.669 1.99998 525.5C8.76992 323.995 20.6146 134.226 25.1559 65.3232Z"
fill="url(#paint0_linear_209_57)"
/>
</g>
<linearGradient id="contact-page-shadow-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: #ffd747; stop-opacity: 1" />
<stop offset="100%" style="stop-color: #ffa800; stop-opacity: 1" />
</linearGradient>
</svg>
<!--Background-->
<svg
class="contact-page-background mobile"
viewBox="0 0 657 1043"
fill="none"
xmlns="http://www.w3.org/2000/svg"
pointer-events="painted"
>
<g>
<path
d="M25.1559 65.3232C26.2461 48.7818 37.4443 34.8951 53.5642 31.0282C99.2972 20.0575 200.543 0 329.5 0C459.139 0 560.773 20.2703 606.157 31.2016C621.92 34.9984 632.992 48.476 634.391 64.6296C640.643 136.82 657 343.1 657 525.5C657 707.48 640.718 913.231 634.434 985.87C633.014 1002.29 621.591 1015.85 605.451 1019.16C562.715 1027.94 469.072 1043 329.5 1043C188.513 1043 94.3907 1027.63 52.2651 1018.9C36.7972 1015.69 25.5948 1003.04 23.6781 987.359C15.4329 919.907 -4.82587 728.669 1.99998 525.5C8.76992 323.995 20.6146 134.226 25.1559 65.3232Z"
/>
</g>
</svg>
<!--Foreground-->
<svg class="contact-page-foreground mobile" viewBox="0 0 657 1043" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<path
transform="scale(1.003) translate(0 3.5)"
d="M178 104.5C228.5 99.3711 242.851 104.5 300.5 50.5C340 13.5 377.5 0.5 421.5 0.5C500.096 4.27537 569.976 19.1236 606.072 28.0642C621.835 31.9686 632.994 45.4985 634.395 61.6776C640.651 133.912 657 340.141 657 522.5C657 704.48 640.719 910.231 634.434 982.87C633.014 999.286 621.591 1012.85 605.451 1016.16C562.715 1024.94 469.072 1040 329.5 1040C188.513 1040 94.391 1024.63 52.2653 1015.9C36.7973 1012.69 25.5948 1000.04 23.678 984.358C15.4328 916.907 -4.82586 725.668 1.99998 522.5C5.94924 404.952 10.5541 312.897 15.5 225C17.7292 185.384 32 150.454 69.5 128.5C107 106.546 127.5 109.629 178 104.5Z"
/>
</g>
</svg>
<!--Desktop-->
<!--Shadow-->
<svg class="contact-page-shadow desktop" viewBox="0 0 1060 1010" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<path
d="M639.2 159.82C711.969 193.82 864.303 12.4955 918.712 72.2795C973.654 130.462 987.136 254.095 1005.41
332.321C1023.09 408.025 1059.58 481.386 1049.16 558.427C1038.62 636.447 988.657 701.34 946.532 767.842C902.28 837.703
868.591 922.957 794.726 960.109C720.907 997.237 632.553 962.528 550.064 967.253C466.292 972.051 379.144 1022.22 302.385
988.311C225.556 954.374 164.99 845.202 139.92 770.471C82.7211 706.802 58.7902 669.096 31.6356 587.917C4.59306 507.074
-10.7904 449.473 8.89651 366.53C27.7816 286.964 31.5448 200.102 81.6009 135.448C131.386 71.1444 215.271 48.0686 286.215
8.33754C358.376 -32.0749 413.548 87.5113 496.244 88.2926C579.156 89.076 564.074 124.719 639.2 159.82Z"
fill="red"
/>
</g>
<linearGradient id="contact-page-shadow-gradient-desktop" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color: #ec6931; stop-opacity: 1" />
<stop offset="100%" style="stop-color: #f6980b; stop-opacity: 1" />
</linearGradient>
</svg>
<!--Foreground-->
<svg class="contact-page-foreground desktop" viewBox="0 0 1060 1010" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<path
d="M817.767 39.6017C825.77 41.8662 898.494 53.6442 951.717 113.759C1004.93 173.864 996.12 264.934 1014.39 343.072C1032.08 418.691 1068.58 491.969 1058.16 568.923C1047.61 646.855 997.641 711.675 955.506 778.103C911.243 847.886 877.545 933.044 803.662 970.153C729.824 1007.24 641.448 972.57 558.938 977.29C475.145 982.083 387.975 1032.19 311.197 998.324C234.349 964.425 175.369 843.742 146.024 811.122C121.081 783.396 48.7114 708.217 17.6353 615.443C-9.41408 534.69 -2.05669 460.092 17.6352 377.242C36.525 297.766 40.2892 211.001 90.3578 146.42C147.13 73.1926 163.096 55.2465 270.875 16.1416C334.368 -6.89527 466.155 0.678885 522.178 3.34515C648.067 9.33648 809.764 37.3373 817.767 39.6017Z"
/>
</g>
</svg>
<!--Middle Blob-->
<svg class="contact-page-middle-blob desktop" viewBox="0 0 232 202" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M112.273 0.903297C128.629 -0.19241 140.477 16.3448 156.129 21.2073C177.679 27.9019 205.791 18.3634 221.279 34.7675C236.065 50.428 231.824 76.5846 228.511 97.8696C225.453 117.524 214.106 134.15 203.222 150.804C192.784 166.777 183.743 185.65 166.214 193.193C148.976 200.61 129.678 189.389 110.947 190.51C90.4598 191.736 70.9321 205.649 51.1836 200.075C30.2911 194.177 7.03596 180.64 1.57175 159.635C-4.15175 137.634 17.8733 118.356 24.2472 96.5287C28.6424 81.4772 24.4172 64.1383 33.2435 51.1754C41.9225 38.4285 58.6672 35.1424 71.6801 26.8647C85.467 18.0946 95.9709 1.99539 112.273 0.903297Z"
/>
</svg>
<!--Small Blob-->
<svg class="contact-page-little-blob desktop" viewBox="0 0 94 85" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M49.7863 0.0875828C56.5143 0.44921 62.9029 2.11533 69.0891 4.7697C76.1497 7.79925 84.0377 10.3236 88.3674 16.6419C92.8202 23.1398 92.3157 31.5545 92.8209 39.4009C93.3778 48.0476 95.8004 57.3936 91.4761 64.9163C87.1266 72.4828 77.9778 75.6358 69.9628 79.1657C62.329 82.5277 54.3789 84.6601 46.034 84.9295C37.2155 85.2143 28.196 84.7886 20.3546 80.7675C12.1672 76.5689 4.04555 70.4677 0.986927 61.8287C-2.01487 53.3502 2.62857 44.3594 4.33962 35.5335C5.81312 27.9329 5.58907 19.6258 10.3553 13.505C15.0073 7.5309 22.744 5.11174 29.9341 2.66513C36.3575 0.479394 43.0069 -0.276806 49.7863 0.0875828Z"
/>
</svg>
</div>
</div>
</div>
</div>
<div class="mobile-menu transition" id="mobile-menu">
<button class="close-menu" id="close-mobile-menu">✖</button>
<ul class="menu-items">
<li>
<div class="darkmode-slider">
<label for="darkmode-checkbox">
<input type="checkbox" id="darkmode-checkbox" />
<div class="slider"></div>
</label>
</div>
</li>
<li><a href="#about-me">About me</a></li>
<!--
<li><a href="#">Technologies</a></li>
-->
<li><a href="#projects">Projects</a></li>
</ul>
</div>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script type="text/javascript" src="src/darkmode.controller.js"></script>
<script type="text/javascript" src="src/footer.controller.js"></script>
<script type="text/javascript" src="src/projects.controller.js"></script>
<script type="text/javascript" src="src/mobile-menu.controller.js"></script>
<script type="text/javascript" src="src/contact-me.controller.js"></script>
<script type="text/javascript" src="src/config.js"></script>
</body>
</html>