idk changes to syling and website

src/_data/projects.json

@@ -1,22 +1,28 @@
 {
   "projects": [
+    {
+      "name": "Comedy TUI",
+      "text": "This is an app I built for my work in comedy shows. It's a really simple terminal UI that has a stopwatch, room for notes, and manages the music currently playing. It enables me to focus on the important parts of the job, which is great.",
+      "photo": "/static/mic.svg",
+      "link": "https://github.com/KoenDR06/ComedyTUI"
+    },
     {
       "name": "Mandelbrot",
-      "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": "A Mandelbrot renderer I made for a university course written in C#. It is multithreaded, has multiple color modes, and the ability to export and import renders as .mandel files, which is a file format specially created for this project.",
       "photo": "/static/mandelbrot.jpg",
       "link": "https://github.com/KoenDR06/UniMandelbrot"
     },
     {
       "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.",
+      "text": "This project aimed to control the auditorium 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",
+      "photo": "/static/music.svg",
       "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": "All of my current Advent of Code solutions, written in Kotlin. Some of the worst code I've written, yet I've learnt a ton from it.",
       "photo": "/static/aoc.png",
-      "link": "https://github.com/KoenDR06/nix-config"
+      "link": "https://github.com/KoenDR06/AdventOfCode"
     },
     {
       "name": "NixOS Config",
@@ -25,4 +31,4 @@
       "link": "https://github.com/KoenDR06/nix-config"
     }
   ]
-}
+}

src/pages/gallery.liquid

@@ -38,10 +38,6 @@ layout: empty
         }
     }
 
-    setInterval(() => {
-        next()
-    }, 5000);
-
     document.querySelector('#next').addEventListener('click', next);
     document.querySelector('#prev').addEventListener('click', prev);
-</script>
+</script>

src/pages/home.liquid

@@ -9,10 +9,11 @@ title: Koen de Ruiter
     <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">
+        <a href="{{ p.link }}" target="_blank"><img src="/static/github.svg"></a>
         <h2>{{ p.name }}</h2>
-      </a>
+      </div>
       <p>{{ p.text }}</p>
     </div>
   </div>
-{% endfor %}
+{% endfor %}

src/static/gallery.svg

@@ -1,9 +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="#bf616a" width="800px" height="800px" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" stroke="#bf616a">
+<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>
+
</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/next.svg

@@ -37,7 +37,7 @@
      id="SVGRepo_iconCarrier">
     <path
        d="m 21.000073,5 v 14 m -9,-11.671 v 9.342 c 0,1.0657 0,1.5985 0.2185,1.8722 0.1899,0.238 0.478,0.3765 0.7826,0.3762 0.3502,-4e-4 0.7662,-0.3333 1.59841,-0.999 l 4.27702,-3.4216 c 1.06769,-0.8542 1.60153,-1.2812 1.79481,-1.7972 0.16946,-0.4524 0.16946,-0.9508 0,-1.4032 -0.19328,-0.516 -0.72712,-0.943 -1.79482,-1.79718 l -4.27701,-3.42161 c -0.83221,-0.66574 -1.24821,-0.99861 -1.59841,-0.99898 -0.3046,-3.3e-4 -0.5927,0.13813 -0.7826,0.37614 -0.2185,0.27368 -0.2185,0.80653 -0.2185,1.87223 z m -8.9999997,0 v 9.342 c 0,1.0657 0,1.5985 0.2185,1.8722 0.1899,0.238 0.478,0.3765 0.7826,0.3762 0.3502,-4e-4 0.7662,-0.3333 1.5984,-0.999 l 4.277,-3.4216 c 1.0676997,-0.8542 1.6015997,-1.2812 1.7947997,-1.7972 0.1695,-0.4524 0.1695,-0.9508 0,-1.4032 -0.1932,-0.516 -0.7271,-0.943 -1.7947997,-1.79718 l -4.277,-3.42161 c -0.8322,-0.66574 -1.2482,-0.99861 -1.5984,-0.99898 -0.3046,-3.3e-4 -0.5927,0.13813 -0.7826,0.37614 -0.2185,0.27368 -0.2185,0.80653 -0.2185,1.87223 z"
-       stroke="#80a0c0"
+       stroke="#ed8796"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"

src/static/prev.svg

@@ -1,7 +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 width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(1, 0, 0, 1, 0, 0)" stroke="#80a0c0">
+<svg width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(1, 0, 0, 1, 0, 0)" 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="M3 5V19M12 7.329V16.671C12 17.7367 12 18.2695 11.7815 18.5432C11.5916 18.7812 11.3035 18.9197 10.9989 18.9194C10.6487 18.919 10.2327 18.5861 9.40049 17.9204L5.12347 14.4988C4.05578 13.6446 3.52194 13.2176 3.32866 12.7016C3.1592 12.2492 3.1592 11.7508 3.32866 11.2984C3.52194 10.7824 4.05578 10.3554 5.12348 9.50122L9.40049 6.07961C10.2327 5.41387 10.6487 5.081 10.9989 5.08063C11.3035 5.0803 11.5916 5.21876 11.7815 5.45677C12 5.73045 12 6.2633 12 7.329ZM21 7.329V16.671C21 17.7367 21 18.2695 20.7815 18.5432C20.5916 18.7812 20.3035 18.9197 19.9989 18.9194C19.6487 18.919 19.2327 18.5861 18.4005 17.9204L14.1235 14.4988C13.0558 13.6446 12.5219 13.2176 12.3287 12.7016C12.1592 12.2492 12.1592 11.7508 12.3287 11.2984C12.5219 10.7824 13.0558 10.3554 14.1235 9.50122L18.4005 6.07961C19.2327 5.41387 19.6487 5.081 19.9989 5.08063C20.3035 5.0803 20.5916 5.21876 20.7815 5.45677C21 5.73045 21 6.2633 21 7.329Z" stroke="#80a0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
<g id="SVGRepo_iconCarrier"> <path d="M3 5V19M12 7.329V16.671C12 17.7367 12 18.2695 11.7815 18.5432C11.5916 18.7812 11.3035 18.9197 10.9989 18.9194C10.6487 18.919 10.2327 18.5861 9.40049 17.9204L5.12347 14.4988C4.05578 13.6446 3.52194 13.2176 3.32866 12.7016C3.1592 12.2492 3.1592 11.7508 3.32866 11.2984C3.52194 10.7824 4.05578 10.3554 5.12348 9.50122L9.40049 6.07961C10.2327 5.41387 10.6487 5.081 10.9989 5.08063C11.3035 5.0803 11.5916 5.21876 11.7815 5.45677C12 5.73045 12 6.2633 12 7.329ZM21 7.329V16.671C21 17.7367 21 18.2695 20.7815 18.5432C20.5916 18.7812 20.3035 18.9197 19.9989 18.9194C19.6487 18.919 19.2327 18.5861 18.4005 17.9204L14.1235 14.4988C13.0558 13.6446 12.5219 13.2176 12.3287 12.7016C12.1592 12.2492 12.1592 11.7508 12.3287 11.2984C12.5219 10.7824 13.0558 10.3554 14.1235 9.50122L18.4005 6.07961C19.2327 5.41387 19.6487 5.081 19.9989 5.08063C20.3035 5.0803 20.5916 5.21876 20.7815 5.45677C21 5.73045 21 6.2633 21 7.329Z" stroke="#ed8796" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
 
</svg>

src/styles/photos.scss

@@ -57,4 +57,4 @@ button {
 
     display: flex;
     justify-content: center;
-}
+}

src/styles/projects.scss

@@ -29,13 +29,23 @@ 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;
 }
 
@@ -53,4 +63,4 @@ a {
 
 .project__text {
     max-width: 50%;
-}
+}

src/styles/vars.scss

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