add aoc project

.gitignore

@@ -2,4 +2,4 @@
 _site/
 node_modules/
 
-package-lock.json
+package-lock.json

deploy.sh

@@ -0,0 +1,10 @@
+#!/bin/sh
+
+rm -rf _site && 
+
+npm run build && 
+npm run build:sass && 
+
+ssh solis 'rm -rf docker/webserver/public/koendev.nl' && 
+
+scp -r _site solis:~/docker/webserver/public/koendev.nl

src/_data/projects.json

@@ -1,28 +1,37 @@
 {
-  "projects": [
+  "personal-projects": [
     {
-      "name": "Mandelbrot",
+      "name": "NixOS Config",
-      "text": "A Mandelbrot renderer I made for a university course written in C#. It has multithreading, multiple color modes, and the ability to export and import renders as .mandel files, which is a file format specially created for this project.",
+      "text": "The configuration for all my NixOS machines. It is fully modularized, and has a custom module for all Hyprland configuration options.",
-      "photo": "/static/mandelbrot.jpg",
+      "photo": "/static/nixos.svg",
-      "link": "https://github.com/KoenDR06/UniMandelbrot"
+      "link": "https://git.koendev.nl/Koen/nix-config"
-    },
-    {
-      "name": "AulaControl",
-      "text": "This project aimed to control the aula at my old high school using a USB to DMX converter written in Kotlin. It played music and controlled the lights during lunchtime.",
-      "photo": "/static/dmx.png",
-      "link": "https://github.com/AVTOLZ/AulaControl"
     },
     {
       "name": "Advent Of Code",
-      "text": "All of my current advent of code solutions, written in Kotlin. Some of the worst code I've written, yet I learn a lot from it.",
+      "text": "My Advent Of Code solutions for 2025, written in Haskell.",
       "photo": "/static/aoc.png",
-      "link": "https://github.com/KoenDR06/nix-config"
+      "link": "https://git.koendev.nl/Koen/AdventOfCode25"
+    }
+  ],
+  "contributed-projects": [
+    {
+      "name": "sadserver",
+      "text": [
+        "Upgraded the playbooks to be compatible with Ubuntu 24.04",
+        "Helped writing the playbok for a new website"
+      ],
+      "photo": "/static/sadserver.svg",
+      "link": "https://github.com/svsticky/sadserver"
     },
     {
-      "name": "nix-config",
+      "name": "radio",
-      "text": "The configurations for my NixOS machines. It includes configuration for all my apps, window managers, network, timezones, and more. It's also modularized so that adding a new machine with unique property is a breeze.",
+      "text": [
-      "photo": "/static/nixos.svg",
+        "Added a keybind to pause to debug elements easier",
-      "link": "https://github.com/KoenDR06/nix-config"
+        "Added a weather widget",
+        "Made activities show participants"
+      ],
+      "photo": "/static/radio.svg",
+      "link": "https://github.com/svsticky/radio"
     }
   ]
-}
+}

src/_includes/base.liquid

@@ -6,10 +6,9 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;1,100&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Cascadia+Code:wght@300&display=swap" rel="stylesheet">
 
     <link rel="stylesheet" href="/styles/index.css">
-
     <script src="/static/floater.js" defer></script>
   </head>
 
@@ -19,14 +18,15 @@
         <img class="fixture-photo floater" src="/static/fixture.png" alt="Ayrton Diablo S">
       </div>
       <div class="beams">
-        <img class="fixture-beam floater" src="/static/beam.png" alt="Beam of Ayrton Diablo S">
+        <img class="fixture-beam floater" src="/static/beam.webp" alt="Beam of Ayrton Diablo S">
       </div>
     </div>
     <div class="front-page">
       <div class="title-card">
-        <h1>Koen de Ruiter</h1>
+        <h1>{{ title }}</h1>
-        <h2>Hobby Developer</h2>
+        {% for sub in subtitles %}
-        <h2>Lighting Designer</h2>
+          <h2>{{ sub }}</h2>
+        {% endfor %}
 
         <div class="title-card__links">
           <a class="title-card__link" href="https://github.com/KoenDR06" target="_blank"><img class="title-card__image" src="/static/github.svg" alt="GitHub"></a>

src/_includes/empty.liquid

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <title>{{ title }}</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;1,100&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="/styles/photos.css">
+  </head>
+
+  <body>
+    <main>
+      {{ content }}
+    </main>
+  </body>
+</html>

src/pages/404.liquid

@@ -0,0 +1,5 @@
+---
+permalink: /404.html
+title: 404 Not Found
+subtitles:
+---

src/pages/home.liquid

@@ -1,17 +1,41 @@
 ---
 permalink: /
 title: Koen de Ruiter
+subtitles:
+- "Hobby Developer"
+- "Lighting Designer"
 ---
 
-{% for p in projects.projects %}
+<h1 class="projects-header">Personally Authored</h1>
+{% for p in projects.personal-projects %}
   <div class="project">
     <img alt="Project sample photo" class="project__photo" src="{{ p.photo }}">
 
     <div class="project__text">
-      <a href="{{ p.link }}" target="_blank">
+      <div class="project__title-line">
+        {% if p.link != "" %}<a href="{{ p.link }}" target="_blank"><img src="/static/github.svg"></a> {% endif %}
         <h2>{{ p.name }}</h2>
-      </a>
+      </div>
-      <p>{{ p.text }}</p>
+      {% for par in p.text %}
+        <p>{{ par }}</p>
+      {% endfor %}
     </div>
   </div>
-{% endfor %}
+{% endfor %}
+
+<h1 class="projects-header">Contributed</h1>
+{% for p in projects.contributed-projects %}
+  <div class="project">
+    <img alt="Project sample photo" class="project__photo" src="{{ p.photo }}">
+
+    <div class="project__text">
+      <div class="project__title-line">
+        {% if p.link != "" %}<a href="{{ p.link }}" target="_blank"><img src="/static/github.svg"></a> {% endif %}
+        <h2>{{ p.name }}</h2>
+      </div>
+      {% for par in p.text %}
+        <p>{{ par }}</p>
+      {% endfor %}
+    </div>
+  </div>
+{% endfor %}

src/static/floater.js

@@ -1,6 +1,5 @@
 function clamp(value, min, max) { return Math.max( min, Math.min(value, max) ); }
 
-const body = document.querySelector('body');
 const beams = document.querySelector(".beams");
 
 window.addEventListener("scroll", function(){
@@ -12,5 +11,4 @@ window.addEventListener("scroll", function(){
     }
 
     beams.style.opacity = 1-2*yPos;
-    beams.style.display = 1-2*yPos < 0 ? 'none' : 'block'
+});
-});

src/static/gallery.svg

@@ -0,0 +1,9 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#ed8796" width="800px" height="800px" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" stroke="#ed8796">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier">
+
<path d="M 7.7148 49.5742 L 48.2852 49.5742 C 53.1836 49.5742 55.6446 47.1367 55.6446 42.3086 L 55.6446 13.6914 C 55.6446 8.8633 53.1836 6.4258 48.2852 6.4258 L 7.7148 6.4258 C 2.8398 6.4258 .3554 8.8398 .3554 13.6914 L .3554 42.3086 C .3554 47.1602 2.8398 49.5742 7.7148 49.5742 Z M 39.2851 27.9414 C 38.2304 27.0039 37.0351 26.5118 35.7695 26.5118 C 34.4570 26.5118 33.3085 26.9571 32.2304 27.9180 L 21.6366 37.3867 L 17.3007 33.4492 C 16.3163 32.5820 15.2617 32.1133 14.1366 32.1133 C 13.1054 32.1133 12.0976 32.5586 11.1366 33.4258 L 4.1288 39.7305 L 4.1288 13.8789 C 4.1288 11.4414 5.4413 10.1992 7.7851 10.1992 L 48.2147 10.1992 C 50.5350 10.1992 51.8708 11.4414 51.8708 13.8789 L 51.8708 39.7539 Z M 17.8163 28.1992 C 20.8398 28.1992 23.3241 25.7149 23.3241 22.6680 C 23.3241 19.6445 20.8398 17.1367 17.8163 17.1367 C 14.7695 17.1367 12.2851 19.6445 12.2851 22.6680 C 12.2851 25.7149 14.7695 28.1992 17.8163 28.1992 Z"/>
+
</g>
+
</svg>

src/static/github.svg

@@ -1,4 +1,4 @@
 <!DOCTYPE svg>
 <svg width="800px" height="800px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
-<g> <g stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#bf616a"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#142]"> </path> </g> </g> </g> </g>
+<g> <g stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#ed8796"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#142]"> </path> </g> </g> </g> </g>
-</svg>
+</svg>

src/static/linkedin.svg

@@ -1,6 +1,6 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg fill="#bf616a" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-271 283.9 256 235.1" xml:space="preserve" width="800px" height="800px" stroke="#bf616a">
+<svg fill="#ed8796" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-271 283.9 256 235.1" xml:space="preserve" width="800px" height="800px" stroke="#ed8796">
 
 <g id="SVGRepo_bgCarrier" stroke-width="0"/>
 
@@ -8,4 +8,4 @@
 
 <g id="SVGRepo_iconCarrier"> <g> <rect x="-264.4" y="359.3" width="49.9" height="159.7"/> <path d="M-240.5,283.9c-18.4,0-30.5,11.9-30.5,27.7c0,15.5,11.7,27.7,29.8,27.7h0.4c18.8,0,30.5-12.3,30.4-27.7 C-210.8,295.8-222.1,283.9-240.5,283.9z"/> <path d="M-78.2,357.8c-28.6,0-46.5,15.6-49.8,26.6v-25.1h-56.1c0.7,13.3,0,159.7,0,159.7h56.1v-86.3c0-4.9-0.2-9.7,1.2-13.1 c3.8-9.6,12.1-19.6,27-19.6c19.5,0,28.3,14.8,28.3,36.4V519h56.6v-88.8C-14.9,380.8-42.7,357.8-78.2,357.8z"/> </g> </g>
 
-</svg>
+</svg>

src/static/mic.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#7dc4e4" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="0 0 383.535 383.535" xml:space="preserve" stroke="#7dc4e4">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g> <path d="M348.476,64.279c0-35.5-28.781-64.279-64.275-64.279c-15.541,0-29.775,5.52-40.892,14.705 c4.969,16.941,14.627,33.927,28.717,48.696c18.767,19.641,42.903,32.382,66.291,35.434 C344.721,88.851,348.476,77.021,348.476,64.279z"/> <path d="M266.356,68.833c-13.931-14.593-23.692-31.29-29.271-48.165c-8.015,8.652-13.602,19.496-15.886,31.512 c6.071,17.232,16.956,33.656,31.69,47.364c13.786,12.818,29.731,22.107,46.09,27.216c13.565-3.186,25.455-10.629,34.188-20.898 C309.332,101.687,285.226,88.592,266.356,68.833z"/> <path d="M118.311,340.647c-12.066,10.015-51.748,7.069-73.949,2.886c-4.248-0.846-8.354,1.991-9.169,6.256 c-0.793,4.26,1.994,8.371,6.255,9.169c3.635,0.688,23.033,4.184,43.351,4.184c16.584,0,33.796-2.328,43.528-10.396 c5.723-4.713,8.725-11.116,8.725-18.454c0-21.027-12.822-30.949-23.121-38.96c-9.748-7.559-15.747-12.724-16.164-23.243 c-0.519-13.369,4.695-22.378,9.69-27.912c11.664,10.331,34.099,7.947,50.594-5.614l23.612-19.38 c3.072,3.879,7.372,6.732,12.389,7.774v122.876c-35.971,1.286-63.492,8.279-63.492,16.743c0,9.369,33.685,16.959,75.268,16.959 c41.581,0,75.268-7.59,75.268-16.959c0-8.464-27.523-15.457-63.494-16.743V215.471c1.451-2.897,2.332-6.104,2.332-9.538 c0-5.325-2.008-10.118-5.213-13.873l73.973-60.692c-14.643-5.761-28.749-14.555-41.152-26.077 c-13.324-12.405-23.695-26.96-30.496-42.36l-60.063,73.869c-5.853-2.495-12.894-1.318-17.521,3.573 c-5.244,5.504-5.708,13.833-1.499,19.825l-27.154,33.394c-9.123,11.226-12.804,24.902-10.922,36.035 c-8.157,7.249-18.659,20.959-17.805,43.067c0.725,18.37,12.635,27.607,22.217,35.037c9.521,7.39,17.054,13.232,17.054,26.554 C121.351,336.985,120.447,338.884,118.311,340.647z"/> </g> </g>
+
</svg>

src/static/music.svg

@@ -0,0 +1,12 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="music" class="icon glyph" fill="#7dc4e4" stroke="#7dc4e4" stroke-width="0.00024000000000000003">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier">
+
<ellipse cx="6.5" cy="18" rx="4.5" ry="4" style="fill:#7dc4e4"/>
+
<ellipse cx="17.5" cy="16" rx="4.5" ry="4" style="fill:#7dc4e4"/>
+
<path d="M10,19a1,1,0,0,1-1-1V5a1,1,0,0,1,.82-1l11-2a1,1,0,0,1,.82.21A1,1,0,0,1,22,3V16a1,1,0,0,1-2,0V4.2L11,5.83V18A1,1,0,0,1,10,19Z" style="fill:#7dc4e4"/>
+
<path d="M10,10a1,1,0,0,1-.18-2l11-2a1,1,0,1,1,.36,2l-11,2Z" style="fill:#7dc4e4"/>
+
</g>
+
</svg>

src/static/radio.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#7dc4e4" width="800px" height="800px" viewBox="0 -18.04 122.88 122.88" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="enable-background:new 0 0 122.88 86.79" xml:space="preserve" stroke="#7dc4e4">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g> <path d="M2.08,0H120.8h2.08v2.08v69.2v2.08h-2.08H77.57v8.29h7.28v5.15H37.88v-5.15h7.28v-8.29H2.08H0v-2.08V2.08V0H2.08L2.08,0 L2.08,0L2.08,0z M118.73,4.15H4.15V69.2h114.57L118.73,4.15L118.73,4.15L118.73,4.15L118.73,4.15z"/> </g> </g>
+
</svg>

src/styles/index.scss

@@ -3,7 +3,7 @@
 
 body {
     margin: 0;
-    font-family: "JetBrains Mono", serif;
+    font-family: "Cascadia Code", sans-serif;
     background-color: vars.$bg-color;
     color: vars.$primary;
     overflow-x: hidden;
@@ -31,4 +31,4 @@ main {
     .project__photo {
         margin: 0 50px 0 0 !important;
     }
-}
+}

src/styles/photos.scss

@@ -0,0 +1,60 @@
+@use "vars";
+
+body {
+    margin: 0;
+    font-family: "JetBrains Mono", serif;
+    background-color: vars.$bg-color;
+    color: vars.$primary;
+    overflow-x: hidden;
+}
+
+main {
+    width: 100vw;
+    height: 100vh;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    position: relative;
+
+    animation: flyIn ease-out vars.$load-speed;
+}
+
+.slideshow {
+    border: 5px solid vars.$secondary;
+    border-radius: 15px;
+}
+
+img {
+    height: 80vh;
+    width: auto;
+    max-width: 80vw;
+
+
+    object-fit: contain;
+}
+
+.hidden {
+    display: none;
+}
+
+// --- CONTROLS ---
+.control {
+    height: 40px;
+}
+
+button {
+    background: inherit;
+    border: 0;
+}
+
+.controls {
+    margin-top: 10px;
+    border: 5px solid vars.$secondary;
+    border-radius: 15px;
+
+    display: flex;
+    justify-content: center;
+}

src/styles/projects.scss

@@ -2,6 +2,7 @@
 
 .project {
     display: flex;
+    position: relative;
 
     margin-bottom: 100px;
 }
@@ -28,21 +29,40 @@ a {
     text-decoration: none;
 }
 
+.project__text img {
+  width: 4em;
+  height: auto;
+
+  margin-right: 1em;
+}
+
+.project__title-line {
+  display: flex;
+  align-items: center;
+}
+
 .project h2 {
     margin-top: 0;
     margin-bottom: 0;
     font-size: 4em;
 
-    text-decoration: underline;
-
     color: vars.$accent-1;
 }
 
+.projects-header {
+    margin-top: 0;
+    margin-bottom: 1em;
+    font-size: 5em;
+
+    color: vars.$accent-2;
+}
+
 .project p {
     font-size: 1.5em;
 }
 
 .project__photo {
+    min-width: 500px;
     width: 500px;
     height: auto;
     border-radius: 25px;
@@ -51,4 +71,4 @@ a {
 
 .project__text {
     max-width: 50%;
-}
+}

src/styles/vars.scss

@@ -1,9 +1,10 @@
-$bg-color: #1e222a;
+$bg-color: #24273a;
-$primary: #80a0c0;
+$primary: #b7bdf8;
-$secondary: #4f6175;
+$secondary: #b7bdf8;
-$accent-1: #b48ead;
+$accent-1: #c6a0f6;
+$accent-2: #ed8796;
 
 $side-margin: 15vw;
 
 $load-speed: 1.2s;
-$load-size: 5vh;
+$load-size: 5vh;