mirror of
https://github.com/JonasunderscoreJones/jonasjones.dev.git
synced 2025-10-23 00:49:19 +02:00
Added new projects layout
This commit is contained in:
Jonas_Jones
parent
035f388b0a
commit
37bbc8d6b4
7 changed files with 241 additions and 138 deletions
|
|
@ -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>
|
||||
|
|
|
|||
46
src/components/ProjectLanguageIndicator.svelte
Normal file
46
src/components/ProjectLanguageIndicator.svelte
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
41
src/scripts/langs.js
Normal file
41
src/scripts/langs.js
Normal file
|
|
@ -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 };
|
||||
Loading…
Add table
Add a link
Reference in a new issue