-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
374 lines (341 loc) · 23.1 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
<!DOCTYPE html>
<html lang="en-CH">
<head>
<title>Michi von Ah - My personal website</title>
<meta name="mobile-web-app-title" content="Michi">
<meta name="apple-mobile-web-app-title" content="Michi">
<link id="favicon" rel="icon" type="image/png" href="assets/logo/favicon_256.png">
<link rel="icon" type="image/svg+xml" href="assets/logo/logo_black.svg">
<link rel="shortcut icon" type="image/png" href="assets/logo/favicon_256.png">
<link rel="apple-touch-icon" href="assets/logo/favicon_256.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/logo/favicon_256.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/logo/favicon_256.png">
<link rel="apple-touch-icon" sizes="167x167" href="assets/logo/favicon_256.png">
<link rel="canonical" href="https://michivonah.ch">
<script src="https://unpkg.com/[email protected]/dist/aos.js" async></script>
<script src="https://unpkg.com/akar-icons-fonts"></script>
<script src="main.js" defer></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/aos.css" media="screen"/>
<meta charset="UTF-8">
<meta name="description" content="Hi! I'm Michi von Ah and this is my website.">
<meta name="keywords" content="Michi, Michi von Ah, von Ah, personalwebsite, website, Michael von Ah, von Ah Michael, von Ah Michi, mva, mivo, Michi v.A., Informatiker, informatics, IT, portfolio, webdev, developer, lifestyle, Webdeveloper, Develoment, 3K">
<meta name="author" content="Michi von Ah">
<meta name="robots" content="index">
<meta http-equiv="expires" content="43200">
<meta property="og:title" content="Michi von Ah">
<meta property="og:description" content="Hi! I'm Michi von Ah and this is my website.">
<meta property="og:image" content="assets/logo/favicon_256.png">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:url" content="https://michivonah.ch/">
<meta property="og:site_name" content="Michi von Ah">
<meta property="twitter:title" content="Michi von Ah">
<meta property="twitter:description" content="Hi! I'm Michi von Ah and this is my website.">
<meta property="twitter:image" content="assets/logo/favicon_256.png">
<meta name="twitter:image:alt" content="Michi von Ah">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@michivonah">
<meta name="twitter:creator" content="@michivonah">
<meta name="theme-color" content="#3498db">
<meta name="mobile-web-app-status-bar-style" content="#2980b9">
<meta name="apple-mobile-web-app-status-bar-style" content="#2980b9">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="manifest" href="manifest.json">
<script defer src="https://data.mchvnh.ch/script.js" data-website-id="9b188ed8-77b0-4238-aef5-c1b3d48106e4"></script>
</head>
<body>
<div id="loadingScreen">
<div id="loader">
</div>
</div>
<nav id="navbar">
<div class="inner-width">
<a href="#" onclick="scrollToTop();"><img id="logoImg" src="assets/logo/logo_white.svg" alt="Logo" title="Logo"></a>
<div id="closeNavbarPlaceholder" onclick="closeNavbar();">
<i class="ai-cross"></i>
</div>
<div id="navbar-links">
<a href="#" onclick="closeNavbar();" class="navLink">Home</a>
<a href="#about" onclick="closeNavbar();" class="navLink">About me</a>
<a href="#socialmedia" onclick="closeNavbar();" class="navLink">Socialmedia</a>
<a href="#projects" onclick="closeNavbar();" class="navLink">Projects</a>
<a href="#faq" onclick="closeNavbar();" class="navLink">FAQ</a>
<!-- <a href="#contact" onclick="closeNavbar();" class="navLink">Contact me</a> -->
</div>
<a id="toggleNav" onclick="toggleSection('navbar-links', 'flex'); toggleSection('closeNavbarPlaceholder', 'block');"><i id="toggle-nav-icon" class="ai-text-align-right"></i></a>
</div>
</nav>
<div id="content">
<div id="home">
<div>
<h1 id="homeTitle">Michi von Ah</h1>
<p>I'm a boy from switzerland.</p>
<button onclick="scrollDown();">Scroll down!</button>
</div>
<div>
<img id="homeImg" src="assets/bitmoji.png" alt="Bitmoji" title="Bitmoji">
</div>
</div>
<div id="about" class="section">
<div class="inner-width">
<h1 class="sectionTitle">About me</h1>
<div id="aboutContent">
<div id="aboutText" data-aos="fade-left">
<p>Hi, my name is <b>Michi von Ah</b> and I'm <b><var id="age">loading...</var></b> years old. I'm interested in smartphones, computers and electromobility (mainly Tesla). In my free time I like to be on the <b>computer</b> and program something (for example this website), <b>go for a walk</b> or bake a <b>cake</b>. I also like to listen to <b>music and podcasts</b>. Besides, I'm an Apple fan and would love to have a Tesla someday. This is my website and here you can find some stuff I created. Have Fun!</p>
<p><b>Funfact:</b> This website consists of a total of just over <u>1′829</u> lines of code.</p>
<div id="aboutSocial">
<a href="https://www.instagram.com/michivonah/"><i class="ai-instagram-fill" data-hover="#8a3ab9"></i></a>
<a href="https://twitter.com/michivonah"><i class="ai-twitter-fill" data-hover="#1DA1F2"></i></a>
<a href="https://fb.com/vonahmichi"><i class="ai-facebook-fill" data-hover="#4267B2"></i></a>
<a href="https://github.com/michivonah"><i class="ai-github-fill" data-hover="#4078c0"></i></a>
<a href="https://spotify.michivonah.ch"><i class="ai-spotify-fill" data-hover="#1DB954"></i></a>
<a href="https://in.michivonah.ch"><i class="ai-linkedin-fill" data-hover="#0072b1"></i></a>
</div>
</div>
<div id="aboutImg" data-aos="fade-right">
<img src="assets/images/michi2_blob.png" alt="Michi von Ah" title="A picture of me" id="aboutImgImg" onclick="document.getElementById('aboutImgImg').style.animation = 'shake 250ms ease';">
</div>
</div>
</div>
</div>
<div id="socialmedia" class="section" data-aos="fade-left">
<div class="inner-width">
<h1 class="sectionTitle">Socialmedia</h1>
<p>Click on the tabs to switch between them.</p>
<div id="socialSelection">
<input type="radio" id="smInstagram" class="smRadioInput" name="socialmedia" value="instagram" onchange="toggleSocialmedia();">
<label for="smInstagram" class="smRadioLabel">Instagram <i class="ai-instagram-fill"></i></label>
<input type="radio" id="smInstagram2" class="smRadioInput" name="socialmedia" value="instagram2" onchange="toggleSocialmedia();" checked>
<label for="smInstagram2" class="smRadioLabel">Instagram <i class="ai-instagram-fill"></i></label>
<input type="radio" id="smTwitter" class="smRadioInput" name="socialmedia" value="twitter" onchange="toggleSocialmedia();">
<label for="smTwitter" class="smRadioLabel" style="display: none;">Twitter <i class="ai-twitter-fill"></i></label>
<input type="radio" id="smGithub" class="smRadioInput" name="socialmedia" value="github" onchange="toggleSocialmedia();">
<label for="smGithub" class="smRadioLabel">GitHub <i class="ai-github-fill"></i></label>
<input type="radio" id="smLinkedin" class="smRadioInput" name="socialmedia" value="linkedin" onchange="toggleSocialmedia();">
<label for="smLinkedin" class="smRadioLabel" style="display: none;">LinkedIn <i class="ai-linkedin-fill"></i></label>
</div>
<div id="socialInstagram" class="socialTab">
<div id="insta1Container">
<div>
<h3>Instagram @michivonah</h3>
<ul>
<li>250+ Followers</li>
<li>15+ Posts</li>
<li>Lifestyle, Travel & me</li>
</ul>
<button onclick="window.open('https://instagram.com/michivonah')">Follow!</button>
<button onclick="showQrcode('assets/socialmedia/insta-code.png', 'insta1Img', 'assets/socialmedia/michi_pb.jpeg');">Show QR-Code</button>
</div>
<div>
<img src="assets/socialmedia/michi_pb.jpeg" alt="Michi" title="A picture of me" id="insta1Img">
</div>
</div>
</div>
<div id="socialInstagram2" class="socialTab">
<div id="insta2Container">
<div>
<h3>Instagram @vompictures</h3>
<ul>
<li>50+ Followers</li>
<li>35+ Posts</li>
<li>480+ Likes (in total)</li>
<li>14+ Likes (average per post)</li>
<li>Photography, Nature, Switzerland</li>
</ul>
<button onclick="window.open('https://instagram.com/vompictures')">Follow now!</button>
</div>
<div id="insta2FirstImgContainer">
<div id="insta2FirstImage" class="insta2FirstImg" data-location="Giswilerstock">
<img class="insta2Img1" src="assets/socialmedia/img14.jpeg" alt="Giswilerstock" title="Giswilerstock">
</div>
</div>
</div>
<div id="insta2ImgContainer">
<div class="insta2ImgDiv" data-location="Sachseln">
<img class="insta2Img" src="assets/socialmedia/img7.jpeg" alt="Sachseln" title="Sachseln">
</div>
<div class="insta2ImgDiv" data-location="Giswilerstock">
<img class="insta2Img" src="assets/socialmedia/img15.jpeg" alt="Giswilerstock" title="Giswilerstock">
</div>
<div class="insta2ImgDiv" data-location="Lugano">
<img class="insta2Img" src="assets/socialmedia/img20.jpg" alt="Lugano" title="Lugano">
</div>
</div>
</div>
<div id="socialTwitter" class="socialTab">
<h3>Twitter @michivonah</h3>
<div>
<div>
<ul>
<li>150+ Tweets</li>
</ul>
</div>
<!--<div>
<img src="assets/tweets/tweet1.png" alt="Tweet" title="Tweet">
</div> -->
</div>
</div>
<div id="socialGithub" class="socialTab">
<div id="githubContainer">
<div>
<h3>GitHub @michivonah</h3>
<ul>
<li>45+ public repos</li>
<li>Languages: HTML, CSS, JavaScript, Python, Go, Docker & Bash</li>
<li>Technologies: Docker & Git</li>
<li>1′800+ Commits</li>
<button onclick="window.open('https://github.michivonah.ch')">Read my code!</button>
</ul>
</div>
<div>
<img src="assets/socialmedia/code-snippet-v2.png" alt="Code Snippet" title="Code Snippet from my news app">
</div>
</div>
</div>
<div id="socialLinkedin" class="socialTab">
<h3>LinkedIn Michi von Ah</h3>
<ul>
<li></li>
<li>Competence tests: HTML & CSS</li>
</ul>
<!-- <img src="" alt="LinkedIn"> -->
</div>
</div>
</div>
<div id="projects" class="section" title="Hehehehe you found a easteregg">
<div class="inner-width">
<h1 class="sectionTitle">Projects</h1>
<div id="projectContainer">
<div id="projectRow1" class="projectRow"> <!-- ROW 1 for Projects -->
<div class="project" data-aos="fade-right">
<img src="assets/projects/escaperoom-logo.png" alt="Michi's Escape Room Logo" title="Michi's Escape Room">
<h3>Michi's Escape Room</h3>
<p>As a final project for school, I programmed an Escape Room game. For this I used the programming languages HTML, CSS and JavaScript. If you want to know more about the development process of my game, click <a class="link" href="https://blog.michivonah.ch/michis-escape-room/?ref=michivonah-ch">here <i class="ai-link-out"></i></a>. If you want to play it, click the button below. Good luck.</p>
<button onclick="window.open('https://escape.michivonah.ch?source=michivonah-website')">Open <i class="ai-link-out"></i></button>
</div>
<div class="project" data-aos="fade-right">
<img src="assets/projects/jassen.jpg" alt="Jassen by Michi" title="Jassen by Michi">
<h3>Jassen</h3>
<p>I have programmed a Jass game in which you play with three computer opponents. You can set how fast the opponents play and what their names are. The game can be installed on your smartphone or tablet as a PWA.</p>
<button onclick="window.open('https://jass.von-ah.me?source=michivonah-website')">Open <i class="ai-link-out"></i></button>
</div>
<div class="project" data-aos="fade-right">
<img src="assets/projects/ep-alerts.jpg" alt="Themepark Alerts" title="Themepark Alerts">
<h3>Themepark Alerts</h3>
<p>I created a tool which alerts you when the waiting times of subscribed attractions in your favourite themepark sinks or increase. The notifications are sent to a Discord webhook or to your ntfy-server. The tool runs in a Docker container. You can find more information about it on GitHub.</p>
<button onclick="window.open('https://github.com/michivonah/themepark-alerts')">Open GitHub <i class="ai-link-out"></i></button>
</div>
</div>
<div id="projectRow2" class="projectRow"> <!-- ROW 2 for Projects -->
<div class="project" data-aos="fade-left">
<img src="assets/projects/ava-website.jpg" alt="Armin von Ah GmbH Logo" title="Website Armin von Ah GmbH">
<h3>Website arminvonahgmbh.ch</h3>
<p>I programmed the website of Armin von Ah GmbH. It is a onepagger with information about the company held in the colors of the company.</p>
<button onclick="window.open('https://arminvonahgmbh.ch')">Open <i class="ai-link-out"></i></button>
</div>
<div class="project" data-aos="fade-left">
<img src="assets/projects/pw-generator.jpg" alt="Password Generator Logo" title="Password Generator">
<h3>Password Generator</h3>
<p>I‘ve programmed a simple and minimalistic password generator. You can choose from different password types and copy the password afterwards.</p>
<button onclick="window.open('https://passwords.michivonah.ch?source=michivonah-website')">Open <i class="ai-link-out"></i></button>
</div>
<div class="project" data-aos="fade-left">
<img src="assets/projects/ep-tagesplanner-icon.jpg" alt="EP-Tagesplanner Logo" title="EP-Tagesplanner">
<h3>EP-Tagesplanner</h3>
<p>As part of a school project, three of us have developed an app that aims to improve your day at Europa-Park. The app automatically creates a dynamic daily schedule to minimise the time spent queuing. If you want to find out more about the development of the app, click <a class="link" href="https://blog.michivonah.ch/die-ultimative-app-fur-den-europapark/?ref=michivonah-ch">here <i class="ai-link-out"></i></a>.</p>
<button onclick="window.open('https://ep.neodym.dev?source=michivonah-website')">Open <i class="ai-link-out"></i></button>
</div>
<div class="project" data-aos="fade-left">
<img src="assets/projects/3d-print-calculator-logo.jpg" alt="3D Print Cost Calculator" title="3D Print Cost Calculator">
<h3>3D Print Cost Calculator</h3>
<p>A simple tool that calculates the cost of a 3D printed object. The printer used, the amount of filament used, printing time, material/packaging costs and labour time as well as an optional margin can be specified. A total price is then calculated from this.</p>
<button onclick="window.open('https://3d.michivonah.ch')">Open <i class="ai-link-out"></i></button>
</div>
</div>
</div>
</div>
</div>
<div id="faq" class="section" data-aos="fade-right">
<div class="inner-width">
<h1 class="sectionTitle" title="This are some questions.">FAQ - Frequently Asked Questions</h1>
<p>Click on the question to display the answer.</p>
<div>
<div class="faqObject" onclick="toggleQuestion();">
<i class="ai-chevron-down faq-icon"></i>
<h3 class="faq-question">Did you programed this website yourself?</h3>
<p class="faqAnswer">Yes, I programmed this website myself using HTML, CSS and JavaScript programming languages.</p>
</div>
<div class="faqObject" onclick="toggleQuestion();">
<i class="ai-chevron-down faq-icon"></i>
<h3 class="faq-question">How did you get into computers?</h3>
<p class="faqAnswer">I came to computers because I have been interested in computers and other technology since I was very young. When I was a kid, I always wanted my own laptop and often made laptops, printers and more out of cardboard. I was finally able to fulfill my dream of having my own laptop in the second grade.</p>
</div>
<div class="faqObject" onclick="toggleQuestion();">
<i class="ai-chevron-down faq-icon"></i>
<h3 class="faq-question">Which countries would you like to visit?</h3>
<p class="faqAnswer">I would love to visit many countries and cities like Norway, Iceland, Ireland, California, Las Vegas, Los Angeles and Amsterdam.</p>
</div>
</div>
</div>
</div>
<div id="contact" class="section" data-aos="fade-left">
<div class="inner-width">
<h1 class="sectionTitle">Contact me</h1>
<p>If you want contact me, fill out this form or send a mail to <a class="link" href="mailto:[email protected]">[email protected]</a>.</p>
<form action="#" method="post" id="contact-form">
<input type="hidden" name="_redirect" value="https://michivonah.ch/?formSubmitted=true"/>
<div id="contactNames">
<input id="surname-field" type="text" name="surname" placeholder="Your Surname" required>
<input id="lastname-field" type="text" name="lastname" placeholder="Your Lastname" required>
</div>
<input id="email-field" type="email" name="mail" placeholder="Your E-Mail Adress" required>
<input id="subject-field" type="text" name="subject" placeholder="Subject" autocomplete="false">
<textarea id="message-text" placeholder="Your Text" minlength="6" required name="message"></textarea>
<input id="terms" type="checkbox" name="terms" required>
<!-- <label for="terms" id="termsLabel"><p>I accept that my form submissions will be shared with the formspark service to organize them. You can find out how your data is treated at formspark in their <a class="link" href="https://formspark.io/legal/privacy-policy/">privacy policy <i class="ai-link-out"></i></a>.</p></label> -->
<label for="terms" id="termsLabel"><p>I accept that the information I provide in the form will be shared with the WhatsApp Business API to send a message. You can find out how the data is processed by WhatsApp in the <a class="link" href="https://www.whatsapp.com/legal/business-data-processing-terms">WhatsApp privacy policy <i class="ai-link-out"></i></a>.</p></label>
<input id="honeypot" type="checkbox" name="honeypot" hidden>
<label for="honeypot" id="honeypotLabel" hidden></label>
<button id="submitContactForm" name="submit" type="button" onclick="checkForm();">Send <i class="ai-send"></i></button>
</form>
<p>Hint: The form is currently disabled because the site is stil under construction. It can still change.</p>
</div>
</div>
<div id="footer" data-aos="fade-up">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#3498DB" fill-opacity="1" d="M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,250.7C1248,256,1344,288,1392,304L1440,320L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
<div id="footerContent">
<p></p>
<a href="https://legal.michivonah.ch">Legal</a>
<a href="#footerExpanded" onclick="toggleSection('footerExpanded', 'flex');">Copyright</a>
<a class="socialLink" href="https://www.instagram.com/michivonah/"><i class="ai-instagram-fill"></i></a>
<a class="socialLink" href="https://in.michivonah.ch"><i class="ai-linkedin-fill"></i></a>
<a class="socialLink" href="https://github.com/michivonah"><i class="ai-github-fill"></i></a>
</div>
<div id="footerExpanded">
<div id="copyright">
<h3>Copyright <i class="ai-copy navicons"></i></h3>
<p>The content of this page was created by me or I have the rights to use it here.</p>
<p>Used resources from others:</p>
<ul>
<li>Animate on Scroll Library - michalsnik.github.io/aos</li>
<li>Akar Icons - akaricons.com</li>
<li>Google Fonts - fonts.google.com</li>
<li>BGjar - bgjar.com</li>
<li>Get Waves - getwaves.io</li>
<li>Blobmaker - blobmaker.app</li>
<li>codeimg - codeimg.io</li>
<li>Tutorials from unleashed-design.de</li>
</ul>
<p>All information without guarantee.</p>
</div>
<p style="display:none;">© 2024</p>
</div>
</div>
</div>
<div id="scroll-top">
<i class="ai-chevron-up"></i>
</div>
</body>
</html>