From ef65182c12dcc78d23dc26ee69d4adcbf1fb4351 Mon Sep 17 00:00:00 2001
From: Jonas_Jones <me@jonasjones.dev>
Date: Sat, 7 Jun 2025 22:16:34 +0200
Subject: [PATCH] updated footer

---
 src/components/Footer.svelte | 107 ++++++++++++++++++++++++++++-------
 1 file changed, 86 insertions(+), 21 deletions(-)
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index e368dd6..be3d913 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,26 +1,91 @@
+<head>
+    <!-- Include Font Awesome CDN -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+</head>
+
 <div class="footer">
-  <p>Website by Jonas_Jones 2021 - 2024</p>
+    <div class="footer-left">
+        <a href="https://github.com/JonasunderscoreJones" target="_blank" aria-label="github-link"><i class="fab fa-github"></i></a>
+        <a href="https://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg" target="_blank" aria-label="youtube-link"><i class="fab fa-youtube"></i></a>
+        <a href="https://discord.gg/V2EsuUVmWh" target="_blank" aria-label="discord-link"><i class="fab fa-discord"></i></a>
+        <a href="mailto:me@jonasjones.dev" target="_blank" aria-label="mail-link"><i class="fas fa-envelope"></i></a>
+    </div>
+
+    <p>Website by Jonas_Jones 2021 - <script>document.write(new Date().getFullYear());</script></p>
+
+    <div class="footer-right">
+        <a href="https://jonasjones.dev" class="footer-link" target="_blank">
+            Homepage
+            <i class="fas fa-external-link"></i>
+        </a>
+        <a href="https://blog.jonasjones.dev" class="footer-link" target="_blank">
+            Blog
+            <i class="fas fa-external-link"></i>
+        </a>
+        <a href="https://docs.jonasjones.dev" class="footer-link" target="_blank">
+            Docs
+            <i class="fas fa-external-link"></i>
+        </a>
+    </div>
 </div>
 
-<script>
-  //import main css file
-  import "../routes/+page.css";
-</script>
-
 <style>
-  .footer {
-    height: 1rem;
-    background-color: var(--footer-background-color);
-    color: var(--footer-font-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    padding-top: 0.25rem;
-    padding-bottom: 0.5rem;
-    font-size: 20px;
-  }
+    .footer {
+        height: 1rem;
+        background-color: black;
+        color: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: fixed;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
+        padding-top: 0.25rem;
+        padding-bottom: 0.5rem;
+        font-size: 20px;
+    }
+
+    .footer-left, .footer-right {
+        display: flex;
+        align-items: center;
+    }
+
+    .footer-left a, .footer-right a {
+        margin: 3px 10px;
+        display: flex;
+        align-items: center;
+        color: gray;
+        text-decoration: none;
+    }
+
+    .footer-left a:hover, .footer-right a:hover {
+        color: lightgray;
+    }
+
+    .footer-right {
+        position: fixed;
+        right: 10px; /* Keep the right section fixed */
+        bottom: 0;
+    }
+
+    .footer-left {
+        position: fixed;
+        left: 10px; /* Keep the left section fixed */
+        bottom: 0;
+    }
+
+    .footer-link i {
+        margin-left: 5px;
+        font-size: 15px;
+    }
+
+    @media (max-width: 1200px) {
+        .footer-left, .footer-right {
+            display: none;
+        }
+        .footer-left a, .footer-right a {
+            display: none;
+        }
+    }
 </style>
