From 1f4af3a112c858d5a7fc2592244183a0446d4c19 Mon Sep 17 00:00:00 2001
From: michivonah <info@michivonah.ch>
Date: Sun, 9 Mar 2025 17:25:58 +0100
Subject: [PATCH] implement hero section

---
 layouts/_default/baseof.html         | 10 +++-
 layouts/partials/hero.html           | 22 +++++++
 static/assets/hero/bg_animated_1.svg | 31 ++++++++++
 static/assets/hero/bg_animated_2.svg | 31 ++++++++++
 static/assets/hero/bg_animated_3.svg | 31 ++++++++++
 static/assets/hero/bg_animated_4.svg | 31 ++++++++++
 static/assets/hero/bg_grey.svg       | 12 ++++
 static/style.css                     | 87 +++++++++++++++++++++++++++-
 8 files changed, 251 insertions(+), 4 deletions(-)
 create mode 100644 layouts/partials/hero.html
 create mode 100644 static/assets/hero/bg_animated_1.svg
 create mode 100644 static/assets/hero/bg_animated_2.svg
 create mode 100644 static/assets/hero/bg_animated_3.svg
 create mode 100644 static/assets/hero/bg_animated_4.svg
 create mode 100644 static/assets/hero/bg_grey.svg

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index e0dc3e2..bebc332 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -2,9 +2,13 @@
 
 {{ partial "navbar.html" . }}
 
-<div class="content inner-width">
-    {{ block "main" . }}
-    {{ end }}
+<div class="content">
+    {{ partial "hero.html" . }}
+
+    <div class="inner-width">
+        {{ block "main" . }}
+        {{ end }}
+    </div>
 </div>
 
 {{ partial "scrollTop.html" . }}
diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html
new file mode 100644
index 0000000..cdf27f8
--- /dev/null
+++ b/layouts/partials/hero.html
@@ -0,0 +1,22 @@
+<div class="hero">
+    <h1>
+        <span class="name-part">
+            <span>M</span>
+            <span>i</span>
+            <span>c</span>
+            <span>h</span>
+            <span>i</span>
+            <span> </span>
+        </span>
+        <span class="name-part">
+            <span>v</span>
+            <span>o</span>
+            <span>n</span>
+            <span> </span>
+            <span>A</span>
+            <span>h</span>
+        </span>
+    </h1>
+    <p>Informatiker, Tech-Enthusiast & Achterbahn-Fan</p>
+    <a href="#about"><i class="ai-chevron-down"></i></a>
+</div>
\ No newline at end of file
diff --git a/static/assets/hero/bg_animated_1.svg b/static/assets/hero/bg_animated_1.svg
new file mode 100644
index 0000000..3216707
--- /dev/null
+++ b/static/assets/hero/bg_animated_1.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1440" height="560" preserveAspectRatio="none" viewBox="0 0 1440 560"><g mask="url(&quot;#SvgjsMask1020&quot;)" fill="none"><path d="M771.181,286.777C815.51,288.393,859.16,270.888,883.461,233.779C910.266,192.845,921.569,138.571,895.24,97.329C870.215,58.13,817.68,58.701,771.181,57.902C722.51,57.065,664.192,50.977,639.509,92.933C614.671,135.152,644.717,185.557,672.241,226.077C695.543,260.381,729.739,285.266,771.181,286.777" fill="rgba(22, 22, 22, 0.4)" class="triangle-float1"></path><path d="M511.804,210.365C530.026,210.546,550.501,207.014,558.936,190.861C567.026,175.368,555.673,158.503,546.726,143.488C538.098,129.008,528.655,112.169,511.804,111.763C494.529,111.347,482.539,126.8,473.841,141.731C465.065,156.797,457.824,174.686,466.263,189.943C474.894,205.546,493.974,210.188,511.804,210.365" fill="rgba(22, 22, 22, 0.4)" class="triangle-float1"></path><path d="M265.497,439.58C320.363,442.129,381.994,433.927,409.804,386.563C437.84,338.815,417.158,279.502,386.6,233.328C359.517,192.404,314.565,167.757,265.497,168.508C217.74,169.239,175.139,195.933,150.65,236.94C125.474,279.098,118.477,331.432,142.688,374.151C167.201,417.402,215.837,437.273,265.497,439.58" fill="rgba(22, 22, 22, 0.4)" class="triangle-float3"></path><path d="M874.349,501.827C908.674,503.525,944.344,489.272,960.438,458.906C975.802,429.917,961.273,396.901,945.084,368.364C928.594,339.296,907.713,309.081,874.349,307.151C838.332,305.067,804.089,327.047,787.857,359.266C772.931,388.892,784.639,422.7,801.846,451.062C818.248,478.096,842.767,500.265,874.349,501.827" fill="rgba(22, 22, 22, 0.4)" class="triangle-float2"></path></g><defs><mask id="SvgjsMask1020"><rect width="1440" height="560" fill="#ffffff"></rect></mask><style>
+                @keyframes float1 {
+                    0%{transform: translate(0, 0)}
+                    50%{transform: translate(-10px, 0)}
+                    100%{transform: translate(0, 0)}
+                }
+
+                .triangle-float1 {
+                    animation: float1 5s infinite;
+                }
+
+                @keyframes float2 {
+                    0%{transform: translate(0, 0)}
+                    50%{transform: translate(-5px, -5px)}
+                    100%{transform: translate(0, 0)}
+                }
+
+                .triangle-float2 {
+                    animation: float2 4s infinite;
+                }
+
+                @keyframes float3 {
+                    0%{transform: translate(0, 0)}
+                    50%{transform: translate(0, -10px)}
+                    100%{transform: translate(0, 0)}
+                }
+
+                .triangle-float3 {
+                    animation: float3 6s infinite;
+                }
+            </style></defs></svg>
\ No newline at end of file
diff --git a/static/assets/hero/bg_animated_2.svg b/static/assets/hero/bg_animated_2.svg
new file mode 100644
index 0000000..cee76d6
--- /dev/null
+++ b/static/assets/hero/bg_animated_2.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1920" height="1080" preserveAspectRatio="none" viewBox="0 0 1920 1080"><g mask="url(&quot;#SvgjsMask1038&quot;)" fill="none"><path d="M264.229,1251.688C328.952,1253.113,399.643,1240.839,432.816,1185.245C466.581,1128.658,447.256,1058.317,413.316,1001.835C380.571,947.342,327.698,908.333,264.229,904.685C193.569,900.623,117.282,921.345,82.172,982.8C47.259,1043.911,68.568,1119.815,108.027,1178.094C142.613,1229.176,202.555,1250.33,264.229,1251.688" fill="rgba(22, 22, 22, 0.4)" class="triangle-float1"></path><path d="M1343.364,1146.188C1441.665,1142.618,1521.923,1071.655,1565.447,983.442C1604.184,904.93,1588.954,814.512,1544.108,739.323C1500.515,666.235,1428.29,616.556,1343.364,611.098C1247.131,604.914,1144.694,629.312,1092.332,710.289C1036.002,797.402,1039.693,910.76,1091.464,1000.657C1143.333,1090.724,1239.497,1149.96,1343.364,1146.188" fill="rgba(22, 22, 22, 0.4)" class="triangle-float1"></path><path d="M569.017,591.383C669.913,594.446,748.53,510.303,793.649,420.006C833.909,339.435,824.879,246.593,780.451,168.243C735.332,88.674,660.458,26.197,569.017,23.857C473.793,21.421,382.427,72.675,337.975,156.922C295.997,236.48,324.595,327.625,366.831,407.047C412.727,493.351,471.313,588.416,569.017,591.383" fill="rgba(22, 22, 22, 0.4)" class="triangle-float1"></path><path d="M1151.575,418.656C1207.246,417.246,1263.251,400.972,1293.509,354.22C1326.417,303.373,1333.255,237.318,1302.831,184.947C1272.529,132.786,1211.889,108.807,1151.575,109.901C1093.279,110.959,1040.09,140.608,1009.535,190.267C977.341,242.59,964.176,309.569,996.621,361.737C1027.767,411.818,1092.618,420.149,1151.575,418.656" fill="rgba(22, 22, 22, 0.4)" class="triangle-float2"></path></g><defs><mask id="SvgjsMask1038"><rect width="1920" height="1080" fill="#ffffff"></rect></mask><style>
+                @keyframes float1 {
+                    0%{transform: translate(0, 0)}
+                    50%{transform: translate(-10px, 0)}
+                    100%{transform: translate(0, 0)}
+                }
+
+                .triangle-float1 {
+                    animation: float1 5s infinite;
+                }
+
+                @keyframes float2 {
+                    0%{transform: translate(0, 0)}
+                    50%{transform: translate(-5px, -5px)}
+                    100%{transform: translate(0, 0)}
+                }
+
+                .triangle-float2 {
+                    animation: float2 4s infinite;
+                }
+
+                @keyframes float3 {
+                    0%{transform: translate(0, 0)}
+                    50%{transform: translate(0, -10px)}
+                    100%{transform: translate(0, 0)}
+                }
+
+                .triangle-float3 {
+                    animation: float3 6s infinite;
+                }
+            </style></defs></svg>
\ No newline at end of file
diff --git a/static/assets/hero/bg_animated_3.svg b/static/assets/hero/bg_animated_3.svg
new file mode 100644
index 0000000..b4fef22
--- /dev/null
+++ b/static/assets/hero/bg_animated_3.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1920" height="1080" preserveAspectRatio="none" viewBox="0 0 1920 1080"><g mask="url(&quot;#SvgjsMask1046&quot;)" fill="none"><path d="M1224.156,1058.12C1262.517,1058.259,1299.188,1041.578,1319.727,1009.179C1341.84,974.298,1350.292,928.83,1328.265,893.894C1307.257,860.574,1263.486,855.421,1224.156,857.599C1189.262,859.531,1156.801,874.785,1138.269,904.414C1118.486,936.043,1111.58,975.924,1129.778,1008.491C1148.361,1041.747,1186.06,1057.982,1224.156,1058.12" fill="rgba(22, 22, 22, 0.4)" class="triangle-float2"></path><path d="M1028.184,384.367C1060.123,385.106,1090.994,370.492,1107.55,343.168C1124.705,314.856,1126.344,278.892,1109.281,250.524C1092.685,222.934,1060.38,211.472,1028.184,211.219C995.46,210.961,961.059,220.804,944.845,249.23C928.743,277.46,937.876,311.973,954.935,339.635C971.03,365.734,997.529,383.658,1028.184,384.367" fill="rgba(22, 22, 22, 0.4)" class="triangle-float2"></path><path d="M776.568,820.399C829.975,817.345,871.243,777.124,895.516,729.454C917.432,686.413,915.933,636.088,891.685,594.317C867.541,552.726,824.592,527.089,776.568,524.546C723.269,521.724,667.593,536.341,638.207,580.897C605.989,629.747,602.198,693.882,631.47,744.552C660.73,795.202,718.169,823.738,776.568,820.399" fill="rgba(22, 22, 22, 0.4)" class="triangle-float1"></path><path d="M1537.468,782.473C1637.907,782.337,1718.82,706.214,1764.617,616.824C1806.329,535.407,1793.164,443.397,1753.393,361.014C1706.096,263.041,1646.232,148.784,1537.468,146.296C1426.556,143.759,1352.087,250.883,1303.724,350.727C1262.176,436.502,1263.874,533.627,1309.25,617.44C1357.154,705.924,1436.849,782.609,1537.468,782.473" fill="rgba(22, 22, 22, 0.4)" class="triangle-float2"></path></g><defs><mask id="SvgjsMask1046"><rect width="1920" height="1080" fill="#ffffff"></rect></mask><style>
+                @keyframes float1 {
+                    0%{transform: translate(0, 0)}
+                    50%{transform: translate(-10px, 0)}
+                    100%{transform: translate(0, 0)}
+                }
+
+                .triangle-float1 {
+                    animation: float1 5s infinite;
+                }
+
+                @keyframes float2 {
+                    0%{transform: translate(0, 0)}
+                    50%{transform: translate(-5px, -5px)}
+                    100%{transform: translate(0, 0)}
+                }
+
+                .triangle-float2 {
+                    animation: float2 4s infinite;
+                }
+
+                @keyframes float3 {
+                    0%{transform: translate(0, 0)}
+                    50%{transform: translate(0, -10px)}
+                    100%{transform: translate(0, 0)}
+                }
+
+                .triangle-float3 {
+                    animation: float3 6s infinite;
+                }
+            </style></defs></svg>
\ No newline at end of file
diff --git a/static/assets/hero/bg_animated_4.svg b/static/assets/hero/bg_animated_4.svg
new file mode 100644
index 0000000..4639d6d
--- /dev/null
+++ b/static/assets/hero/bg_animated_4.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1920" height="1080" preserveAspectRatio="none" viewBox="0 0 1920 1080"><g mask="url(&quot;#SvgjsMask1050&quot;)" fill="none"><path d="M151.597,367.741C237.543,366.045,326.768,343.799,371.69,270.508C418.369,194.35,409.817,97.492,364.374,20.59C319.746,-54.932,239.266,-105.013,151.597,-101.946C68.495,-99.039,6.837,-36.114,-36.869,34.626C-83.699,110.423,-127.949,201.957,-84.076,279.503C-39.804,357.753,61.709,369.515,151.597,367.741" fill="rgba(255, 255, 255, 0.2)" class="triangle-float1"></path><path d="M1111.864,556.519C1209.195,560.554,1322.077,553.236,1369.886,468.36C1417.231,384.308,1361.142,286.784,1309.804,205.11C1262.9,130.49,1200,57.553,1111.864,57.869C1024.122,58.183,959.939,130.362,916.364,206.52C873.163,282.025,845.995,372.453,888.416,448.399C931.663,525.824,1023.255,552.845,1111.864,556.519" fill="rgba(255, 255, 255, 0.2)" class="triangle-float2"></path><path d="M597.074,1280.629C676.415,1280.522,754.8,1240.279,788.831,1168.607C819.509,1103.996,778.465,1035.76,742.769,973.78C706.972,911.625,668.519,841.992,597.074,835.654C516.698,828.524,438.849,873.37,398.483,943.24C358.098,1013.143,363.467,1099.555,404.418,1169.127C444.758,1237.662,517.548,1280.736,597.074,1280.629" fill="rgba(255, 255, 255, 0.2)" class="triangle-float3"></path><path d="M1826.938,711.345C1901.09,709.026,1958.159,652.324,1993.195,586.93C2026.054,525.599,2033.421,452.065,1997.907,392.232C1963.056,333.516,1895.195,305.043,1826.938,306.82C1761.837,308.515,1705.691,345.812,1670.722,400.75C1632.487,460.818,1609.649,534.31,1641.643,597.922C1676.518,667.263,1749.359,713.771,1826.938,711.345" fill="rgba(255, 255, 255, 0.2)" class="triangle-float2"></path></g><defs><mask id="SvgjsMask1050"><rect width="1920" height="1080" fill="#ffffff"></rect></mask><style>
+                @keyframes float1 {
+                    0%{transform: translate(0, 0)}
+                    50%{transform: translate(-10px, 0)}
+                    100%{transform: translate(0, 0)}
+                }
+
+                .triangle-float1 {
+                    animation: float1 5s infinite;
+                }
+
+                @keyframes float2 {
+                    0%{transform: translate(0, 0)}
+                    50%{transform: translate(-5px, -5px)}
+                    100%{transform: translate(0, 0)}
+                }
+
+                .triangle-float2 {
+                    animation: float2 4s infinite;
+                }
+
+                @keyframes float3 {
+                    0%{transform: translate(0, 0)}
+                    50%{transform: translate(0, -10px)}
+                    100%{transform: translate(0, 0)}
+                }
+
+                .triangle-float3 {
+                    animation: float3 6s infinite;
+                }
+            </style></defs></svg>
\ No newline at end of file
diff --git a/static/assets/hero/bg_grey.svg b/static/assets/hero/bg_grey.svg
new file mode 100644
index 0000000..157d407
--- /dev/null
+++ b/static/assets/hero/bg_grey.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="1440" height="560" preserveAspectRatio="none" viewBox="0 0 1440 560">
+    <g mask="url(&quot;#SvgjsMask1069&quot;)" fill="none">
+        <rect width="1440" height="560" x="0" y="0" fill="rgba(24, 24, 24, 1)"></rect>
+        <path d="M0,541.185C96.86,515.458,173.026,452.462,264.575,411.687C377.248,361.504,532.765,377.43,599.938,273.983C666.378,171.665,617.158,33.777,586.677,-84.351C558.726,-192.672,495.819,-282.544,432.531,-374.79C361.174,-478.796,317.189,-634.878,193.176,-657.896C66.647,-681.381,-23.088,-532.111,-141.324,-481.304C-240.532,-438.674,-354.511,-445.446,-443.513,-384.306C-550.166,-311.041,-677.427,-228.122,-696.239,-100.104C-715.05,27.906,-591.347,127.834,-535.954,244.762C-481.538,359.625,-484.716,519.652,-373.493,581.167C-261.661,643.019,-123.514,573.992,0,541.185" fill="#101010"></path>
+        <path d="M1440 1201.835C1558.733 1204.279 1607.348 1039.531 1711.466 982.409 1827.6770000000001 918.652 2011.778 966.136 2078.44 851.566 2143.458 739.822 2032.466 605.057 2004.462 478.843 1978.964 363.924 2004.449 226.265 1921.2269999999999 143.014 1838.34 60.09800000000001 1702.335 79.38400000000001 1586.575 60.81 1485.968 44.66700000000003 1388.1970000000001 24.458999999999946 1287.715 41.365999999999985 1177.188 59.96300000000002 1063.464 86.27699999999999 981.4159999999999 162.63400000000001 895.203 242.86700000000002 851.728 356.845 825.382 471.631 797.309 593.942 753.813 737.7139999999999 825.835 840.48 898.761 944.5350000000001 1066.108 906.942 1175.624 971.3779999999999 1278.467 1031.888 1320.701 1199.379 1440 1201.835" fill="#202020"></path>
+    </g>
+    <defs>
+        <mask id="SvgjsMask1069">
+            <rect width="1440" height="560" fill="#ffffff"></rect>
+        </mask>
+    </defs>
+</svg>
diff --git a/static/style.css b/static/style.css
index 0702d46..d2a426e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -168,4 +168,89 @@ nav.small img{
         background: inherit;
         padding: inherit;
     }
-}
\ No newline at end of file
+}
+
+/* HERO */
+.hero{
+    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;
+}
+
+.hero h1{
+    margin: 0 20px;
+    font-size: 6rem;
+    transition: var(--baseTransition);
+    letter-spacing: -0.6rem;
+}
+
+.hero h1 span{
+    display: inline-block;
+    animation: wave 2s ease-in-out infinite;
+    animation-delay: calc(0.1s * (var(--i) - 1));
+}
+
+.hero h1 span .name-part{
+    white-space: nowrap;
+    display: block;
+}
+
+.hero h1 span:nth-child(1) { --i: 1; }
+.hero h1 span:nth-child(2) { --i: 2; }
+.hero h1 span:nth-child(3) { --i: 3; }
+.hero h1 span:nth-child(4) { --i: 4; }
+.hero h1 span:nth-child(5) { --i: 5; }
+.hero h1 span:nth-child(6) { --i: 6; }
+.hero h1 span:nth-child(7) { --i: 7; }
+.hero h1 span:nth-child(8) { --i: 8; }
+.hero h1 span:nth-child(9) { --i: 9; }
+.hero h1 span:nth-child(10) { --i: 10; }
+.hero h1 span:nth-child(11) { --i: 11; }
+.hero h1 span:nth-child(12) { --i: 12; }
+.hero h1 span:nth-child(13) { --i: 13; }
+.hero h1 span:nth-child(14) { --i: 14; }
+
+@keyframes wave{
+    0%, 100%{
+        transform: translateY(0);
+    }
+    50%{
+        transform: translateY(-20px);
+    }
+  }
+
+.hero p{
+    margin: 0 20px;
+    font-size: 2rem;
+}
+
+.hero a{
+    margin: 60px 0 0 0;
+    color: var(--color);
+    text-decoration: none;
+    font-size: 3rem;
+    padding: 5px 15px;
+    border-radius: 50%;
+    transition: var(--baseTransition);
+    animation: scrollHint 2000ms infinite;
+}
+
+.hero a:hover{
+    filter: drop-shadow(0 0 1.1rem var(--primary));
+}
+
+@keyframes scrollHint{
+    0%, 100%{
+        transform: translateY(0%);
+    }
+    40%{
+        transform: translateY(10%);
+    }
+  }
\ No newline at end of file