Merge pull request #13 from JonasunderscoreJones/embed-meta-fix

added meta tags
added random soundtrack
2025-10-22 16:39:18 +02:00 · 2025-01-31 23:04:01 +01:00 · 2025-01-31 23:00:37 +01:00 · 2024-10-10 18:44:48 +02:00 · 2024-09-01 19:41:28 +02:00 · 2024-08-18 04:34:31 +02:00
44 changed files with 977 additions and 1360 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/app.html
+++ b/src/app.html
@ -3,9 +3,22 @@
 <link rel="stylesheet" href="/src/routes/+page.css">

 <head>
+	<meta name="darkreader-lock">
 	<meta charset="utf-8" />
 	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 	<meta name="viewport" content="width=device-width" />
+
+	<meta property="og:title" content="Jonas_Jones's Homepage">
+	<meta name="application-name" content="Jonas_Jones's Homepage">
+	<meta property="og:description" content="The Home of all creations by Jonas_Jones!">
+	<meta name="description" content="The Home of all creations by Jonas_Jones!">
+	<meta name="author" content="Jonas_Jones">
+	<meta property="og:image" content="/icon_800x800.png">
+	<meta property="og:url" content="./">
+	<meta name="url" content="./">
+	<meta property="og:type" content="website">
+	<meta name="theme-color" content="#008080">
+
 	%sveltekit.head%
 </head>

--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@ -1,12 +1,17 @@
 <div class="footer">
-  <p>Website by Jonas_Jones 2021 - 2023</p>
+  <p>Website by Jonas_Jones 2021 - 2024</p>
 </div>

+<script>
+  //import main css file
+  import "../routes/+page.css";
+</script>
+
 <style>
  .footer {
    height: 1rem;
-    background-color: #000;
-    color: #fff;
+    background-color: var(--footer-background-color);
+    color: var(--footer-font-color);
    display: flex;
    justify-content: center;
    align-items: center;
--- a/src/components/NavBar.svelte
+++ b/src/components/NavBar.svelte
@ -1,4 +1,21 @@
 <script>
+  import { onMount } from 'svelte';
+  import { afterNavigate } from '$app/navigation';
+  import { recordRequest } from './analytics';
+
+  // Function to handle navigation events
+  function handleNavigation() {
+    recordRequest();
+  }
+
+  // Call the analytics function on initial page load and after each navigation
+  onMount(() => {
+    handleNavigation();
+    afterNavigate(() => {
+      handleNavigation();
+    });
+  });
+
  let showMenu = false;

  function toggleMenu() {
@ -10,7 +27,8 @@
  let navLinks = [
    { name: "Home", url: "/" },
    { name: "Projects", url: "/projects" },
-    { name: "Wiki", url: "https://wiki.jonasjones.dev" },
+    { name: "Docs", url: "https://docs.jonasjones.dev" },
+    { name: "Blog", url: "https://blog.jonasjones.dev" },
    // just removed this cause it bothered me
    //{ name: 'For The Based™', url: '/based'},
    //{ name: 'Status', url: '/status'},
@ -146,7 +164,7 @@
    position: absolute;
    width: 100%;
    height: 4px;
-    background-color: #fff;
+    background-color: var(--header-font-color);
    border-radius: 4px;
    transition: transform 0.3s, opacity 0.3s;
  }
@ -178,7 +196,7 @@
    left: 0;
    width: 100%;
    height: 100%;
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: var(--nav-menu-background-color);
    display: flex;
    flex-direction: column;
    align-items: center;
@ -199,7 +217,7 @@
    top: 1px;
    left: 1px;
    font-size: 24px;
-    color: #fff;
+    color: var(--header-font-color);
    cursor: pointer;
  }

@ -216,13 +234,13 @@
  }

  .links a {
-    color: #fff;
+    color: var(--header-font-color);
    text-decoration: none;
    font-size: 18px;
  }

  .navbar {
-    background-color: #2023247c;
+    background-color: var(--header-background-color);
    padding: 10px;
    padding-top: 0;
    padding-bottom: 0;
@ -271,13 +289,13 @@

  a {
    text-decoration: none;
-    color: #ffffff;
+    color: var(--header-font-color);
    padding: 5px;
    font-size: 23px;
  }

  a:hover {
-    color: #ddd;
+    color: var(--header-font-color-hover);
  }

  .lastfm {
@ -299,7 +317,7 @@
    overflow: hidden;
  }
  .lastfm:hover {
-    background-color: #202324;
+    background-color: var(--header-background-color-hover);
  }
  .lastfm img {
    width: 30px;
@ -366,10 +384,6 @@
  }

  @media only screen and (max-width: 900px) and (min-width: 650px) {
-    .lastfm #lastfm_title,
-    .lastfm #lastfm_artist {
-      display: none;
-    }
    .lastfm {
      width: 50px;
    }
@ -379,6 +393,9 @@
  }

  @media only screen and (max-width: 650px) and (min-width: 375px) {
+    .lastfm-text {
+      display: block;
+    }
    .nav-links {
      display: none;
    }
@ -395,10 +412,6 @@
  }

  @media only screen and (max-width: 375px) and (min-width: 300px) {
-    .lastfm #lastfm_title,
-    .lastfm #lastfm_artist {
-      display: none;
-    }
    .lastfm {
      width: 50px;
    }
@ -414,10 +427,6 @@
  }

  @media only screen and (max-width: 300px) and (min-width: 0px) {
-    .lastfm #lastfm_title,
-    .lastfm #lastfm_artist {
-      display: none;
-    }
    .lastfm {
      width: 50px;
    }
--- a/src/components/ProjectComponent.svelte
+++ b/src/components/ProjectComponent.svelte
@ -0,0 +1,137 @@
+<script lang="ts">
+    //import type Project from "../scripts/interfaces";
+    export let project/*: Project*/;
+    import ProjectsLinks from "./ProjectsLinks.svelte";
+    import ProjectLanguageIndicator from "./ProjectLanguageIndicator.svelte";
+
+    import "../routes/+page.css";
+
+</script>
+
+<div class="top">
+    <img class="image" src="/project-banners{project.backgroud}" alt=" " />
+</div>
+<div class="project-languages">
+    <ProjectLanguageIndicator {project} />
+</div>
+<div class="project-links">
+    <ProjectsLinks {project} />
+</div>
+<div class="bottom">
+    <div class="content">
+        <div />
+        <div class="project-topline">
+            <div class="project-title">{project.title}</div>
+            <div class="project-titleinfo">
+                <div>
+                    <span
+                        class="project-status"
+                        style="color: {project.statuscolor};border-color:{project.statuscolor}"
+                    >
+                        {project.status}
+                    </span>
+                    <span class="project-version">{project.version}</span>
+                </div>
+            </div>
+        </div>
+        <div class="project-description">{project.description}</div>
+    </div>
+</div>
+
+<style>
+    .project-title {
+        font-size: 24px;
+        font-weight: bold;
+        margin-bottom: 10px;
+        text-align: left;
+    }
+
+    .project-status {
+        font-size: 20px;
+        font-weight: bold;
+        margin-bottom: 10px;
+        margin-left: 10px;
+        margin-right: 10px;
+        padding: 2px;
+        padding-left: 5px;
+        padding-right: 5px;
+        border: 3px solid #dcdcdc;
+        border-radius: 3px;
+    }
+
+    .project-version {
+        font-size: 20px;
+        font-weight: bold;
+        color: var(--project-version-color);
+        margin-bottom: 10px;
+        margin-left: 10px;
+        margin-right: 10px;
+        margin-top: -4px;
+        padding: 2px;
+        border: 3px solid var(--project-version-color);
+        border-radius: 100px;
+        float: right;
+    }
+
+    .project-description {
+        margin-top: 20px;
+        margin-bottom: 10px;
+        margin-right: 12px;
+        text-align: left;
+    }
+
+    .project-links {
+        display: flex;
+        align-items: right;
+        text-align: right;
+        align-content: right;
+        width: 100%;
+        border-bottom: 1px solid var(--project-border-color);
+    }
+
+    .top {
+        flex: 2;
+        display: flex;
+        align-items: center;
+    }
+
+    .bottom {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .image {
+        width: 100%;
+        height: 150px;
+        object-fit: cover;
+    }
+
+    .content {
+        margin: 20px;
+    }
+
+    .project-topline {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .project-languages {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+    }
+
+    .project-titleinfo {
+        display: flex;
+        align-items: center;
+    }
+
+    @media only screen and (max-width: 620px) {
+        .project-topline {
+            flex-direction: column;
+        }
+    }
+</style>
--- a/src/components/ProjectLanguageIndicator.svelte
+++ b/src/components/ProjectLanguageIndicator.svelte
@ -0,0 +1,47 @@
+<script lang='ts'>
+    //import type Project from "../scripts/interfaces";
+    export let project/*: Project*/;
+
+    import { onMount } from "svelte";
+
+    import { language_colors } from "../scripts/langs";
+
+    let languageLength = Object.values(project.languages).reduce(
+        (acc, curr) => acc + curr,
+        0
+    );
+</script>
+
+<div class="indicator">
+    {#each Object.keys(project.languages) as language}
+        <div
+            class="language-color"
+            style="background-color: {language_colors[
+                language
+            ]}; width: {(project.languages[language] / languageLength) * 100}%"
+        >
+            <p>{language}</p>
+        </div>
+    {/each}
+</div>
+
+<style>
+    .indicator {
+        display: flex;
+        height: 20px;
+        width: 100%;
+    }
+
+    .language-color {
+        flex: 1;
+        height: 100%;
+        width: 100%;
+    }
+
+    .language-color p {
+        color: white;
+        font-size: 0.9rem;
+        margin: 0;
+        padding: 0;
+    }
+</style>
--- a/src/components/ProjectsLinks.svelte
+++ b/src/components/ProjectsLinks.svelte
@ -0,0 +1,59 @@
+<script>
+  export let project;
+
+  import "../routes/+page.css";
+</script>
+
+<div class="project-links">
+  {#each Object.entries(project.links) as [platform, link]}
+    <a
+      class="project-link"
+      href={link}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {#if platform === "GH"}
+        <i class="fa fa-github" aria-hidden="true" />
+      {:else if platform === "WB"}
+        <i class="fa fa-globe" aria-hidden="true" />
+      {:else if platform === "YT"}
+        <i class="fa fa-youtube" aria-hidden="true" />
+      {:else if platform === "TW"}
+        <i class="fa fa-twitter" aria-hidden="true" />
+      {:else if platform === "DC"}
+        <i class="fa fa-discord" aria-hidden="true" />
+      {:else if platform === "PT"}
+        <i class="fa fa-patreon" aria-hidden="true" />
+      {:else if platform === "SP"}
+        <i class="fa fa-spotify" aria-hidden="true" />
+      {:else if platform === "IG"}
+        <i class="fa fa-instagram" aria-hidden="true" />
+      {:else}
+        {platform}
+      {/if}
+    </a>
+  {/each}
+</div>
+
+<style>
+  .project-links {
+    display: flex;
+    width: 100%;
+  }
+  .project-link {
+    color: var(--project-link-color);
+    background-color: var(--project-link-background-color);
+    text-decoration: none;
+    transition: color 0.3s;
+    margin-top: 3px;
+    font-size: 25px;
+    width: 100%;
+    align-items: center;
+    text-align: center;
+  }
+
+  .project-link:hover {
+    color: var(--project-link-color-hover);
+    background-color: var(--project-link-background-color-hover);
+  }
+</style>
--- a/src/components/analytics.js
+++ b/src/components/analytics.js
@ -0,0 +1,34 @@
+// Function to record the request with analytics
+  export async function recordRequest() {
+
+    const analyticsData = {
+      timestamp: Date.now(),
+      domain: window.location.hostname,
+      method: 'GET', // Assuming the request method is GET; adjust as necessary
+      path: window.location.pathname,
+    };
+
+    console.log('Recording request:', analyticsData);
+
+    const ANALYTICS_URL = 'https://analytics.jonasjones.dev/requests/record/ipunknown';
+    const ANALYTICS_API_KEY = import.meta.env.VITE_ANALYTICS_API_KEY;
+
+    try {
+      const response = await fetch(ANALYTICS_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': ANALYTICS_API_KEY,
+        },
+        body: JSON.stringify(analyticsData),
+      });
+
+      if (response.ok) {
+        console.log('Request recorded successfully');
+      } else {
+        console.error('Failed to record request:', response.status, await response.text());
+      }
+    } catch (error) {
+      console.error('Error recording request:', error);
+    }
+  }
--- a/src/routes/+page.css
+++ b/src/routes/+page.css
@ -10,20 +10,74 @@

 }

+:root {
+  --background-color: #202324;
+  --font-color: rgb(0, 255, 0);
+  --font-hover-color: green;
+  --header-background-color: rgba(0, 0, 0, 0.4);
+  --header-background-color-hover: #202324;
+  --header-font-color: white;
+  --header-font-color-hover: #ddd;
+  --image-filter: none;
+  --footer-background-color: #000;
+  --footer-font-color: #fff;
+  --projects-background-color: rgba(0, 0, 0, 0.8);
+  --project-link-background-color: var(--projects-background-color);
+  --project-border-color: white;
+  --project-link-color: white;
+  --project-link-color-hover: #666;
+  --project-version-color: white;
+  --project-search-background-color: rgba(0, 0, 0, 0.678);
+  --project-search-input-font-color: white;
+  --nav-menu-background-color: rgba(0, 0, 0, 0.8)
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --background-color: #dfdcdb;
+    --font-color: green;
+    --font-hover-color: rgb(0, 255, 0);
+    --header-background-color: rgba(255, 255, 255, 0.5);
+    --header-background-color-hover: #ddd;
+    --header-font-color: black;
+    --header-font-color-hover: #333;
+    --image-filter: invert(0.8);
+    --footer-background-color: #fff;
+    --footer-font-color: #000;
+    --projects-background-color: rgba(255, 255, 255, 0.4);
+    --project-border-color: black;
+    --project-link-color: black;
+    --project-link-color-hover: #666;
+    --project-version-color: black;
+    --project-search-background-color: rgba(255, 255, 255, 0.5);
+    --project-search-input-font-color: black;
+    --nav-menu-background-color: rgba(255, 255, 255, 0.8)
+  }
+}
+
+
 html {
  font-family: 'sary_soft_semiboldregular';
  margin: 0px;
-  background-color: #202324;
+  background-color: var(--background-color);
 }

 body {
  margin: 0;
  padding: 0;
  font-family: 'sary_soft_semiboldregular';
-  color: rgb(0, 255, 0);
+  color: var(--font-color);
  text-align: center;
 }

+a {
+  color: var(--font-color)
+}
+
+a:hover {
+  color: var(--font-hover-color);
+}
+
 .parallax-background {
  position: fixed;
  top: 0;
@ -31,6 +85,7 @@ body {
  width: 100%;
  height: 100%;
  background-image: url('/ricky.png');
+  filter: var(--image-filter);
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: center center;
@ -39,6 +94,13 @@ body {
  /* Place the background behind other content */
 }

+@media screen and (max-width: 768px) {
+  .parallax-background {
+    transform: none;
+  }
+
+}
+
 /* Set container styles */
 .container {
  display: flex;
@ -100,7 +162,7 @@ body {
 .for-the-based-link {
  font-size: 2rem;
  margin: 0 0.5rem;
-  color: rgb(0, 255, 0);
+  color: var(--font-color);
  text-decoration: underline;
  transition: all 0.2s ease-in-out;
  font-family: 'sary_soft_semiboldregular';
@ -109,7 +171,7 @@ body {

 .home-link:hover,
 .for-the-based-link:hover {
-  color: green;
+  color: var(--font-hover-color);
  text-decoration: none;
  font-size: 2.5rem;
 }
@ -130,7 +192,7 @@ body {

 .row a {
  margin-right: 1rem;
-  color: rgb(0, 255, 0);
+  color: var(--font-color);
  text-decoration: none;
  font-size: 24px;
  transition: transform 0.2s ease-in-out;
@ -138,7 +200,7 @@ body {

 .row a:hover {
  transform: scale(1.3);
-  /* make icon 20% bigger on hover */
+  color: var(--font-hover-color);
 }

 .line {
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -10,18 +10,12 @@
  <title>Jonas_Jones</title>
  <Padding />
  <div class="image-wrapper">
-    <div class="card-front">
      <!-- svelte-ignore a11y-img-redundant-alt -->
-      <img
-        src="/icon_800x800_transparent.webp"
-        alt="My Picture"
-        class="picture"
-      />
-    </div>
-    <div class="card-back">
-      <!-- svelte-ignore a11y-img-redundant-alt -->
-      <img src="/root_logo.webp" alt="My Picture" class="picture" />
-    </div>
+    <img
+      src="/icon_800x800_transparent.webp"
+      alt="My Picture"
+      class="picture"
+    />
  </div>
  <div class="line">
    <hr />
@ -31,7 +25,7 @@
  </div>
  <div class="social-media">
    <div class="row">
-      <a href="https://github.com/J-onasJones"><i class="fab fa-github" /></a>
+      <a href="https://github.com/JonasunderscoreJones"><i class="fab fa-github" /></a>
      <a href="https://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg"
        ><i class="fab fa-youtube" /></a
      >
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@ -3,6 +3,8 @@
    import NavBar from "../../components/NavBar.svelte";
    import ParallaxBg from "../../components/ParallaxBg.svelte";
    import Padding from "../../components/padding.svelte";
+
+    let audioSrc = "https://cdn.jonasjones.dev/mp3/Jonas_Jones-bigger-banger.mp3";
 </script>

 <ParallaxBg>
@ -60,6 +62,13 @@
            Also, I like K-Pop.<br />
            I uSe ArCh BtW.
        </p>
+        <audio controls>
+            <source src={audioSrc} type="audio/mpeg" />
+            Your browser does not support the audio element.
+          </audio>
+        <h1>Useful Links</h1>
+        <a href="https://builds.jonasjones.dev">Old Builds</a><br />
+        <a href="https://wiki.jonasjones.dev">Wiki</a><br />
        <h1>Greatest Acomplishment</h1>
        <p>
            A severity 7.5/10 rated CVE I received for a humble project of mine
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@ -1,28 +1,40 @@
 <script lang="ts">
+  import { onMount } from "svelte";
+
  import FontAwesome from "../../components/FontAwesome.svelte";
  import Footer from "../../components/Footer.svelte";
  import NavBar from "../../components/NavBar.svelte";
  import ParallaxBg from "../../components/ParallaxBg.svelte";
  import Padding from "../../components/padding.svelte";
+  import ProjectComponent from "../../components/ProjectComponent.svelte";

-  import projects from "./projects.json";
+  //import projects from "./projects.json";
+
+  import "../../routes/+page.css";
+
+  let projects = [];

  var searchResults = projects.filter((project) => {
    return project.visible === true;
  });

+  let projects_loading = "block";
+
  var searchtext = "";
  var searchcategory = "";
  var searchlanguage = "";
  var searchstatus = "";

  function handleSearchText(event) {
+    console.log(event.target.value)
    searchtext = event.target.value.toLowerCase();
+    console.log(searchtext);
    handleSearch();
  }

  function handleSearchCategory(event) {
    searchcategory = event.target.value.toLowerCase();
+    console.log(searchcategory);
    handleSearch();
  }

@ -42,7 +54,7 @@
      var text =
        project.title.toLowerCase() + project.description.toLowerCase();
      var category = project.categories.join(" ").toLowerCase();
-      var language = project.languages.join(" ").toLowerCase();
+      var language = Object.keys(project.languages).join(" ").toLowerCase();
      var status = project.status.toLowerCase();
      return (
        text.includes(searchtext) &&
@ -53,6 +65,18 @@
      );
    });
  }
+  // use onmount to fetch projects from https://cdn.jonasjones.dev/api/projects/projects.json
+  onMount(async () => {
+    const res = await fetch(
+      "https://cdn.jonasjones.dev/api/projects/projects.json"
+    );
+    const data = await res.json();
+    projects = data.slice(1); // remove first element as it is the last_update timestamp of the file
+    searchResults = projects.filter((project) => {
+      return project.visible === true;
+    });
+    projects_loading = "none";
+  });
 </script>

 <FontAwesome />
@ -92,14 +116,14 @@
        <option value="">All</option>
        <option value="clang">C</option>
        <option value="c++">C++</option>
-        <option value="py">Python</option>
-        <option value="java">Java</option>
-        <option value="rslang">Rust</option>
+        <option value="Python">Python</option>
+        <option value="Java">Java</option>
+        <option value="Rust">Rust</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="jslang">Javascript</option>
        <option value="svelte">Svelte</option>
-        <option value="sh">Shell</option>
+        <option value="Shell">Shell</option>
        <option value="lualang">Lua</option>
        <option value="ps2">PowerShell 2</option>
        <option value="godot">Godot Lang</option>
@ -120,64 +144,10 @@
      >
    </div>
    <div class="project-container">
+      <h1 style="display:{projects_loading}">Loading...</h1>
      {#each searchResults as project}
        <div class="project">
-          <!-- svelte-ignore a11y-missing-attribute -->
-          <h2 class="project-title">
-            {project.title}<br class="smaller-screen" /><br
-              class="smaller-screen"
-            /><a
-              class="project-status"
-              style="color: {project.statuscolor};border-color:{project.statuscolor}"
-              >{project.status}</a
-            ><a class="project-version">{project.version}</a>
-          </h2>
-          <p class="project-description">{project.description}</p>
-          <div class="project-bg">
-            <img
-              src="https://cdn.jonasjones.dev/project-banners{project.backgroud}"
-              alt=" "
-            />
-          </div>
-          <Padding />
-          <Padding />
-          <div class="project-links">
-            <div>
-              {#each Object.entries(project.links) as [platform, link]}
-                <a
-                  class="project-link"
-                  href={link}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {#if platform === "GH"}
-                    <i class="fa fa-github" aria-hidden="true" />
-                  {:else if platform === "WB"}
-                    <i class="fa fa-globe" aria-hidden="true" />
-                  {:else if platform === "YT"}
-                    <i class="fa fa-youtube" aria-hidden="true" />
-                  {:else if platform === "TW"}
-                    <i class="fa fa-twitter" aria-hidden="true" />
-                  {:else if platform === "DC"}
-                    <i class="fa fa-discord" aria-hidden="true" />
-                  {:else if platform === "PT"}
-                    <i class="fa fa-patreon" aria-hidden="true" />
-                  {:else if platform === "SP"}
-                    <i class="fa fa-spotify" aria-hidden="true" />
-                  {:else if platform === "IG"}
-                    <i class="fa fa-instagram" aria-hidden="true" />
-                  {:else}
-                    {platform}
-                  {/if}
-                </a>
-              {/each}
-            </div>
-          </div>
-          <div>
-            <a class="download-button" href="{project.links.GH}"
-              >More Info</a
-            >
-          </div>
+          <ProjectComponent {project} />
        </div>
      {/each}
    </div>
@ -195,130 +165,24 @@

  .project-container {
    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(530px, 1fr));
    gap: 20px;
    width: 100%;
  }

  .project {
-    transition: background-color 0.3s;
-    transition: filter 0.3s;
    position: relative;
-    padding: 20px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
-    padding-bottom: 50px;
-  }
-
-  .project-bg {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    background-color: black;
-  }
-
-  .project-bg img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    mask-image: linear-gradient(
-      to right,
-      rgba(0, 0, 0, 0.918),
-      rgba(0, 0, 0, 0)
-    );
-    transition: 0.3s;
-  }
-
-  .project:hover img {
-    -webkit-filter: blur(5px);
-    filter: blur(5px);
-  }
-
-  .project-title {
-    font-size: 20px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    text-align: left;
-  }
-
-  .project-status {
-    font-size: 20px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    margin-left: 10px;
-    margin-right: 10px;
-    padding: 2px;
-    padding-left: 5px;
-    padding-right: 5px;
-    border: 3px solid #dcdcdc;
-    border-radius: 3px;
-  }
-
-  .project-version {
-    font-size: 20px;
-    font-weight: bold;
-    color: white;
-    margin-bottom: 10px;
-    margin-left: 10px;
-    margin-right: 10px;
-    margin-top: -4px;
-    padding: 2px;
-    border: 3px solid #dcdcdc;
-    border-radius: 100px;
-    float: right;
-  }
-
-  .project-description {
-    margin-top: 20px;
-    margin-bottom: 10px;
-    margin-right: 12px;
-    text-align: right;
-  }
-
-  .project-links {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: absolute;
-    bottom: 20px;
-  }
-
-  .project-link {
-    display: inline-block;
-    margin-left: 10px;
-    color: #333;
-    text-decoration: none;
-    transition: color 0.3s;
-  }
-
-  .project-link:hover {
-    color: #666;
-  }
-
-  .download-button {
-    margin-left: 10px;
-    color: white;
-    transition: color 0.3s;
-    background-color: rgb(25, 25, 100);
-    border-radius: 5px;
-    padding: 5px;
-    padding-left: 10px;
-    padding-right: 10px;
-    text-decoration: none;
-    border: 3px solid rgb(0, 0, 100);
-    position: absolute;
-    bottom: 20px;
-    right: 20px;
+    border: 2px solid var(--project-border-color);
+    min-width: 530px;
+    background-color: var(--background-color);
  }

  .search-bar {
    margin-bottom: 20px;
-    background-color: rgba(0, 0, 0, 0.678);
+    background-color: var(--project-search-background-color);
    padding: 10px;
    border-radius: 5px;
  }
@ -327,7 +191,7 @@
    background-color: transparent;
    border: none;
    outline: none;
-    color: white;
+    color: var(--project-search-input-font-color);
    font-size: 20px;
    width: 100%;
    padding-left: 10px;
@ -339,27 +203,19 @@
    background-color: transparent;
    border: none;
    outline: none;
-    color: white;
+    color: var(--project-search-input-font-color);
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }

-  .smaller-screen {
-    display: none;
-  }
-
  @media only screen and (max-width: 620px) {
    .project-container {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
-    .container {
-      width: 100%;
-      margin: 0;
-      padding: 0;
-    }
-    .smaller-screen {
-      display: block;
+
+    .project {
+      min-width: 200px;
    }
  }
 </style>
--- a/src/routes/projects/projects.json
+++ b/src/routes/projects/projects.json
@ -1,818 +0,0 @@
-[
-  {
-    "title": "",
-    "description": "",
-    "status": "",
-    "statuscolor": "",
-    "categories": [
-      ""
-    ],
-    "languages": [
-      ""
-    ],
-    "gh_api": "",
-    "version": "",
-    "backgroud": "",
-    "links": {
-      "GH": "",
-      "WB": "",
-      "MR": ""
-    },
-    "visible": "",
-    "last_update": ""
-  },
-  {
-    "title": "Bash Command Alias Editor",
-    "description": "This program helps you to create and edit command aliases on the Bash shell",
-    "status": "discontinued",
-    "statuscolor": "gray",
-    "categories": [
-      "tools"
-    ],
-    "languages": [
-      "py"
-    ],
-    "gh_api": "J-onasJones/BashCommandAliasEditor",
-    "version": "2.0.1",
-    "backgroud": "/bashcmdaliaseditor.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/BashCommandAliasEditor"
-    },
-    "visible": true,
-    "last_update": 1663678509
-  },
-  {
-    "title": "Better ConsoleMC",
-    "description": "A more controlable and safer successor to the ConsoleMC mod",
-    "status": "release",
-    "statuscolor": "green",
-    "categories": [
-      "minecraft",
-      "mcmodding",
-      "fabric",
-      "quilt"
-    ],
-    "languages": [
-      "java"
-    ],
-    "gh_api": "J-onasJones/BetterConsoleMC",
-    "version": "1.0.0",
-    "backgroud": "/betterconsolemc.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/BetterConsoleMC",
-      "MR": "https://modrinth.com/mod/betterconsolemc"
-    },
-    "visible": true,
-    "last_update": 1695758182
-  },
-  {
-    "title": "Better Simple Config",
-    "description": "An upgrade of magistermaks's fabric-simplelibs simple-config system with MC Mod integration",
-    "status": "release",
-    "statuscolor": "green",
-    "categories": [
-      "minecraft",
-      "mcmodding",
-      "fabric",
-      "forge",
-      "quilt",
-      "lib"
-    ],
-    "languages": [
-      "java"
-    ],
-    "gh_api": "J-onasJones/BetterSimpleConfig",
-    "version": "1.0",
-    "backgroud": "/bettersimpleconfig.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/BetterSimpleConfig"
-    },
-    "visible": true,
-    "last_update": 1670967961
-  },
-  {
-    "title": "ConsoleMC",
-    "description": "A mod that allows console commands to be executed over the ingame Minecraft chat",
-    "status": "release",
-    "statuscolor": "green",
-    "categories": [
-      "minecraft",
-      "mcmodding",
-      "fabric",
-      "quilt"
-    ],
-    "languages": [
-      "java"
-    ],
-    "gh_api": "J-onasJones/ConsoleMC",
-    "version": "0.1.1",
-    "backgroud": "/consolemc.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/ConsoleMC",
-      "MR": "https://modrinth.com/mod/consolemc"
-    },
-    "visible": true,
-    "last_update": 1695316595
-  },
-  {
-    "title": "DayZ Linux GUI Launcher",
-    "description": "DayZ Linux GUI Launcher",
-    "status": "release",
-    "statuscolor": "green",
-    "categories": [
-      "tools",
-      "game"
-    ],
-    "languages": [
-      "rslang",
-      "sh"
-    ],
-    "gh_api": "J-onasJones/dayz-linux-gui-launcher",
-    "version": "0.1.0",
-    "backgroud": "/dayzlauncher.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/dayz-linux-gui-launcher"
-    },
-    "visible": true,
-    "last_update": 1682450521
-  },
-  {
-    "title": "Image Converter",
-    "description": "A Python based Image converter supporting a bunch of image formats.",
-    "status": "discontinued",
-    "statuscolor": "gray",
-    "categories": [
-      "tools",
-      "bazinga"
-    ],
-    "languages": [
-      "py"
-    ],
-    "gh_api": "J-onasJones/ImageConverter",
-    "version": "ImageConerter-1.2",
-    "backgroud": "/imageconverter.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/ImageConverter"
-    },
-    "visible": true,
-    "last_update": 1642718415
-  },
-  {
-    "title": "J2 Technologies",
-    "description": "A lua based Whiteboard program inspired by i3-technologies",
-    "status": "discontinued",
-    "statuscolor": "gray",
-    "categories": [
-      "tools",
-      "bazinga"
-    ],
-    "languages": [
-      "lua"
-    ],
-    "gh_api": "J-onasJones/j2-technologies",
-    "version": "0.2.1ALPHA",
-    "backgroud": "/j2tech.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/j2-technologies"
-    },
-    "visible": true,
-    "last_update": 1642248415
-  },
-  {
-    "title": "Jonas_Jones API",
-    "description": "api used for my website",
-    "status": "planned",
-    "statuscolor": "yellow",
-    "categories": [
-      "api",
-      "tools"
-    ],
-    "languages": [
-      "js"
-    ],
-    "gh_api": "J-onasJones/jonas_jones-api",
-    "version": "---",
-    "backgroud": "/jjapi.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/jonas_jones-api"
-    },
-    "visible": false,
-    "last_update": 1677884400
-  },
-  {
-    "title": "MC Webserver",
-    "description": "A simple webserver that runs alongside the Minecraft Server",
-    "status": "release",
-    "statuscolor": "green",
-    "categories": [
-      "minecraft",
-      "mcmodding",
-      "fabric",
-      "quilt"
-    ],
-    "languages": [
-      "java"
-    ],
-    "gh_api": "J-onasJones/McWebserver",
-    "version": "0.3.1",
-    "backgroud": "/mcwebserver.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/McWebserver"
-    },
-    "visible": true,
-    "last_update": 1695459555
-  },
-  {
-    "title": "MC Webserver Forge",
-    "description": "A simple webserver that runs alongside the Minecraft Server (Forge version).",
-    "status": "discontinued",
-    "statuscolor": "gray",
-    "categories": [
-      "minecraft",
-      "mcmodding",
-      "forge"
-    ],
-    "languages": [
-      "java"
-    ],
-    "gh_api": "J-onasJones/McWebserver-forge",
-    "version": "0.2",
-    "backgroud": "/mcwebserver.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/McWebserver-forge",
-      "MR": "https://modrinth.com/mod/mcwebserver",
-      "CF": "https://www.curseforge.com/minecraft/mc-mods/mcwebserver"
-    },
-    "visible": true,
-    "last_update": 1675010407
-  },
-  {
-    "title": "Make ZIP less compact",
-    "description": "With this program You will be able to make any zip archive less compact AND make it safe without the need of any encryption what soever",
-    "status": "discontinued",
-    "statuscolor": "gray",
-    "categories": [
-      "tools",
-      "bazinga"
-    ],
-    "languages": [
-      "py"
-    ],
-    "gh_api": "J-onasJones/Make-ZIP-less-compact",
-    "version": "1.1",
-    "backgroud": "/mkzplsscmpct.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/Make-ZIP-less-compact"
-    },
-    "visible": true,
-    "last_update": 1641250800
-  },
-  {
-    "title": "Markdown Compiler",
-    "description": "A cheap compiler to turn markdown into html/svelte",
-    "status": "beta",
-    "statuscolor": "orange",
-    "categories": [
-      "tools"
-    ],
-    "languages": [
-      "python"
-    ],
-    "gh_api": "J-onasJones/Markdown-Compiler",
-    "version": "0.1",
-    "backgroud": "/j2tech.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/Markdown-Compiler"
-    },
-    "visible": true,
-    "last_update": 1694793692
-  },
-  {
-    "title": "Microcraft",
-    "description": "A Minecraft mod that allows for Microcontroller and Singleboard computer control",
-    "status": "dev",
-    "statuscolor": "purple",
-    "categories": [
-      "minecraft",
-      "mcmodding",
-      "fabric",
-      "quilt"
-    ],
-    "languages": [
-      "java"
-    ],
-    "gh_api": "J-onasJones/Microcraft",
-    "version": "0.1+alpha1",
-    "backgroud": "/microcraft.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/Microcraft"
-    },
-    "visible": true,
-    "last_update": 1687716436
-  },
-  {
-    "title": "Minecraft Server Status",
-    "description": "A Python based program that displays Your Minecraft Server's Status Infos",
-    "status": "release",
-    "statuscolor": "green",
-    "categories": [
-      "minecraft",
-      "tools"
-    ],
-    "languages": [
-      "py"
-    ],
-    "gh_api": "J-onasJones/Minecraft-server-Status",
-    "version": "1.3",
-    "backgroud": "/mcserverstatus.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/Minecraft-server-Status"
-    },
-    "visible": true,
-    "last_update": 1693493323
-  },
-  {
-    "title": "Moddah",
-    "description": "A cli tool that allows for easy client and server installation of the FabricMC modloader for Minecraft",
-    "status": "dev",
-    "statuscolor": "purple",
-    "categories": [
-      "minecraft",
-      "tools"
-    ],
-    "languages": [
-      "rslang"
-    ],
-    "gh_api": "J-onasJones/moddah",
-    "version": "0.1+alpha1",
-    "backgroud": "/moddah.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/moddah"
-    },
-    "visible": true,
-    "last_update": 1666039028
-  },
-  {
-    "title": "Mystery Core Mod",
-    "description": "The core mod of all Mystery Mods",
-    "status": "planned",
-    "statuscolor": "yellow",
-    "categories": [
-      "minecraft",
-      "mcmodding",
-      "fabric",
-      "quilt"
-    ],
-    "languages": [
-      "java"
-    ],
-    "gh_api": "J-onasJones/Mystery-core-mod",
-    "version": "---",
-    "backgroud": "/mysterymod.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/Mystery-core-mod"
-    },
-    "visible": false,
-    "updated": 1641337200
-  },
-  {
-    "title": "Mystery Dimensions",
-    "description": "A mod that is port of the MysteryMod mod-family with the focus of enhancing and adding Dimensions",
-    "status": "dev",
-    "statuscolor": "purple",
-    "categories": [
-      "minecraft",
-      "mcmodding",
-      "fabric",
-      "quilt"
-    ],
-    "languages": [
-      "java"
-    ],
-    "gh_api": "J-onasJones/MysteryDimensions",
-    "version": "0.1+alpha1",
-    "backgroud": "/mysterymod.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/MysteryDimensions"
-    },
-    "visible": false,
-    "last_update": 1661464800
-  },
-  {
-    "title": "Mystery Dungeons",
-    "description": "A mod that is part of the MysteryMod mod-family and focuses on Dungeons",
-    "status": "dev",
-    "statuscolor": "purple",
-    "categories": [
-      "minecraft",
-      "mcmodding",
-      "fabric",
-      "quilt"
-    ],
-    "languages": [
-      "java"
-    ],
-    "gh_api": "J-onasJones/MysteryDungeons",
-    "version": "0.1+alpha1",
-    "backgroud": "/mysterymod.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/MysteryDungeons"
-    },
-    "visible": false,
-    "last_update": 1661464800
-  },
-  {
-    "title": "MysteryMod",
-    "description": "The base mod of the Mystery Mod mod-family. It includes the Mystery-API that is required for all other Mystery Mods to work",
-    "status": "dev",
-    "statuscolor": "purple",
-    "categories": [
-      "minecraft",
-      "mcmodding",
-      "fabric",
-      "quilt"
-    ],
-    "languages": [
-      "java"
-    ],
-    "gh_api": "J-onasJones/MysteryMod",
-    "version": "0.1+alpha1",
-    "backgroud": "/mysterymod.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/MysteryMod"
-    },
-    "visible": true,
-    "last_update": 1682021093
-  },
-  {
-    "title": "MysteryRPG",
-    "description": "An RPG related mod for the Mystery Mod mod-family. Adds content containing what the name implies.",
-    "status": "dev",
-    "statuscolor": "purple",
-    "categories": [
-      "minecraft",
-      "mcmodding",
-      "fabric",
-      "quilt"
-    ],
-    "languages": [
-      "java"
-    ],
-    "gh_api": "J-onasJones/MysteryRPG",
-    "version": "0.1+alpha1",
-    "backgroud": "/mysterymod.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/MysteryRPG"
-    },
-    "visible": false,
-    "last_update": 1658872800
-  },
-  {
-    "title": "Not Enough Cursedness",
-    "description": "A Minecraft mod introducing every little bit of cursed items/behavior into the game",
-    "status": "release",
-    "statuscolor": "green",
-    "categories": [
-      "minecraft",
-      "mcmodding",
-      "fabric",
-      "quilt"
-    ],
-    "languages": [
-      "java"
-    ],
-    "gh_api": "J-onasJones/NotEnoughCursedness",
-    "version": "0.2",
-    "backgroud": "/notenoughcursedness.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/NotEnoughCursedness",
-      "MR": "https://modrinth.com/mod/not-enough-cursedness"
-    },
-    "visible": true,
-    "last_update": 1695317123
-  },
-  {
-    "title": "PI Server Rack",
-    "description": "A system that allows Monitoring of Raspberry PI('s) and it's running Minecraft Server(s)",
-    "status": "dev",
-    "statuscolor": "purple",
-    "categories": [
-      "tools"
-    ],
-    "languages": [
-      "c++",
-      "rslang",
-      "c"
-    ],
-    "gh_api": "J-onasJones/PI-server-rack",
-    "version": "0.1+alpha1",
-    "backgroud": "/pi-server-rack.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/PI-server-rack"
-    },
-    "visible": true,
-    "last_update": 1662319681
-  },
-  {
-    "title": "PinBoardBot",
-    "description": "A discord bot that sends messages that you want to pin in a dedicated channel to avoid the pinned-messages limit per text-channel",
-    "status": "release",
-    "statuscolor": "green",
-    "categories": [
-      "bot",
-      "dcbot"
-    ],
-    "languages": [
-      "js"
-    ],
-    "gh_api": "J-onasJones/PinBoardBot",
-    "version": "0.1",
-    "backgroud": "/pinboardbot.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/PinBoardBot"
-    },
-    "visible": true,
-    "last_update": 1662197814
-  },
-  {
-    "title": "PyTerm2D",
-    "description": "A 2d Python module for easier terminal object rendering",
-    "status": "planned",
-    "statuscolor": "yellow",
-    "categories": [
-      "lib"
-    ],
-    "languages": [
-      "py"
-    ],
-    "gh_api": "J-onasJones/pyterm2d",
-    "version": "---",
-    "backgroud": "/pyterm2d.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/pyterm2d"
-    },
-    "visible": false,
-    "last_update": 1668034800
-  },
-  {
-    "title": "QR Generator",
-    "description": "A QR code generator written in rust",
-    "status": "dev",
-    "statuscolor": "purple",
-    "categories": [
-      "lib",
-      "tools"
-    ],
-    "languages": [
-      "rslang"
-    ],
-    "gh_api": "J-onasJones/Qr-generator",
-    "version": "---",
-    "backgroud": "/qrgen.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/Qr-generator"
-    },
-    "visible": false,
-    "last_update": 1669935600
-  },
-  {
-    "title": "Resourcepack Editor",
-    "description": "A python based Editor for Minecraft Resourcepacks. It was designed to help with the structure of Resourcepacks when creating them",
-    "status": "discontinued",
-    "statuscolor": "gray",
-    "categories": [
-      "minecraft",
-      "tools",
-      "bazinga"
-    ],
-    "languages": [
-      "py"
-    ],
-    "gh_api": "J-onasJones/Resourcepack-Editor",
-    "version": "0.1+alpha1",
-    "backgroud": "/rp-editor.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/Resourcepack-Editor"
-    },
-    "visible": true,
-    "last_update": 1642114800
-  },
-  {
-    "title": "SiMP Resourcepack",
-    "description": "The serverside resourcepack for SiMP",
-    "status": "release",
-    "statuscolor": "green",
-    "categories": [
-      "minecraft"
-    ],
-    "languages": [
-      ""
-    ],
-    "gh_api": "J-onasJones/simp-resourcepack",
-    "version": "1.0",
-    "backgroud": "/simp-rp.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/simp-resourcepack"
-    },
-    "visible": true,
-    "last_update": 1643477940
-  },
-  {
-    "title": "SpotifyMC",
-    "description": "Spotify Integration for Minecraft. Allows ingame control over music",
-    "status": "dev",
-    "statuscolor": "purple",
-    "categories": [
-      "minecraft",
-      "mcmodding",
-      "fabric",
-      "quilt"
-    ],
-    "languages": [
-      "java"
-    ],
-    "gh_api": "J-onasJones/SpotifyMC",
-    "version": "0.1+alpha1",
-    "backgroud": "/spotifymc.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/SpotifyMC"
-    },
-    "visible": false,
-    "last_update": 1651432501
-  },
-  {
-    "title": "Svelte Markdown Wiki",
-    "description": "A Template of a Wiki for Pages written in Markdown in SvelteKit",
-    "status": "release",
-    "statuscolor": "green",
-    "categories": [
-      "webdev",
-      "template"
-    ],
-    "languages": [
-      "svelte",
-      "markdown"
-    ],
-    "gh_api": "J-onasJones/SvelteMarkdownWiki",
-    "version": "1.0",
-    "backgroud": "/homepage.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/SvelteMarkdownWiki"
-    },
-    "visible": true,
-    "last_update": 1695042172
-  },
-  {
-    "title": "SyncMod",
-    "description": "A mod that sync's your mods with the ones from the server of your choice.",
-    "status": "dev",
-    "statuscolor": "purple",
-    "categories": [
-      "minecraft",
-      "mcmodding",
-      "fabric",
-      "quilt"
-    ],
-    "languages": [
-      "java"
-    ],
-    "gh_api": "J-onasJones/SyncMod",
-    "version": "0.1+alpha1",
-    "backgroud": "/syncmod.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/SyncMod"
-    },
-    "visible": false,
-    "last_update": 1658851640
-  },
-  {
-    "title": "The Bobby Car Game",
-    "description": "A multiplayer racing game around bobby cars",
-    "status": "planned",
-    "statuscolor": "yellow",
-    "categories": [
-      "game"
-    ],
-    "languages": [
-      "godot"
-    ],
-    "gh_api": "J-onasJones/TheBobbycarGame",
-    "version": "---",
-    "backgroud": "/bobbycargame.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/TheBobbycarGame"
-    },
-    "visible": false,
-    "last_update": 1666562400
-  },
-  {
-    "title": "Website",
-    "description": "My website at https://jonasjones.dev",
-    "status": "release",
-    "statuscolor": "green",
-    "categories": [
-      "webdev",
-      "website"
-    ],
-    "languages": [
-      "css",
-      "svelte",
-      "js",
-      "html"
-    ],
-    "gh_api": "J-onasJones/jonasjones.dev",
-    "version": "1.0.1",
-    "backgroud": "/homepage.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/jonasjones.dev"
-    },
-    "visible": true,
-    "last_update": 1695761856
-  },
-  {
-    "title": "Website V1",
-    "description": "The repository for my old homepage at https://old.jonasjones.me",
-    "status": "discontinued",
-    "statuscolor": "gray",
-    "categories": [
-      "webdev",
-      "website"
-    ],
-    "languages": [
-      "html",
-      "css",
-      "js"
-    ],
-    "gh_api": "J-onasJones/Website-v1",
-    "version": "1.0",
-    "backgroud": "/oldwebsite.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/Website-v1"
-    },
-    "visible": true,
-    "last_update": 1694470228
-  },
-  {
-    "title": "Winception",
-    "description": "A 2D explorer game that let's you expierience past Operating System of the Windows and Linux family",
-    "status": "dev",
-    "statuscolor": "purple",
-    "categories": [
-      "game"
-    ],
-    "languages": [
-      "js",
-      "css",
-      "html"
-    ],
-    "gh_api": "J-onasJones/Winception",
-    "version": "0.1+alpha1",
-    "backgroud": "/winception.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/Winception"
-    },
-    "visible": false,
-    "last_update": 1661464800
-  },
-  {
-    "title": "Windows Bloatware Remover",
-    "description": "A tool that allows for removal of all Preinstalled Apps on Windows that can't be removed by Windows, such as Microsoft Edge",
-    "status": "beta",
-    "statuscolor": "orange",
-    "categories": [
-      "tools"
-    ],
-    "languages": [
-      "py",
-      "rslang"
-    ],
-    "gh_api": "J-onasJones/WindowsBloatwareRemover",
-    "version": "0.1.2",
-    "backgroud": "/bloatremover.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/WindowsBloatwareRemover"
-    },
-    "visible": true,
-    "last_update": 1661781655
-  },
-  {
-    "title": "Windows Info Overlay",
-    "description": "A highly configurable overlay that displays system infos",
-    "status": "dev",
-    "statuscolor": "purple",
-    "categories": [
-      "tools"
-    ],
-    "languages": [
-      "rslang"
-    ],
-    "gh_api": "J-onasJones/windows-info-overlay",
-    "version": "---",
-    "backgroud": "/winoverlay.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/windows-info-overlay"
-    },
-    "visible": false,
-    "last_update": 1673737200
-  }
-]
--- a/src/scripts/interfaces.ts
+++ b/src/scripts/interfaces.ts
@ -0,0 +1,58 @@
+export default interface Project {
+    title: string;
+    description: string;
+    status: string;
+    statuscolor: string;
+    categories: string[];
+    languages: { [key: string]: number };
+    gh_api: string;
+    version: string;
+    backgroud: string; // It seems there is a typo in the property name ("backgroud"), it should be corrected to "background" if intended.
+    links: {
+        GH: string;
+        WB: string;
+        MR: string;
+    };
+    visible: string;
+    last_update: string;
+}
+
+export default interface LanguageColors {
+    JavaScript: string;
+    HTML: string;
+    CSS: string;
+    Python: string;
+    Java: string;
+    'C++': string;
+    C: string;
+    Rust: string;
+    Svelte: string;
+    TypeScript: string;
+    Shell: string;
+    PHP: string;
+    Ruby: string;
+    Go: string;
+    Dart: string;
+    Kotlin: string;
+    Swift: string;
+    Scala: string;
+    'Objective-C': string;
+    Lua: string;
+    Perl: string;
+    CoffeeScript: string;
+    PowerShell: string;
+    Haskell: string;
+    Clojure: string;
+    TeX: string;
+    Elixir: string;
+    R: string;
+    'Vim script': string;
+    Assembly: string;
+    D: string;
+    OCaml: string;
+    'Emacs Lisp': string;
+    Crystal: string;
+    Vue: string;
+    Julia: string;
+    Nim: string;
+}
--- a/src/scripts/langs.js
+++ b/src/scripts/langs.js
@ -0,0 +1,41 @@
+let language_colors = {
+    "JavaScript": "#f1e05a",
+    "HTML": "#e34c26",
+    "CSS": "#563d7c",
+    "Python": "#3572A5",
+    "Java": "#b07219",
+    "C++": "#f34b7d",
+    "C": "#555555",
+    "Rust": "#dea584",
+    "Svelte": "#ff3e00",
+    "TypeScript": "#2b7489",
+    "Shell": "#89e051",
+    "PHP": "#4F5D95",
+    "Ruby": "#701516",
+    "Go": "#00ADD8",
+    "Dart": "#00B4AB",
+    "Kotlin": "#F18E33",
+    "Swift": "#ffac45",
+    "Scala": "#c22d40",
+    "Objective-C": "#438eff",
+    "Lua": "#000080",
+    "Perl": "#0298c3",
+    "CoffeeScript": "#244776",
+    "PowerShell": "#012456",
+    "Haskell": "#5e5086",
+    "Clojure": "#db5855",
+    "TeX": "#3D6117",
+    "Elixir": "#6e4a7e",
+    "R": "#198CE7",
+    "Vim script": "#199f4b",
+    "Assembly": "#6E4C13",
+    "D": "#ba595e",
+    "OCaml": "#3be133",
+    "Emacs Lisp": "#c065db",
+    "Crystal": "#000100",
+    "Vue": "#2c3e50",
+    "Julia": "#a270ba",
+    "Nim": "#ffc200"
+};
+
+export { language_colors };
--- a/static/project-banners/bashcmdaliaseditor.png
+++ b/static/project-banners/bashcmdaliaseditor.png
--- a/static/project-banners/betterconsolemc.png
+++ b/static/project-banners/betterconsolemc.png
--- a/static/project-banners/bettersimpleconfig.png
+++ b/static/project-banners/bettersimpleconfig.png
--- a/static/project-banners/bloatremover.png
+++ b/static/project-banners/bloatremover.png
--- a/static/project-banners/bobbycargame.png
+++ b/static/project-banners/bobbycargame.png
--- a/static/project-banners/consolemc.png
+++ b/static/project-banners/consolemc.png
--- a/static/project-banners/dayzlauncher.png
+++ b/static/project-banners/dayzlauncher.png
--- a/static/project-banners/homepage.png
+++ b/static/project-banners/homepage.png
--- a/static/project-banners/imageconverter.png
+++ b/static/project-banners/imageconverter.png
--- a/static/project-banners/j2tech.png
+++ b/static/project-banners/j2tech.png
--- a/static/project-banners/jjapi.png
+++ b/static/project-banners/jjapi.png
--- a/static/project-banners/mcserverstatus.png
+++ b/static/project-banners/mcserverstatus.png
--- a/static/project-banners/mcwebserver.png
+++ b/static/project-banners/mcwebserver.png
--- a/static/project-banners/microcraft.png
+++ b/static/project-banners/microcraft.png
--- a/static/project-banners/mkzplsscmpct.png
+++ b/static/project-banners/mkzplsscmpct.png
--- a/static/project-banners/moddah.png
+++ b/static/project-banners/moddah.png
--- a/static/project-banners/mysterymod.png
+++ b/static/project-banners/mysterymod.png
--- a/static/project-banners/notenoughcursedness.png
+++ b/static/project-banners/notenoughcursedness.png
--- a/static/project-banners/oldwebsite.png
+++ b/static/project-banners/oldwebsite.png
--- a/static/project-banners/pi-server-rack.png
+++ b/static/project-banners/pi-server-rack.png
--- a/static/project-banners/pinboardbot.png
+++ b/static/project-banners/pinboardbot.png
--- a/static/project-banners/pyterm2d.png
+++ b/static/project-banners/pyterm2d.png
--- a/static/project-banners/qrgen.png
+++ b/static/project-banners/qrgen.png
--- a/static/project-banners/rp-editor.png
+++ b/static/project-banners/rp-editor.png
--- a/static/project-banners/simp-rp.png
+++ b/static/project-banners/simp-rp.png
--- a/static/project-banners/spotifymc.png
+++ b/static/project-banners/spotifymc.png
--- a/static/project-banners/syncmod.png
+++ b/static/project-banners/syncmod.png
--- a/static/project-banners/winception.png
+++ b/static/project-banners/winception.png
--- a/static/project-banners/winoverlay.png
+++ b/static/project-banners/winoverlay.png
Author	SHA1	Message	Date
Jonas_Jones	ae2f6e4702	Merge pull request #13 from JonasunderscoreJones/embed-meta-fix	2025-01-31 23:04:01 +01:00
Jonas_Jones	62858329d6	added meta tags	2025-01-31 23:00:37 +01:00
Jonas_Jones	7e5e62589f	added random soundtrack	2024-10-10 18:44:48 +02:00
Jonas_Jones	5fb655d35c	replaced Wiki with Docs	2024-09-01 19:41:28 +02:00
Jonas_Jones	5fb0303145	Merge pull request #12 from JonasunderscoreJones/analytics Added analytics tracking	2024-08-18 04:34:31 +02:00
J-onasJones	6b1d0c46da	added analytics tracking	2024-08-18 04:30:26 +02:00
Jonas_Jones	941dced72d	added blog link	2024-06-22 01:42:14 +02:00
Jonas_Jones	efdd28ada5	updated deos	2024-06-22 01:42:08 +02:00
Jonas_Jones	99a07c4289	updated deps	2024-01-10 13:58:00 +01:00
Jonas_Jones	f444b7e6a5	Merge branch 'main' of https://github.com/JonasunderscoreJones/jonasjones.dev	2024-01-10 13:56:05 +01:00
Jonas_Jones	f2f9fb93bd	updated github link	2024-01-10 13:56:03 +01:00
J-onasJones	7aae92fca2	Fixed project search	2024-01-02 23:35:49 +01:00
J-onasJones	90f10a35ae	Updated project dependencies	2023-12-31 02:39:40 +01:00
J-onasJones	65ae3197c9	Removed logo flipping card on hover	2023-12-31 02:39:31 +01:00
J-onasJones	a4c6122a5d	Updated year	2023-12-31 02:39:18 +01:00
J-onasJones	52bb72c487	Updated dependencies	2023-12-05 19:05:00 +01:00
Jonas_Jones	a118112f41	Removed json data from repo	2023-10-07 23:01:18 +02:00
Jonas_Jones	3ce75bb714	Updated project metadata	2023-10-03 14:31:18 +02:00
Jonas_Jones	63b86344cf	Fixed mobile project view	2023-10-03 14:27:15 +02:00
J-onasJones	29703a1706	Updated Node Modules	2023-10-02 17:40:09 +02:00
Jonas_Jones	5955a0826a	Merge pull request #11 from J-onasJones/J-onasJones/issue9 Updated project metadata - IN WRONG BRANCH	2023-10-02 17:34:00 +02:00
Jonas_Jones	3b49d3247c	Updated project metadata	2023-10-02 17:33:09 +02:00
Jonas_Jones	6e15fbc839	Merge pull request #10 from J-onasJones/J-onasJones/issue9 Fixed #9	2023-10-02 17:26:18 +02:00
Jonas_Jones	00e882b6c7	Fixed #9 Fixed an issue where the entire project search didn't work	2023-10-02 17:25:19 +02:00
Jonas_Jones	819c89a09c	Added interfaces for potential typescript syntax	2023-10-01 22:22:53 +02:00
Jonas_Jones	a91ff2fdb0	Updated project metadata	2023-10-01 22:02:45 +02:00
Jonas_Jones	5da18b6295	Merge pull request #8 from J-onasJones/better-projects-page new Projects layout	2023-10-01 21:55:14 +02:00
Jonas_Jones	b462844860	Added missing links	2023-10-01 21:53:46 +02:00
Jonas_Jones	9252cc2750	Fixed visual bug Fixed a bug on the projects page, where the project version and status would overlap in certain aspect ratios	2023-10-01 21:53:38 +02:00
Jonas_Jones	37bbc8d6b4	Added new projects layout	2023-10-01 21:37:10 +02:00
Jonas_Jones	035f388b0a	Fixed Light mode project version and icon colors Fixed an issue with the Project version and Links color in lightmode	2023-10-01 19:19:54 +02:00
Jonas_Jones	865526a219	Added better layout	2023-10-01 19:10:20 +02:00
J-onasJones	7054a8b7cf	Updated project metadata	2023-09-27 21:34:11 +02:00
Jonas_Jones	7df626a5df	Merge pull request #7 from J-onasJones/readd-project-banners Readd project banners	2023-09-27 21:31:58 +02:00
Jonas_Jones	3f0e483e08	Merge pull request #6 from J-onasJones/main Merge pull request #5 from J-onasJones/light-theme-switch	2023-09-27 21:31:32 +02:00
Jonas_Jones	c3ec7aa891	Merge pull request #5 from J-onasJones/light-theme-switch Added crucial style related features	2023-09-27 21:27:32 +02:00
J-onasJones	5c800bc909	Added project banners to project	2023-09-27 16:25:21 +02:00
J-onasJones	7e9110d639	Added crucial style related features Made the following changes: - Added light-mode that changes based on browser theme - Fixed style-related issues concerning the projects page - Refactored code - Fixed an issue where the LastFM music details were hidden when there was enough space to show them -	2023-09-27 15:36:14 +02:00
J-onasJones	0923936258	Added property to disable dark-reader extension Added meta property to gloablly disable DarkReader on the website. This fixes an issue where the background wouldn't render properly	2023-09-27 14:27:59 +02:00
J-onasJones	cfdd7c61d5	Fixed issue with background on mobile Fixed an issue where the background moves when you tap somewhere like on desktop. This makes the background look weird and has therefore been fixed	2023-09-27 14:23:16 +02:00
J-onasJones	783a62b678	Added Useful Links section Added a section to the About page, listing some useful links such as old builds index and the wiki	2023-09-27 14:11:51 +02:00
J-onasJones	b0479811fd	Fixed an issue with link font colors Fixed the <a> tag font colors with difference between normal and hover	2023-09-27 14:10:33 +02:00
J-onasJones	39a76d873b	Updated project metadata	2023-09-27 14:00:31 +02:00