From 67f9844534301fb07c88d7ee11a057a062d78f76 Mon Sep 17 00:00:00 2001 From: Luke Else Date: Sat, 24 May 2025 11:46:33 +0100 Subject: [PATCH 1/2] CHORE: Updated Gallery to use grid. Made card component mode modular. Added colour to the skills section of the page. --- src/lib/components/Cards/Card.svelte | 28 +++++++----------- src/lib/components/FlexGallery.svelte | 7 ----- src/lib/components/GridGallery.svelte | 7 +++++ src/lib/components/SkillProgress.svelte | 3 +- src/lib/index.ts | 4 +-- src/main.svelte | 24 ++++++++++------ src/routes/repos/+page.svelte | 38 ++++++++++++++----------- static/json/me.json | 22 +++++++++----- 8 files changed, 73 insertions(+), 60 deletions(-) delete mode 100644 src/lib/components/FlexGallery.svelte create mode 100644 src/lib/components/GridGallery.svelte diff --git a/src/lib/components/Cards/Card.svelte b/src/lib/components/Cards/Card.svelte index 4f6fe79..42f9ff6 100644 --- a/src/lib/components/Cards/Card.svelte +++ b/src/lib/components/Cards/Card.svelte @@ -1,31 +1,23 @@
-
-

{headerLeft}

- - {#if headerRight} -

{@html headerRight}

- {/if} +
+ +
- + +
+ +
+
+ +
- {#if footer} -
-
- {@html footer} -
- {/if}
diff --git a/src/lib/components/FlexGallery.svelte b/src/lib/components/FlexGallery.svelte deleted file mode 100644 index f9c5d65..0000000 --- a/src/lib/components/FlexGallery.svelte +++ /dev/null @@ -1,7 +0,0 @@ - - - -
- -
\ No newline at end of file diff --git a/src/lib/components/GridGallery.svelte b/src/lib/components/GridGallery.svelte new file mode 100644 index 0000000..801ff62 --- /dev/null +++ b/src/lib/components/GridGallery.svelte @@ -0,0 +1,7 @@ + + + +
+ +
\ No newline at end of file diff --git a/src/lib/components/SkillProgress.svelte b/src/lib/components/SkillProgress.svelte index a989a38..e72437d 100644 --- a/src/lib/components/SkillProgress.svelte +++ b/src/lib/components/SkillProgress.svelte @@ -1,5 +1,6 @@
@@ -9,7 +10,7 @@
diff --git a/src/lib/index.ts b/src/lib/index.ts index 1cb91ce..98143f2 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1,9 +1,9 @@ // place files you want to import through the `$lib` alias in this folder. import Card from '$lib/components/Cards/Card.svelte'; -import FlexGallery from './components/FlexGallery.svelte'; +import GridGallery from './components/GridGallery.svelte'; import Loading from './components/Loading.svelte'; import Section from './components/Section.svelte'; import SkillProgress from './components/SkillProgress.svelte'; import Timeline from './components/Timeline.svelte'; -export { Card, FlexGallery, Loading, Section, SkillProgress, Timeline }; +export { Card, GridGallery, Loading, Section, SkillProgress, Timeline }; diff --git a/src/main.svelte b/src/main.svelte index ee4569a..2ba3d0f 100644 --- a/src/main.svelte +++ b/src/main.svelte @@ -5,7 +5,7 @@ import Loading from '$lib/components/Loading.svelte'; import Section from '$lib/components/Section.svelte'; import Card from '$lib/components/Cards/Card.svelte'; - import FlexGallery from "$lib/components/FlexGallery.svelte"; + import GridGallery from "$lib/components/GridGallery.svelte"; import SkillProgress from "$lib/components/SkillProgress.svelte"; import Timeline from '$lib/components/Timeline.svelte'; @@ -25,8 +25,10 @@
- -
+ +

{info.name}

+

{info.job_title}

+
Avatar

{@html info.about}

+

{@html info.location}
- + {#each info.skills as skill} - - {skill.about} - - + +

{skill.name}

+
+ {skill.about} + +
+

{skill.link}

 {/each} - +
diff --git a/src/routes/repos/+page.svelte b/src/routes/repos/+page.svelte index 9595167..018d18c 100644 --- a/src/routes/repos/+page.svelte +++ b/src/routes/repos/+page.svelte @@ -2,7 +2,7 @@ import { loadRepos, repos } from '$lib/stores'; import { onMount } from 'svelte'; import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git'; - import FlexGallery from '$lib/components/FlexGallery.svelte'; + import GridGallery from '$lib/components/GridGallery.svelte'; import Card from '$lib/components/Cards/Card.svelte'; let repoImages: Record = {}; @@ -22,25 +22,31 @@ onMount(loadRepos); - + {#each $repos as repo} -
- {repo.description} +

{repo.name}

+

+ {repo.language} +

+
+
+ {repo.description} +
+ {#if repoImages[repo.name]} + + repo image + {/if}
- {#if repoImages[repo.name]} - - repo image - {/if} +

+ Last Updated: {timeSince(repo.updated_at)} +

{/each} - + diff --git a/static/json/me.json b/static/json/me.json index 824f0e5..2e0b4c5 100644 --- a/static/json/me.json +++ b/static/json/me.json @@ -3,49 +3,57 @@ "job_title": "Software Engineer", "location": "Crawley, Sussex
UK", "profile_photo": "/profile.jpg", + "about": "Hello! I'm an enthusiastic, dedicated software engineer passionate about backend development, networking, and embedded systems. I am currently employed at Thales UK and thrive on architecting robust backend solutions, optimizing data transmission, and crafting efficient embedded software. I love tackling complex challenges, collaborating with fellow professionals, and staying up-to-date with tech trends such as my current venture in learning Rust-Lang.", "skills": [ { "name": "Rust", "logo": "devicon-rust-plain", + "colour": "bg-orange-400", "link": "https://rust-lang.org", - "usage": "Rust is a memory-safe language with zero-cost abstractions, making it ideal for embedded systems. I used Rust to build a GPS-based speedometer for my car and a Subnet Calculator for university studies.", "about": "Rust combines safety, efficiency, and clean code, making it a powerful choice for reliable software development.", "competency": 70 }, { "name": "C++", "logo": "devicon-cplusplus-plain", + "colour": "bg-blue-400", "link": "https://cplusplus.com/", - "usage": "Since joining Thales in 2022, I’ve worked on a distributed simulation system using C++, primarily with Qt and ImGui to develop customer-facing applications.", "about": "C++ offers high-level abstractions with low-level control, making it essential for performance-critical applications.", "competency": 80 }, + { + "name": "Tailwind CSS", + "logo": "devicon-tailwindcss-plain", + "colour": "bg-blue-800", + "link": "https://tailwindcss.com/", + "about": "Tailwind CSS is a utility-first CSS framework that enables rapid UI development with a focus on customization and responsiveness.", + "competency": 60 + }, { "name": "Git", "logo": "devicon-git-plain", + "colour": "bg-red-400", "link": "https://git-scm.com", - "usage": "I have extensive experience with Git, including advanced features like branching, merging and hooks. I've also set up self-hosted Git services with CI/CD automation.", "about": "Git is an essential tool for version control, enabling efficient collaboration and streamlined code management.", "competency": 80 }, { "name": "Docker", "logo": "devicon-docker-plain", + "colour": "bg-blue-500", "link": "https://docker.com", - "usage": "I use Docker and Docker Compose for containerized deployments, including hosting home-lab services such as this website and remote Git repositories.", "about": "Docker simplifies deployment by packaging applications in lightweight containers, ensuring consistency across environments.", "competency": 100 }, { "name": "Svelte", "logo": "devicon-svelte-plain", + "colour": "bg-orange-400", "link": "https://svelte.dev", - "usage": "I built this website using Svelte and plan to explore Tauri for building desktop apps.", "about": "Svelte compiles to optimized JavaScript, offering a fast, efficient, and maintainable front-end development experience.", - "competency": 40 + "competency": 55 } ], - "about": "Hello! I'm an enthusiastic, dedicated software engineer passionate about backend development, networking, and embedded systems. I am currently employed at Thales UK and thrive on architecting robust backend solutions, optimizing data transmission, and crafting efficient embedded software. I love tackling complex challenges, collaborating with fellow professionals, and staying up-to-date with tech trends such as my current venture in learning Rust-Lang.", "timeline" : [ { "duration" : "September 2022 - Present", -- 2.47.2 From 2d3046da4812578d8b9ec8e692f9c596c2cfb22f Mon Sep 17 00:00:00 2001 From: Luke Else Date: Sat, 24 May 2025 14:02:52 +0100 Subject: [PATCH 2/2] CHORE: Fixed loading icon and added it into REPOS page. --- src/lib/components/Loading.svelte | 6 +-- src/routes/repos/+page.svelte | 69 ++++++++++++++++++++----------- 2 files changed, 47 insertions(+), 28 deletions(-) diff --git a/src/lib/components/Loading.svelte b/src/lib/components/Loading.svelte index 17aa92f..4ccf026 100644 --- a/src/lib/components/Loading.svelte +++ b/src/lib/components/Loading.svelte @@ -21,21 +21,21 @@ left: 0%; top: 0%; animation: rotate-one 1s linear infinite; - border-bottom: 3px solid var(--fg); + border-bottom: 3px solid gray; } .inner.two { right: 0%; top: 0%; animation: rotate-two 1s linear infinite; - border-right: 3px solid var(--fg); + border-right: 3px solid gray; } .inner.three { right: 0%; bottom: 0%; animation: rotate-three 1s linear infinite; - border-top: 3px solid var(--fg); + border-top: 3px solid gray; } @keyframes rotate-one { diff --git a/src/routes/repos/+page.svelte b/src/routes/repos/+page.svelte index 9595167..31b1ebc 100644 --- a/src/routes/repos/+page.svelte +++ b/src/routes/repos/+page.svelte @@ -1,9 +1,11 @@ - - {#each $repos as repo} - -
- {repo.description} -
- {#if repoImages[repo.name]} - - repo image - {/if} - - {/each} - +{#await loadRepos()} + +{:then _} + {#if $repos.length == 0} + {console.log("No Repos")} +
+ {toasts.add({ + title: 'Error', + description: 'Failed to load repositories', + duration: 5000, + type: 'error', + placement: 'bottom-center', + showProgress: true + })} +
+ {/if} + + + {#each $repos as repo} + + +
+ {repo.description} +
+ {#if repoImages[repo.name]} + + repo image + {/if} + + {/each} + +{/await} -- 2.47.2