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

Added analytics tracking

src/app.html

@@ -7,6 +7,18 @@
 	<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>
 

src/components/Footer.svelte

@@ -1,5 +1,5 @@
 <div class="footer">
-  <p>Website by Jonas_Jones 2021 - 2023</p>
+  <p>Website by Jonas_Jones 2021 - 2024</p>
 </div>
 
 <script>

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'},

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>

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>

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>

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);
+    }
+  }

src/routes/+page.css

@@ -22,9 +22,11 @@
   --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)
@@ -44,8 +46,9 @@
     --footer-font-color: #000;
     --projects-background-color: rgba(255, 255, 255, 0.4);
     --project-border-color: black;
-    --project-link-color: white;
+    --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)

src/routes/+page.svelte

@@ -10,7 +10,6 @@
   <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"
@@ -18,11 +17,6 @@
       class="picture"
     />
   </div>
-    <div class="card-back">
-      <!-- svelte-ignore a11y-img-redundant-alt -->
-      <img src="/root_logo.webp" alt="My Picture" class="picture" />
-    </div>
-  </div>
   <div class="line">
     <hr />
   </div>
@@ -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
       >

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,10 @@
             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 />

src/routes/projects/+page.svelte

@@ -1,30 +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();
   }
 
@@ -44,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) &&
@@ -55,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 />
@@ -94,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>
@@ -122,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>
@@ -197,126 +165,19 @@
 
   .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;
     border: 2px solid var(--project-border-color);
-  }
-
-  .project-bg {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    background-color: var(--project-background-color);
-  }
-
-  .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: var(--project-link-color);
-    text-decoration: none;
-    transition: color 0.3s;
-  }
-
-  .project-link:hover {
-    color: var(--project-link-color-hover);
-  }
-
-  .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;
+    min-width: 530px;
+    background-color: var(--background-color);
   }
 
   .search-bar {
@@ -348,21 +209,13 @@
     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>

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.2",
-    "backgroud": "/homepage.png",
-    "links": {
-      "GH": "https://github.com/J-onasJones/jonasjones.dev"
-    },
-    "visible": true,
-    "last_update": 1695808613
-  },
-  {
-    "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
-  }
-]

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;
+}

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 };