From 37bbc8d6b4cec9dd274349f6a7ee8c240a2d591d Mon Sep 17 00:00:00 2001
From: Jonas_Jones <91549607+J-onasJones@users.noreply.github.com>
Date: Sun, 1 Oct 2023 21:37:10 +0200
Subject: [PATCH] Added new projects layout

---
 src/components/ProjectComponent.svelte        |  21 +-
 .../ProjectLanguageIndicator.svelte           |  46 ++++
 src/components/ProjectsLinks.svelte           |  14 +-
 src/routes/+page.css                          |   1 +
 src/routes/projects/+page.svelte              |   8 +-
 src/routes/projects/projects.json             | 248 +++++++++---------
 src/scripts/langs.js                          |  41 +++
 7 files changed, 241 insertions(+), 138 deletions(-)
 create mode 100644 src/components/ProjectLanguageIndicator.svelte
 create mode 100644 src/scripts/langs.js

diff --git a/src/components/ProjectComponent.svelte b/src/components/ProjectComponent.svelte
index 6794e9e..b2e19cc 100644
--- a/src/components/ProjectComponent.svelte
+++ b/src/components/ProjectComponent.svelte
@@ -1,6 +1,7 @@
 <script>
     export let project;
     import ProjectsLinks from "./ProjectsLinks.svelte";
+    import ProjectLanguageIndicator from "./ProjectLanguageIndicator.svelte";
 
     import "../routes/+page.css";
 </script>
@@ -8,13 +9,18 @@
 <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-links">
-                <ProjectsLinks {project} />
+            <div>
                 <a
                     class="project-status"
                     style="color: {project.statuscolor};border-color:{project.statuscolor}"
@@ -73,6 +79,8 @@
         align-items: right;
         text-align: right;
         align-content: right;
+        width: 100%;
+        border-bottom: 1px solid var(--project-border-color);
     }
 
     .top {
@@ -102,4 +110,11 @@
         justify-content: space-between;
         align-items: center;
     }
+
+    .project-languages {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+    }
 </style>
diff --git a/src/components/ProjectLanguageIndicator.svelte b/src/components/ProjectLanguageIndicator.svelte
new file mode 100644
index 0000000..d17d6ea
--- /dev/null
+++ b/src/components/ProjectLanguageIndicator.svelte
@@ -0,0 +1,46 @@
+<script>
+    export let 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>
diff --git a/src/components/ProjectsLinks.svelte b/src/components/ProjectsLinks.svelte
index 5eabaf8..bbc3c9a 100644
--- a/src/components/ProjectsLinks.svelte
+++ b/src/components/ProjectsLinks.svelte
@@ -37,23 +37,23 @@
 
 <style>
   .project-links {
-    display: inline-block;
-    align-items: right;
-    text-align: right;
-    align-content: right;
-    margin-right: 10px;
+    display: flex;
+    width: 100%;
   }
   .project-link {
-    display: inline-block;
-    margin-left: 10px;
     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>
diff --git a/src/routes/+page.css b/src/routes/+page.css
index 4935d25..e6c9d7e 100644
--- a/src/routes/+page.css
+++ b/src/routes/+page.css
@@ -22,6 +22,7 @@
   --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;
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index e1ca362..3a14eef 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -95,14 +95,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>
diff --git a/src/routes/projects/projects.json b/src/routes/projects/projects.json
index 0caf27c..e598f03 100644
--- a/src/routes/projects/projects.json
+++ b/src/routes/projects/projects.json
@@ -7,9 +7,9 @@
     "categories": [
       ""
     ],
-    "languages": [
-      ""
-    ],
+    "languages": {
+      "": 0
+    },
     "gh_api": "",
     "version": "",
     "backgroud": "",
@@ -29,9 +29,9 @@
     "categories": [
       "tools"
     ],
-    "languages": [
-      "py"
-    ],
+    "languages": {
+      "Python": 2558
+    },
     "gh_api": "J-onasJones/BashCommandAliasEditor",
     "version": "2.0.1",
     "backgroud": "/bashcmdaliaseditor.png",
@@ -52,9 +52,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 26624
+    },
     "gh_api": "J-onasJones/BetterConsoleMC",
     "version": "1.0.0",
     "backgroud": "/betterconsolemc.png",
@@ -78,9 +78,9 @@
       "quilt",
       "lib"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 9776
+    },
     "gh_api": "J-onasJones/BetterSimpleConfig",
     "version": "1.0",
     "backgroud": "/bettersimpleconfig.png",
@@ -101,9 +101,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 14706
+    },
     "gh_api": "J-onasJones/ConsoleMC",
     "version": "0.1.1",
     "backgroud": "/consolemc.png",
@@ -123,10 +123,10 @@
       "tools",
       "game"
     ],
-    "languages": [
-      "rslang",
-      "sh"
-    ],
+    "languages": {
+      "Rust": 25928,
+      "Shell": 8803
+    },
     "gh_api": "J-onasJones/dayz-linux-gui-launcher",
     "version": "0.1.0",
     "backgroud": "/dayzlauncher.png",
@@ -145,9 +145,9 @@
       "tools",
       "bazinga"
     ],
-    "languages": [
-      "py"
-    ],
+    "languages": {
+      "Python": 8729
+    },
     "gh_api": "J-onasJones/ImageConverter",
     "version": "ImageConerter-1.2",
     "backgroud": "/imageconverter.png",
@@ -166,9 +166,9 @@
       "tools",
       "bazinga"
     ],
-    "languages": [
-      "lua"
-    ],
+    "languages": {
+      "Lua": 100
+    },
     "gh_api": "J-onasJones/j2-technologies",
     "version": "0.2.1ALPHA",
     "backgroud": "/j2tech.png",
@@ -187,9 +187,9 @@
       "api",
       "tools"
     ],
-    "languages": [
-      "js"
-    ],
+    "languages": {
+      "JavaScript": 0
+    },
     "gh_api": "J-onasJones/jonas_jones-api",
     "version": "---",
     "backgroud": "/jjapi.png",
@@ -210,9 +210,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 51381
+    },
     "gh_api": "J-onasJones/McWebserver",
     "version": "0.3.1",
     "backgroud": "/mcwebserver.png",
@@ -232,9 +232,9 @@
       "mcmodding",
       "forge"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 24337
+    },
     "gh_api": "J-onasJones/McWebserver-forge",
     "version": "0.2",
     "backgroud": "/mcwebserver.png",
@@ -255,9 +255,9 @@
       "tools",
       "bazinga"
     ],
-    "languages": [
-      "py"
-    ],
+    "languages": {
+      "Python": 100
+    },
     "gh_api": "J-onasJones/Make-ZIP-less-compact",
     "version": "1.1",
     "backgroud": "/mkzplsscmpct.png",
@@ -275,9 +275,10 @@
     "categories": [
       "tools"
     ],
-    "languages": [
-      "python"
-    ],
+    "languages": {
+      "Python": 3798,
+      "Shell": 189
+    },
     "gh_api": "J-onasJones/Markdown-Compiler",
     "version": "0.1",
     "backgroud": "/j2tech.png",
@@ -298,9 +299,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 55421
+    },
     "gh_api": "J-onasJones/Microcraft",
     "version": "0.1+alpha1",
     "backgroud": "/microcraft.png",
@@ -319,9 +320,9 @@
       "minecraft",
       "tools"
     ],
-    "languages": [
-      "py"
-    ],
+    "languages": {
+      "Python": 5350
+    },
     "gh_api": "J-onasJones/Minecraft-server-Status",
     "version": "1.3",
     "backgroud": "/mcserverstatus.png",
@@ -340,9 +341,10 @@
       "minecraft",
       "tools"
     ],
-    "languages": [
-      "rslang"
-    ],
+    "languages": {
+      "Rust": 4062,
+      "Shell": 580
+    },
     "gh_api": "J-onasJones/moddah",
     "version": "0.1+alpha1",
     "backgroud": "/moddah.png",
@@ -363,9 +365,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 100
+    },
     "gh_api": "J-onasJones/Mystery-core-mod",
     "version": "---",
     "backgroud": "/mysterymod.png",
@@ -386,9 +388,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 100
+    },
     "gh_api": "J-onasJones/MysteryDimensions",
     "version": "0.1+alpha1",
     "backgroud": "/mysterymod.png",
@@ -409,9 +411,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 100
+    },
     "gh_api": "J-onasJones/MysteryDungeons",
     "version": "0.1+alpha1",
     "backgroud": "/mysterymod.png",
@@ -432,9 +434,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 1243
+    },
     "gh_api": "J-onasJones/MysteryMod",
     "version": "0.1+alpha1",
     "backgroud": "/mysterymod.png",
@@ -455,9 +457,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 100
+    },
     "gh_api": "J-onasJones/MysteryRPG",
     "version": "0.1+alpha1",
     "backgroud": "/mysterymod.png",
@@ -478,9 +480,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 15096
+    },
     "gh_api": "J-onasJones/NotEnoughCursedness",
     "version": "0.2",
     "backgroud": "/notenoughcursedness.png",
@@ -499,11 +501,11 @@
     "categories": [
       "tools"
     ],
-    "languages": [
-      "c++",
-      "rslang",
-      "c"
-    ],
+    "languages": {
+      "C++": 40828,
+      "Rust": 3278,
+      "C": 130
+    },
     "gh_api": "J-onasJones/PI-server-rack",
     "version": "0.1+alpha1",
     "backgroud": "/pi-server-rack.png",
@@ -522,9 +524,9 @@
       "bot",
       "dcbot"
     ],
-    "languages": [
-      "js"
-    ],
+    "languages": {
+      "JavaScript": 4282
+    },
     "gh_api": "J-onasJones/PinBoardBot",
     "version": "0.1",
     "backgroud": "/pinboardbot.png",
@@ -542,9 +544,9 @@
     "categories": [
       "lib"
     ],
-    "languages": [
-      "py"
-    ],
+    "languages": {
+      "Python": 100
+    },
     "gh_api": "J-onasJones/pyterm2d",
     "version": "---",
     "backgroud": "/pyterm2d.png",
@@ -563,9 +565,9 @@
       "lib",
       "tools"
     ],
-    "languages": [
-      "rslang"
-    ],
+    "languages": {
+      "Rust": 100
+    },
     "gh_api": "J-onasJones/Qr-generator",
     "version": "---",
     "backgroud": "/qrgen.png",
@@ -585,9 +587,9 @@
       "tools",
       "bazinga"
     ],
-    "languages": [
-      "py"
-    ],
+    "languages": {
+      "Python": 100
+    },
     "gh_api": "J-onasJones/Resourcepack-Editor",
     "version": "0.1+alpha1",
     "backgroud": "/rp-editor.png",
@@ -605,9 +607,7 @@
     "categories": [
       "minecraft"
     ],
-    "languages": [
-      ""
-    ],
+    "languages": {},
     "gh_api": "J-onasJones/simp-resourcepack",
     "version": "1.0",
     "backgroud": "/simp-rp.png",
@@ -628,9 +628,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 1291
+    },
     "gh_api": "J-onasJones/SpotifyMC",
     "version": "0.1+alpha1",
     "backgroud": "/spotifymc.png",
@@ -649,10 +649,12 @@
       "webdev",
       "template"
     ],
-    "languages": [
-      "svelte",
-      "markdown"
-    ],
+    "languages": {
+      "Svelte": 2675,
+      "JavaScript": 1505,
+      "CSS": 395,
+      "HTML": 329
+    },
     "gh_api": "J-onasJones/SvelteMarkdownWiki",
     "version": "1.0",
     "backgroud": "/homepage.png",
@@ -673,9 +675,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 21878
+    },
     "gh_api": "J-onasJones/SyncMod",
     "version": "0.1+alpha1",
     "backgroud": "/syncmod.png",
@@ -693,9 +695,9 @@
     "categories": [
       "game"
     ],
-    "languages": [
-      "godot"
-    ],
+    "languages": {
+      "Godot": 100
+    },
     "gh_api": "J-onasJones/TheBobbycarGame",
     "version": "---",
     "backgroud": "/bobbycargame.png",
@@ -714,12 +716,12 @@
       "webdev",
       "website"
     ],
-    "languages": [
-      "css",
-      "svelte",
-      "js",
-      "html"
-    ],
+    "languages": {
+      "Svelte": 36691,
+      "CSS": 5152,
+      "JavaScript": 618,
+      "HTML": 406
+    },
     "gh_api": "J-onasJones/jonasjones.dev",
     "version": "1.1.1",
     "backgroud": "/homepage.png",
@@ -727,7 +729,7 @@
       "GH": "https://github.com/J-onasJones/jonasjones.dev"
     },
     "visible": true,
-    "last_update": 1695835918
+    "last_update": 1695836051
   },
   {
     "title": "Website V1",
@@ -738,11 +740,10 @@
       "webdev",
       "website"
     ],
-    "languages": [
-      "html",
-      "css",
-      "js"
-    ],
+    "languages": {
+      "HTML": 234599,
+      "CSS": 39007
+    },
     "gh_api": "J-onasJones/Website-v1",
     "version": "1.0",
     "backgroud": "/oldwebsite.png",
@@ -760,11 +761,11 @@
     "categories": [
       "game"
     ],
-    "languages": [
-      "js",
-      "css",
-      "html"
-    ],
+    "languages": {
+      "HTML": 100,
+      "JavaScript": 100,
+      "CSS": 100
+    },
     "gh_api": "J-onasJones/Winception",
     "version": "0.1+alpha1",
     "backgroud": "/winception.png",
@@ -782,10 +783,9 @@
     "categories": [
       "tools"
     ],
-    "languages": [
-      "py",
-      "rslang"
-    ],
+    "languages": {
+      "Python": 26637
+    },
     "gh_api": "J-onasJones/WindowsBloatwareRemover",
     "version": "0.1.2",
     "backgroud": "/bloatremover.png",
@@ -803,9 +803,9 @@
     "categories": [
       "tools"
     ],
-    "languages": [
-      "rslang"
-    ],
+    "languages": {
+      "Rust": 100
+    },
     "gh_api": "J-onasJones/windows-info-overlay",
     "version": "---",
     "backgroud": "/winoverlay.png",
diff --git a/src/scripts/langs.js b/src/scripts/langs.js
new file mode 100644
index 0000000..1ade614
--- /dev/null
+++ 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 };