first implementation of website, based heavily on HeyImKyu's portfolio.kyuti.es

2025-05-01 01:10:31 +02:00 · 2025-05-01 01:10:31 +02:00 · 47b92c47e7
commit 47b92c47e7
parent e2d7dd3a84
26 changed files with 1052 additions and 21 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -0,0 +1,32 @@
+module.exports = function(eleventyConfig) {
+  const config = {
+    "config" : {
+      // "base_url": "kittygirl.online",
+      "title": process.env.TITLE || "kittygirl.online",
+      "menu": [
+        { "name": "My Bog", "url": "/blog" },
+        { "name": "About", "url": "/about" },
+      ],
+      "theme": "dark",
+    },
+  }
+  for (const item in config) {
+    eleventyConfig.addGlobalData(item, config[item]);
+  }
+
+
+  var nunjucksDate = require("nunjucks-date");
+  // http://momentjs.com/docs/#/displaying/format/
+  nunjucksDate.setDefaultFormat("DD.MM.YYYY");
+  eleventyConfig.addFilter("date", nunjucksDate);
+
+  eleventyConfig.addPassthroughCopy("src/assets");
+  eleventyConfig.addPassthroughCopy("src/js");
+  eleventyConfig.addPassthroughCopy("src/css");
+  return {
+    dir: {
+      input: "src",   // read source files from "src"
+      output: "_site" // output result into "_site"
+    }
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,9 @@
      "name": "11ty",
      "version": "1.0.0",
      "license": "ISC",
+      "dependencies": {
+        "nunjucks-date": "^1.5.0"
+      },
      "devDependencies": {
        "@11ty/eleventy": "^3.0.0"
      }
@ -339,7 +342,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
      "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/acorn": {
@ -398,7 +400,7 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
+      "devOptional": true,
      "license": "ISC",
      "dependencies": {
        "normalize-path": "^3.0.0",
@ -462,7 +464,6 @@
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/balanced-match": {
@ -518,7 +519,7 @@
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@ -542,7 +543,7 @@
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "fill-range": "^7.1.1"
@ -562,7 +563,7 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "anymatch": "~3.1.2",
@ -917,7 +918,7 @@
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "to-regex-range": "^5.0.1"
@ -993,7 +994,6 @@
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
      "optional": true,
@ -1029,7 +1029,7 @@
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
+      "devOptional": true,
      "license": "ISC",
      "dependencies": {
        "is-glob": "^4.0.1"
@ -1208,7 +1208,7 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "binary-extensions": "^2.0.0"
@ -1242,7 +1242,7 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@ -1262,7 +1262,7 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "is-extglob": "^2.1.1"
@ -1282,7 +1282,7 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.12.0"
@ -1582,6 +1582,15 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/moo": {
      "version": "0.5.2",
      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
@ -1619,7 +1628,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@ -1629,7 +1638,6 @@
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz",
      "integrity": "sha512-26XRV6BhkgK0VOxfbU5cQI+ICFUtMLixv1noZn1tGU38kQH5A5nmmbk/O45xdyBhD1esk47nKrY0mvQpZIhRjQ==",
-      "dev": true,
      "license": "BSD-2-Clause",
      "dependencies": {
        "a-sync-waterfall": "^1.0.0",
@ -1651,11 +1659,20 @@
        }
      }
    },
+    "node_modules/nunjucks-date": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/nunjucks-date/-/nunjucks-date-1.5.0.tgz",
+      "integrity": "sha512-uB1p4L80eXFwwWYuAcWAm12iZu6/ezfShskHxfU8fQxOKGDdEYZ3E0acUfqU6y4UdHSamC6TYfkyxyB59yHYRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "moment": "*",
+        "nunjucks": "^3.x"
+      }
+    },
    "node_modules/nunjucks/node_modules/commander": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 6"
@ -1729,7 +1746,7 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=8.6"
@ -1873,7 +1890,7 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "picomatch": "^2.2.1"
@ -2201,7 +2218,7 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "is-number": "^7.0.0"
--- a/package.json
+++ b/package.json
@ -4,7 +4,8 @@
  "main": "index.js",
  "scripts": {
    "start": "npx @11ty/eleventy --serve",
-    "build": "env NODE_ENV=production npx @11ty/eleventy"
+    "build": "env NODE_ENV=production npx @11ty/eleventy",
+    "build-cip": "env TITLE='~za08gywo' NODE_ENV=production npx @11ty/eleventy --pathprefix '~za08gywo'"
  },
  "keywords": [],
  "author": "",
@ -12,5 +13,8 @@
  "description": "",
  "devDependencies": {
    "@11ty/eleventy": "^3.0.0"
+  },
+  "dependencies": {
+    "nunjucks-date": "^1.5.0"
  }
 }
--- a/src/_includes/base.njk
+++ b/src/_includes/base.njk
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+{% include "src/_includes/partials/header.njk" %}
+
+<body>
+    <section class="section">
+        {% include "src/_includes/partials/darktoggle.njk" %}
+
+        {% include "src/_includes/partials/nav.njk"%}
+
+        <div class="hero">
+            {{ content | safe }}
+        </div>
+        
+        {% include "src/_includes/partials/footer.njk" %}
+    </section>
+</body>
+</html>
--- a/src/_includes/blog-page.njk
+++ b/src/_includes/blog-page.njk
@ -0,0 +1,18 @@
+---
+layout: "base.njk"
+---
+<main>
+    <h1 class="hero-title">
+        {{ title }}
+    </h1>
+
+    {{ content | safe }}
+
+    <ul>
+        {%- for post in collections.blog -%}
+        <li><a href="{{ post.url | url }}" class="link">{{ post.data.title }}</a></li>
+        {%- endfor -%}
+    </ul>
+</main>
+
+{% include "src/_includes/partials/blob.html" %}
--- a/src/_includes/blog-post.njk
+++ b/src/_includes/blog-post.njk
@ -0,0 +1,12 @@
+---
+layout: "base.njk"
+---
+<main>
+    <h1 class="hero-title">
+        {{ title }}
+    </h1>
+
+    <p>Published at {{ page.data.date | date }}</p>
+
+    {{ content | safe }}
+</main>
--- a/src/_includes/partials/blob.html
+++ b/src/_includes/partials/blob.html
@ -0,0 +1,6 @@
+<div class="blob-cont">
+  <div class="blob" id="blob1"></div>
+  <div class="blob" id="blob2"></div>
+  <div class="blob" id="blob3"></div>
+  <div class="blob" id="blob4"></div>
+</div>
--- a/src/_includes/partials/darktoggle.njk
+++ b/src/_includes/partials/darktoggle.njk
@ -0,0 +1,44 @@
+<div id="darkmode-container">
+    <label class="darkmode-label" for="darkmode-switch">
+        <input type="checkbox" id="darkmode-switch" />
+        <div class="darkmode-sunmoon">
+            <div class="darkmode-darkside"></div>
+        </div>
+        <div class="darkmode-clouds">
+            <img src="{{ "/assets/darkmode-toggle/cloud_1.svg" | url }}" alt="" class="darkmode-cloud darkmode-cloud-1" />
+            <img src="{{ "/assets/darkmode-toggle/cloud_2.svg" | url }}" alt="" class="darkmode-cloud darkmode-cloud-2" />
+            <img src="{{ "/assets/darkmode-toggle/cloud_3.svg" | url }}" alt="" class="darkmode-cloud darkmode-cloud-3" />
+            <img src="{{ "/assets/darkmode-toggle/cloud_4.svg" | url }}" alt="" class="darkmode-cloud darkmode-cloud-4" />
+            <img src="{{ "/assets/darkmode-toggle/stars.svg" | url }}" alt="" class="darkmode-stars" />
+        </div>
+    </label>
+</div>
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const toggleSwitch = document.querySelector(
+        '.darkmode-label input[type="checkbox"]'
+        );
+        const container = document.getElementById('darkmode-container');
+
+        toggleSwitch.checked = localStorage.getItem('darkmode') === 'true';
+
+        function switchTheme(dark) {
+            if (dark) {
+                document.documentElement.classList.add("dark");
+                container.classList.add("dark");
+            } else {
+                document.documentElement.classList.remove("dark");
+                container.classList.remove("dark");
+            }
+
+            localStorage.setItem('darkmode', dark);
+        }
+
+        function switchThemeListener(e) {
+            switchTheme(e.target.checked)
+        }
+
+        switchTheme(toggleSwitch.checked);
+        toggleSwitch.addEventListener("change", switchThemeListener, false);
+    });
+</script>
--- a/src/_includes/partials/footer.njk
+++ b/src/_includes/partials/footer.njk
@ -0,0 +1,3 @@
+<footer>
+    nova made this :)
+</footer>
--- a/src/_includes/partials/header.njk
+++ b/src/_includes/partials/header.njk
@ -0,0 +1,18 @@
+<head>
+    {# to fight against fouc :( #}
+    <script>
+      try {
+        if (localStorage.getItem('darkmode') === 'true') {
+          document.documentElement.classList.add('dark');
+        }
+      } catch (e) {}
+    </script>
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }}</title>
+
+    {# TODO: DARK/LIGHT THEME HERE MAYBE??? #}
+
+    <link rel="stylesheet" type="text/css" media="screen" href="{{ "/css/main.css" | url }}">
+</head>
--- a/src/_includes/partials/nav.njk
+++ b/src/_includes/partials/nav.njk
@ -0,0 +1,26 @@
+<header>
+  <div class="home">
+    {% if config.base_url %}
+    <a href="{{ config.base_url }}" class="title">{{ config.title }}</a>
+    {% else %}
+    <a href="{{ "/" | url }}" class="title">{{ config.title }}</a>
+    {% endif %}
+  </div>
+  <nav>
+    {% for item in config.menu %}
+    <a href="{{ item.url | url }}">{{ item.name }}</a>
+    {% endfor %}
+
+    {# STILL GOTTA DO THIS
+    {% if config.theme == "toggle" %}
+    <a id="dark-mode-toggle" onclick="toggleTheme(); event.preventDefault();" href="#">
+      <img src="{{ get_url(path='icons/sun.svg') }}" id="sun-icon" style="filter: invert(1)" alt="Light" />
+      <img src="{{ get_url(path='icons/moon.svg' ) }}" id="moon-icon" alt="Dark" />
+    </a>
+
+    <!-- Inititialize the theme toggle icons -->
+    <script>updateItemToggleTheme()</script>
+    {% endif %}
+    #}
+  </nav>
+</header>
--- a/src/assets/darkmode-toggle/cloud_1.svg
+++ b/src/assets/darkmode-toggle/cloud_1.svg
@ -0,0 +1,10 @@
+<svg width="88" height="50" viewBox="0 0 88 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.95">
+<circle cx="15.0573" cy="26.1517" r="13.65" transform="rotate(-3.84411 15.0573 26.1517)" fill="white"/>
+<circle cx="33.9905" cy="17.0619" r="13.65" transform="rotate(-3.84411 33.9905 17.0619)" fill="white"/>
+<circle cx="35.0364" cy="32.6268" r="13.65" transform="rotate(-3.84411 35.0364 32.6268)" fill="white"/>
+<circle cx="51.1139" cy="19.8201" r="13.65" transform="rotate(-3.84411 51.1139 19.8201)" fill="white"/>
+<circle cx="58.4709" cy="32.3551" r="13.65" transform="rotate(-3.84411 58.4709 32.3551)" fill="white"/>
+<circle cx="72.1287" cy="22.3169" r="13.65" transform="rotate(-3.84411 72.1287 22.3169)" fill="white"/>
+</g>
+</svg>
--- a/src/assets/darkmode-toggle/cloud_2.svg
+++ b/src/assets/darkmode-toggle/cloud_2.svg
@ -0,0 +1,10 @@
+<svg width="88" height="51" viewBox="0 0 88 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6">
+<circle cx="15.3241" cy="27.0558" r="13.65" transform="rotate(-4.59401 15.3241 27.0558)" fill="white"/>
+<circle cx="34.1368" cy="17.719" r="13.65" transform="rotate(-4.59401 34.1368 17.719)" fill="white"/>
+<circle cx="35.3863" cy="33.2689" r="13.65" transform="rotate(-4.59401 35.3863 33.2689)" fill="white"/>
+<circle cx="51.2948" cy="20.2529" r="13.65" transform="rotate(-4.59401 51.2948 20.2529)" fill="white"/>
+<circle cx="58.8152" cy="32.6905" r="13.65" transform="rotate(-4.59401 58.8152 32.6905)" fill="white"/>
+<circle cx="72.3404" cy="22.4744" r="13.65" transform="rotate(-4.59401 72.3404 22.4744)" fill="white"/>
+</g>
+</svg>
--- a/src/assets/darkmode-toggle/cloud_3.svg
+++ b/src/assets/darkmode-toggle/cloud_3.svg
@ -0,0 +1,10 @@
+<svg width="88" height="50" viewBox="0 0 88 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.95">
+<circle cx="15.0574" cy="26.1517" r="13.65" transform="rotate(-3.84411 15.0574 26.1517)" fill="white"/>
+<circle cx="33.9905" cy="17.0619" r="13.65" transform="rotate(-3.84411 33.9905 17.0619)" fill="white"/>
+<circle cx="35.0364" cy="32.6268" r="13.65" transform="rotate(-3.84411 35.0364 32.6268)" fill="white"/>
+<circle cx="51.114" cy="19.8201" r="13.65" transform="rotate(-3.84411 51.114 19.8201)" fill="white"/>
+<circle cx="58.4709" cy="32.3551" r="13.65" transform="rotate(-3.84411 58.4709 32.3551)" fill="white"/>
+<circle cx="72.1287" cy="22.3169" r="13.65" transform="rotate(-3.84411 72.1287 22.3169)" fill="white"/>
+</g>
+</svg>
--- a/src/assets/darkmode-toggle/cloud_4.svg
+++ b/src/assets/darkmode-toggle/cloud_4.svg
@ -0,0 +1,10 @@
+<svg width="88" height="50" viewBox="0 0 88 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6">
+<circle cx="15.0574" cy="26.1517" r="13.65" transform="rotate(-3.84411 15.0574 26.1517)" fill="white"/>
+<circle cx="33.9906" cy="17.0619" r="13.65" transform="rotate(-3.84411 33.9906 17.0619)" fill="white"/>
+<circle cx="35.0364" cy="32.6268" r="13.65" transform="rotate(-3.84411 35.0364 32.6268)" fill="white"/>
+<circle cx="51.1141" cy="19.8201" r="13.65" transform="rotate(-3.84411 51.1141 19.8201)" fill="white"/>
+<circle cx="58.471" cy="32.3551" r="13.65" transform="rotate(-3.84411 58.471 32.3551)" fill="white"/>
+<circle cx="72.1287" cy="22.3169" r="13.65" transform="rotate(-3.84411 72.1287 22.3169)" fill="white"/>
+</g>
+</svg>
--- a/src/assets/darkmode-toggle/stars.svg
+++ b/src/assets/darkmode-toggle/stars.svg
@ -0,0 +1,47 @@
+<svg width="80" height="52" viewBox="0 0 80 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.35 13L12.8767 14.4233L14.3 14.95L12.8767 15.4767L12.35 16.9L11.8233 15.4767L10.4 14.95L11.8233 14.4233L12.35 13Z" fill="#DEE5F3"/>
+<path d="M35.75 23.4L36.2767 24.8233L37.7 25.35L36.2767 25.8767L35.75 27.3L35.2233 25.8767L33.8 25.35L35.2233 24.8233L35.75 23.4Z" fill="#DEE5F3"/>
+<path d="M17.55 46.8L18.0767 48.2233L19.5 48.75L18.0767 49.2767L17.55 50.7L17.0233 49.2767L15.6 48.75L17.0233 48.2233L17.55 46.8Z" fill="#DEE5F3"/>
+<path d="M24.05 27.3L24.2256 27.7744L24.7 27.95L24.2256 28.1256L24.05 28.6L23.8745 28.1256L23.4 27.95L23.8745 27.7744L24.05 27.3Z" fill="#DEE5F3"/>
+<path d="M13.65 36.4L13.8256 36.8744L14.3 37.05L13.8256 37.2256L13.65 37.7L13.4744 37.2256L13 37.05L13.4744 36.8744L13.65 36.4Z" fill="#DEE5F3"/>
+<path d="M28.275 49.4L28.5383 50.1117L29.25 50.375L28.5383 50.6383L28.275 51.35L28.0116 50.6383L27.3 50.375L28.0116 50.1117L28.275 49.4Z" fill="#DEE5F3"/>
+<g filter="url(#filter0_f_1_126)">
+<path d="M11.375 23.4L11.6384 24.1117L12.35 24.375L11.6384 24.6383L11.375 25.35L11.1117 24.6383L10.4 24.375L11.1117 24.1117L11.375 23.4Z" fill="#DEE5F3"/>
+</g>
+<path d="M5.85001 42.9L6.02557 43.3744L6.50001 43.55L6.02557 43.7256L5.85001 44.2L5.67445 43.7256L5.20001 43.55L5.67445 43.3744L5.85001 42.9Z" fill="#DEE5F3"/>
+<path d="M38.35 40.3L38.5256 40.7744L39 40.95L38.5256 41.1256L38.35 41.6L38.1745 41.1256L37.7 40.95L38.1745 40.7744L38.35 40.3Z" fill="#DEE5F3"/>
+<path d="M26.65 6.5L26.8256 6.97444L27.3 7.15L26.8256 7.32556L26.65 7.8L26.4744 7.32556L26 7.15L26.4744 6.97444L26.65 6.5Z" fill="#DEE5F3"/>
+<path d="M0.65 27.3L0.825559 27.7744L1.3 27.95L0.825559 28.1256L0.65 28.6L0.474441 28.1256L0 27.95L0.474441 27.7744L0.65 27.3Z" fill="#DEE5F3"/>
+<path d="M46.15 0L46.6767 1.42332L48.1 1.95L46.6767 2.47668L46.15 3.9L45.6233 2.47668L44.2 1.95L45.6233 1.42332L46.15 0Z" fill="#DEE5F3"/>
+<path d="M76.05 13L76.5767 14.4233L78 14.95L76.5767 15.4767L76.05 16.9L75.5233 15.4767L74.1 14.95L75.5233 14.4233L76.05 13Z" fill="#DEE5F3"/>
+<path d="M57.85 42.9L58.3767 44.3233L59.8 44.85L58.3767 45.3767L57.85 46.8L57.3233 45.3767L55.9 44.85L57.3233 44.3233L57.85 42.9Z" fill="#DEE5F3"/>
+<path d="M64.35 16.9L64.5256 17.3744L65 17.55L64.5256 17.7256L64.35 18.2L64.1745 17.7256L63.7 17.55L64.1745 17.3744L64.35 16.9Z" fill="#DEE5F3"/>
+<path d="M59.15 31.2L59.3256 31.6744L59.8 31.85L59.3256 32.0256L59.15 32.5L58.9744 32.0256L58.5 31.85L58.9744 31.6744L59.15 31.2Z" fill="#DEE5F3"/>
+<path d="M65.975 24.7L66.2383 25.4117L66.95 25.675L66.2383 25.9383L65.975 26.65L65.7117 25.9383L65 25.675L65.7117 25.4117L65.975 24.7Z" fill="#DEE5F3"/>
+<g filter="url(#filter1_f_1_126)">
+<path d="M51.675 13L51.9384 13.7117L52.65 13.975L51.9384 14.2383L51.675 14.95L51.4117 14.2383L50.7 13.975L51.4117 13.7117L51.675 13Z" fill="#DEE5F3"/>
+</g>
+<g filter="url(#filter2_f_1_126)">
+<path d="M46.15 31.2L46.3256 31.6744L46.8 31.85L46.3256 32.0256L46.15 32.5L45.9744 32.0256L45.5 31.85L45.9744 31.6744L46.15 31.2Z" fill="#DEE5F3"/>
+</g>
+<path d="M78.65 29.9L78.8256 30.3744L79.3 30.55L78.8256 30.7256L78.65 31.2L78.4744 30.7256L78 30.55L78.4744 30.3744L78.65 29.9Z" fill="#DEE5F3"/>
+<path d="M72.15 3.89999L72.3256 4.37443L72.8 4.54999L72.3256 4.72555L72.15 5.19999L71.9744 4.72555L71.5 4.54999L71.9744 4.37443L72.15 3.89999Z" fill="#DEE5F3"/>
+<path d="M40.95 16.9L41.1255 17.3744L41.6 17.55L41.1255 17.7256L40.95 18.2L40.7744 17.7256L40.3 17.55L40.7744 17.3744L40.95 16.9Z" fill="#DEE5F3"/>
+<defs>
+<filter id="filter0_f_1_126" x="10.14" y="23.14" width="2.47001" height="2.47" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.13" result="effect1_foregroundBlur_1_126"/>
+</filter>
+<filter id="filter1_f_1_126" x="50.44" y="12.74" width="2.47001" height="2.47" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.13" result="effect1_foregroundBlur_1_126"/>
+</filter>
+<filter id="filter2_f_1_126" x="45.24" y="30.94" width="1.81999" height="1.82" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.13" result="effect1_foregroundBlur_1_126"/>
+</filter>
+</defs>
+</svg>
--- a/src/assets/noise.svg
+++ b/src/assets/noise.svg
@ -0,0 +1,20 @@
+<svg
+        xmlns='http://www.w3.org/2000/svg'
+        xmlns:xlink='http://www.w3.org/1999/xlink'
+        width='300' height='300'>
+
+    <!--
+    Mon svg de qualite superieure
+    Bordel que j'aime cet effet
+     -->
+
+    <filter id='n' x='0' y='0'>
+        <feTurbulence
+                type='fractalNoise'
+                baseFrequency='0.75'
+                stitchTiles='stitch'/>
+    </filter>
+
+    <rect width='300' height='300' fill='#fff'/>
+    <rect width='300' height='300' filter="url(#n)" opacity='0.70'/>
+</svg>
--- a/src/blog/first.md
+++ b/src/blog/first.md
@ -0,0 +1,11 @@
+---
+title: "First Post"
+layout: "blog-post.njk"
+tags: "blog"
+date: 2025-04-04
+---
+This is my first post :)
+
+# meow
+
+## meowmeow
--- a/src/blog/index.md
+++ b/src/blog/index.md
@ -0,0 +1,7 @@
+---
+title: "blog page"
+layout: blog-page.njk
+---
+Dis is the main blog baige :D
+
+Here is my blog posts:
--- a/src/blog/second.md
+++ b/src/blog/second.md
@ -0,0 +1,7 @@
+---
+title: "Second Post"
+layout: "blog-post.njk"
+tags: "blog"
+date: 2025-04-04
+---
+This is my second post
--- a/src/blog/third.md
+++ b/src/blog/third.md
@ -0,0 +1,6 @@
+---
+title: "Third Post"
+layout: "blog-post.njk"
+tags: "blog"
+---
+yippeeeee 3 posts !
--- a/src/css/dark.css
+++ b/src/css/dark.css
@ -0,0 +1,79 @@
+.dark {
+    --red: #ff5a7a;
+    --pink: #c085ff;
+    --orange: #ffaa33;
+    --white: #eaddff;
+  
+    background: linear-gradient(149deg, rgba(18, 28, 81, 0.9) 0%, rgba(46, 23, 55, 0.9) 100%), url('/assets/noise.svg');
+    background-attachment: fixed;
+    color: var(--white);
+    transition: all 0.3s ease;
+  }
+  
+  /* Cards - smoother purple gradient, softened text */
+  .dark .card-uwu,
+  .dark .kyuties-card {
+    background: linear-gradient(149deg, rgba(39, 54, 124, 0.9) 0%, rgba(66, 26, 99, 0.9) 100%), url('/assets/noise.svg');
+    color: var(--white);
+    box-shadow: 0 4px 30px rgba(57, 28, 69, 0.5);
+  }
+  
+  /* Buttons - Better contrast, slightly softer shadows */
+  .dark .button {
+    background: linear-gradient(149deg, #d6b6f2 0%, #a169e6 100%), url('/assets/noise.svg');
+    color: #18002a;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25);
+  }
+  
+  /* Links - pastel hover with brighter highlight */
+  .dark a {
+    color: #e5caff;
+    transition: all 0.3s ease;
+  }
+  
+  .dark a:hover {
+    color: #ffffff;
+    text-shadow: 0 0 8px rgba(229, 202, 255, 0.9);
+  }
+  
+  /* Scrollbars - smoother blend */
+  .dark .card-uwu::-webkit-scrollbar-thumb {
+    background: #aa6eff;
+  }
+  
+  .dark .card-uwu::-webkit-scrollbar-thumb:hover {
+    background: #925cff;
+  }
+  
+  /* Hero section borders - subtle glow on grid */
+  .dark .hero {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 3em;
+  
+    background:
+      linear-gradient(to right, #b981e5 1px, transparent 1px) 0 0,
+      linear-gradient(to right, #b981e5 1px, transparent 1px) 0 100%,
+      linear-gradient(to left, #b981e5 1px, transparent 1px) 100% 0,
+      linear-gradient(to left, #b981e5 1px, transparent 1px) 100% 100%,
+      linear-gradient(to bottom, #b981e5 1px, transparent 1px) 0 0,
+      linear-gradient(to bottom, #b981e5 1px, transparent 1px) 100% 0,
+      linear-gradient(to top, #b981e5 1px, transparent 1px) 0 100%,
+      linear-gradient(to top, #b981e5 1px, transparent 1px) 100% 100%;
+  
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
+  }
+  
+  /* Blobs - consistent pastel shades */
+  .dark #blob1  { background-color: #9e1b5d; }
+  .dark #blob2    { background-color: #9345E6; }
+  .dark #blob3   { background-color: #C535E6; }
+  .dark #blob4 { background-color: #E635B7; }
+  
+  .dark .arrow {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojRUFEREZGO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPgo=)
+  }
+  
--- a/src/css/darkmode-toggle.css
+++ b/src/css/darkmode-toggle.css
@ -0,0 +1,167 @@
+:root {
+    --darkmode-toggle-bg-color: #cde7ff;
+    --darkmode-toggle-switch-width: 50px;
+    --darkmode-toggle-switch-height: 30px;
+    --darkmode-toggle-switch-round: 50px;
+    --darkmode-toggle-switch-padding-x: 5px;
+    --darkmode-toggle-switch-bg: linear-gradient(to bottom, #73bbff, #a2d1fd);
+    --darkmode-toggle-switch-dark-bg: linear-gradient(to top, #2b3347, #181d27);
+    --darkmode-toggle-border-width: 2px;
+    --darkmode-toggle-border-gradient: linear-gradient(to bottom, #a2d1fd, #cde7ff);
+    --darkmode-toggle-border-dark-gradient: linear-gradient(to bottom, #000000, #6c7384);
+    --darkmode-toggle-sunmoon-size: 20px;
+    --darkmode-toggle-transition: all 0.5s ease;
+    --darkmode-tooggle-border-color-light: #90C9FE;
+    --darkmode-tooggle-border-color-dark: #565C6B;
+}
+
+#darkmode-container {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--darkmode-toggle-switch-round);
+}
+
+.darkmode-label {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--darkmode-toggle-switch-width);
+    height: var(--darkmode-toggle-switch-height);
+    border-radius: var(--darkmode-toggle-switch-round);
+    cursor: pointer;
+    transition: var(--darkmode-toggle-transition);
+    background: var(--darkmode-toggle-switch-bg);
+    border: var(--darkmode-toggle-border-width) solid var(--darkmode-tooggle-border-color-light);
+    overflow: hidden;
+}
+
+#darkmode-container.dark .darkmode-label {
+    border: var(--darkmode-toggle-border-width) solid var(--darkmode-tooggle-border-color-dark);
+}
+
+.darkmode-label::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--darkmode-toggle-switch-round);
+    opacity: 0;
+    background: var(--darkmode-toggle-switch-dark-bg);
+    transition: var(--darkmode-toggle-transition);
+}
+
+#darkmode-container.dark .darkmode-label::before {
+    opacity: 1;
+}
+
+.darkmode-label input {
+    display: none;
+}
+
+.darkmode-sunmoon {
+    position: absolute;
+    width: var(--darkmode-toggle-sunmoon-size);
+    height: var(--darkmode-toggle-sunmoon-size);
+    border-radius: 50%;
+    transition: var(--darkmode-toggle-transition);
+    left: var(--darkmode-toggle-switch-padding-x);
+    z-index: 1;
+    background-color: #FFC187;
+    box-shadow: 0px 0px 11.7px 0px #FFC187, 0px 0px 20px 0px #ffc18768, -2px -2px 5px 0px #ffab5c inset;
+}
+
+#darkmode-container.dark .darkmode-sunmoon {
+    left: calc(100% - var(--darkmode-toggle-sunmoon-size) - var(--darkmode-toggle-switch-padding-x));
+    background-color: #dee5f3;
+    box-shadow: 0px 0px 51.7px 0px #dee5f3;
+}
+
+.darkmode-darkside {
+    position: absolute;
+    top: 0.5px;
+    left: 0.5px;
+    width: 75%;
+    height: 75%;
+    border-radius: 50%;
+    background-color: #FFC187;
+    transition: var(--darkmode-toggle-transition);
+}
+
+#darkmode-container.dark .darkmode-darkside {
+    background-color: #565c6b;
+}
+
+.darkmode-clouds {
+    border-radius: var(--darkmode-toggle-switch-round);
+    position: relative;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+.darkmode-cloud {
+    position: absolute;
+    width: 60%;
+    transition: var(--darkmode-toggle-transition);
+}
+
+.darkmode-cloud-1 {
+    bottom: -45%;
+    left: 0;
+}
+
+.darkmode-cloud-2 {
+    bottom: -15%;
+    left: 25px;
+}
+
+.darkmode-cloud-3 {
+    bottom: -20%;
+    right: 0px;
+}
+
+.darkmode-cloud-4 {
+    bottom: -06%;
+    right: -25px;
+}
+
+
+#darkmode-container.dark .darkmode-cloud-1 {
+    bottom: -35%;
+    left: -110px;
+}
+
+#darkmode-container.dark .darkmode-cloud-2 {
+    bottom: -15%;
+    left: -110px;
+    transition: all 0.7s ease;
+}
+
+#darkmode-container.dark .darkmode-cloud-3 {
+    bottom: -15%;
+    right: -110px;
+}
+
+#darkmode-container.dark .darkmode-cloud-4 {
+    bottom: -5%;
+    right: -110px;
+    transition: all 0.7s ease;
+}
+
+.darkmode-stars {
+    position: absolute;
+    top: 150%;
+    left: 0;
+    transform: translateY(-50%);
+    pointer-events: none;
+    transition: var(--darkmode-toggle-transition);
+}
+
+#darkmode-container.dark .darkmode-stars {
+    top: 70%;
+}
--- a/src/css/light.css
+++ b/src/css/light.css
@ -0,0 +1,432 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Roboto:wght@400;700&family=Righteous&family=Kosugi&family=RocknRoll+One&family=Gothic+A1&family=Black+Han+Sans&family=PT+Sans+Caption&family=Russo+One&family=Palanquin+Dark&family=Raleway:wght@500&family=Commissioner&family=Alegreya+Sans:wght@700&family=Mitr&family=Lalezar&display=swap');
+
+:root {
+    margin: 0;
+    --red: #d62800;
+    --pink: #d462a6;
+    --orange: #ff9b56;
+    --white: #ffffff;
+    background: linear-gradient(149deg, rgba(255, 1, 1, 0.5) 0%, rgba(228, 177, 49, 0.5) 100%), url('/assets/noise.svg');
+    background-attachment: fixed;
+    font-family: "Righteos";
+    transition: all 0.3s ease;
+}
+
+.title {
+    font-family: "Righteous";
+    font-size: 3em;
+    margin-top: 2em;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
+    transition: all 0.3s ease;
+}
+
+a:hover {
+    color: #000;
+}
+
+body::before {
+    background: #8C8C8C;
+    filter: url(#noiseFilter);
+}
+
+html, body {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+    /* height: 100%; */
+    gap: 3em;
+    margin: 0 10em;
+    background: transparent;
+}
+
+.cards {
+    display: grid;
+    justify-content: center;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+.cards-column {
+    display: flexbox;
+    flex-direction: column;
+    grid-column: span 2;
+}
+
+.card-uwu {
+    overflow: auto;
+    margin: 40px 20px;
+    background: #ffffff;
+    align-items: center;
+    text-align: center;
+    border-radius: 1.4vw;
+    padding: 20px;
+
+    background: linear-gradient(149deg, rgba(232, 21, 193, 0.8) 0%, rgba(236, 148, 24, 0.8) 100%), url('/assets/noise.svg');
+    background-attachment: fixed;
+}
+
+.kyuties {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.kyuties-card {
+    overflow: auto;
+    margin: 10px;
+    width: 25vw;
+    height: 25vw;
+    background: #ffffff;
+    align-items: center;
+    text-align: center;
+    border-radius: 1.4vw;
+    padding: 20px;
+
+    background: linear-gradient(149deg, rgba(232, 21, 193, 0.8) 0%, rgba(236, 148, 24, 0.8) 100%), url('/assets/noise.svg');
+    background-attachment: fixed;
+}
+
+.card-header {
+    grid-column: 2 / span 2;
+    justify-content: center;
+    align-content: center;
+    font-family: 'Righteous';
+    font-weight: 150;
+    font-style: italic;
+    font-size: 24px;
+    margin: 0px;
+}
+
+.card-uwu:hover {
+    box-shadow: 0 4px 80px 10px rgba(27, 26, 42, 0.25);
+}
+
+/* Custom Scrollbar styles */
+.card-uwu::-webkit-scrollbar {
+    width: 10px; /* Adjust the width of the scrollbar */
+}
+
+.card-uwu::-webkit-scrollbar-track {
+    background: transparent; /* The track of the scrollbar */
+}
+
+.card-uwu::-webkit-scrollbar-thumb {
+    background: #901eed; /* The draggable part of the scrollbar */
+    border-radius: 100px;
+}
+
+.card-uwu::-webkit-scrollbar-thumb:hover {
+    background: #5d129a; /* Color when you hover over the draggable part of the scrollbar */
+}
+
+
+/* For Firefox */
+.card-uwu {
+    scrollbar-width: thin; /* "auto" or "thin" */
+    scrollbar-color: #901eed transparent; /* The draggable part of the scrollbar and the track */
+}
+
+.card-title {
+    font-family: "Righteous";
+    font-size: 3em;
+}
+
+.card-image {
+    width: 40%;
+    height: 40%;
+    border-radius: 50%;
+    object-fit: cover;
+    box-shadow: 0 4px 80px 10px rgba(27, 26, 42, 0.35);
+}
+
+
+a.card-link {
+    color: #000;
+    font-size: 2em;
+    text-decoration: underline;
+}
+
+/* Blobs */
+.blob-cont {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: -2;
+    height: 500px;
+    width: 500px;
+    position: relative;
+    right: 5em;
+}
+
+
+.blob {
+    border-radius: 100px;
+    filter: blur(40px);
+}
+
+#blob1 {
+    background-color: var(--white);
+    position: absolute;
+    top: 250px;
+    right: 0;
+    height: 200px;
+    width: 200px;
+
+    animation: blob4 8s infinite linear;
+}
+
+#blob2 {
+    background-color: var(--red);
+    position: absolute;
+    top: 200px;
+    left: 100px;
+    height: 200px;
+    width: 200px;
+
+    animation: blob1 8s infinite ease;
+}
+
+#blob3 {
+    background-color: var(--orange);
+    position: absolute;
+    top: 80px;
+    right: -20px;
+    height: 200px;
+    width: 250px;
+
+    animation: blob2 8s infinite ease;
+}
+
+#blob4 {
+    background-color: var(--pink);
+    position: absolute;
+    right: 0;
+    top: 300px;
+    height: 250px;
+    width: 200px;
+
+    animation: blob3 8s infinite linear;
+}
+
+@keyframes blob1 {
+    0% {
+        top: 200px;
+        left: 100px;
+        transform: scale(1);
+    }
+    30% {
+        top: 300px;
+        left: 150px;
+        transform: scale(1.2);
+    }
+    60% {
+        top: 100px;
+        left: 200px;
+        transform: scale(1.3);
+    }
+    100% {
+        top: 200px;
+        left: 100px;
+        transform: scale(1);
+    }
+}
+
+@keyframes blob2 {
+    0% {
+        top: 80px;
+        right: -20px;
+        transform: scale(1.2);
+    }
+    30% {
+        top: 300px;
+        right: -20px;
+        transform: scale(1);
+    }
+    60% {
+        top: 200px;
+        right: 100px;
+        transform: scale(1);
+    }
+    100% {
+        top: 80px;
+        right: -20px;
+        transform: scale(1.2);
+    }
+}
+
+@keyframes blob3 {
+    0% {
+        top: 250px;
+        right: 0;
+        transform: scale(1);
+    }
+    30% {
+        top: 150px;
+        right: 150px;
+        transform: scale(1.4);
+    }
+    60% {
+        top: 250px;
+        right: 100px;
+        transform: scale(1);
+    }
+    100% {
+        top: 250px;
+        right: 0;
+        transform: scale(1);
+    }
+}
+
+@keyframes blob4 {
+    0% {
+        top: 150px;
+        right: -50px;
+        transform: scale(1.6);
+    }
+    30% {
+        top: 100px;
+        right: 40px;
+        transform: scale(1.3);
+    }
+    60% {
+        top: 250px;
+        right: 10px;
+        transform: scale(1);
+    }
+    100% {
+        top: 150px;
+        right: -50px;
+        transform: scale(1.6);
+    }
+}
+
+header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 10vh;
+    font-family: "Righteous";
+    font-size: 20px;
+    margin-top: 2em;
+}
+
+nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 3em;
+    margin-top: 0.6em;
+}
+
+.hero {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    gap: 3em;
+    background: linear-gradient(to right, #151515 1px, transparent 1px) 0 0,
+    linear-gradient(to right, #151515 1px, transparent 1px) 0 100%,
+    linear-gradient(to left, #151515 1px, transparent 1px) 100% 0,
+    linear-gradient(to left, #151515 1px, transparent 1px) 100% 100%,
+    linear-gradient(to bottom, #151515 1px, transparent 1px) 0 0,
+    linear-gradient(to bottom, #151515 1px, transparent 1px) 100% 0,
+    linear-gradient(to top, #151515 1px, transparent 1px) 0 100%,
+    linear-gradient(to top, #151515 1px, transparent 1px) 100% 100%;
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
+}
+
+.hero-title {
+    margin-top: 10vh;
+    font-size: 5em;
+}
+
+:root::-webkit-scrollbar {
+    display: none;
+}
+
+p {
+    max-width: 45vw;
+}
+
+.link {
+    font-family: "Righteous";
+    text-decoration: underline;
+    color: #910c75;
+}
+
+.button {
+    font-family: "Righteous";
+    font-size: 1.5em;
+    border-radius: 13px;
+    border: none;
+    padding: 1em 2em;
+    background: linear-gradient(149deg, rgba(232, 21, 193, 0.8) 0%, rgba(236, 148, 24, 0.8) 100%), url('/assets/noise.svg');
+    background-attachment: fixed;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+    color: #000;
+    margin-bottom: 1em;
+    width: 5vw;
+}
+
+.category {
+    font-family: "Righteous";
+    font-size: 2em;
+    margin-top: 5vh;
+}
+
+img.emoji {
+    vertical-align: -10%;
+}
+
+.bold-text {
+    font-weight: bold;
+}
+
+ul.socials {
+    margin-left: -25px;
+    font-size: 1.2em;
+}
+
+/* arrow bounce */
+.arrow
+{
+    position: relative;
+    bottom: -2rem;
+    left: 50%;
+    margin-left:-20px;
+    width: 40px;
+    height: 40px;
+
+    /**
+    * Dark Arrow Down
+    */
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojMjIyMjIyO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==);
+    background-size: contain;
+
+    opacity: 1;
+transition: opacity 0.3s ease;
+}
+
+.bounce {
+    animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+    }
+    40% {
+    transform: translateY(-30px);
+    }
+    60% {
+    transform: translateY(-15px);
+    }
+}
--- a/src/css/main.css
+++ b/src/css/main.css
@ -0,0 +1,3 @@
+@import url(./light.css);
+@import url(./dark.css);
+@import url(./darkmode-toggle.css);
--- a/src/index.njk
+++ b/src/index.njk
@ -0,0 +1,13 @@
+---
+title: "main page"
+layout: base.njk
+---
+<main>
+    <h1 class="hero-title">
+        {{ title }}
+    </h1>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</main>
+
+{% include "src/_includes/partials/blob.html" %}