From 3af8228c2aba1c42fd627fdc014ce1e5d3306d97 Mon Sep 17 00:00:00 2001
From: vaporvee <yannik@vaporvee.com>
Date: Thu, 1 Feb 2024 08:48:33 +0100
Subject: [PATCH] finished the homepage but not responsive yet

---
 public/github-mark.svg      | 10 ++++++++++
 src/components/Footer.astro | 14 ++++++++++++++
 src/components/Navbar.astro | 18 +++++++++++++-----
 src/layouts/Layout.astro    |  2 ++
 src/pages/index.astro       | 12 +++++++-----
 src/styles/home.scss        |  2 +-
 src/styles/main.scss        |  6 +++++-
 7 files changed, 52 insertions(+), 12 deletions(-)
 create mode 100644 public/github-mark.svg
 create mode 100644 src/components/Footer.astro

diff --git a/public/github-mark.svg b/public/github-mark.svg
new file mode 100644
index 0000000..5a310f0
--- /dev/null
+++ b/public/github-mark.svg
@@ -0,0 +1,10 @@
+<svg width="34" height="33" viewBox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7_111)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9493 0C7.5768 0 0 7.5625 0 16.9183C0 24.397 4.85471 30.7275 11.5895 32.968C12.4315 33.1365 12.7399 32.604 12.7399 32.1561C12.7399 31.7639 12.7122 30.4195 12.7122 29.0187C7.99728 30.0273 7.01545 27.0019 7.01545 27.0019C6.25773 25.0412 5.13504 24.5372 5.13504 24.5372C3.59186 23.5008 5.24745 23.5008 5.24745 23.5008C6.95924 23.6129 7.85747 25.2374 7.85747 25.2374C9.37255 27.8142 11.814 27.0861 12.7961 26.6379C12.9363 25.5454 13.3856 24.7892 13.8626 24.3691C10.1022 23.9769 6.14567 22.5204 6.14567 16.0218C6.14567 14.1732 6.81873 12.6607 7.88522 11.4843C7.71696 11.0643 7.12751 9.32731 8.05384 7.00253C8.05384 7.00253 9.48496 6.55428 12.7118 8.73916C14.0934 8.36882 15.5181 8.18043 16.9493 8.17884C18.3805 8.17884 19.8393 8.37512 21.1865 8.73916C24.4137 6.55428 25.8449 7.00253 25.8449 7.00253C26.7712 9.32731 26.1814 11.0643 26.0131 11.4843C27.1077 12.6607 27.753 14.1732 27.753 16.0218C27.753 22.5204 23.7965 23.9487 20.008 24.3691C20.6255 24.9012 21.1584 25.9095 21.1584 27.5062C21.1584 29.7749 21.1307 31.5958 21.1307 32.1558C21.1307 32.604 21.4394 33.1365 22.2811 32.9684C29.0159 30.7271 33.8706 24.397 33.8706 16.9183C33.8983 7.5625 26.2938 0 16.9493 0Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_7_111">
+<rect width="34" height="33" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..4e7468c
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,14 @@
+---
+const year = new Date().getFullYear();
+---
+
+<footer>&copy vaporvee 2021-{year}</footer>
+
+<style lang="scss">
+    footer {
+        display: inline-flexbox;
+        align-items: center;
+        text-align: center;
+        margin-top: -7vh;
+    }
+</style>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index b509d17..0a25f60 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -9,8 +9,8 @@ const routes = {
 ---
 
 <header>
-    <img class="logo" src="/favicon.svg" alt="Logo Icon" />
     <nav>
+        <a href="/"><img class="logo" src="/favicon.svg" alt="Logo Icon" /></a>
         {
             Object.entries(routes).map(([pageName, path]) => {
                 const isActive =
@@ -33,13 +33,19 @@ const routes = {
             })
         }
     </nav>
+    <a href="https://github.com/vaporvee"
+        ><img
+            src="/github-mark.svg"
+            alt="My GitHub account"
+            class="github"
+        /></a
+    >
 </header>
 
 <style lang="scss">
     nav {
-        margin-left: 2.5vw;
+        justify-self: flex-start;
         display: flex;
-        justify-content: center;
     }
     .navbar-entry {
         display: flex;
@@ -52,11 +58,13 @@ const routes = {
     header {
         padding-top: 2.5vh;
         padding-bottom: 2.5vh;
-        display: inline-flex;
+        margin-inline: 2.5vw;
+        display: flex;
+        justify-content: space-between;
         align-items: center;
     }
     .logo {
-        margin-left: 2.3vw;
+        margin-right: 2.5vw;
         width: 40px;
     }
     a {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 7b00757..c95ccf0 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -9,6 +9,7 @@ const { description } = Astro.props;
 import "../styles/main.scss";
 
 import Navbar from "../components/Navbar.astro";
+import Footer from "../components/Footer.astro";
 
 import { ViewTransitions } from "astro:transitions";
 ---
@@ -27,5 +28,6 @@ import { ViewTransitions } from "astro:transitions";
 	<body>
 		<Navbar />
 		<slot />
+		<Footer />
 	</body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 74e7035..7431e53 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -32,11 +32,13 @@ import "../styles/home.scss";
 				game developement.<br />
 				Currently i already work at a game studio and i also have my own
 				game side projects and tools.<br />
-				This website will mostly have docs, tutorials, and showcasing of
-				my projects.<br />
-				Maybe also some other stuff all around the creative process of game
-				developement or completely unrelated stuff like cooking recepies
-				;)
+				This website will mostly have <a href="/docs">docs</a>,
+				<a href="/tutorials">tutorials</a>, and showcasing of my
+				<a href="/projects">projects</a>. Maybe also some other stuff
+				all around the creative process of game developement or
+				completely unrelated stuff like cooking recepies in my <a
+					href="/blog">blog</a
+				> ;)
 			</p>
 		</div>
 	</main>
diff --git a/src/styles/home.scss b/src/styles/home.scss
index f5907aa..e2abbf5 100644
--- a/src/styles/home.scss
+++ b/src/styles/home.scss
@@ -11,7 +11,7 @@
 
 main {
     background-image: url("/diagonal_lines_home.png");
-    height: 75vh;
+    height: 73vh;
     margin-left: -1vw;
     margin-bottom: 13vh;
     width: 90.4vw;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 242ee4b..c11dbf8 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -24,10 +24,14 @@ h1 {
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
-    margin: 5vw;
+    margin: 4vw;
 }
 
 b {
     font-family: "Satoshi-Bold";
     color: $accent;
+}
+
+a {
+    color: $link;
 }
\ No newline at end of file