luke-else/luke-else.co.uk
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'chore/tailwind-conversion' (#38) from chore/tailwind-conversion into development
All checks were successful
Build and Push Development Docker Image / build-and-push (push) Successful in 1m21s
Details

Browse Source 
Reviewed-on: #38
This commit is contained in:
Luke Else 2025-05-24 21:36:15 +00:00
commit ef37e45281
8 changed files with 74 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/lib/components/Cards/Card.svelte
View File

@ -1,31 +1,23 @@
<script lang="ts">
export let headerLeft: string = "";
export let headerRight: string = "";
export let headerColour: string = "text-red-500";
export let footer: string = "";
// Allows additional styling to be applied to the Card component's outer wrapping
export let containerStyle: string = "";
</script>
<div class={containerStyle}>
<div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
<div class="{headerColour} flex flex-row justify-between items-center mb-4">
<p class="text-2xl md:text-3xl font-bold truncate">{headerLeft}</p>
{#if headerRight}
<p class="max-md:hidden text-xl md:text-2xl truncate">{@html headerRight}</p>
{/if}
<div class="text-red-400 font-bold flex flex-row justify-between items-center mb-4">
<slot name="headerLeft" class="text-2xl md:text-3xl truncate"></slot>
<slot name="headerRight" class="max-md:hidden text-xl md:text-2xl truncate"></slot>
</div>
<hr class="mb-4 border-1" />
<div class="flex-1 flex flex-col justify-center p-5">
<slot />
<slot name="content"/>
</div>
<hr class="my-4 border-1" />
<div class="flex flex-row justify-between items-center mt-2 text-base opacity-90">
<slot name="footerLeft"/>
<slot name="footerRight"/>
</div>
{#if footer}
<hr class="my-4 border-1" />
<div class="mt-2 text-base opacity-90">
{@html footer}
</div>
{/if}
</div>
</div>

7
src/lib/components/FlexGallery.svelte
View File

@ -1,7 +0,0 @@
<script lang="ts">
</script>
<!-- FlexGallery.svelte -->
<div class="flex flex-wrap gap-10 w-full">
<slot />
</div>

7
src/lib/components/GridGallery.svelte Normal file
View File

@ -0,0 +1,7 @@
<script lang="ts">
</script>
<!-- GridGallery.svelte -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
<slot />
</div>

3
src/lib/components/SkillProgress.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
export let value: number = 0; // 0 to 100
export let skillColour: string = 'bg-orange-400'; // Default color
</script>
<div class="w-full mt-3">
@ -9,7 +10,7 @@
</div>
<div class="w-full bg-gray-800 rounded-full h-5">
<div
class="bg-orange-400 h-5 rounded-full transition-all duration-500"
class="{skillColour} h-5 rounded-full transition-all duration-500"
style="width: {value}%"
></div>
</div>

4
src/lib/index.ts
View File

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

24
src/main.svelte
View File

@ -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';
</script>
@ -25,8 +25,10 @@
<!-- Main Card -->
<Section label="[Experience]">
<Card headerLeft={info.name} headerRight={info.job_title} footer={info.location}>
<div class="flex flex-row items-center gap-5">
<Card>
<h2 slot="headerLeft">{info.name}</h2>
<h2 slot="headerRight">{info.job_title}</h2>
<div slot="content" class="flex flex-row items-center gap-5">
<img
src={info.profile_photo}
alt="Avatar"
@ -34,20 +36,24 @@
/>
<p>{@html info.about}</p>
</div>
<h3 slot="footerLeft">{@html info.location}</h3>
</Card>
</Section>
<!-- SKills -->
<Section label="[Skills]">
<FlexGallery>
<GridGallery>
{#each info.skills as skill}
<Card headerLeft={skill.name} footer={skill.link} containerStyle="flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
{skill.about}
<SkillProgress value={skill.competency} />
<Card containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
<h2 slot="headerLeft">{skill.name}</h2>
<div slot="content">
{skill.about}
<SkillProgress skillColour={skill.colour} value={skill.competency} />
</div>
<h3 slot="footerLeft"><a href="{skill.link}" target="_blank">{skill.link}</a></h3>
</Card>
{/each}
</FlexGallery>
</GridGallery>
</Section>
<Section label="[Experience]">

40
src/routes/repos/+page.svelte
View File

@ -3,7 +3,7 @@
import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
import { toasts } from 'svelte-toasts';
import FlexGallery from '$lib/components/FlexGallery.svelte';
import GridGallery from '$lib/components/GridGallery.svelte';
import Card from '$lib/components/Cards/Card.svelte';
import Loading from '$lib/components/Loading.svelte';
@ -26,7 +26,7 @@
<Loading />
{:then _}
{#if $repos.length == 0}
{console.log("No Repos")}
{console.log('No Repos')}
<div style="display: none;">
{toasts.add({
title: 'Error',
@ -39,27 +39,33 @@
</div>
{/if}
<!-- Repositories loaded successfully -->
<FlexGallery>
<GridGallery>
{#each $repos as repo}
<!-- <Loading /> -->
<Card
headerLeft={repo.name}
headerRight={repo.language}
footer={timeSince(repo.updated_at)}
containerStyle="group relative flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300 overflow-hidden"
>
<div class="relative z-0">
{repo.description}
<h2 slot="headerLeft">{repo.name}</h2>
<h2 slot="headerRight" class="text-sm text-gray-500">
{repo.language}
</h2>
<div slot="content">
<div class="relative z-0">
{repo.description}
</div>
{#if repoImages[repo.name]}
<!-- svelte-ignore a11y_img_redundant_alt -->
<img
src={repoImages[repo.name]}
alt="repo image"
class="absolute left-0 bottom-0 h-full w-full object-cover rounded-2xl transition-transform duration-500 translate-y-full group-hover:translate-y-0 z-10 pointer-events-none"
/>
{/if}
</div>
{#if repoImages[repo.name]}
<!-- svelte-ignore a11y_img_redundant_alt -->
<img
src={repoImages[repo.name]}
alt="repo image"
class="absolute left-0 bottom-0 h-full w-full object-cover rounded-2xl transition-transform duration-500 translate-y-full group-hover:translate-y-0 z-10 pointer-events-none"
/>
{/if}
<h3 slot="footerLeft">
Last Updated: {timeSince(repo.updated_at)}
</h3>
</Card>
{/each}
</FlexGallery>
</GridGallery>
{/await}

22
static/json/me.json
View File

@ -3,49 +3,57 @@
"job_title": "Software Engineer",
"location": "Crawley, Sussex <br /> 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 <a href='https://www.thalesgroup.com/en'>Thales UK</a> 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 <a href='https://rust-lang.org'>Rust-Lang</a>.",
"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 <a href='https://git.luke-else.co.uk/luke-else/esp32_gps_display'>GPS-based speedometer</a> for my car and a <a href='https://git.luke-else.co.uk/luke-else/subnet_calculator'>Subnet Calculator</a> 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 <a href='https://www.qt.io'>Qt</a> and <a href='https://github.com/ocornut/imgui'>ImGui</a> 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 <a href='https://www.atlassian.com/git/tutorials/advanced-overview'>branching, merging and hooks</a>. I've also set up self-hosted <a href='https://git.luke-else.co.uk/luke-else/'>Git services</a> 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 <a href='https://git.luke-else.co.uk/luke-else/server'>home-lab services</a> such as this <a href='https://git.luke-else.co.uk/luke-else/luke-else.co.uk'>website</a> 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 <a href='https://git.luke-else.co.uk/luke-else/luke-else.co.uk'>this website</a> using Svelte and plan to explore <a href='https://github.com/tauri-apps/tauri'>Tauri</a> 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 <a href='https://www.thalesgroup.com/en'>Thales UK</a> 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 <a href='https://rust-lang.org'>Rust-Lang</a>.",
"timeline" : [
{
"duration" : "September 2022 - Present",