Added new projects layout

JonasunderscoreJones · Oct 1, 2023 · 37bbc8d · 37bbc8d
1 parent 035f388
commit 37bbc8d
Show file tree

Hide file tree

Showing 7 changed files with 241 additions and 138 deletions.
diff --git a/src/components/ProjectComponent.svelte b/src/components/ProjectComponent.svelte
@@ -1,20 +1,26 @@
 <script>
     export let 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-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
@@ -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
@@ -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
@@ -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
@@ -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>