mirror of
https://github.com/michivonah/website-v2.git
synced 2025-12-22 20:46:29 +01:00
372 lines
16 KiB
HTML
372 lines
16 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>
|
|
|
|
<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>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">
|
|
<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">
|
|
<img src="assets/images/michi2_blob.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="socialmedia">
|
|
<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>
|
|
<h3>Instagram @michivonah</h3>
|
|
<ul>
|
|
<li>100+ Followers</li>
|
|
<li>8+ Posts</li>
|
|
<li>Lifestyle</li>
|
|
</ul>
|
|
<button>Follow!</button>
|
|
<button>Get QR-Code</button>
|
|
</div>
|
|
<div>
|
|
<img src="assets/socialmedia/michi_pb.jpeg">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="socialInstagram2" class="socialTab">
|
|
<div id="insta2Container">
|
|
<div>
|
|
<h3>Instagram @vompictures</h3>
|
|
<ul>
|
|
<li>15+ Followers</li>
|
|
<li>16+ Posts</li>
|
|
<li>Photography, Nature, Switzerland</li>
|
|
</ul>
|
|
</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">
|
|
<h3>GitHub @michivonah</h3>
|
|
<ul>
|
|
<li>20+ public repos</li>
|
|
<li>Languages: HTML, CSS, JavaScript</li>
|
|
<li>000+ Commits</li>
|
|
<button>Read my code!</button>
|
|
</ul>
|
|
<img src="assets/socialmedia/code-snippet.svg">
|
|
</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">
|
|
<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>Open <i class="ai-link-out"></i></button>
|
|
</div>
|
|
|
|
<div class="project">
|
|
<img src="https://michivonah.ch/icons/news-logo.png">
|
|
<h3>N3WS App</h3>
|
|
<p>a simple rss feed reader</p>
|
|
<button>Open <i class="ai-link-out"></i></button>
|
|
</div>
|
|
</div>
|
|
<div id="projectRow2" class="projectRow"> <!-- ROW 2 for Projects -->
|
|
<div class="project">
|
|
<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>Open <i class="ai-link-out"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="contact">
|
|
<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>
|
|
</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 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>
|
|
</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', () => {
|
|
// Code here
|
|
//document.getElementById('scroll-top').style.display = "none";
|
|
// Instagram: https://www.instagram.com/vompictures/?__a=1
|
|
age(16, 09, 2005);
|
|
toggleSocialmedia();
|
|
});
|
|
|
|
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 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;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|