diff --git a/CNAME b/CNAME deleted file mode 100644 index 0d9300c..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -michivonah.ch \ No newline at end of file diff --git a/_headers b/_headers new file mode 100644 index 0000000..8698549 --- /dev/null +++ b/_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: * \ No newline at end of file diff --git a/assets/logo/logo_blue_bold.svg b/assets/logo/logo_blue_bold.svg new file mode 100644 index 0000000..96d21f5 --- /dev/null +++ b/assets/logo/logo_blue_bold.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + diff --git a/assets/logo/logo_blue_white_text.svg b/assets/logo/logo_blue_white_text.svg new file mode 100644 index 0000000..80345f7 --- /dev/null +++ b/assets/logo/logo_blue_white_text.svg @@ -0,0 +1,31 @@ + + + + + + + + + Michi + + + diff --git a/assets/logo/logo_mail.svg b/assets/logo/logo_mail.svg new file mode 100644 index 0000000..d9d3d15 --- /dev/null +++ b/assets/logo/logo_mail.svg @@ -0,0 +1,19 @@ + + + + + + + + + + diff --git a/assets/projects/3d-print-calculator-logo.jpg b/assets/projects/3d-print-calculator-logo.jpg new file mode 100644 index 0000000..8f7d921 Binary files /dev/null and b/assets/projects/3d-print-calculator-logo.jpg differ diff --git a/assets/projects/ava-website.jpg b/assets/projects/ava-website.jpg new file mode 100644 index 0000000..4418eca Binary files /dev/null and b/assets/projects/ava-website.jpg differ diff --git a/assets/projects/ava-website.png b/assets/projects/ava-website.png new file mode 100644 index 0000000..7f40656 Binary files /dev/null and b/assets/projects/ava-website.png differ diff --git a/assets/projects/ep-alerts.jpg b/assets/projects/ep-alerts.jpg new file mode 100644 index 0000000..4e4822e Binary files /dev/null and b/assets/projects/ep-alerts.jpg differ diff --git a/assets/projects/ep-planner-logo.png b/assets/projects/ep-planner-logo.png new file mode 100644 index 0000000..be87fc0 Binary files /dev/null and b/assets/projects/ep-planner-logo.png differ diff --git a/assets/projects/ep-tagesplanner-icon.jpg b/assets/projects/ep-tagesplanner-icon.jpg new file mode 100644 index 0000000..c13c752 Binary files /dev/null and b/assets/projects/ep-tagesplanner-icon.jpg differ diff --git a/assets/projects/jassen.jpg b/assets/projects/jassen.jpg new file mode 100644 index 0000000..26c5295 Binary files /dev/null and b/assets/projects/jassen.jpg differ diff --git a/assets/projects/jassen.png b/assets/projects/jassen.png new file mode 100644 index 0000000..0b9ad3a Binary files /dev/null and b/assets/projects/jassen.png differ diff --git a/assets/projects/math-tools.png b/assets/projects/math-tools.png new file mode 100644 index 0000000..7ebbdcb Binary files /dev/null and b/assets/projects/math-tools.png differ diff --git a/assets/projects/pw-generator.jpg b/assets/projects/pw-generator.jpg new file mode 100644 index 0000000..77c0994 Binary files /dev/null and b/assets/projects/pw-generator.jpg differ diff --git a/assets/socialmedia/img14.jpeg b/assets/socialmedia/img14.jpeg index 39d4785..f4ed879 100644 Binary files a/assets/socialmedia/img14.jpeg and b/assets/socialmedia/img14.jpeg differ diff --git a/assets/socialmedia/img15.jpeg b/assets/socialmedia/img15.jpeg index 9a0590b..440c20d 100644 Binary files a/assets/socialmedia/img15.jpeg and b/assets/socialmedia/img15.jpeg differ diff --git a/assets/socialmedia/img20.jpg b/assets/socialmedia/img20.jpg index 964cf58..7d33072 100644 Binary files a/assets/socialmedia/img20.jpg and b/assets/socialmedia/img20.jpg differ diff --git a/assets/socialmedia/img7.jpeg b/assets/socialmedia/img7.jpeg index 064746b..d5b5703 100644 Binary files a/assets/socialmedia/img7.jpeg and b/assets/socialmedia/img7.jpeg differ diff --git a/index.html b/index.html index 1d7612e..afd61d6 100644 --- a/index.html +++ b/index.html @@ -12,11 +12,11 @@ - - + - - + + + @@ -45,9 +45,7 @@ - - - + @@ -69,7 +67,7 @@ Socialmedia Projects FAQ - Contact me + @@ -92,8 +90,8 @@

About me

-

Hi, my name is Michi von Ah and I'm loading... years old. I'm interested in smartphones, computers and electromobility (mainly Tesla). In my free time I like to be on the computer and program something (for example this website), go for a walk or bake a cake. I also like to listen to music and podcasts. 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!

-

Funfact: This website consists of a total of just over 1′827 lines of code.

+

Hi, my name is Michi von Ah and I'm loading... years old. I'm interested in smartphones, computers and electromobility (mainly Tesla). In my free time I like to be on the computer and program something (for example this website), go for a walk or bake a cake. I also like to listen to music and podcasts. 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!

+

Funfact: This website consists of a total of just over 1′829 lines of code.

@@ -116,10 +114,10 @@

Click on the tabs to switch between them.

- + - + @@ -137,8 +135,8 @@

Instagram @michivonah

    -
  • 200+ Followers
    • -
  • 10+ Posts
    • +
  • 250+ Followers
    • +
  • 15+ Posts
  • Lifestyle, Travel & me
@@ -155,10 +153,10 @@

Instagram @vompictures

    -
  • 20+ Followers
    • -
  • 20+ Posts
    • -
  • 280+ Likes (in total)
    • -
  • 13+ Likes (average per post)
    • +
  • 50+ Followers
    • +
  • 35+ Posts
    • +
  • 480+ Likes (in total)
    • +
  • 14+ Likes (average per post)
  • Photography, Nature, Switzerland
@@ -201,9 +199,10 @@

GitHub @michivonah

    -
  • 20+ public repos
    • -
  • Languages: HTML, CSS & JavaScript
    • -
  • 1′360+ Commits
    • +
  • 45+ public repos
    • +
  • Languages: HTML, CSS, JavaScript, Python, Go, Docker & Bash
    • +
  • Technologies: Docker & Git
    • +
  • 1′800+ Commits
@@ -233,30 +232,51 @@
Michi's Escape Room Logo

Michi's Escape Room

-

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 here . If you want to play it, click the button below. Good luck.

- +

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 here . If you want to play it, click the button below. Good luck.

+
- News App Logo -

N3WS App

-

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.

- + Jassen by Michi +

Jassen

+

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.

+ +
+ +
+ Themepark Alerts +

Themepark Alerts

+

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.

+
- Password Generator Logo -

Password Generator

-

I‘ve programmed a simple and minimalistic password generator. You can choose from different password types and copy the password afterwards.

- + Armin von Ah GmbH Logo +

Website arminvonahgmbh.ch

+

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.

+
- Bitmoji -

Michi′s Blog

-

I have created a blog with Notion. There I write small texts from time to time. The blog is written in German.

- + Password Generator Logo +

Password Generator

+

I‘ve programmed a simple and minimalistic password generator. You can choose from different password types and copy the password afterwards.

+ +
+ +
+ EP-Tagesplanner Logo +

EP-Tagesplanner

+

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 here .

+ +
+ +
+ 3D Print Cost Calculator +

3D Print Cost Calculator

+

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.

+
@@ -283,7 +303,7 @@

Which countries would you like to visit?

-

I would love to visit many countries and places like Sydney, California, Las Vegas, Los Angeles and Dublin.

+

I would love to visit many countries and cities like Norway, Iceland, Ireland, California, Las Vegas, Los Angeles and Amsterdam.

@@ -317,21 +337,14 @@
-
-

Imprint

-

Michael von Ah

-

Obwalden, Switzerland

-

info@michivonah.ch

-

078 247 15 16 (for messages, don′t use for calling)

-
- -

© 2022

+

© 2024

-
-
-

🍪

-
-
-

Hey, this site uses cookies!

-

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.

- - -
-
-
- - - - - diff --git a/main.js b/main.js new file mode 100644 index 0000000..4b49664 --- /dev/null +++ b/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"; + } + } + }); \ No newline at end of file diff --git a/manifest.json b/manifest.json index 6f14ac7..4ea9f49 100644 --- a/manifest.json +++ b/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" } diff --git a/style.css b/style.css index 82b734d..3bc81f9 100644 --- a/style.css +++ b/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]{ - display: none; + #socialSelection{ + 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; }