implement contact me section

i18n/de.toml

@@ -0,0 +1 @@
+contact-me = 'Kontaktiere mich'

i18n/en.toml

@@ -0,0 +1 @@
+contact-me = 'Contact me'

layouts/_default/baseof.html

@@ -11,6 +11,8 @@
 
         {{ partial "projects.html" . }}
     </div>
+
+    {{ partial "contact.html" . }}
 </div>
 
 {{ partial "scrollTop.html" . }}

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>

static/main.js

@@ -47,3 +47,20 @@ function scrollTopVisibilityUpdate(){
     scrollTop.style.display = ((window.scrollY > 20) ? 'flex' : 'none');
     scrollTop.style.right = ((window.scrollY > 20) ? '0' : '-55px');
 }
+
+// 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'));

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{