mirror of
https://github.com/michivonah/website-v2.git
synced 2025-12-22 20:46:29 +01:00
424 lines
19 KiB
HTML
424 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-CH">
|
|
<head>
|
|
<title>Michi von Ah</title>
|
|
<meta name="mobile-web-app-title" content="Michi">
|
|
<meta name="apple-mobile-web-app-title" content="Michi">
|
|
<link 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">
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
<script src="script.js"></script>
|
|
<script src="https://unpkg.com/akar-icons-fonts"></script>
|
|
<link rel="stylesheet" type="text/css" href="style.css"/>
|
|
<link rel="stylesheet" type="text/css" href="https://unpkg.com/aos@2.3.1/dist/aos.css"/>
|
|
<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.">
|
|
<meta name="author" content="Michi von Ah">
|
|
<meta name="robots" content="noindex">
|
|
<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="https://michivonah.ch/images/img2.jpeg">
|
|
<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="https://michivonah.ch/images/img2.jpeg">
|
|
<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">
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&family=Ubuntu&display=swap" rel="stylesheet">
|
|
|
|
</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"></a>
|
|
<div id="closeNavbarPlaceholder" onclick="closeNavbar();">
|
|
<i class="ai-cross"></i>
|
|
</div>
|
|
<div id="navbar-links">
|
|
<a href="#">Home</a>
|
|
<a href="#about">About me</a>
|
|
<a href="#socialmedia">Socialmedia</a>
|
|
<a href="#projects">Projects</a>
|
|
<a href="#contact">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>Michi von Ah</h1>
|
|
<p>I'm a boy from switzerland.</p>
|
|
<button onclick="scrollDown();">Scroll down!</button>
|
|
</div>
|
|
<div>
|
|
<img src="assets/bitmoji.png">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="about">
|
|
<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 Michi von Ah and I'm <var id="age">loading...</var> years old. I'm interested in smartphones, computers and electromobility (mainly Tesla). This is my website and here you can find something about me.</p>
|
|
</div>
|
|
<div id="aboutImg" data-aos="fade-right">
|
|
<img src="assets/images/michi2_blob.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="socialmedia" data-aos="fade-left">
|
|
<div class="inner-width">
|
|
<h1 class="sectionTitle">Socialmedia</h1>
|
|
<div id="socialSelection">
|
|
<input type="radio" id="smInstagram" class="smRadioInput" name="socialmedia" value="instagram" onchange="toggleSocialmedia();" checked>
|
|
<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();">
|
|
<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">LinkedIn <i class="ai-linkedin-fill"></i></label>
|
|
</div>
|
|
|
|
<div id="socialInstagram" class="socialTab">
|
|
<div id="insta1Container">
|
|
<div>
|
|
<h3>Instagram @michivonah</h3>
|
|
<ul>
|
|
<li>200+ Followers</li>
|
|
<li>10+ Posts</li>
|
|
<li>Lifestyle, Travel & me</li>
|
|
</ul>
|
|
<button onclick="window.open('https://instagram.com/michivonah')">Follow!</button>
|
|
<button>Get QR-Code</button>
|
|
</div>
|
|
<div>
|
|
<img src="assets/socialmedia/michi_pb.jpeg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="socialInstagram2" class="socialTab">
|
|
<div id="insta2Container">
|
|
<div>
|
|
<h3>Instagram @vompictures</h3>
|
|
<ul>
|
|
<li>15+ Followers</li>
|
|
<li>19+ Posts</li>
|
|
<li>225+ Likes (total)</li>
|
|
<li>12+ Likes (average per post)</li>
|
|
<li>Photography, Nature, Switzerland</li>
|
|
</ul>
|
|
<button onclick="window.open('https://instagram.com/vompictures')">Follow now!</button>
|
|
</div>
|
|
<div>
|
|
<img src="assets/socialmedia/img14.jpeg">
|
|
</div>
|
|
</div>
|
|
<div id="insta2ImgContainer">
|
|
<img src="assets/socialmedia/img14.jpeg">
|
|
<img src="assets/socialmedia/img15.jpeg">
|
|
<img src="assets/socialmedia/img20.jpg">
|
|
</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">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="socialGithub" class="socialTab">
|
|
<div id="githubContainer">
|
|
<div>
|
|
<h3>GitHub @michivonah</h3>
|
|
<ul>
|
|
<li>20+ public repos</li>
|
|
<li>Languages: HTML, CSS & JavaScript</li>
|
|
<li>1′180+ Commits</li>
|
|
<button onclick="window.open('https://github.michivonah.ch')">Read my code!</button>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<img src="assets/socialmedia/code-snippet.svg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="socialLinkedin" class="socialTab">
|
|
<h3>LinkedIn Michi von Ah</h3>
|
|
<ul>
|
|
<li></li>
|
|
<li>Competences: HTML, CSS</li>
|
|
</ul>
|
|
<img src="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="projects">
|
|
<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="https://escape.michivonah.ch/graphics/media/1.png">
|
|
<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://michivonah.notion.site/Michi-s-Escape-Room-9ba11f6e71a6449b9bdc222cd7c7f647">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')">Open <i class="ai-link-out"></i></button>
|
|
</div>
|
|
|
|
<div class="project" data-aos="fade-right">
|
|
<img src="https://michivonah.ch/icons/news-logo.png">
|
|
<h3>N3WS App</h3>
|
|
<p>I have created a simple RSS feed reader. It helps you to manage your news. You can use it on any device and install it as a PWA (Progressive web app). There may still be some bugs and errors as the app is still under development. As soon as the final version is ready, you will find it here.</p>
|
|
<button onclick="window.open('https://news.michivonah.ch')">Open <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="https://michivonah.ch/icons/pw-generator.png">
|
|
<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')">Open <i class="ai-link-out"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="contact" 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 type="text" name="surname" placeholder="Your Surname" required>
|
|
<input 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">
|
|
<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>
|
|
<button name="submit" type="submit">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">
|
|
<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="#footerExpanded" onclick="toggleSection('footerExpanded', 'flex');">Imprint & Copyright</a>
|
|
<a href="https://www.instagram.com/michivonah/"><i class="ai-instagram-fill"></i></a>
|
|
<a href="https://twitter.com/michivonah"><i class="ai-twitter-fill"></i></a>
|
|
<a href="https://fb.com/vonahmichi"><i class="ai-facebook-fill"></i></a>
|
|
</div>
|
|
|
|
<div id="footerExpanded">
|
|
<div id="imprint">
|
|
<h3>Imprint <i class="ai-paper navicons"></i></h3>
|
|
<p><i class="ai-person"></i> Michael von Ah</p>
|
|
<p><i class="ai-location"></i> Obwalden, Switzerland</p>
|
|
<p><i class="ai-envelope"></i> info@michivonah.ch</p>
|
|
<p><i class="ai-phone"></i> 078 247 15 16 (for messages, don′t use for calling)</p>
|
|
</div>
|
|
|
|
<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 Libary - 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>
|
|
</ul>
|
|
<p>All information without guarantee.</p>
|
|
</div>
|
|
|
|
<p style="display:none;">© 2022</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="scroll-top">
|
|
<i class="ai-chevron-up"></i>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
// Loading
|
|
window.addEventListener('load', () => {
|
|
document.getElementById('scroll-top').style.display = "none";
|
|
// Instagram: https://www.instagram.com/vompictures/?__a=1
|
|
age(16, 09, 2005);
|
|
toggleSocialmedia();
|
|
//AOS.init({disable: 'mobile'});
|
|
AOS.init({disable: true});
|
|
// hide loadingscreen
|
|
document.getElementById('loadingScreen').style.display = "none";
|
|
});
|
|
|
|
document.getElementById('scroll-top').addEventListener("click", function(){
|
|
scrollToTop();
|
|
});
|
|
|
|
function scrollToTop(){
|
|
var speed = 500;
|
|
var time = 15;
|
|
var step = (window.scrollY * -1) / (speed / time),
|
|
scroll = setInterval(function(){
|
|
if (window.scrollY != 0){
|
|
window.scrollBy(0, step);
|
|
}
|
|
else clearInterval(scroll);
|
|
},time);
|
|
}
|
|
|
|
function scrollDown(){
|
|
window.scroll(0, 1000);
|
|
//window.scrollBy(0, 1000);
|
|
}
|
|
|
|
function toggleSection(sectionName, type){
|
|
var section = document.getElementById(sectionName);
|
|
if(section.style.display == "block" || section.style.display == "flex"){
|
|
section.style.display = "none";
|
|
}
|
|
else{
|
|
section.style.display = type;
|
|
}
|
|
}
|
|
|
|
|
|
function toggleClass(className){
|
|
var elements = document.getElementsByClassName(className);
|
|
for(var i = 0; i < elements.length; i++){
|
|
if(elements[i].style.display == "block"){
|
|
elements[i].style.display = "none";
|
|
}
|
|
else{
|
|
elements[i].style.display = "block";
|
|
}
|
|
}
|
|
}
|
|
|
|
function closeNavbar(){
|
|
document.getElementById("navbar-links").style.display = "none";
|
|
document.getElementById("closeNavbarPlaceholder").style.display = "none";
|
|
}
|
|
|
|
function toggleSocialmedia(){
|
|
var tabs = document.getElementsByClassName('socialTab');
|
|
for(var i = 0; i < tabs.length; i++){
|
|
var currentTabId = tabs[i].id;
|
|
var currentRadioButton = currentTabId.replace("social", "sm");;
|
|
var state = document.getElementById(currentRadioButton).checked;
|
|
if(state == true) document.getElementById(tabs[i].id).style.display = "block";
|
|
else document.getElementById(tabs[i].id).style.display = "none";
|
|
}
|
|
}
|
|
|
|
function age(birthday, birthmonth, birthyear){
|
|
var birthmonth = birthmonth - 1;
|
|
var ageText = document.getElementById('age');
|
|
var date = new Date();
|
|
var year = date.getFullYear();
|
|
if(date.getMonth() == birthmonth){
|
|
if(date.getDate() >= birthday){
|
|
ageText.innerHTML = Number(year) - birthyear;
|
|
}
|
|
else{
|
|
ageText.innerHTML = Number(year) - birthyear - 1;
|
|
}
|
|
}
|
|
else if(date.getMonth() >= birthmonth){
|
|
ageText.innerHTML = Number(year) - birthyear;
|
|
}
|
|
else if(date.getMonth() <= birthmonth){
|
|
ageText.innerHTML = Number(year) - birthyear - 1;
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', function(e) {
|
|
var navbar = document.getElementById('navbar');
|
|
var scrollTop = document.getElementById('scroll-top');
|
|
if(this.scrollY > 20){
|
|
navbar.style.background = "var(--theme1)";
|
|
navbar.style.color = "#fff";
|
|
scrollTop.style.display = "flex";
|
|
}
|
|
else{
|
|
if(window.innerWidth <= 640){
|
|
if(document.getElementById('navbar-links').style.display == "block"){
|
|
navbar.style.background = "var(--theme1)";
|
|
scrollTop.style.display = "none";
|
|
}
|
|
else{
|
|
navbar.style.background = "transparent";
|
|
scrollTop.style.display = "none";
|
|
}
|
|
}
|
|
else{
|
|
navbar.style.background = "transparent";
|
|
scrollTop.style.display = "none";
|
|
}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|