development #54
2
.npmrc
2
.npmrc
@@ -1,2 +1,4 @@
|
||||
engine-strict=true
|
||||
resolution-mode=highest
|
||||
|
||||
@luke-else:registry=https://git.luke-else.co.uk/api/packages/luke-else/npm/
|
||||
|
||||
@@ -13,11 +13,11 @@
|
||||
"format": "prettier --plugin-search-dir . --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-json": "^6.0.0",
|
||||
"@rollup/plugin-json": "^6.1.0",
|
||||
"@sveltejs/adapter-auto": "6.0.0",
|
||||
"@sveltejs/adapter-node": "5.2.12",
|
||||
"@sveltejs/kit": "2.20.8",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.1.1",
|
||||
"prettier": "3.5.3",
|
||||
"prettier-plugin-svelte": "3.3.3",
|
||||
"svelte": "5.28.2",
|
||||
@@ -28,8 +28,9 @@
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.1.6",
|
||||
"@luke-else/component-lib": "^1.0.8",
|
||||
"@tailwindcss/vite": "^4.1.13",
|
||||
"svelte-toasts": "^1.1.2",
|
||||
"tailwindcss": "^4.1.6"
|
||||
"tailwindcss": "^4.1.13"
|
||||
}
|
||||
}
|
||||
|
||||
1342
pnpm-lock.yaml
generated
1342
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,23 +0,0 @@
|
||||
<script lang="ts">
|
||||
// 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="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="border-1" />
|
||||
<div class="flex-1 flex flex-col justify-center mt-4 mb-8">
|
||||
<slot name="content"/>
|
||||
</div>
|
||||
|
||||
<hr class="border-1" />
|
||||
<div class="flex flex-row justify-between items-center mt-4 text-base opacity-90">
|
||||
<slot name="footerLeft"/>
|
||||
<slot name="footerRight"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,33 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let open = false;
|
||||
</script>
|
||||
|
||||
<div class="w-full">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full px-2 py-2 text-left rounded hover:font-bold transition group"
|
||||
on:click={() => open = !open}
|
||||
aria-expanded={open}
|
||||
>
|
||||
<span><slot name="label"/></span>
|
||||
<svg
|
||||
class="w-5 h-5 ml-2 transition-transform duration-200"
|
||||
style="transform: rotate({open ? 90 : 0}deg)"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
class="overflow-hidden transition-all duration-300"
|
||||
style="max-height: {open ? '1000px' : '0'}"
|
||||
aria-hidden={!open}
|
||||
>
|
||||
<div class="pt-2">
|
||||
<slot name="content"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,7 +0,0 @@
|
||||
<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,73 +0,0 @@
|
||||
<style>
|
||||
.loader {
|
||||
position: absolute;
|
||||
top: calc(50% - 32px);
|
||||
left: calc(50% - 32px);
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
perspective: 800px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.inner.one {
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
animation: rotate-one 1s linear infinite;
|
||||
border-bottom: 3px solid gray;
|
||||
}
|
||||
|
||||
.inner.two {
|
||||
right: 0%;
|
||||
top: 0%;
|
||||
animation: rotate-two 1s linear infinite;
|
||||
border-right: 3px solid gray;
|
||||
}
|
||||
|
||||
.inner.three {
|
||||
right: 0%;
|
||||
bottom: 0%;
|
||||
animation: rotate-three 1s linear infinite;
|
||||
border-top: 3px solid gray;
|
||||
}
|
||||
|
||||
@keyframes rotate-one {
|
||||
0% {
|
||||
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-two {
|
||||
0% {
|
||||
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-three {
|
||||
0% {
|
||||
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="loader">
|
||||
<div class="inner one"></div>
|
||||
<div class="inner two"></div>
|
||||
<div class="inner three"></div>
|
||||
</div>
|
||||
@@ -1,9 +0,0 @@
|
||||
<script>
|
||||
export let iconClass = 'devicon-htmx-plain';
|
||||
</script>
|
||||
|
||||
<span
|
||||
class="fixed lg:top-4 bottom-4 left-4 text-5xl z-[1000] text-grey"
|
||||
>
|
||||
<i class={iconClass}></i>
|
||||
</span>
|
||||
@@ -1,26 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let label: string = "";
|
||||
</script>
|
||||
|
||||
<div id={label} class="relative flex flex-row w-full min-h-[300px] mt-5 mb-25">
|
||||
<!-- Sticky/Sliding Label -->
|
||||
<div class="hidden md:flex flex-col items-center mr-6">
|
||||
<div class="sticky top-24 left-0 z-10">
|
||||
<span class="text-2xl font-bold text-blue-400 tracking-widest"
|
||||
style="writing-mode: vertical-rl; text-orientation: mixed;">
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 flex flex-col">
|
||||
<!-- Label for mobile -->
|
||||
<div class="md:hidden mb-2">
|
||||
<span class="text-2xl font-bold text-blue-400">{label}</span>
|
||||
</div>
|
||||
<hr class="border-blue-400 mb-6" />
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,17 +0,0 @@
|
||||
<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">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-sm font-medium">Competency Level</span>
|
||||
<span class="text-sm font-medium">{value}%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-800 rounded-full h-5">
|
||||
<div
|
||||
class="{skillColour} h-5 rounded-full transition-all duration-500"
|
||||
style="width: {value}%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,29 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Collapsible from "./Collapsible.svelte";
|
||||
|
||||
export let timelineData: Array<{
|
||||
title: string;
|
||||
description: string;
|
||||
duration: string;
|
||||
}>;
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div class="max-w-4xl w-full">
|
||||
{#each timelineData as entry, i}
|
||||
<div class="relative border-l border-gray-700 pl-8 pb-12">
|
||||
{#if i == 0}
|
||||
<div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">♦</div>
|
||||
{:else}
|
||||
<div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">⋄</div>
|
||||
{/if}
|
||||
<p class="text-sm opacity-70">{entry.duration}</p>
|
||||
|
||||
<Collapsible open={i==0}>
|
||||
<span slot="label" class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition">{entry.title}</span>
|
||||
<span slot="content">{@html entry.description}</span>
|
||||
</Collapsible>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@@ -2,13 +2,15 @@
|
||||
import { getJson } from '$lib/data';
|
||||
import { toasts } from 'svelte-toasts';
|
||||
|
||||
import Loading from '$lib/components/Loading.svelte';
|
||||
import Section from '$lib/components/Section.svelte';
|
||||
import Card from '$lib/components/Cards/Card.svelte';
|
||||
import GridGallery from "$lib/components/GridGallery.svelte";
|
||||
import SkillProgress from "$lib/components/SkillProgress.svelte";
|
||||
import Timeline from '$lib/components/Timeline.svelte';
|
||||
import Collapsible from '$lib/components/Collapsible.svelte';
|
||||
import {
|
||||
Loading,
|
||||
Section,
|
||||
Card,
|
||||
GridGallery,
|
||||
SkillProgress,
|
||||
Timeline,
|
||||
Collapsible
|
||||
} from '@luke-else/component-lib';
|
||||
</script>
|
||||
|
||||
{#await getJson('/json/me.json')}
|
||||
@@ -35,7 +37,11 @@
|
||||
alt="Avatar"
|
||||
class="max-md:hidden rounded-full w-32 h-32 md:w-48 md:h-48 mt-2 mb-2 p-2 border-3"
|
||||
/>
|
||||
<p class="[&>*]:underline [&>*]:decoration-2 [&>*]:decoration-transparent [&>*]:hover:decoration-inherit [&>*]:transition-all [&>*]:duration-300 [&>*]:text-green-600">{@html info.about}</p>
|
||||
<p
|
||||
class="[&>*]:underline [&>*]:decoration-2 [&>*]:decoration-transparent [&>*]:hover:decoration-inherit [&>*]:transition-all [&>*]:duration-300 [&>*]:text-green-600"
|
||||
>
|
||||
{@html info.about}
|
||||
</p>
|
||||
</div>
|
||||
<h3 slot="footerLeft">{@html info.location}</h3>
|
||||
</Card>
|
||||
@@ -45,7 +51,9 @@
|
||||
<Section label="[Skills]">
|
||||
<GridGallery>
|
||||
{#each info.skills as skill}
|
||||
<Card containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
|
||||
<Card
|
||||
containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300"
|
||||
>
|
||||
<h2 slot="headerLeft">{skill.name}</h2>
|
||||
<i slot="headerRight" class="text-slate-300 text-5xl {skill.logo}"></i>
|
||||
<div slot="content">
|
||||
@@ -55,7 +63,7 @@
|
||||
</Collapsible>
|
||||
<SkillProgress skillColour={skill.colour} value={skill.competency} />
|
||||
</div>
|
||||
<h3 slot="footerLeft"><a href="{skill.link}" target="_blank">{skill.link}</a></h3>
|
||||
<h3 slot="footerLeft"><a href={skill.link} target="_blank">{skill.link}</a></h3>
|
||||
</Card>
|
||||
{/each}
|
||||
</GridGallery>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { ToastContainer, FlatToast } from 'svelte-toasts';
|
||||
import '../app.css';
|
||||
import PageIcon from '$lib/components/PageIcon.svelte';
|
||||
import { ToastContainer, FlatToast } from 'svelte-toasts';
|
||||
import { PageIcon } from '@luke-else/component-lib';
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { toasts } from 'svelte-toasts';
|
||||
import Card from '$lib/components/Cards/Card.svelte';
|
||||
import { Card, Section } from '@luke-else/component-lib';
|
||||
|
||||
import { page } from '$app/state';
|
||||
const sent = page.url.searchParams.get('sent');
|
||||
@@ -26,73 +26,78 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<Card>
|
||||
<div slot="headerLeft">
|
||||
Contact Me
|
||||
<Section label="[Contact]">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<!-- Contact Form -->
|
||||
<form slot="content" class="w-full max-w-3xl mx-auto flex flex-col gap-4 text-lg" action="https://api.staticforms.xyz/submit" method="post">
|
||||
<div class="hidden">
|
||||
<input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
|
||||
<input type="hidden" name="replyTo" value="@">
|
||||
<input type="text" name="honeypot" style="display: none;">
|
||||
<input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
|
||||
<Card>
|
||||
<div slot="headerLeft">
|
||||
Contact Me
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium mb-1" for="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
|
||||
required
|
||||
placeholder="Your name"
|
||||
/>
|
||||
<!-- Contact Form -->
|
||||
<form slot="content" class="w-full max-w-3xl mx-auto flex flex-col gap-4 text-lg" action="https://api.staticforms.xyz/submit" method="post">
|
||||
<div class="hidden">
|
||||
<input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
|
||||
<input type="hidden" name="replyTo" value="@">
|
||||
<input type="text" name="honeypot" style="display: none;">
|
||||
<input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium mb-1" for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
|
||||
required
|
||||
placeholder="you@email.com"
|
||||
/>
|
||||
<div class="flex flex-row md:flex-row gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium mb-1" for="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
|
||||
required
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium mb-1" for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
|
||||
required
|
||||
placeholder="you@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium mb-1" for="subject">Subject</label>
|
||||
<input
|
||||
id="subject"
|
||||
name="subject"
|
||||
type="text"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
|
||||
required
|
||||
placeholder="Subject"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium mb-1" for="subject">Subject</label>
|
||||
<input
|
||||
id="subject"
|
||||
name="subject"
|
||||
type="text"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
|
||||
<div>
|
||||
<label class="block text-xs font-medium mb-1" for="message">Message</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-600 transition min-h-[80px] placeholder-gray-400"
|
||||
required
|
||||
placeholder="Subject"
|
||||
/>
|
||||
placeholder="Your message"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium mb-1" for="message">Message</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-600 transition min-h-[80px] placeholder-gray-400"
|
||||
required
|
||||
placeholder="Your message"
|
||||
></textarea>
|
||||
</div>
|
||||
<!-- reCAPTCHA integration -->
|
||||
<div class="">
|
||||
<div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
|
||||
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="self-end bg-blue-600 hover:bg-blue-700 text-white font-semibold py-1.5 px-8 rounded-lg transition"
|
||||
>
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</Card>
|
||||
<!-- reCAPTCHA integration -->
|
||||
<div class="">
|
||||
<div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
|
||||
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="self-end bg-blue-600 hover:bg-blue-700 text-white font-semibold py-1.5 px-8 rounded-lg transition"
|
||||
>
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</Card>
|
||||
</Section>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
|
||||
import { toasts } from 'svelte-toasts';
|
||||
|
||||
import GridGallery from '$lib/components/GridGallery.svelte';
|
||||
import Card from '$lib/components/Cards/Card.svelte';
|
||||
import Loading from '$lib/components/Loading.svelte';
|
||||
import { GridGallery, Card, Loading, Section } from '@luke-else/component-lib';
|
||||
|
||||
let repoImages: Record<string, string | null> = {};
|
||||
|
||||
@@ -21,51 +19,52 @@
|
||||
})();
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await loadRepos()}
|
||||
<Loading />
|
||||
{:then _}
|
||||
{#if $repos.length == 0}
|
||||
{console.log('No Repos')}
|
||||
<div style="display: none;">
|
||||
{toasts.add({
|
||||
title: 'Error',
|
||||
description: 'Failed to load repositories',
|
||||
duration: 5000,
|
||||
type: 'error',
|
||||
placement: 'bottom-center',
|
||||
showProgress: true
|
||||
})}
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Repositories loaded successfully -->
|
||||
<GridGallery>
|
||||
{#each $repos as repo}
|
||||
<!-- <Loading /> -->
|
||||
<Card
|
||||
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"
|
||||
>
|
||||
<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}
|
||||
<Section label="[Repositories]">
|
||||
{#await loadRepos()}
|
||||
<Loading />
|
||||
{:then _}
|
||||
{#if $repos.length == 0}
|
||||
{console.log('No Repos')}
|
||||
<div style="display: none;">
|
||||
{toasts.add({
|
||||
title: 'Error',
|
||||
description: 'Failed to load repositories',
|
||||
duration: 5000,
|
||||
type: 'error',
|
||||
placement: 'bottom-center',
|
||||
showProgress: true
|
||||
})}
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Repositories loaded successfully -->
|
||||
<GridGallery>
|
||||
{#each $repos as repo}
|
||||
<!-- <Loading /> -->
|
||||
<Card
|
||||
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"
|
||||
>
|
||||
<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}
|
||||
</div>
|
||||
<h3 slot="footerLeft">
|
||||
Last Updated: {timeSince(repo.updated_at)}
|
||||
</h3>
|
||||
</Card>
|
||||
{/each}
|
||||
</GridGallery>
|
||||
{/await}
|
||||
<h3 slot="footerLeft">
|
||||
Last Updated: {timeSince(repo.updated_at)}
|
||||
</h3>
|
||||
</Card>
|
||||
{/each}
|
||||
</GridGallery>
|
||||
{/await}
|
||||
</Section>
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'one-bg': '#282c34',
|
||||
'one-bg-light': '#3a3f4b',
|
||||
'one-fg': '#abb2bf',
|
||||
'one-accent': '#61afef',
|
||||
'one-green': '#98c379',
|
||||
'one-orange': '#d19a66',
|
||||
'one-red': '#e06c75',
|
||||
'one-yellow': '#e5c07b',
|
||||
'one-purple': '#c678dd',
|
||||
'one-cyan': '#56b6c2',
|
||||
'one-comment': '#5c6370',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user