Delete CNAME

CNAME

@@ -1 +0,0 @@
-michivonah.ch

_headers

@@ -0,0 +1,12 @@
+/
+  Content-Security-Policy: default-src 'self' michivonah.ch data.mchvnh.ch; script-src 'self' 'unsafe-inline' unpkg.com data.mchvnh.ch; style-src 'self' 'unsafe-inline' unpkg.com michivonah.ch fonts.googleapis.com; img-src 'self' michivonah.ch; font-src 'self' unpkg.com fonts.googleapis.com fonts.gstatic.com; upgrade-insecure-requests
+  Permissions-Policy: accelerometer=(), autoplay=(), display-capture=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()
+  Referrer-Policy: origin
+  Strict-Transport-Security: max-age=31536000; includeSubDomains
+  X-Content-Type-Options: nosniff
+  X-Frame-Options: DENY
+  X-XSS-Protection: 1; mode=block
+  Cross-Origin-Embedder-Policy: unsafe-none
+  Cross-Origin-Opener-Policy: same-origin
+  Cross-Origin-Resource-Policy: cross-origin
+  Access-Control-Allow-Origin: *

assets/logo/logo_blue_bold.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" 
+xmlns:xlink="http://www.w3.org/1999/xlink" width="1080" height="1080" 
+viewBox="0 0 1080 1080">
+  <defs>
+    <clipPath id="clip-Logo_blue_bold">
+      <rect width="1080" height="1080"/>
+    </clipPath>
+  </defs>
+  <g id="Logo_blue_bold" clip-path="url(#clip-Logo_blue_bold)">
+    <g id="Logo">
+      <g id="Border" transform="translate(160 160)" fill="none" 
+stroke="#3498db" stroke-width="30">
+        <rect width="760" height="760" stroke="none"/>
+        <rect x="15" y="15" width="730" height="730" fill="none"/>
+      </g>
+      <line id="Horizontal" y2="755" transform="translate(540.5 161.5)" 
+fill="none" stroke="#3498db" stroke-width="30"/>
+      <line id="Vertical" x2="760" transform="translate(160.5 540.5)" 
+fill="none" stroke="#3498db" stroke-width="30"/>
+      <line id="Top-Left" x2="359" y2="358" transform="translate(181 182)" 
+fill="none" stroke="#3498db" stroke-width="30"/>
+      <line id="Top-Right" x1="359" y2="358" transform="translate(541.5 
+181.5)" fill="none" stroke="#3498db" stroke-width="30"/>
+    </g>
+  </g>
+</svg>
+

assets/logo/logo_blue_white_text.svg

@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" 
+xmlns:xlink="http://www.w3.org/1999/xlink" width="2840" height="1080" 
+viewBox="0 0 2840 1080">
+  <defs>
+    <clipPath id="clip-Logo_text_-_blue_1">
+      <rect width="2840" height="1080"/>
+    </clipPath>
+  </defs>
+  <g id="Logo_text_-_blue_1" data-name="Logo text - blue – 1" 
+clip-path="url(#clip-Logo_text_-_blue_1)">
+    <g id="Logo">
+      <g id="Border" transform="translate(160 160)" fill="none" 
+stroke="#3498db" stroke-width="20">
+        <rect width="760" height="760" stroke="none"/>
+        <rect x="10" y="10" width="740" height="740" fill="none"/>
+      </g>
+      <line id="Horizontal" y2="755" transform="translate(540.5 161.5)" 
+fill="none" stroke="#3498db" stroke-width="20"/>
+      <line id="Vertical" x2="760" transform="translate(160.5 540.5)" 
+fill="none" stroke="#3498db" stroke-width="20"/>
+      <line id="Top-Left" x2="368" y2="364" transform="translate(172 176)" 
+fill="none" stroke="#3498db" stroke-width="20"/>
+      <line id="Top-Right" x1="367" y2="364" transform="translate(541.5 
+175.5)" fill="none" stroke="#3498db" stroke-width="20"/>
+    </g>
+    <text id="Michi" transform="translate(1133 760)" fill="#fff" 
+font-size="532" font-family="Helvetica"><tspan x="0" 
+y="0">Michi</tspan></text>
+  </g>
+</svg>
+

assets/logo/logo_mail.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1200" height="1200" viewBox="0 0 1200 1200">
+  <defs>
+    <clipPath id="clip-branding">
+      <rect width="1200" height="1200"/>
+    </clipPath>
+  </defs>
+  <g id="branding" clip-path="url(#clip-branding)">
+    <g id="Logo" transform="translate(59.75 60)">
+      <g id="Border" transform="translate(160 160)" fill="none" stroke="#3498db" stroke-width="10">
+        <rect width="760" height="760" stroke="none"/>
+        <rect x="5" y="5" width="750" height="750" fill="none"/>
+      </g>
+      <line id="Horizontal" y2="755" transform="translate(540.5 161.5)" fill="none" stroke="#3498db" stroke-width="10"/>
+      <line id="Vertical" x2="760" transform="translate(160.5 540.5)" fill="none" stroke="#3498db" stroke-width="10"/>
+      <line id="Top-Left" x2="375" y2="375" transform="translate(165 165)" fill="none" stroke="#3498db" stroke-width="10"/>
+      <line id="Top-Right" x1="375" y2="375" transform="translate(541.5 164.5)" fill="none" stroke="#3498db" stroke-width="10"/>
+    </g>
+  </g>
+</svg>

index.html

@@ -12,11 +12,11 @@
     <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"></script>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js" async></script>
-    <script src="script.js"></script>
     <script src="https://unpkg.com/akar-icons-fonts"></script>
-    <link rel="stylesheet" type="text/css" href="style.css"/>
+    <script src="main.js" defer></script>
-    <link rel="stylesheet" type="text/css" href="https://unpkg.com/aos@2.3.1/dist/aos.css"/>
+    <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">
@@ -45,9 +45,7 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <link rel="manifest" href="manifest.json">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <script defer src="https://data.mchvnh.ch/script.js" data-website-id="9b188ed8-77b0-4238-aef5-c1b3d48106e4"></script>
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
 </head>
 <body>
@@ -69,7 +67,7 @@
               <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>
+              <!-- <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>
@@ -92,8 +90,8 @@
             <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. Good Luck!</p>
+                <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&prime;827</u> lines of code.</p>
+                <p><b>Funfact:</b> This website consists of a total of just over <u>1&prime;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>
@@ -116,10 +114,10 @@
             <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();" checked>
+              <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();">
+              <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();">
@@ -137,8 +135,8 @@
                 <div>
                   <h3>Instagram @michivonah</h3>
                   <ul>
-                    <li>200+ Followers</li>
+                    <li>250+ Followers</li>
-                    <li>10+ Posts</li>
+                    <li>15+ Posts</li>
                     <li>Lifestyle, Travel &amp; me</li>
                   </ul>
                   <button onclick="window.open('https://instagram.com/michivonah')">Follow!</button>
@@ -155,10 +153,10 @@
                 <div>
                   <h3>Instagram @vompictures</h3>
                   <ul>
-                    <li>20+ Followers</li>
+                    <li>50+ Followers</li>
-                    <li>20+ Posts</li>
+                    <li>35+ Posts</li>
-                    <li>280+ Likes (in total)</li>
+                    <li>480+ Likes (in total)</li>
-                    <li>13+ Likes (average per post)</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>
@@ -201,9 +199,10 @@
                 <div>
                   <h3>GitHub @michivonah</h3>
                   <ul>
-                    <li>20+ public repos</li>
+                    <li>45+ public repos</li>
-                    <li>Languages: HTML, CSS &amp; JavaScript</li>
+                    <li>Languages: HTML, CSS, JavaScript, Python, Go, Docker &amp; Bash</li>
-                    <li>1&prime;360+ Commits</li>
+                    <li>Technologies: Docker &amp; Git</li>
+                    <li>1&prime;800+ Commits</li>
                     <button onclick="window.open('https://github.michivonah.ch')">Read my code!</button>
                   </ul>
                 </div>
@@ -233,30 +232,51 @@
                 <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://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>
+                  <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')">Open <i class="ai-link-out"></i></button>
+                  <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/news-logo.png" alt="News App Logo" title="N3WS App">
+                  <img src="assets/projects/jassen.jpg" alt="Jassen by Michi" title="Jassen by Michi">
-                  <h3>N3WS App</h3>
+                  <h3>Jassen</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>
+                  <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://news.michivonah.ch')">Open <i class="ai-link-out"></i></button>
+                  <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/pw-generator.png" alt="Password Generator Logo" title="Password Generator">
+                  <img src="assets/projects/ava-website.jpg" alt="Armin von Ah GmbH Logo" title="Website Armin von Ah GmbH">
-                  <h3>Password Generator</h3>
+                  <h3>Website arminvonahgmbh.ch</h3>
-                  <p>I&lsquo;ve programmed a simple and minimalistic password generator. You can choose from different password types and copy the password afterwards.</p>
+                  <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://passwords.michivonah.ch')">Open <i class="ai-link-out"></i></button>
+                  <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/jump.png" alt="Bitmoji" title="Michi's Blog">
+                  <img src="assets/projects/pw-generator.jpg" alt="Password Generator Logo" title="Password Generator">
-                  <h3>Michi&prime;s Blog</h3>
+                  <h3>Password Generator</h3>
-                  <p>I have created a blog with Notion. There I write small texts from time to time. The blog is written in German.</p>
+                  <p>I&lsquo;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://blog.michivonah.ch')">Open <i class="ai-link-out"></i></button>
+                  <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>
@@ -283,7 +303,7 @@
               <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 places like Sydney, California, Las Vegas, Los Angeles and Dublin.</p>
+                <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>
@@ -317,21 +337,14 @@
           <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://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://twitter.com/michivonah"><i class="ai-twitter-fill"></i></a>
+            <a class="socialLink" href="https://in.michivonah.ch"><i class="ai-linkedin-fill"></i></a>
-            <a class="socialLink" href="https://fb.com/vonahmichi"><i class="ai-facebook-fill"></i></a>
+            <a class="socialLink" href="https://github.com/michivonah"><i class="ai-github-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&prime;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>
@@ -349,265 +362,13 @@
               <p>All information without guarantee.</p>
             </div>
 
-            <p style="display:none;">&#169; 2022</p>
+            <p style="display:none;">&#169; 2024</p>
           </div>
         </div>
       </div>
 
-      <div id="cookieBanner">
-        <div id="cookieImg">
-          <p id="cookieIcon">&#127850;</p>
-        </div>
-        <div id="cookieHint">
-          <h3>Hey, this site uses cookies!</h3>
-          <p>Don't worry, no cookies are used at the moment. This is just a preparation of the hint for later. Because at the moment this website is still under development.</p>
-          <button onclick="useCookie(true)">Accept!</button>
-          <button onclick="useCookie(false)">Stop!</button>
-        </div>
-      </div>
-
       <div id="scroll-top">
         <i class="ai-chevron-up"></i>
       </div>
-
-      <div id="stats" style="display:none;">
-        <img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fmichivonah.ch%2FNEW&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false" alt="Stats" title="Stats">
-      </div>
-
-
-      <script>
-      // Loading
-      window.addEventListener('load', () => {
-        document.getElementById('scroll-top').style.display = "none";
-        // check if site is released
-        var timeToRelease = new Date('August 7, 2022 12:00:00').getTime() - new Date().getTime();
-        if(timeToRelease > 0 && window.location.hostname == 'michivonah.ch') window.location = "https://michivonah.ch/countdown.html";
-        age(16, 09, 2005);
-        toggleSocialmedia();
-        // Check cookie banner
-        //localStorage.removeItem('cookies');
-        if(localStorage.getItem('cookies') != null){
-          document.getElementById('cookieBanner').style.display = "none";
-        }
-        // random home img
-        randomHomeImg();
-        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(){
-        if(navigator.userAgent.includes('iPhone') || navigator.userAgent.includes('iPad') || navigator.userAgent.includes('Mac')){
-          window.scroll(0, 0);
-        }
-        else{
-          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(){
-        if(navigator.userAgent.includes('iPhone') || navigator.userAgent.includes('iPad') || navigator.userAgent.includes('Mac')){
-          //window.scroll(0, 1000);
-          document.getElementById('about').scrollIntoView({
-            behavior: 'smooth'
-          });
-        }
-        else{
-          document.getElementById('about').scrollIntoView({
-            behavior: 'smooth'
-          });
-        }
-      }
-
-      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(){
-        if(document.getElementById('closeNavbarPlaceholder').style.display == "block"){
-          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 toggleQuestion(){
-        if(event.target.tagName == "DIV"){
-          if(event.target.getElementsByTagName('p')[0].style.display == "none"){
-            event.target.getElementsByTagName('p')[0].style.display = "block";
-            event.target.getElementsByTagName('i')[0].style.transform = "rotate(180deg)";
-          }
-          else{
-            event.target.getElementsByTagName('p')[0].style.display = "none";
-            event.target.getElementsByTagName('i')[0].style.transform = "rotate(0deg)";
-          }
-        }
-        else if(event.target.tagName == "H3" || event.target.tagName == "I"){
-          if(event.target.parentElement.getElementsByTagName('p')[0].style.display == "none"){
-            event.target.parentElement.getElementsByTagName('p')[0].style.display = "block";
-            event.target.parentElement.getElementsByTagName('i')[0].style.transform = "rotate(180deg)";
-          }
-          else{
-            event.target.parentElement.getElementsByTagName('p')[0].style.display = "none";
-            event.target.parentElement.getElementsByTagName('i')[0].style.transform = "rotate(0deg)";
-          }
-        }
-        else console.log("An error occurred while opening this section. Element: {0}", event.target);
-      }
-
-      function checkForm(){
-        console.log();
-        var requiredFields = ['surname-field', 'lastname-field', 'email-field', 'message-text', 'terms'];
-        var errorCount = 0;
-        for(var i = 0; i < requiredFields.length; i++){
-          var currentElement = document.getElementById(requiredFields[i]);
-          currentElement.style.animation = null;
-          if(currentElement.checkValidity() == true){
-            currentElement.style.background = "var(--theme1)";
-            currentElement.style.animation = null;
-          }
-          else{
-            currentElement.classList.add("animate");
-            currentElement.style.background = "var(--red)";
-            currentElement.style.animation = "shake 250ms ease";
-            currentElement.classList.remove("animate");
-            errorCount++;
-          }
-        }
-        if(document.getElementById('honeypot').checked === true) errorCount++;
-        if(errorCount <= 0){
-          var name = document.getElementById('surname-field').value + " " + document.getElementById('lastname-field').value;
-          sendWhatsapp(name, document.getElementById('email-field').value, document.getElementById('subject-field').value, document.getElementById('message-text').value);
-          //document.getElementById("contact-form").submit();
-        }
-      }
-
-      function useCookie(usersChoice){
-        let cookieBanner = document.getElementById('cookieBanner');
-        cookieBanner.style.display = "none";
-        if(usersChoice == true){
-          localStorage.setItem('cookies', true);
-        }
-        else{
-          localStorage.setItem('cookies', false);
-        }
-      }
-
-      function showQrcode(src, imgId, old){
-        // src = 'assets/socialmedia/insta-code.png'
-        // old = assets/socialmedia/michi_pb.jpeg
-        // img = document.getElementById('insta1Img')
-        var src = "https://api.qrserver.com/v1/create-qr-code/?size=900x900&format=png&margin=0&data=http://insta.michivonah.ch/";
-        var image = document.getElementById(imgId).src;
-        if(image != src) document.getElementById(imgId).src = src;
-        else document.getElementById(imgId).src = old;
-      }
-
-      function sendWhatsapp(name, mail, subject, text){
-        var mail = mail.replaceAll('@', '%40');
-        var subject = subject.replaceAll(' ', '%20');
-        var text = text.replaceAll(' ', '%20');
-        var text = text.replaceAll('?', '%3F');
-        var text = text.replaceAll('!', '%21');
-        var whatsappUrl = "https://wa.me/41782471516?text=Name%3A%20" + name + "%0AE-Mail%3A%20" + mail + "%0ASubject%3A%20" + subject + "%0AMessage%3A%20" + text;
-        window.open(whatsappUrl);
-      }
-
-      function randomHomeImg(){
-        var homeImg = document.getElementById('homeImg');
-        var num = Math.floor(Math.random() * (4 - 1) + 1);
-        homeImg.src = "assets/bitmojis/home_" + num + ".png";
-      }
-
-      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>

main.js

@@ -0,0 +1,208 @@
+      // Loading
+      window.addEventListener('load', () => {
+        document.getElementById('scroll-top').style.display = "none";
+        // check if site is released
+        //var timeToRelease = new Date('August 7, 2022 12:00:00').getTime() - new Date().getTime();
+        //if(timeToRelease > 0 && window.location.hostname == 'michivonah.ch') window.location = "https://michivonah.ch/countdown.html";
+        age(16, 9, 2005);
+        toggleSocialmedia();
+        // Check cookie banner
+        //localStorage.removeItem('cookies');
+        if(localStorage.getItem('cookies') != null){
+          document.getElementById('cookieBanner').style.display = "none";
+        }
+        // random home img
+        randomHomeImg();
+        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(){
+        window.scroll(0, 0);
+      }
+
+      function scrollDown(){
+        window.scroll(0, window.innerHeight - 56);
+      }
+
+      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(){
+        if(document.getElementById('closeNavbarPlaceholder').style.display == "block"){
+          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 toggleQuestion(){
+        if(event.target.tagName == "DIV"){
+          if(event.target.getElementsByTagName('p')[0].style.display == "none"){
+            event.target.getElementsByTagName('p')[0].style.display = "block";
+            event.target.getElementsByTagName('i')[0].style.transform = "rotate(180deg)";
+          }
+          else{
+            event.target.getElementsByTagName('p')[0].style.display = "none";
+            event.target.getElementsByTagName('i')[0].style.transform = "rotate(0deg)";
+          }
+        }
+        else if(event.target.tagName == "H3" || event.target.tagName == "I"){
+          if(event.target.parentElement.getElementsByTagName('p')[0].style.display == "none"){
+            event.target.parentElement.getElementsByTagName('p')[0].style.display = "block";
+            event.target.parentElement.getElementsByTagName('i')[0].style.transform = "rotate(180deg)";
+          }
+          else{
+            event.target.parentElement.getElementsByTagName('p')[0].style.display = "none";
+            event.target.parentElement.getElementsByTagName('i')[0].style.transform = "rotate(0deg)";
+          }
+        }
+        else console.log("An error occurred while opening this section. Element: {0}", event.target);
+      }
+
+      function checkForm(){
+        console.log();
+        var requiredFields = ['surname-field', 'lastname-field', 'email-field', 'message-text', 'terms'];
+        var errorCount = 0;
+        for(var i = 0; i < requiredFields.length; i++){
+          var currentElement = document.getElementById(requiredFields[i]);
+          currentElement.style.animation = null;
+          if(currentElement.checkValidity() == true){
+            currentElement.style.background = "var(--theme1)";
+            currentElement.style.animation = null;
+          }
+          else{
+            currentElement.classList.add("animate");
+            currentElement.style.background = "var(--red)";
+            currentElement.style.animation = "shake 250ms ease";
+            currentElement.classList.remove("animate");
+            errorCount++;
+          }
+        }
+        if(document.getElementById('honeypot').checked === true) errorCount++;
+        if(errorCount <= 0){
+          var name = document.getElementById('surname-field').value + " " + document.getElementById('lastname-field').value;
+          sendWhatsapp(name, document.getElementById('email-field').value, document.getElementById('subject-field').value, document.getElementById('message-text').value);
+          //document.getElementById("contact-form").submit();
+        }
+      }
+
+      function useCookie(usersChoice){
+        let cookieBanner = document.getElementById('cookieBanner');
+        cookieBanner.style.display = "none";
+        if(usersChoice == true){
+          localStorage.setItem('cookies', true);
+        }
+        else{
+          localStorage.setItem('cookies', false);
+        }
+      }
+
+      function showQrcode(src, imgId, old){
+        // src = 'assets/socialmedia/insta-code.png'
+        // old = assets/socialmedia/michi_pb.jpeg
+        // img = document.getElementById('insta1Img')
+        var src = "https://api.qrserver.com/v1/create-qr-code/?size=900x900&format=png&margin=0&data=http://insta.michivonah.ch/";
+        var image = document.getElementById(imgId).src;
+        if(image != src) document.getElementById(imgId).src = src;
+        else document.getElementById(imgId).src = old;
+      }
+
+      function sendWhatsapp(name, mail, subject, text){
+        var mail = mail.replaceAll('@', '%40');
+        var subject = subject.replaceAll(' ', '%20');
+        var text = text.replaceAll(' ', '%20');
+        var text = text.replaceAll('?', '%3F');
+        var text = text.replaceAll('!', '%21');
+        var whatsappUrl = "https://wa.me/41782471516?text=Name%3A%20" + name + "%0AE-Mail%3A%20" + mail + "%0ASubject%3A%20" + subject + "%0AMessage%3A%20" + text;
+        window.open(whatsappUrl);
+      }
+
+      function randomHomeImg(){
+        var homeImg = document.getElementById('homeImg');
+        var num = Math.floor(Math.random() * (4 - 1) + 1);
+        homeImg.src = "assets/bitmojis/home_" + num + ".png";
+      }
+
+      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";
+          }
+        }
+      });

manifest.json

@@ -10,21 +10,21 @@
   "display": "standalone",
   "icons": [
     {
-      "src": "https://michivonah.ch/icons/logo/favicon_128.png",
+      "src": "https://michivonah.ch/assets/logo/favicon_128.png",
       "sizes": "96x96"
     },
     {
-      "src": "https://michivonah.ch/icons/logo/favicon_256.png",
+      "src": "https://michivonah.ch/assets/logo/favicon_256.png",
       "sizes": "144x144",
       "type": "image/png"
     },
     {
-      "src": "https://michivonah.ch/icons/logo/favicon_256.png",
+      "src": "https://michivonah.ch/assets/logo/favicon_256.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "https://michivonah.ch/icons/logo/favicon_256.png",
+      "src": "https://michivonah.ch/assets/logo/favicon_256.png",
       "sizes": "256x256",
       "type": "image/png"
     }

style.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+
 html{scroll-behavior: smooth;}
 
 body{
@@ -254,7 +256,7 @@ body{
      text-decoration: none !important;
    }
 
-   #aboutSocial a:hover:nth-child(1){ color: #8a3ab9; }
+   #aboutSocial a:hover:nth-child(1){ color: #e4405f; }
 
    #aboutSocial a:hover:nth-child(2){ color: #1DA1F2; }
 
@@ -271,10 +273,14 @@ body{
      margin: auto;
    }
 
-   #socialSelection input[type=radio]{
+   #socialSelection{
-     display: none;
+     margin: 10px auto 0 auto;
    }
 
+   #socialSelection input[type=radio]{
+    display: none;
+  }
+
    #socialSelection label{
      font-size: 1.1rem;
      border: none;
@@ -623,6 +629,10 @@ body{
    }
 
    /* Contact Section */
+   #contact{
+    display: none;
+   }
+   
    #contact input{
      width: calc(100% - 20px);
      height: auto;
@@ -769,6 +779,10 @@ body{
      padding-bottom: 30px;
    }
 
+   #imprint{
+    display: none;
+   }
+
    #footerContent{
      width: calc(100% - 30px);
      height: auto;
@@ -806,55 +820,6 @@ body{
      border-radius: 50%;
    }
 
-
-   /* Privacy Banner */
-   #cookieBanner{
-     display: none; /* FLEX */
-     width: 100%;
-     height: auto;
-     min-height: 200px;
-     color: #fff;
-     background: var(--theme1);
-     font-size: 1rem;
-     flex-direction: row;
-     flex-wrap: nowrap;
-     justify-content: space-around;
-     position: fixed;
-     bottom: 0;
-     left: 0;
-   }
-
-   #cookieBanner div{
-     max-width: 50%;
-   }
-
-   #cookieIcon{
-     font-size: 6rem;
-     user-select: none;
-     margin: 0;
-   }
-
-   #cookieBanner button{
-     width: 30%;
-     min-width: 80px;
-     height: auto;
-     background: #F3AD61;
-     color: #6D4534;
-     border: 2px solid #F3AD61;
-     border-radius: 4px;
-     margin: 10px;
-     padding: 8px;
-     font-size: 14px;
-     font-weight: bold;
-     transition: var(--transition);
-   }
-
-   #cookieBanner button:hover{
-     background: #6D4534;
-     color: #F3AD61;
-     border-color: #6D4534;
-   }
-
    /* Scroll to the top button */
    #scroll-top{
      width: 40px;
@@ -950,7 +915,7 @@ body{
      font-style: normal;
    }
 
-   input, textarea{
+   input, textarea, button{
      outline: none;
    }