mirror of
https://github.com/michivonah/website-v2.git
synced 2025-12-22 12:36:28 +01:00
374 lines
23 KiB
HTML
374 lines
23 KiB
HTML
<!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/aos@2.3.1/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/aos@2.3.1/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:info@michivonah.ch">info@michivonah.ch</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>
|