From a8753d42b28ceea75efcde54c5c82d398b355335 Mon Sep 17 00:00:00 2001
From: michivonah <info@michivonah.ch>
Date: Tue, 11 Mar 2025 21:09:37 +0100
Subject: [PATCH] implement contact me section

---
 i18n/de.toml                  |  1 +
 i18n/en.toml                  |  1 +
 layouts/_default/baseof.html  |  2 +
 layouts/partials/contact.html | 10 ++++
 static/main.js                | 19 +++++++-
 static/style.css              | 91 +++++++++++++++++++++++++++++++++++
 6 files changed, 123 insertions(+), 1 deletion(-)
 create mode 100644 i18n/de.toml
 create mode 100644 i18n/en.toml
 create mode 100644 layouts/partials/contact.html

diff --git a/i18n/de.toml b/i18n/de.toml
new file mode 100644
index 0000000..3878688
--- /dev/null
+++ b/i18n/de.toml
@@ -0,0 +1 @@
+contact-me = 'Kontaktiere mich'
\ No newline at end of file
diff --git a/i18n/en.toml b/i18n/en.toml
new file mode 100644
index 0000000..a4e2faa
--- /dev/null
+++ b/i18n/en.toml
@@ -0,0 +1 @@
+contact-me = 'Contact me'
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index dbfbff3..58599b8 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -11,6 +11,8 @@
 
         {{ partial "projects.html" . }}
     </div>
+
+    {{ partial "contact.html" . }}
 </div>
 
 {{ partial "scrollTop.html" . }}
diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html
new file mode 100644
index 0000000..3a4c1e3
--- /dev/null
+++ b/layouts/partials/contact.html
@@ -0,0 +1,10 @@
+<div id="contact" class="contact">
+    <div class="contact-title-wrapper">
+        <h1 class="contact-title">{{ T "contact-me" }}</h1>
+    </div>
+    <div>
+        {{ range .Site.Data.socialmedia }}
+        <a href="{{ .link }}" alt="{{ .name }}" title="{{ .name }}"><i class="{{ .icon }}"></i></a>
+        {{ end }}
+    </div>
+</div>
\ No newline at end of file
diff --git a/static/main.js b/static/main.js
index 445c9f1..f89d7b1 100644
--- a/static/main.js
+++ b/static/main.js
@@ -46,4 +46,21 @@ function scrollTopVisibilityUpdate(){
     const scrollTop = document.querySelector(".scroll-top");
     scrollTop.style.display = ((window.scrollY > 20) ? 'flex' : 'none');
     scrollTop.style.right = ((window.scrollY > 20) ? '0' : '-55px');
-}
\ No newline at end of file
+}
+
+// intersection observer for animations
+// credits: https://coolcssanimation.com/how-to-trigger-a-css-animation-on-scroll/
+const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      const actionObject = entry.target.querySelector('.contact-title');
+  
+      if (entry.isIntersecting) {
+        actionObject.classList.add('typewriter-animation');
+        return;
+      }
+  
+      actionObject.classList.remove('typewriter-animation');
+    });
+  });
+  
+  observer.observe(document.querySelector('.contact-title-wrapper'));
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index e2836fe..bbf2efb 100644
--- a/static/style.css
+++ b/static/style.css
@@ -192,6 +192,20 @@ nav.small img{
     letter-spacing: -0.6rem;
 }
 
+@media screen and (max-width:310px){
+    .hero h1{
+        font-size: 4rem;
+        letter-spacing: -0.4rem;
+    }
+}
+
+@media screen and (max-width:180px){
+    .hero h1{
+        font-size: 2.5rem;
+        letter-spacing: -0.3rem;
+    }
+}
+
 .hero h1 span{
     display: inline-block;
     animation: wave 2s ease-in-out infinite;
@@ -420,7 +434,84 @@ nav.small img{
     }
 }
 
+/* CONTACT */
+.contact{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    height: 100dvh;
+    background-image: url("assets/hero/bg_animated_4.svg");
+    background-size: cover;
+    background-repeat: repeat-x;
+    background-position: center;
+}
 
+.contact h1{
+    margin: inherit 20px;
+    font-size: clamp(1.5rem, 10vw, 6rem);
+    word-break: break-word;
+    overflow: hidden;
+    border-right: 0.15em solid var(--primary);
+    white-space: nowrap;
+    
+}
+
+@media (prefers-reduced-motion: no-preference){ /* Only runs when user did not disable animations */
+    .typewriter-animation{
+        animation: typing 2s steps(32, end), caret .75s step-end infinite; /* Typewriter effect: https://css-tricks.com/snippets/css/typewriter-effect/ */
+    }
+}
+
+@keyframes typing{ 
+    0%{
+        width: 0;
+    }
+
+    100%{
+        width: 100%;
+    }
+}
+
+@keyframes caret {
+    0%, 100%{
+        border-color: transparent;
+    }
+
+    50%{
+        border-color: var(--primary);
+    }
+}
+
+.contact div{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-content: center;
+    align-items: center;
+}
+
+@media screen and (max-width:330px){
+    .contact div{
+        flex-direction: column;
+    }
+}
+
+.contact a{
+    margin: 10px;
+    font-size: 3rem;
+    color: var(--color);
+    text-decoration: none;
+    transition: var(--baseTransition);
+}
+
+.contact a:hover{
+    margin: 10px 20px;
+    color: var(--color);
+    text-decoration: none;
+    transform: scale(1.8);
+}
 
 /* SCROLL TOP */
 .scroll-top{