src/Portfolio.Web/Components/Layout/FooterLinks.razor

@@ -0,0 +1,19 @@
+<footer>
+    <span class="title">
+        Portfolio von Leon Hoppe
+    </span>
+
+    <div class="socials">
+        <a href="https://www.instagram.com/leonh.23/">
+            <img src="/socials/instagram.png" alt="Instagram">
+        </a>
+
+        <a href="https://git.leon-hoppe.de/leon.hoppe/">
+            <img src="/socials/gitlab.png" alt="GitLab">
+        </a>
+
+        <a href="mailto://leon@ladenbau-hoppe.de">
+            <img src="/socials/mail.png" alt="Mail">
+        </a>
+    </div>
+</footer>

src/Portfolio.Web/Components/Layout/FooterLinks.razor.css

@@ -0,0 +1,30 @@
+footer {
+    display: flex;
+    margin-top: auto;
+    margin-bottom: 2rem;
+    padding-top: 5rem;
+    justify-content: space-between;
+    margin-inline: 12.5vw;
+}
+
+.title {
+    background: var(--gradient);
+    background-clip: text;
+    color: transparent;
+    user-select: none;
+    font-weight: 500;
+}
+
+a {
+    text-decoration: none;
+}
+
+.socials {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.socials a {
+    height: 25px;
+    display: flex;
+}

src/Portfolio.Web/Components/Layout/MainLayout.razor

@@ -2,10 +2,12 @@
 
 <main>
     <nav class="nav-box">
-        <NavMenu />
+        <Navigation />
     </nav>
 
     <article class="content">
         @Body
     </article>
+    
+    <FooterLinks />
 </main>

src/Portfolio.Web/Components/Layout/MainLayout.razor.css

@@ -1,9 +1,17 @@
 main {
     background-color: var(--background);
     min-height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .nav-box {
     width: 100%;
     position: sticky;
+    top: 0;
+}
+
+.content {
+    flex-grow: 1;
+    margin-inline: 12.5vw;
 }

src/Portfolio.Web/Components/Layout/Navigation.razor.css

@@ -8,7 +8,7 @@
     padding-inline: 0.5rem;
 }
 
-.links, .socials {
+.links {
     display: flex;
     gap: 1rem;
 }
@@ -18,8 +18,14 @@
     font-size: 1.25rem;
 }
 
+.socials {
+    display: flex;
+    gap: 0.75rem;
+}
+
 .socials a {
-    height: 32px;
+    height: 25px;
+    display: flex;
 }
 
 .links ::deep a {