From 442a398d2ea890c9ac2bf7cfbb4c47f9e7070542 Mon Sep 17 00:00:00 2001
From: Leon Hoppe <leon@ladenbau-hoppe.de>
Date: Tue, 21 Jan 2025 16:04:25 +0100
Subject: [PATCH] Added footer section

---
 .../Components/Layout/FooterLinks.razor       | 19 ++++++++++++
 .../Components/Layout/FooterLinks.razor.css   | 30 +++++++++++++++++++
 .../Components/Layout/MainLayout.razor        |  4 ++-
 .../Components/Layout/MainLayout.razor.css    |  8 +++++
 .../{NavMenu.razor => Navigation.razor}       |  0
 ...NavMenu.razor.css => Navigation.razor.css} | 10 +++++--
 6 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 src/Portfolio.Web/Components/Layout/FooterLinks.razor
 create mode 100644 src/Portfolio.Web/Components/Layout/FooterLinks.razor.css
 rename src/Portfolio.Web/Components/Layout/{NavMenu.razor => Navigation.razor} (100%)
 rename src/Portfolio.Web/Components/Layout/{NavMenu.razor.css => Navigation.razor.css} (90%)

diff --git a/src/Portfolio.Web/Components/Layout/FooterLinks.razor b/src/Portfolio.Web/Components/Layout/FooterLinks.razor
new file mode 100644
index 0000000..03ffba1
--- /dev/null
+++ b/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>
diff --git a/src/Portfolio.Web/Components/Layout/FooterLinks.razor.css b/src/Portfolio.Web/Components/Layout/FooterLinks.razor.css
new file mode 100644
index 0000000..dff7425
--- /dev/null
+++ b/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;
+}
diff --git a/src/Portfolio.Web/Components/Layout/MainLayout.razor b/src/Portfolio.Web/Components/Layout/MainLayout.razor
index fb2f4a0..1b11967 100644
--- a/src/Portfolio.Web/Components/Layout/MainLayout.razor
+++ b/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>
\ No newline at end of file
diff --git a/src/Portfolio.Web/Components/Layout/MainLayout.razor.css b/src/Portfolio.Web/Components/Layout/MainLayout.razor.css
index 84243ae..9e6e6ae 100644
--- a/src/Portfolio.Web/Components/Layout/MainLayout.razor.css
+++ b/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;
 }
diff --git a/src/Portfolio.Web/Components/Layout/NavMenu.razor b/src/Portfolio.Web/Components/Layout/Navigation.razor
similarity index 100%
rename from src/Portfolio.Web/Components/Layout/NavMenu.razor
rename to src/Portfolio.Web/Components/Layout/Navigation.razor
diff --git a/src/Portfolio.Web/Components/Layout/NavMenu.razor.css b/src/Portfolio.Web/Components/Layout/Navigation.razor.css
similarity index 90%
rename from src/Portfolio.Web/Components/Layout/NavMenu.razor.css
rename to src/Portfolio.Web/Components/Layout/Navigation.razor.css
index 038a940..407a864 100644
--- a/src/Portfolio.Web/Components/Layout/NavMenu.razor.css
+++ b/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 {