Compare commits
2 Commits
2d3046da48
...
b55538345f
Author | SHA1 | Date | |
---|---|---|---|
b55538345f | |||
67f9844534 |
@ -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>
|
||||
|
@ -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
7
src/lib/components/GridGallery.svelte
Normal 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>
|
@ -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>
|
||||
|
@ -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 };
|
||||
|
@ -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]">
|
||||
|
@ -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}
|
||||
|
@ -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",
|
||||
|
Loading…
x
Reference in New Issue
Block a user