Merge pull request #4 from vaporvee/rewrite

Rewrite
2024-02-01 13:02:30 +01:00
parent 5fc0d4ac9f 28460622f4
commit 04213c7baf
33 changed files with 4302 additions and 1834 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 # build output
 dist/
+
 # generated types
 .astro/

@@ -12,7 +13,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*

-
 # environment variables
 .env
 .env.production
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +0,0 @@
-{
-    "editor.formatOnSave": false
-}
--- a/README.md
+++ b/README.md
@@ -1,4 +1,54 @@
-# My personal website
-currently in wip mode because it gets rewritten<br>
-Its made with astro and gets built and hosted by netlify<br>
-and yeah i spelled init wrong
+# Astro Starter Kit: Basics
+
+```sh
+npm create astro@latest -- --template basics
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   │   └── Card.astro
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,4 +1,9 @@
 import { defineConfig } from 'astro/config';
+import minify from 'astro-min';
+
+import metaTags from "astro-meta-tags";

 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  integrations: [minify(), metaTags()]
+});
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "",
+  "name": "vaporvees-website",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
@@ -10,7 +10,10 @@
    "astro": "astro"
  },
  "dependencies": {
-    "astro": "^2.4.1",
-    "sass": "^1.62.1"
+    "astro": "^4.2.6",
+    "astro-meta-tags": "^0.2.1",
+    "astro-min": "^1.1.0-dev.4",
+    "npx": "^3.0.0",
+    "sass": "^1.70.0"
  }
 }
--- a/public/diagonal_lines_home.png
+++ b/public/diagonal_lines_home.png
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,13 @@
+<svg width="60" height="50" viewBox="0 0 60 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3_6)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.3628 41.6225C29.2928 40.9493 30.5585 40.9493 31.4886 41.6225C32.7691 42.5492 34.6734 43.9275 36.5691 45.2995C37.4893 45.9655 37.8711 47.1388 37.5153 48.2078C37.1599 49.277 36.1478 50 35.0064 50C31.7804 50 28.0713 50 24.8453 50C23.7036 50 22.6914 49.277 22.336 48.2078C21.9806 47.1388 22.3624 45.9655 23.2822 45.2995C25.1783 43.9275 27.0823 42.5492 28.3628 41.6225Z" fill="#7ECA9C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.8991 37.8913C27.6045 39.0357 27.3201 40.517 26.2409 41.3193C25.1167 42.155 23.6842 43.2199 22.4926 44.1057C21.8979 44.5478 21.1405 44.7196 20.4072 44.5791C19.6742 44.4385 19.034 43.9985 18.6454 43.368L3.10939 18.163C2.40327 17.0174 2.68797 15.5345 3.76841 14.7313C4.89164 13.8963 6.32231 12.8328 7.51274 11.9478C8.10785 11.5055 8.86608 11.3332 9.59957 11.4741C10.3333 11.6147 10.974 12.055 11.3629 12.686L26.8991 37.8913Z" fill="#7ECA9C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.9522 37.8913C32.2468 39.0357 32.5312 40.517 33.6105 41.3193C34.7346 42.155 36.1671 43.2199 37.3587 44.1057C37.9534 44.5478 38.7109 44.7196 39.4441 44.5791C40.1771 44.4385 40.8173 43.9985 41.2059 43.368L56.7419 18.163C57.4481 17.0174 57.1634 15.5345 56.0829 14.7313C54.9597 13.8963 53.529 12.8328 52.3386 11.9478C51.7435 11.5055 50.9852 11.3332 50.2517 11.4741C49.518 11.6147 48.8773 12.055 48.4884 12.686L32.9522 37.8913Z" fill="#7ECA9C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.2073 0C58.6674 0 59.8512 1.16672 59.8512 2.60592C59.8512 4.04367 59.8512 5.82325 59.8512 7.26072C59.8512 8.7002 58.6672 9.86721 57.2069 9.86721C47.3135 9.86721 12.5441 9.86721 2.64684 9.86721C1.18496 9.86721 0 8.69934 0 7.25841C0 5.8221 0 4.04483 0 2.60851C0 1.91653 0.278848 1.25304 0.775069 0.763907C1.27129 0.274776 1.94442 0 2.64626 0L57.2073 0Z" fill="#7ECA9C"/>
+</g>
+<defs>
+<clipPath id="clip0_3_6">
+<rect width="60" height="50" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/public/fonts/Satoshi-Bold.ttf
+++ b/public/fonts/Satoshi-Bold.ttf
--- a/public/fonts/Satoshi-Regular.ttf
+++ b/public/fonts/Satoshi-Regular.ttf
--- a/public/fonts/Tanker-Regular.ttf
+++ b/public/fonts/Tanker-Regular.ttf
--- a/public/github-mark.svg
+++ 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>
--- a/public/hand_wave.webp
+++ b/public/hand_wave.webp
--- a/public/linkedin-icon.svg
+++ b/public/linkedin-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512"><path fill="#fff" d="M474.919 0H38.592C17.72 0 0 16.504 0 36.841V475.14C0 495.496 11.629 512 32.492 512h436.327C489.718 512 512 495.496 512 475.14V36.841C512 16.504 495.809 0 474.919 0zM195.043 195.043h68.928v35.136h.755c10.505-18.945 41.541-38.177 79.921-38.177 73.655 0 94.214 39.108 94.214 111.538v135.321h-73.148V316.883c0-32.427-12.947-60.883-43.227-60.883-36.768 0-54.295 24.889-54.295 65.758v117.103h-73.148V195.043zM73.139 438.861h73.148V195.043H73.139v243.818zm82.289-329.148c0 25.258-20.457 45.715-45.715 45.715-25.258 0-45.715-20.457-45.715-45.715 0-25.258 20.457-45.715 45.715-45.715 25.258 0 45.715 20.457 45.715 45.715z"/></svg>
--- a/public/nav_highlight.svg
+++ b/public/nav_highlight.svg
@@ -0,0 +1,3 @@
+<svg width="29" height="5" viewBox="0 0 29 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="29" height="5" rx="2.5" fill="#7ECA9C"/>
+</svg>
--- a/public/using_engines.svg
+++ b/public/using_engines.svg
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -0,0 +1,10 @@
+---
+const year = new Date().getFullYear();
+import "../styles/footer.scss";
+---
+
+<footer>
+    &copy vaporvee 2021-{year} 🞄 <a href="https://github.com/vaporvee/web"
+        >Sourcecode</a
+    >
+</footer>
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -0,0 +1,53 @@
+---
+const routes = {
+    Home: "/",
+    Projects: "/projects",
+    Tutorials: "/tutorials",
+    Docs: "/docs",
+    Blog: "/blog",
+};
+import "../styles/navbar.scss";
+---
+
+<header>
+    <nav>
+        <a href="/"><img class="logo" src="/favicon.svg" alt="Logo Icon" /></a>
+        {
+            Object.entries(routes).map(([pageName, path]) => {
+                const isActive =
+                    (Astro.url.pathname.startsWith(path) && path !== "/") ||
+                    Astro.url.pathname === path;
+
+                return (
+                    <div class="navbar-entry">
+                        <a href={path} class={isActive ? "active" : ""}>
+                            {pageName}
+                        </a>
+
+                        {isActive ? (
+                            <div class="highlighter">
+                                <img src="/nav_highlight.svg" />
+                            </div>
+                        ) : null}
+                    </div>
+                );
+            })
+        }
+    </nav>
+    <div>
+        <a href="https://github.com/vaporvee" target="_blank"
+            ><img
+                src="/github-mark.svg"
+                alt="My GitHub account"
+                class="social"
+            /></a
+        >
+        <a href="https://www.linkedin.com/in/yannik-ain/" target="_blank"
+            ><img
+                src="/linkedin-icon.svg"
+                alt="My Linkedin account"
+                class="social"
+            /></a
+        >
+    </div>
+</header>
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -1,19 +0,0 @@
---
-let { title } = Astro.props;
-import "../styles/global.scss"
---
-
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.png" />
-        <meta name="viewport" content="width=device-width" />
-        <meta name="generator" content={Astro.generator} />
-        <title>{title}</title>
-    </head>
-    <body>
-        <div class="page">
-            <slot />
-        </div>
-    </body>
-</html>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -0,0 +1,34 @@
+---
+interface Props {
+	title: string;
+	description: string;
+}
+
+const { title } = Astro.props;
+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";
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="darkreader-lock" />
+		<meta name="description" content={description} />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>vaporvee's Website | {title}</title>
+		<ViewTransitions />
+	</head>
+	<body>
+		<Navbar />
+		<slot />
+		<Footer />
+	</body>
+</html>
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -0,0 +1,10 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout
+    title="Blog"
+    description="This is my personal website with my projects, docs and other useful stuff."
+>
+    <main><div class="content">Blog (not finished yet)</div></main>
+</Layout>
--- a/src/pages/docs.astro
+++ b/src/pages/docs.astro
@@ -0,0 +1,10 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout
+    title="Docs"
+    description="This is my personal website with my projects, docs and other useful stuff."
+>
+    <main><div class="content">Docs (not finished yet)</div></main>
+</Layout>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,18 +1,53 @@
 ---
-import Base from "../layouts/Base.astro";
+import Layout from "../layouts/Layout.astro";
+import "../styles/home.scss";
+
+const yannikAge = new Date().getFullYear() - 2004; // 31/12/2003
 ---

-<Base title="Work in progress">
-	<h1 class="wip-title">Work in <span class="text-gradient">progress</span></h1>
-	<div class="card">
-		<p>
-			Hey &nbsp;<img width="32px" src="/hand_wave.webp"><br>
-			<br>
-			this is my personal website <br> wich gets a rewrite "right now".<br>
-			My name is Yannik aka vaporvee and I'm 19 years old.<br> 
-			I'm a game developer and i code in C++, Godot Engine's GDScript and C#.<br>
-			<br>
-			If you want to see the progress on this website visit <a href="https://github.com/vaporvee/web">github.com/vaporvee/web</a>
-		</p>
-	</div>
-</Base>
+<Layout
+	title="Home"
+	description="This is my personal website with my projects, docs and other useful stuff."
+>
+	<main>
+		<div class="home-main-box">
+			<div class="home-title-box">
+				<h1 class="home-title" style="font-size: 6vw;">vaporvee</h1>
+				<h2
+					class="home-title"
+					style="font-size: 2vw; margin-top: -10px; margin-bottom: 12vh;"
+				>
+					Making video games
+				</h2>
+				<img
+					class="using-engines"
+					src="/using_engines.svg"
+					alt="engines I'm using"
+				/>
+			</div>
+			<div class="content">
+				<p>
+					Hello my name is <b>Yannik</b>!<br />
+					I’m a {yannikAge} year old <b>Game Developer</b> living <b
+						>in Germany</b
+					>.<br />
+					I mostly code in C++, Godot Engine's GDScript and C#.<br />
+					I am mostly self taught but i cant really say when i began to
+					learn 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 <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> ;)<br />
+					<i style="font-size: 8px;"
+						>(this website is getting rewritten and is not looking
+						good on mobile devices yet)</i
+					>
+				</p>
+			</div>
+		</div>
+	</main>
+</Layout>
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -0,0 +1,10 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout
+    title="Projects"
+    description="This is my personal website with my projects, docs and other useful stuff."
+>
+    <main><div class="content">Projects (not finished yet)</div></main>
+</Layout>
--- a/src/pages/tutorials.astro
+++ b/src/pages/tutorials.astro
@@ -0,0 +1,10 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout
+    title="Tutorials"
+    description="This is my personal website with my projects, docs and other useful stuff."
+>
+    <main><div class="content">Tutorials (not finished yet)</div></main>
+</Layout>
--- a/src/styles/_var.scss
+++ b/src/styles/_var.scss
@@ -0,0 +1,28 @@
+@font-face {
+    font-family: 'Tanker-Regular';
+    src: url('/fonts/Tanker-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-display: swap;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Satoshi-Regular';
+    src: url('/fonts/Satoshi-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-display: swap;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Satoshi-Bold';
+    src: url('/fonts/Satoshi-Bold.ttf') format('truetype');
+    font-weight: 700;
+    font-display: swap;
+    font-style: normal;
+}
+
+$primary: #1C1427;
+$accent: #7ECA9C;
+$link: #CCFFBD;
+$highlight-primary: #40394A;
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,3 +0,0 @@
-$primary-color: #66D48E;
-$accent-color: #8400ff;
-$accent-gradient: linear-gradient(45deg, $primary-color, $accent-color 50%, white 60%);
--- a/src/styles/footer.scss
+++ b/src/styles/footer.scss
@@ -0,0 +1,11 @@
+footer {
+    display: inline-flexbox;
+    align-items: center;
+    text-align: center;
+    margin: 5vh;
+    bottom: 0;
+
+    a {
+        color: white;
+    }
+}
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,85 +0,0 @@
-@import "./_variables.scss";
-
-
-:root {
-	color-scheme: dark;
-	accent-color: $accent-color;
-	caret-color: $accent-color;
-}
-::selection{
-	background-color: $accent-color;
-}
-::marker{
-	color: $accent-color;
-}
-body {
-    font-family: system-ui, sans-serif;
-    background-color: #0a0a0a;
-    height: 100vh;
-    width: 100vw;
-    margin: 0;
-}
-.page{
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    box-shadow:
-      inset 60px 0 120px rgba($primary-color, 0.2),
-      inset -60px 0 120px rgba($accent-color, 0.07);
-}
-
-.wip-title {
-    font-size: 50px;
-    text-align: center;
-    color: white;
-    margin-top: 100px;
-}
-
-.text-gradient {
-    background-image: $accent-gradient;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-size: 400%;
-    background-position: 0%;
-}
-
-.card {
-    background-color: #1d1d1d;
-    border-color: #2d2d2d;
-    border-style: solid;
-    border-width: 1px;
-    border-radius: 15px;
-    padding: 35px;
-    color: white;
-    width: 35%;
-    margin: auto;
-    margin-top: 7%;
-    display: flex;
-    justify-content: center;
-
-    box-shadow: rgba($primary-color, 0.4) 5px 5px, rgba($primary-color, 0.3) 10px 10px, rgba($primary-color, 0.2) 15px 15px, rgba($primary-color, 0.1) 20px 20px, rgba($primary-color, 0.05) 25px 25px;
-    a {
-        color: #2525ca;
-        text-decoration: underline 2px;
-        margin: auto;
-        max-width: 500px;
-    }
-    p{
-        font-size: 20px;
-        margin: auto;
-        max-width: 500px;
-    }
-}
-@media (max-width: 800px) {
-	.wip-title{
-        margin-top: 50px;
-        font-size: 30px;
-    }
-    .card {
-        margin-top: 10%;
-	    width: 65%;
-	}
-}
--- a/src/styles/home.scss
+++ b/src/styles/home.scss
@@ -0,0 +1,32 @@
+main {
+    background-image: url("/diagonal_lines_home.png");
+    padding-inline: 10vw;
+}
+
+.home-main-box {
+    padding-block: 7vh;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.home-title {
+    margin: 0;
+    color: #FFF;
+    font-family: "Tanker-Regular";
+}
+
+.home-title-box {
+    justify-self: flex-start;
+    margin-right: 5vw;
+}
+
+.content {
+    justify-self: flex-end;
+    margin: 0;
+    max-width: 450px;
+}
+
+.using-engines {
+    width: 21vw;
+}
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -0,0 +1,38 @@
+@import './_var.scss';
+
+:root {
+    color-scheme: dark;
+}
+
+body {
+    background-color: $primary;
+    font-family: "Satoshi-Regular", "Arial";
+    font-size: 16px;
+}
+
+h1 {
+    font-family: "Tanker-Regular", "Arial";
+    font-size: 72px;
+}
+
+.content {
+    background-color: $highlight-primary;
+    border-radius: 25px;
+    box-shadow: 0px 4px 4px 0px #00000040;
+    display: flexbox;
+    padding: 2vw;
+    margin: 4vw;
+}
+
+b {
+    font-family: "Satoshi-Bold";
+    color: $accent;
+}
+
+.content {
+    a {
+        color: $link;
+        text-decoration: underline;
+        margin: 0;
+    }
+}
--- a/src/styles/navbar.scss
+++ b/src/styles/navbar.scss
@@ -0,0 +1,44 @@
+nav {
+    justify-self: flex-start;
+    display: inline-flex;
+}
+
+.navbar-entry {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.highlighter {
+    margin-top: -10px;
+}
+
+header {
+    padding-top: 2.5vh;
+    padding-bottom: 2.5vh;
+    margin-inline: 2.5vw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    margin-right: 2.5vw;
+    width: 40px;
+}
+
+a {
+    color: white;
+    text-decoration: none;
+    text-align: center;
+    margin-inline: 0.9vw;
+}
+
+.active {
+    font-family: "Satoshi-Bold";
+    color: #7eca9c;
+}
+
+.social {
+    width: 22px;
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512"><path fill="#fff" d="M474.919 0H38.592C17.72 0 0 16.504 0 36.841V475.14C0 495.496 11.629 512 32.492 512h436.327C489.718 512 512 495.496 512 475.14V36.841C512 16.504 495.809 0 474.919 0zM195.043 195.043h68.928v35.136h.755c10.505-18.945 41.541-38.177 79.921-38.177 73.655 0 94.214 39.108 94.214 111.538v135.321h-73.148V316.883c0-32.427-12.947-60.883-43.227-60.883-36.768 0-54.295 24.889-54.295 65.758v117.103h-73.148V195.043zM73.139 438.861h73.148V195.043H73.139v243.818zm82.289-329.148c0 25.258-20.457 45.715-45.715 45.715-25.258 0-45.715-20.457-45.715-45.715 0-25.258 20.457-45.715 45.715-45.715 25.258 0 45.715 20.457 45.715 45.715z"/></svg>