Merge branch 'main' into gallery/valencia

README.md

@@ -50,23 +50,22 @@
 
 | Color | Hex |
 |-|-|
-| Peach Cream | ![#FFF8EA](https://via.placeholder.com/10/FFF8EA?text=+) `#FFF8EA` |
-| Dark Chestnut | ![#594545](https://via.placeholder.com/10/594545?text=+) `#594545` |
-| Dusty Rose | ![#815B5B](https://via.placeholder.com/10/815B5B?text=+) `#815B5B` |
-| Old Rose | ![#9E7676](https://via.placeholder.com/10/9E7676?text=+) `#9E7676` |
-| Pale Taupe | ![#DAC0A3](https://via.placeholder.com/10/DAC0A3?text=+) `#DAC0A3` |
-| Duke Blue | ![#0D47A1](https://via.placeholder.com/10/0D47A1?text=+) `#0D47A1` |
+| Coffee Cream | ![#F7F0E8](https://via.placeholder.com/10/F7F0E8?text=+) `#F7F0E8` |
+| Espresso Text | ![#3B2C29](https://via.placeholder.com/10/3B2C29?text=+) `#3B2C29` |
+| Latte Secondary Text | ![#78605C](https://via.placeholder.com/10/78605C?text=+) `#78605C` |
+| Cappuccino Accents | ![#A48B82](https://via.placeholder.com/10/A48B82?text=+) `#A48B82` |
+| Caramel Macchiato | ![#B08968](https://via.placeholder.com/10/B08968?text=+) `#B08968` |
 
 ### Dark mode
 
 | Color | Hex |
 |-|-|
-| Catppuccin Base | ![#FFF8EA](https://via.placeholder.com/10/FFF8EA?text=+) `#FFF8EA` |
-| Catppuccin Text | ![#cad3f5](https://via.placeholder.com/10/cad3f5?text=+) `#cad3f5` |
-| Catppuccin Overlay0 | ![#6e738d](https://via.placeholder.com/10/6e738d?text=+) `#6e738d` |
-| Catppuccin Surface0 | ![#363a4f](https://via.placeholder.com/10/363a4f?text=+) `#363a4f` |
-| Catppuccin Crust | ![#181926](https://via.placeholder.com/10/181926?text=+) `#181926` |
-| Catppuccin Maroon | ![#ee99a0](https://via.placeholder.com/10/ee99a0?text=+) `#ee99a0` |
+| Deep Ocean | ![#0F1A1C](https://via.placeholder.com/10/0F1A1C?text=+) `#0F1A1C` |
+| Mint Foam Text | ![#9AD3BB](https://via.placeholder.com/10/9AD3BB?text=+) `#9AD3BB` |
+| Coral Reef Accent | ![#3A6F7F](https://via.placeholder.com/10/3A6F7F?text=+) `#3A6F7F` |
+| Seaweed Highlight | ![#2B4F60](https://via.placeholder.com/10/2B4F60?text=+) `#2B4F60` |
+| Lagoon | ![#1A333F](https://via.placeholder.com/10/1A333F?text=+) `#1A333F` |
+| Aquamarine | ![#7FCDCD](https://via.placeholder.com/10/7FCDCD?text=+) `#7FCDCD` |
 
 ## Versionlog
 - The first iteration of my website was plain html and css..

public/socials/github_dark.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.29183 21V18.4407L9.3255 16.6219C9.36595 16.0561 9.58639 15.5228 9.94907 15.11C9.95438 15.1039 9.95972 15.0979 9.9651 15.0919C9.9791 15.0763 9.96988 15.0511 9.94907 15.0485V15.0485C7.52554 14.746 5.0005 13.7227 5.0005 9.26749C4.9847 8.17021 5.3427 7.10648 6.00437 6.27215C6.02752 6.24297 6.05103 6.21406 6.07492 6.18545V6.18545C6.10601 6.1482 6.11618 6.09772 6.10194 6.05134C6.10107 6.04853 6.10021 6.04571 6.09935 6.04289C6.0832 5.9899 6.06804 5.93666 6.05388 5.88321C5.81065 4.96474 5.86295 3.98363 6.20527 3.09818C6.20779 3.09164 6.21034 3.08511 6.2129 3.07858C6.22568 3.04599 6.25251 3.02108 6.28698 3.01493V3.01493C6.50189 2.97661 7.37036 2.92534 9.03298 4.07346C9.08473 4.10919 9.13724 4.14609 9.19053 4.18418V4.18418C9.22901 4.21168 9.27794 4.22011 9.32344 4.20716C9.32487 4.20675 9.32631 4.20634 9.32774 4.20593C9.41699 4.18056 9.50648 4.15649 9.59617 4.1337C11.1766 3.73226 12.8234 3.73226 14.4038 4.1337C14.4889 4.1553 14.5737 4.17807 14.6584 4.20199C14.6602 4.20252 14.6621 4.20304 14.6639 4.20356C14.7174 4.21872 14.7749 4.20882 14.8202 4.17653V4.17653C14.8698 4.14114 14.9187 4.10679 14.967 4.07346C16.6257 2.92776 17.4894 2.9764 17.7053 3.01469V3.01469C17.7404 3.02092 17.7678 3.04628 17.781 3.07946C17.7827 3.08373 17.7843 3.08799 17.786 3.09226C18.1341 3.97811 18.1894 4.96214 17.946 5.88321C17.9315 5.93811 17.9159 5.9928 17.8993 6.04723V6.04723C17.8843 6.09618 17.8951 6.14942 17.9278 6.18875C17.9289 6.18998 17.9299 6.19121 17.9309 6.19245C17.9528 6.21877 17.9744 6.24534 17.9956 6.27215C18.6573 7.10648 19.0153 8.17021 18.9995 9.26749C18.9995 13.747 16.4565 14.7435 14.0214 15.015V15.015C14.0073 15.0165 14.001 15.0334 14.0105 15.0439C14.0141 15.0479 14.0178 15.0519 14.0214 15.0559C14.2671 15.3296 14.4577 15.6544 14.5811 16.0103C14.7101 16.3824 14.7626 16.7797 14.7351 17.1754V21" stroke="#9AD3BB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 17C4.36915 17.0523 4.72159 17.1883 5.03065 17.3975C5.3397 17.6068 5.59726 17.8838 5.7838 18.2078C5.94231 18.4962 6.15601 18.7504 6.41264 18.9557C6.66927 19.161 6.96379 19.3135 7.27929 19.4043C7.59478 19.4952 7.92504 19.5226 8.25112 19.485C8.5772 19.4475 8.89268 19.3457 9.17946 19.1855" stroke="#9AD3BB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/socials/github_light.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.29183 21V18.4407L9.3255 16.6219C9.36595 16.0561 9.58639 15.5228 9.94907 15.11C9.95438 15.1039 9.95972 15.0979 9.9651 15.0919C9.9791 15.0763 9.96988 15.0511 9.94907 15.0485V15.0485C7.52554 14.746 5.0005 13.7227 5.0005 9.26749C4.9847 8.17021 5.3427 7.10648 6.00437 6.27215C6.02752 6.24297 6.05103 6.21406 6.07492 6.18545V6.18545C6.10601 6.1482 6.11618 6.09772 6.10194 6.05134C6.10107 6.04853 6.10021 6.04571 6.09935 6.04289C6.0832 5.9899 6.06804 5.93666 6.05388 5.88321C5.81065 4.96474 5.86295 3.98363 6.20527 3.09818C6.20779 3.09164 6.21034 3.08511 6.2129 3.07858C6.22568 3.04599 6.25251 3.02108 6.28698 3.01493V3.01493C6.50189 2.97661 7.37036 2.92534 9.03298 4.07346C9.08473 4.10919 9.13724 4.14609 9.19053 4.18418V4.18418C9.22901 4.21168 9.27794 4.22011 9.32344 4.20716C9.32487 4.20675 9.32631 4.20634 9.32774 4.20593C9.41699 4.18056 9.50648 4.15649 9.59617 4.1337C11.1766 3.73226 12.8234 3.73226 14.4038 4.1337C14.4889 4.1553 14.5737 4.17807 14.6584 4.20199C14.6602 4.20252 14.6621 4.20304 14.6639 4.20356C14.7174 4.21872 14.7749 4.20882 14.8202 4.17653V4.17653C14.8698 4.14114 14.9187 4.10679 14.967 4.07346C16.6257 2.92776 17.4894 2.9764 17.7053 3.01469V3.01469C17.7404 3.02092 17.7678 3.04628 17.781 3.07946C17.7827 3.08373 17.7843 3.08799 17.786 3.09226C18.1341 3.97811 18.1894 4.96214 17.946 5.88321C17.9315 5.93811 17.9159 5.9928 17.8993 6.04723V6.04723C17.8843 6.09618 17.8951 6.14942 17.9278 6.18875C17.9289 6.18998 17.9299 6.19121 17.9309 6.19245C17.9528 6.21877 17.9744 6.24534 17.9956 6.27215C18.6573 7.10648 19.0153 8.17021 18.9995 9.26749C18.9995 13.747 16.4565 14.7435 14.0214 15.015V15.015C14.0073 15.0165 14.001 15.0334 14.0105 15.0439C14.0141 15.0479 14.0178 15.0519 14.0214 15.0559C14.2671 15.3296 14.4577 15.6544 14.5811 16.0103C14.7101 16.3824 14.7626 16.7797 14.7351 17.1754V21" stroke="#3B2C29" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 17C4.36915 17.0523 4.72159 17.1883 5.03065 17.3975C5.3397 17.6068 5.59726 17.8838 5.7838 18.2078C5.94231 18.4962 6.15601 18.7504 6.41264 18.9557C6.66927 19.161 6.96379 19.3135 7.27929 19.4043C7.59478 19.4952 7.92504 19.5226 8.25112 19.485C8.5772 19.4475 8.89268 19.3457 9.17946 19.1855" stroke="#3B2C29" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/socials/spotify_dark.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="300" height="300" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>spotify [#162]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7479.000000)" fill="#9AD3BB">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M99.915,7327.865 C96.692,7325.951 91.375,7325.775 88.297,7326.709 C87.803,7326.858 87.281,7326.58 87.131,7326.085 C86.981,7325.591 87.26,7325.069 87.754,7324.919 C91.287,7323.846 97.159,7324.053 100.87,7326.256 C101.314,7326.52 101.46,7327.094 101.196,7327.538 C100.934,7327.982 100.358,7328.129 99.915,7327.865 L99.915,7327.865 Z M99.81,7330.7 C99.584,7331.067 99.104,7331.182 98.737,7330.957 C96.05,7329.305 91.952,7328.827 88.773,7329.792 C88.36,7329.916 87.925,7329.684 87.8,7329.272 C87.676,7328.86 87.908,7328.425 88.32,7328.3 C91.951,7327.198 96.466,7327.732 99.553,7329.629 C99.92,7329.854 100.035,7330.334 99.81,7330.7 L99.81,7330.7 Z M98.586,7333.423 C98.406,7333.717 98.023,7333.81 97.729,7333.63 C95.381,7332.195 92.425,7331.871 88.944,7332.666 C88.609,7332.743 88.274,7332.533 88.198,7332.197 C88.121,7331.862 88.33,7331.528 88.667,7331.451 C92.476,7330.58 95.743,7330.955 98.379,7332.566 C98.673,7332.746 98.766,7333.129 98.586,7333.423 L98.586,7333.423 Z M94,7319 C88.477,7319 84,7323.477 84,7329 C84,7334.523 88.477,7339 94,7339 C99.523,7339 104,7334.523 104,7329 C104,7323.478 99.523,7319.001 94,7319.001 L94,7319 Z" id="spotify-[#162]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>

public/socials/spotify_light.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="300" height="300" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>spotify [#162]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7479.000000)" fill="#3B2C29">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M99.915,7327.865 C96.692,7325.951 91.375,7325.775 88.297,7326.709 C87.803,7326.858 87.281,7326.58 87.131,7326.085 C86.981,7325.591 87.26,7325.069 87.754,7324.919 C91.287,7323.846 97.159,7324.053 100.87,7326.256 C101.314,7326.52 101.46,7327.094 101.196,7327.538 C100.934,7327.982 100.358,7328.129 99.915,7327.865 L99.915,7327.865 Z M99.81,7330.7 C99.584,7331.067 99.104,7331.182 98.737,7330.957 C96.05,7329.305 91.952,7328.827 88.773,7329.792 C88.36,7329.916 87.925,7329.684 87.8,7329.272 C87.676,7328.86 87.908,7328.425 88.32,7328.3 C91.951,7327.198 96.466,7327.732 99.553,7329.629 C99.92,7329.854 100.035,7330.334 99.81,7330.7 L99.81,7330.7 Z M98.586,7333.423 C98.406,7333.717 98.023,7333.81 97.729,7333.63 C95.381,7332.195 92.425,7331.871 88.944,7332.666 C88.609,7332.743 88.274,7332.533 88.198,7332.197 C88.121,7331.862 88.33,7331.528 88.667,7331.451 C92.476,7330.58 95.743,7330.955 98.379,7332.566 C98.673,7332.746 98.766,7333.129 98.586,7333.423 L98.586,7333.423 Z M94,7319 C88.477,7319 84,7323.477 84,7329 C84,7334.523 88.477,7339 94,7339 C99.523,7339 104,7334.523 104,7329 C104,7323.478 99.523,7319.001 94,7319.001 L94,7319 Z" id="spotify-[#162]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>

public/socials/webring_dark.svg

@@ -0,0 +1 @@
+<svg fill="none" height="300" stroke="#9AD3BB" stroke-linecap="square" stroke-width="28" width="300" xmlns="http://www.w3.org/2000/svg"><path d="M201.962 210a60 60 0 10-103.924-60l-50 86.603"/><path d="M98.038 210a60 60 0 10103.924-60l-50-86.603"/><path d="M150 120a60 60 0 100 120h100"/></svg>

public/socials/webring_light.svg

@@ -0,0 +1 @@
+<svg fill="none" height="300" stroke="#3B2C29" stroke-linecap="square" stroke-width="28" width="300" xmlns="http://www.w3.org/2000/svg"><path d="M201.962 210a60 60 0 10-103.924-60l-50 86.603"/><path d="M98.038 210a60 60 0 10103.924-60l-50-86.603"/><path d="M150 120a60 60 0 100 120h100"/></svg>

src/components/Footer.astro

@@ -1,7 +1,37 @@
 ---
 const today = new Date();
 ---
+<script type="module" client:load>
+  const githubImage = document.getElementById('githubImage');
+  const spotifyImage = document.getElementById('spotifyImage');
+  const webringImage = document.getElementById('webringImage');
 
-<footer class="flex justify-center py-5 mt-auto footerbg">
-	{today.getFullYear()} &copy; Sindre Kjelsrud.
+  const updateImageForTheme = () => {
+    const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+    githubImage.src = currentTheme === 'dark' ? '/socials/github_light.svg' : '/socials/github_dark.svg';
+    spotifyImage.src = currentTheme === 'dark' ? '/socials/spotify_light.svg' : '/socials/spotify_dark.svg';
+    webringImage.src = currentTheme === 'dark' ? '/socials/webring_light.svg' : '/socials/webring_dark.svg';
+  };
+
+  updateImageForTheme();
+
+  const themeToggle = document.getElementById('themeToggle');
+  if (themeToggle) {
+    themeToggle.addEventListener('click', updateImageForTheme);
+  }
+</script>
+
+<footer class="flex justify-between py-5 mt-5 footerbg">
+	<div>Sindre Kjelsrud &copy; {today.getFullYear()}</div>
+	<div class="flex gap-1">
+    <a href="https://github.com/SindreKjelsrud" aria-label="Link to my GitHub" target="_blank">
+      <img id="githubImage" height="30" width="30" src="/socials/github_dark.svg" alt="GitHub"/>
+    </a>
+    <a href="https://open.spotify.com/user/kjelsrud!" aria-label="Link to my Spotify" target="_blank">
+      <img id="spotifyImage" height="30" width="30" src="/socials/spotify_dark.svg" alt="Spotify"/>
+    </a>
+    <a href="https://webring.xxiivv.com/#sid" target="_blank" rel="noopener" target="_blank">
+      <img id="webringImage" height="30" width="30" src="/socials/webring_dark.svg" alt="XXIIVV webring"/>
+    </a>
+  </div>
 </footer>

src/components/Header.astro

@@ -1,18 +1,30 @@
 ---
-import HeaderLink from './HeaderLink.astro';
 import ThemeIcon from './ThemeIcon.astro';
+
+const pathname = new URL(Astro.request.url).pathname;
+const pathSegments = pathname.slice(1).split('/').filter(segment => segment !== '');
+
+function buildHref(index) {
+    if (pathSegments.length === 0) return '/';
+    return ' /' + pathSegments.slice(0, index + 1).join('/');
+}
+
+const isLandingPage = pathSegments.length === 0;
 ---
 
 <header class="flex justify-between items-center py-5">
-	<div>
-		<a class="text-2xl font-semibold" href="/">
-			$ ~/sidski
-		</a>
-		<ThemeIcon />
-	</div>
-	<nav class="flex gap-2">
-		<HeaderLink href="/about">whoami</HeaderLink>
-		<HeaderLink href="/blog">blog</HeaderLink>
-		<HeaderLink href="/more">more</HeaderLink>
-	</nav>
+  <div>
+    <a class="text-l font-semibold" href="/">~</a>
+    {isLandingPage ? <span> / </span> : ''}
+    {pathSegments.map((segment, index) => (
+      <>
+        <span> / </span>
+        <a class="text-l font-semibold italic" href={buildHref(index)}>
+          {segment}
+        </a>
+      </>
+    ))}
+  </div>
+  <ThemeIcon />
 </header>
+

src/components/HeaderLink.astro

@@ -16,9 +16,6 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, '');
 	a {
 		display: inline-block;
 		text-decoration: none;
-	}
-	a.active {
 		font-weight: bolder;
-		border-bottom: 2px solid;
 	}
 </style>

src/components/ThemeIcon.astro

@@ -12,12 +12,12 @@
       border: 0;
       background: none;
     }
-    .sun { fill: #815B5B; }
-    .moon { fill: transparent; }
+    .sun { fill: transparent; }
+    .moon { fill: #9AD3BB; }
   
   
-    :global(.dark) .sun { fill: transparent; }
-    :global(.dark) .moon { fill: #DDE6ED; }
+    :global(.dark) .sun { fill: #3B2C29; }
+    :global(.dark) .moon { fill: transparent; }
   </style>
 
 <script is:inline>
@@ -25,16 +25,16 @@
       if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
         return localStorage.getItem('theme');
       }
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        return 'dark';
-      }
+      if (window.matchMedia('(prefers-color-scheme: light)').matches) {
         return 'light';
+      }
+        return 'dark';
     })();
   
-    if (theme === 'light') {
-      document.documentElement.classList.remove('dark');
+    if (theme === 'dark') {
+      document.documentElement.classList.remove('light');
     } else {
-      document.documentElement.classList.add('dark');
+      document.documentElement.classList.add('light');
     }
   
     window.localStorage.setItem('theme', theme);

src/data/biblioteca.json

@@ -1,5 +1,18 @@
 [
-     {
+    {
+        "isbn": "9781529035667",
+        "title": "Permanent Record",
+        "date": 
+            {
+              "year": "2024",
+              "month": "02",
+              "day": "19",
+              "string": "2024-02-19"
+            },
+        "my_rating": 5,
+        "author": "Edward Snowden"
+    },
+    {
         "isbn": "9788492444328",
         "title": "The Summit of the Gods: Vol.2",
         "date": 

src/data/moonboard.json

@@ -0,0 +1,32 @@
+{
+  "2016": [
+    {
+      "route":"BokChoiBoi",
+      "grade":"6B+",
+      "benchmark":false,
+      "tries":5,
+      "image":"/img/moonboard_2016/bokchoiboi.webp",
+      "date": 
+        {
+          "year": "2024",
+          "month": "02",
+          "day": "07",
+          "string": "07.02.2024"
+        }
+    },
+    {
+      "route":"An easy problem",
+      "grade":"6B+",
+      "benchmark":true,
+      "tries":1,
+      "image":"/img/moonboard_2016/aneasyproblem.webp",
+      "date": 
+        {
+          "year": "2024",
+          "month": "02",
+          "day": "09",
+          "string": "09.02.2024"
+        }
+    }
+  ] 
+}

src/data/vinyl.json

@@ -1,94 +1,117 @@
 [
     {
         "album": "Harry's House",
-        "artist": "Harry Styles"
+        "artist": "Harry Styles",
+        "cover": "/img/vinyl/harrys_house.webp"
     },
     {
         "album": "SÅ KLART DET GJØR VONDT",
-        "artist": "Ramón"
+        "artist": "Ramón",
+        "cover": "/img/vinyl/sa_klart_det_gjor_vondt.webp"
     },
     {
         "album": "Minecraft Volume Alpha",
-        "artist": "C418"
+        "artist": "C418",
+        "cover": "/img/vinyl/minecraft_volume_alpha.webp"
     },
     {
         "album": "College Park",
-        "artist": "Logic"
+        "artist": "Logic",
+        "cover": "/img/vinyl/college_park.webp"
     },
     {
         "album": "Evig Eventyr",
-        "artist": "Ka2"
+        "artist": "Ka2",
+        "cover": "/img/vinyl/evig_eventyr.webp"
     },
     {
         "album": "Grease",
-        "artist": "John Travolta & Olivia Newton-John"
+        "artist": "John Travolta & Olivia Newton-John",
+        "cover": "/img/vinyl/grease.webp"
     },
     {
         "album": "Under Cover",
-        "artist": "The Rolling Stones"
+        "artist": "The Rolling Stones",
+        "cover": "/img/vinyl/under_cover.webp"
     },
     {
         "album": "The Beatles (The White Album)",
-        "artist": "The Beatles"
+        "artist": "The Beatles",
+        "cover": "/img/vinyl/the_white_album.webp"
     },
     {
         "album": "Beverly Hills Cop",
-        "artist": "Various artists"
+        "artist": "Various artists",
+        "cover": "/img/vinyl/beverly_hills_cop.webp"
     },
     {
         "album": "One Trick Pony",
-        "artist": "Paul Simon"
+        "artist": "Paul Simon",
+        "cover": "/img/vinyl/one_trick_pony.webp"
     },
     {
         "album": "The Domino Theory",
-        "artist": "Bolland"
+        "artist": "Bolland",
+        "cover": "/img/vinyl/the_domino_theory.jpg"
     },
     {
         "album": "Master of Reality",
-        "artist": "Black Sabbath"
+        "artist": "Black Sabbath",
+        "cover": "/img/vinyl/master_of_reality.webp"
     },
     {
         "album": "Studio Tan",
-        "artist": "Frank Zappa"
+        "artist": "Frank Zappa",
+        "cover": "/img/vinyl/studio_tan.webp"
     },
     {
         "album": "DARE!",
-        "artist": "The Human League"
+        "artist": "The Human League",
+        "cover": "/img/vinyl/dare.webp"
     },
     {
         "album": "Saturday Night Fever",
-        "artist": "Bee Gees"
+        "artist": "Bee Gees",
+        "cover": "/img/vinyl/saturday_night_fever.webp"
     },
     {
         "album": "Cruisin",
-        "artist": "Village People"
+        "artist": "Village People",
+        "cover": "/img/vinyl/cruisin.webp"
     },
     {
         "album": "Turn Back",
-        "artist": "Toto"
+        "artist": "Toto",
+        "cover": "/img/vinyl/turn_back.jpg"
     },
     {
         "album": "Arrival",
-        "artist": "ABBA"
+        "artist": "ABBA",
+        "cover": "/img/vinyl/arrival.webp"
     },
     {
         "album": "Knights of the New Thunder",
-        "artist": "TNT"
+        "artist": "TNT",
+        "cover": "/img/vinyl/knights_of_the_new_thunder.webp"
     },
     {
         "album": "Combat Rock",
-        "artist": "The Clash"
+        "artist": "The Clash",
+        "cover": "/img/vinyl/combat_rock.webp"
     },
     {
         "album": "Asia",
-        "artist": "Asia"
+        "artist": "Asia",
+        "cover": "/img/vinyl/asia.webp"
     },
     {
         "album": "Face Value",
-        "artist": "Phil Collins"
+        "artist": "Phil Collins",
+        "cover": "/img/vinyl/face_value.webp"
     },
     {
         "album": "Greatest Hits",
-        "artist": "Air Supply"
+        "artist": "Air Supply",
+        "cover": "/img/vinyl/greatest_hits_airsupply.webp"
     }
 ]

src/data/watched.json

@@ -1,4 +1,52 @@
 [
+     {
+        "title": "Citizenfour",
+        "type": "movie",
+        "date": 
+            {
+            "year": "2024",
+            "month": "02",
+            "day": "25",
+            "string": "2024-02-25"
+            },
+        "my_rating": 5
+    },
+    {
+        "title": "Better Call Saul S06",
+        "type": "series",
+        "date": 
+            {
+            "year": "2024",
+            "month": "02",
+            "day": "24",
+            "string": "2024-02-24"
+            },
+        "my_rating": 4
+    },
+    {
+        "title": "Aksel",
+        "type": "movie",
+        "date": 
+            {
+            "year": "2024",
+            "month": "02",
+            "day": "24",
+            "string": "2024-02-24"
+            },
+        "my_rating": 4
+    },
+    {
+        "title": "Better Call Saul S05",
+        "type": "series",
+        "date": 
+            {
+            "year": "2024",
+            "month": "02",
+            "day": "20",
+            "string": "2024-02-20"
+            },
+        "my_rating": 3
+    },
     {
         "title": "Bullet Train",
         "type": "movie",

src/pages/about.md

@@ -4,24 +4,25 @@ description: ''
 layout: "../layouts/Layout.astro"
 ---
 
-Hello! My name is Sindre Kjelsrud, also known as "**Sid**". I'm a 3rd year Computer Science student at Western University of Applied Sciences, campus Bergen.
+Hello! My name is Sindre Kjelsrud, also known as [**"Sid"**](/avatar.webp). I'm a 3rd year Computer Science student at Western University of Applied Sciences, campus Bergen.
 
-During my free time I like to go bouldering/climbing, play some games on my Wii or try to catch up with One Piece.
+What do I like to do you ask? Well a lot, but as you read on the landing page I mostly like spending  my free time bouldering/climbing, play some games on my Wii, watch the newest One Piece episode or build cairns. Below is some other information about me!
 
 👴🏼 **Age:** 24
 
-👒 **Favorite Anime:** One Piece && Le Sommet des Dieux
+👒 **Favorite Anime:** One Piece
 
-🎵 **Favorite Music:** Everything indie (indie-rock/indie-pop/etc.) && J-Pop.
+🎵 **Favorite Music:** Everything indie (indie-rock/indie-pop/etc.), J-Pop & techno.
 
-📽️ **Favorite Movie:** The Social Network || Ready Player One
+📽️ **Favorite Movie:** Ready Player One || Le Sommet des Dieux
 
 🎮 **Favorite Games:** Minecraft && Wii Sports
 
 📺 **Favorite Series:** Limitless && Silicon Valley
 
-📚 **Favorite Books:** MAGNUS && Hjertet i to: Seks måneder med Karpe
+📚 **Favorite Books/Mangas:** Permanent Record && The Summit of the Gods 
 
 ## Want to contact me? 📫
 
-You'll find all my contact information, and social media, under [**connect**](/connect)!
+You'll find all my contact information, and *"social media"*, under [**connect**](/connect)!
+

src/pages/blog/index.astro

@@ -41,21 +41,3 @@ const sortedYears = Object.keys(postsByYear).sort((a:any, b:any) => b - a);
 		))}
 	</main>
 </SectionContainer>
-
-<style>
-	ul {
-		list-style-type: none;
-		padding: unset;
-	}
-	ul li {
-		display: flex;
-	}
-	ul li :global(time) {
-		flex: 0 0 130px;
-		font-style: italic;
-		color: #595959;
-	}
-	ul li a {
-		color: #815B5B;
-	}
-</style>

src/pages/connect.md

@@ -6,19 +6,22 @@ layout: "../layouts/Layout.astro"
 
 Feel free to drop me an email! Whether it's to say hello, discuss the latest must-see series, offer a fresh perspective, or anything else. Think of my inbox as the friendly neighborhood café where all conversations are welcome.
 
-E-mail: kjelsrudsindre@gmail.com
+E-mail: **kjelsrudsindre@gmail.com**
 
 ## Across the cyberspace 
 
-- [GitHub](https://github.com/SindreKjelsrud)
-- [LinkedIn](https://www.linkedin.com/in/sindrekjelsrud)
-- [Spotify](https://open.spotify.com/user/kjelsrud!)
+- [**GitHub**](https://github.com/SindreKjelsrud)
+- [**Spotify**](https://open.spotify.com/user/kjelsrud!)
 
 
 ## GPG
 
 If you want to send me an encrypted message via email, please use my GPG-key:
 
-Fingerprint: `9E311661E72C4C17C8A91C81D2BBDF3EDE6BA9A6`
+Fingerprint: 
 
-Quick import: `curl -sL https://kjelsrud.dev/public-key.asc | gpg --import`
+`9E311661E72C4C17C8A91C81D2BBDF3EDE6BA9A6`
+
+Quick import: 
+
+`curl -sL https://kjelsrud.dev/public-key.asc | gpg --import`

src/pages/index.astro

@@ -1,40 +1,42 @@
 ---
 import SectionContainer from '../components/SectionContainer.astro';
+import HeaderLink from '../components/HeaderLink.astro';
 ---
-<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
-<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
-<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
-<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
-
 <SectionContainer>
-	<main class="flex flex-col flex-1 justify-center items-center gap-4 description">
-		<div class="profile"></div> <!-- Image -->
-		<h1 class="text-3xl font-bold">Sindre Kjelsrud</h1>
-		<p class="text-center">Student at Western University of Applied Sciences.</p>
-		<div class="flex gap-2 social">
-			<a href="https://github.com/SindreKjelsrud" aria-label="Link to my GitHub">
-				<iconify-icon icon="ri:github-line" width="30" height="30" />
-			</a>
-			<a href="https://www.linkedin.com/in/sindre-kjelsrud-345583218/" aria-label="Link to my LinkedIn">
-				<iconify-icon icon="lucide:linkedin" width="30" height="30" />
-			</a>
-			<a href="https://open.spotify.com/user/kjelsrud!" aria-label="Link to my Spotify">
-				<iconify-icon icon="mdi:spotify" width="30" height="30" />
-			</a>
-		</div>
-	</main>
+    <main class="flex flex-col flex-1 md:flex-row gap-6 md:mt-6">
+        <div class="profile md:order-last"></div>
+
+        <div class="flex flex-col text-left gap-4 w-full md:w-2/3">
+            <h1 class="text-2xl font-bold">Sindre Kjelsrud</h1>
+            <p>Computer Science-student at Western University of Applied Sciences, campus Bergen.</p>
+            <p>I like spending my free time bouldering/climbing, playing some games on my Wii, watching the newest One Piece episode or build cairns.</p>
+            <p>This website is just a fun side-project that I actively work on, and use as my creative outlet. It's also a way for me to actually own my data, allowing me to log data, post pictures and more!</p>
+            <div>
+                <h1 class="text-xl font-semibold">pages</h1>
+                <ul class="flex flex-col blog">
+                    <li><HeaderLink href="/about">whoami</HeaderLink>~ sid am i</li>
+                    <li><HeaderLink href="/blog">blog</HeaderLink>~ my written thoughts and ideas</li>
+                    <li><HeaderLink href="/logs">logs</HeaderLink>~ a record of what I've watched, read & climbed</li>
+                    <li><HeaderLink href="/gallery">gallery</HeaderLink>~ moments and places of my life, in pictures</li>
+                    <li><HeaderLink href="/more">more</HeaderLink>~ additional pages</li>
+                </ul>
+            </div>
+        </div>
+    </main>
 </SectionContainer>
 
 <style>
-	.profile {
-            width: 10rem;
-			height: 10rem;
-            background: url("/favicon.svg");
-			background-size: cover;
-			border-radius: 9999px;
-        }
+    .profile {
+        width: 14rem;
+        height: 14rem;
+        background: url("/mii.webp");
+        background-size: cover;
+        border-radius: 5px;
+        margin-left: auto;
+        margin-right: auto;
+    }
 
-	.profile:hover {
-		background-image: url("https://media.tenor.com/yheo1GGu3FwAAAAC/rick-roll-rick-ashley.gif");
-	}
+    .profile:hover {
+        background-image: url("https://media.tenor.com/yheo1GGu3FwAAAAC/rick-roll-rick-ashley.gif");
+    }
 </style>

src/pages/logs/books.astro

@@ -35,7 +35,7 @@ const today = new Date();
     <main class="flex flex-col gap-4 mt-4">
 		<h1 class="text-3xl font-extrabold">📚 ¿Dónde está la biblioteca?</h1>
 		<h2 class="text-xl font-semibold">{today.getFullYear()} - Currently Reading:</h2>
-        <p>📖 Permanent Record</p>
+        <p>📖 Invisible Women: Exposing Data Bias in a World Designed for Men</p>
         {sortedYears.map(year => (
 			<section>
 				<div class="flex items-center gap-2 text-xl font-semibold mb-2">{year} - Finished <p class="text-xs">({booksByYear[year].length} entries)</p></div>

src/pages/logs/index.md

@@ -3,10 +3,12 @@ title: 'Logs'
 description: ''
 layout: "../../layouts/Layout.astro"
 ---
-All my logs where I keep track of stuff I’ve watched and things I’ve read. I started tracking in 2023 so the years before that are untracked.
+All my logs where I keep track of stuff I’ve watched, things I’ve read and my moonboard sends. I started tracking in 2023 so the years before that are untracked.
 
 I don’t use any third-party services for my logs, I store everything in a JSON-format for this website.
 
 [📚 **Books**](/logs/books)
 
+[🧗 **MoonBoard**](/logs/moonboard)
+
 [📺 **Watched**](/logs/watched)

src/pages/logs/moonboard.astro

@@ -0,0 +1,27 @@
+---
+import SectionContainer from '../../components/SectionContainer.astro';
+import mb from '../../data/moonboard.json';
+const mb2016Setups = mb["2016"];
+---
+
+<SectionContainer>
+  <main class="flex flex-col flex-1 gap-4 mt-4">
+     <h1 class="text-3xl font-extrabold">MoonBoard 2016</h1>
+
+     <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
+            {mb2016Setups.map((mb) => (
+                <div class="flex flex-col items-center">
+                    <img
+                        src={mb.image}
+                        class="bg-yellow-500 rounded-xl"
+                    />
+                    <p class="font-bold text-xs">{mb.route} ({mb.grade}):</p>
+                    <p class="text-xs">
+                      {mb.tries == 1 ? "Flash" : `${mb.tries} tries`} | {mb.benchmark ? "Benchmarked" : "Not benchmarked"} | {mb.date.string}
+                    </p>
+                </div>
+            ))}
+     </div>
+  </main>
+</SectionContainer>
+

src/pages/logs/watched.astro

@@ -37,7 +37,6 @@ const today = new Date();
 		<h2 class="text-xl font-semibold">{today.getFullYear()} - Currently Watching:</h2>
         <p>👀 ONE PIECE Egghead Arc</p>
         <p>👀 Star Wars: The Clone Wars S02</p>
-        <p>👀 Better Call Saul S05</p>
         {sortedYears.map(year => (
             <section>
                 <div class="flex items-center gap-2 text-xl font-semibold mb-2">{year} - Finished <p class="text-xs">({tvByYear[year].length} entries)</p></div>

src/pages/more.md

@@ -1,6 +1,6 @@
 ---
 title: "More"
-description: "The navbar was becoming unwieldy, here you'll see some more of the various pages."
+description: "Here you'll see some more of the various pages so that the landing page doesn't overflow with pages lol."
 layout: "../layouts/Layout.astro"
 ---
 
@@ -12,10 +12,6 @@ layout: "../layouts/Layout.astro"
 
 [🌱 **digital garden**](/garden) · wild garden, filled with drafts, ideas and more
 
-[📸 **gallery**](/gallery) · moments and places of my life, in pictures
-
-[📚 **logs**](/logs) · logs for movies, series, anime, books, manga et-cetera
-
 [⏳ **now**](/now) · what i'm doing right now
 
 [✨ **uses**](/uses) · what i use on a daily basis

src/pages/vinyl.astro

@@ -3,11 +3,12 @@ import SectionContainer from '../components/SectionContainer.astro';
 import vinyl from '../data/vinyl.json'
 
 const vinylByAlbumTitle = vinyl.reduce((acc:any, currentVinyl) => {
-    const { album, artist } = currentVinyl;
+    const { album, artist, cover } = currentVinyl;
     if (!acc[album]) {
         acc[album] = {
             vinyls: [],
-            artist: artist
+            artist: artist,
+            cover: cover
         };
     }
     acc[album].vinyls.push(currentVinyl);
@@ -28,11 +29,18 @@ const vinylData = Object.keys(vinylByAlbumTitle).map(albumTitle => {
 <SectionContainer>
     <main class="flex flex-col gap-4 mt-4">
 		<h1 class="text-3xl font-extrabold">📀 Platesamlinga</h1>
-        {vinylData.map((album) => (
-            <div class="flex flex-col">
-                <li><strong>{album.title}</strong> by {album.artist}</li>
-            </div>
-        ))}
+      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
+            {vinylData.map((album) => (
+                <div class="flex flex-col">
+                    <img
+                        src={album.cover}
+                        class="w-400"
+                    />
+                    <p class="font-bold">{album.title}</p>
+                    <p>{album.artist}</p>
+                </div>
+            ))}
+        </div>
 	</main>
 </SectionContainer>
 

src/styles/global.css

@@ -1,26 +1,26 @@
 :root {
-	--light-bg: #FFF8EA;
-	--light-1: #594545;
-	--light-2: #815B5B;
-	--light-3: #9E7676;
-	--light-hover: #DAC0A3;
-	--light-link: #0D47A1;
-	--dark-bg: #24273a;
-	--dark-1: #cad3f5;
-	--dark-2: #6e738d;
-	--dark-3: #363a4f;
-	--dark-hover: #181926;
-	--dark-link: #ee99a0;
-  }
+  --light-bg: #F7F0E8; /* Coffee Cream Background */
+  --light-1: #3B2C29; /* Espresso Text */
+  --light-2: #78605C; /* Latte Secondary Text */
+  --light-3: #A48B82; /* Cappuccino Accents */
+  --light-hover: #A48B82; /* Cappuccino Accents (for hover states) */
+  --light-link: #B08968; /* Caramel Macchiato Links */
+  --dark-bg: #0F1A1C; /* Deep Ocean Background */
+  --dark-1: #9AD3BB; /* Mint Foam Text */
+  --dark-2: #3A6F7F; /* Coral Reef Accent */
+  --dark-3: #2B4F60; /* Seaweed Highlight */
+  --dark-hover: #1A333F; /* Lagoon Hover */
+  --dark-link: #7FCDCD; /* Aquamarine Links */
+}
 
 html {
-	background-color: var(--light-bg);
-	color: var(--light-1);
+	background-color: var(--dark-bg);
+	color: var(--dark-1);
 }
 
 html.dark {
-	background-color: var(--dark-bg);
-	color: var(--dark-1);
+	background-color: var(--light-bg);
+	color: var(--light-1);
 }
 
 body {
@@ -31,34 +31,15 @@ p {
 	font-size: large;
 }
 
-/* HOME */
-.social a {
-	color: var(--light-1);
-}
-
-.dark .social a {
-	color: var(--dark-1);
-}
-
-.social a:nth-child(1) :hover {
-	color: grey !important;
-}
-
-.social a:nth-child(2) :hover {
-    color: #0A66C2 !important;
-}
-
-.social a:nth-child(3) :hover {
-    color: #1DB954 !important;
-}
-
 /* FOOTER */
 .footerbg {
-	background-color: var(--light-bg);
+	background-color: var(--dark-bg);
+	border-top: 1px solid var(--dark-1);
 }
 
 .dark .footerbg {
-	background-color: var(--dark-bg);
+	background-color: var(--light-bg);
+  	border-top: 1px solid var(--light-1);
 }
 
 /* BLOG */
@@ -103,25 +84,25 @@ p {
 	font-weight: 600;
 }
 
-.blog a { color: var(--light-link);}
+.blog a { color: var(--dark-link);}
 
-.dark .blog a { color: var(--dark-link);}
+.dark .blog a { color: var(--light-link);}
 
 .blog a:hover { text-decoration: underline 2px;}
 
-.blogtime { color: var(--light-2); }
+.blogtime { color: var(--dark-2); }
 
-.dark .blogtime { color: var(--dark-2); }
+.dark .blogtime { color: var(--light-2); }
 
 /* LOGS */
 .borderbottom {
 	border-bottom-width: 2px;
-	border-color: var(--light-3);
+	border-color: var(--dark-3);
 }
 
 .dark .borderbottom {
 	border-bottom-width: 2px;
-	border-color: var(--dark-3);
+	border-color: var(--light-3);
 }
 
 /* GALLERY */
@@ -153,11 +134,11 @@ p {
 }
 
 .cv a { 
-	color: var(--light-link);
+	color: var(--dark-link);
 	font-size: small;
 }
 
-.dark .cv a { color: var(--dark-link);}
+.dark .cv a { color: var(--light-link);}
 
 .cv a:hover { text-decoration: underline 2px;;}
 
@@ -181,10 +162,10 @@ code {
 
 blockquote {
 	padding: 0 0 0 10px;
-	border-left: 5px solid var(--light-1);
+	border-left: 5px solid var(--dark-1);
 }
 
 .dark blockquote {
 	padding: 0 0 0 10px;
-	border-left: 5px solid var(--dark-1);
+	border-left: 5px solid var(--light-1);
 }