Compare commits
No commits in common. "25f3db52ecf5c7028ac589bfc779ec5cff4ffcd2" and "c52d185f764fab5fd1ffe07f08406ec66e3cfb01" have entirely different histories.
25f3db52ec
...
c52d185f76
38
src/lib/components/Cards/SlidingCard.svelte
Normal file
38
src/lib/components/Cards/SlidingCard.svelte
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
function onClick() {
|
||||||
|
dispatch('click');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
|
<div
|
||||||
|
class="sliding-card flex flex-col justify-between flex-wrap flex-[2_1_15em] p-2 bg-secondary rounded-lg snap-start transition-all duration-300 overflow-hidden relative hover:shadow-lg"
|
||||||
|
on:click={onClick}
|
||||||
|
>
|
||||||
|
<div class="sliding-card-header w-full flex items-center justify-between mb-0">
|
||||||
|
<slot name="header"></slot>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<!-- Wrapper to stack sliding-card-content and sliding-content -->
|
||||||
|
<div class="content-wrapper relative w-full overflow-hidden">
|
||||||
|
<div class="sliding-card-content flex flex-col items-center justify-center max-w-full flex-grow z-[1]">
|
||||||
|
<slot name="content"></slot>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="sliding-content absolute top-0 left-0 w-full h-full bg-secondary translate-y-full transition-transform duration-300 z-[2] pointer-events-none group-hover:translate-y-0 sliding-card:hover:translate-y-0"
|
||||||
|
>
|
||||||
|
<slot name="sliding-content"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="not-required" />
|
||||||
|
<div class="sliding-card-footer flex gap-4 max-w-full justify-between mb-4">
|
||||||
|
<slot name="footer"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
@ -4,8 +4,7 @@
|
|||||||
|
|
||||||
<div class="w-full mt-3">
|
<div class="w-full mt-3">
|
||||||
<div class="flex justify-between mb-1">
|
<div class="flex justify-between mb-1">
|
||||||
<span class="text-sm font-medium">Competency Level</span>
|
<span class="text-sm font-medium text-gray-400">{value}%</span>
|
||||||
<span class="text-sm font-medium">{value}%</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full bg-gray-800 rounded-full h-5">
|
<div class="w-full bg-gray-800 rounded-full h-5">
|
||||||
<div
|
<div
|
||||||
|
@ -1,41 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
export let timelineData: Array<{
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
duration: string;
|
|
||||||
}>;
|
|
||||||
|
|
||||||
// Track open/closed state for each entry
|
|
||||||
let openStates = timelineData.map(() => false);
|
|
||||||
|
|
||||||
function toggle(index: number) {
|
|
||||||
openStates[index] = !openStates[index];
|
|
||||||
}
|
|
||||||
|
|
||||||
toggle(0); // Open the first entry by default
|
|
||||||
</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 openStates[i]}
|
|
||||||
<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>
|
|
||||||
<button
|
|
||||||
class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition"
|
|
||||||
on:click={() => toggle(i)}
|
|
||||||
aria-expanded={openStates[i]}
|
|
||||||
>
|
|
||||||
<h3 class="text-2lg font-semibold text-red-400 mt-1">{entry.title}</h3>
|
|
||||||
</button>
|
|
||||||
{#if openStates[i]}
|
|
||||||
<p class="mt-2 whitespace-pre-line transition-all duration-300">{@html entry.description}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
21
src/lib/components/timeline/Timeline.svelte
Normal file
21
src/lib/components/timeline/Timeline.svelte
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { setContext } from 'svelte';
|
||||||
|
import type { TimelinePosition, TimelineConfig } from '$lib/types';
|
||||||
|
export let position: TimelinePosition = 'right';
|
||||||
|
export let style: string | null = null;
|
||||||
|
|
||||||
|
setContext<TimelineConfig>('TimelineConfig', { rootPosition: position });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ul class="timeline" {style}>
|
||||||
|
<slot />
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.timeline {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 6px 16px;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
</style>
|
13
src/lib/components/timeline/TimelineConnector.svelte
Normal file
13
src/lib/components/timeline/TimelineConnector.svelte
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let style: string = "";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<span class="timeline-connector" {style}></span>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.timeline-connector {
|
||||||
|
width: 2px;
|
||||||
|
background-color: #bdbdbd;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
</style>
|
30
src/lib/components/timeline/TimelineContent.svelte
Normal file
30
src/lib/components/timeline/TimelineContent.svelte
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { getContext } from 'svelte';
|
||||||
|
import type { TimelineConfig, TimelinePosition } from '$lib/types';
|
||||||
|
export let style: string | null = null;
|
||||||
|
|
||||||
|
const config = getContext<TimelineConfig>('TimelineConfig');
|
||||||
|
const parentPosition = getContext<TimelinePosition>('ParentPosition');
|
||||||
|
|
||||||
|
const itemPosition = parentPosition ? parentPosition : config.rootPosition;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class={`timeline-content ${itemPosition}`} {style}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.timeline-content {
|
||||||
|
margin: 0;
|
||||||
|
flex: 1;
|
||||||
|
margin: 6px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
</style>
|
19
src/lib/components/timeline/TimelineDot.svelte
Normal file
19
src/lib/components/timeline/TimelineDot.svelte
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let style: string | null = null;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<span class="timeline-dot" {style}>
|
||||||
|
<slot />
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.timeline-dot {
|
||||||
|
background-color: #121212;
|
||||||
|
border: solid 2px #121212;
|
||||||
|
display: flex;
|
||||||
|
align-self: baseline;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 11.5px 0;
|
||||||
|
}
|
||||||
|
</style>
|
58
src/lib/components/timeline/TimelineItem.svelte
Normal file
58
src/lib/components/timeline/TimelineItem.svelte
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { getContext, setContext } from 'svelte';
|
||||||
|
import type { TimelinePosition, ParentPosition, TimelineConfig } from '$lib/types';
|
||||||
|
|
||||||
|
export let position: ParentPosition | null = null;
|
||||||
|
export let style: string = "";
|
||||||
|
|
||||||
|
const config = getContext<TimelineConfig>('TimelineConfig');
|
||||||
|
const itemPosition = position ? position : config.rootPosition;
|
||||||
|
setContext<TimelinePosition>('ParentPosition', itemPosition);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<li class={`timeline-item ${itemPosition}`} {style}>
|
||||||
|
{#if !$$slots['opposite-content']}
|
||||||
|
<div class="opposite-block"></div>
|
||||||
|
{:else}
|
||||||
|
<slot name="opposite-content" />
|
||||||
|
{/if}
|
||||||
|
<slot />
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:global(.alternate:nth-of-type(even) > .timeline-content) {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.alternate:nth-of-type(odd) > .timeline-opposite-content) {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opposite-block {
|
||||||
|
flex: 1;
|
||||||
|
margin: 6px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
min-height: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alternate:nth-of-type(even) {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alternate:nth-of-type(odd) {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
</style>
|
31
src/lib/components/timeline/TimelineOppositeContent.svelte
Normal file
31
src/lib/components/timeline/TimelineOppositeContent.svelte
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { getContext } from 'svelte';
|
||||||
|
import type { TimelineConfig, TimelinePosition } from '$lib/types';
|
||||||
|
export let style: string | null = null;
|
||||||
|
|
||||||
|
const config = getContext<TimelineConfig>('TimelineConfig');
|
||||||
|
const parentPosition = getContext<TimelinePosition>('ParentPosition');
|
||||||
|
|
||||||
|
const itemPosition = parentPosition ? parentPosition : config.rootPosition;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class={`timeline-opposite-content ${itemPosition}`} {style}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.timeline-opposite-content {
|
||||||
|
margin: 0;
|
||||||
|
flex: 1;
|
||||||
|
margin-right: auto;
|
||||||
|
margin: 6px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
</style>
|
16
src/lib/components/timeline/TimelineSeparator.svelte
Normal file
16
src/lib/components/timeline/TimelineSeparator.svelte
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let style: string | null = null;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="timeline-separator" {style}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.timeline-separator {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
@ -1,9 +1,41 @@
|
|||||||
// place files you want to import through the `$lib` alias in this folder.
|
// place files you want to import through the `$lib` alias in this folder.
|
||||||
import Card from '$lib/components/Cards/Card.svelte';
|
import Timeline from '$lib/components/timeline/Timeline.svelte';
|
||||||
import FlexGallery from './components/FlexGallery.svelte';
|
import TimelineItem from '$lib/components/timeline/TimelineItem.svelte';
|
||||||
import Loading from './components/Loading.svelte';
|
import TimelineSeparator from '$lib/components/timeline/TimelineSeparator.svelte';
|
||||||
import Section from './components/Section.svelte';
|
import TimelineDot from '$lib/components/timeline/TimelineDot.svelte';
|
||||||
import SkillProgress from './components/SkillProgress.svelte';
|
import TimelineConnector from '$lib/components/timeline/TimelineConnector.svelte';
|
||||||
import Timeline from './components/Timeline.svelte';
|
import TimelineContent from '$lib/components/timeline/TimelineContent.svelte';
|
||||||
|
import TimelineOppositeContent from '$lib/components/timeline/TimelineOppositeContent.svelte';
|
||||||
|
|
||||||
export { Card, FlexGallery, Loading, Section, SkillProgress, Timeline };
|
import Toasts from '$lib/components/Toasts/Toasts.svelte';
|
||||||
|
import Toast from '$lib/components/Toasts/Toast.svelte';
|
||||||
|
import CloseIcon from '$lib/components/Toasts/CloseIcon.svelte';
|
||||||
|
import InfoIcon from '$lib/components/Toasts/InfoIcon.svelte';
|
||||||
|
import SuccessIcon from '$lib/components/Toasts/SuccessIcon.svelte';
|
||||||
|
import ErrorIcon from '$lib/components/Toasts/ErrorIcon.svelte';
|
||||||
|
|
||||||
|
import Card from '$lib/components/Cards/Card.svelte';
|
||||||
|
import SlidingCard from '$lib/components/Cards/SlidingCard.svelte';
|
||||||
|
import Modal from '$lib/components/Modal.svelte';
|
||||||
|
|
||||||
|
|
||||||
|
export {
|
||||||
|
Timeline,
|
||||||
|
TimelineItem,
|
||||||
|
TimelineSeparator,
|
||||||
|
TimelineDot,
|
||||||
|
TimelineConnector,
|
||||||
|
TimelineContent,
|
||||||
|
TimelineOppositeContent,
|
||||||
|
|
||||||
|
Toasts,
|
||||||
|
Toast,
|
||||||
|
CloseIcon,
|
||||||
|
InfoIcon,
|
||||||
|
SuccessIcon,
|
||||||
|
ErrorIcon,
|
||||||
|
|
||||||
|
Card,
|
||||||
|
SlidingCard,
|
||||||
|
Modal
|
||||||
|
};
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
import Card from '$lib/components/Cards/Card.svelte';
|
import Card from '$lib/components/Cards/Card.svelte';
|
||||||
import FlexGallery from "$lib/components/FlexGallery.svelte";
|
import FlexGallery from "$lib/components/FlexGallery.svelte";
|
||||||
import SkillProgress from "$lib/components/SkillProgress.svelte";
|
import SkillProgress from "$lib/components/SkillProgress.svelte";
|
||||||
import Timeline from '$lib/components/Timeline.svelte';
|
import Timeline from './timeline.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#await getJson('/json/me.json')}
|
{#await getJson('/json/me.json')}
|
||||||
@ -24,7 +24,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Main Card -->
|
<!-- Main Card -->
|
||||||
<Section label="[Experience]">
|
<Section label="Experience">
|
||||||
<Card headerLeft={info.name} headerRight={info.job_title} footer={info.location}>
|
<Card headerLeft={info.name} headerRight={info.job_title} footer={info.location}>
|
||||||
<div class="flex flex-row items-center gap-5">
|
<div class="flex flex-row items-center gap-5">
|
||||||
<img
|
<img
|
||||||
@ -38,7 +38,7 @@
|
|||||||
</Section>
|
</Section>
|
||||||
|
|
||||||
<!-- SKills -->
|
<!-- SKills -->
|
||||||
<Section label="[Skills]">
|
<Section label="Skills">
|
||||||
<FlexGallery>
|
<FlexGallery>
|
||||||
{#each info.skills as skill}
|
{#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">
|
<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">
|
||||||
@ -50,8 +50,8 @@
|
|||||||
</FlexGallery>
|
</FlexGallery>
|
||||||
</Section>
|
</Section>
|
||||||
|
|
||||||
<Section label="[Experience]">
|
<Section label="Experience">
|
||||||
<Timeline timelineData={info.timeline} />
|
<Timeline timelineData={info.experience} />
|
||||||
</Section>
|
</Section>
|
||||||
{:catch}
|
{:catch}
|
||||||
<div style="display: none;">
|
<div style="display: none;">
|
||||||
|
@ -1,95 +1,14 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { toasts } from 'svelte-toasts';
|
import { toasts } from 'svelte-toasts';
|
||||||
import Card from '$lib/components/Cards/Card.svelte';
|
|
||||||
|
|
||||||
import { page } from '$app/state';
|
|
||||||
const sent = page.url.searchParams.get('sent');
|
|
||||||
|
|
||||||
if (sent == 'true') {
|
|
||||||
toasts.add({
|
|
||||||
title: 'Message sent!',
|
|
||||||
description: 'Thank you for contacting me.',
|
|
||||||
type: 'success',
|
|
||||||
duration: 4000,
|
|
||||||
placement: 'bottom-center'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sent == 'false') {
|
|
||||||
toasts.add({
|
|
||||||
title: 'Message not sent!',
|
|
||||||
description: 'Please try again later.',
|
|
||||||
type: 'error',
|
|
||||||
duration: 4000,
|
|
||||||
placement: 'bottom-center'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Card headerLeft="Contact Me">
|
<div style="display: none;">
|
||||||
<!-- Contact Form -->
|
{toasts.add({
|
||||||
<form class="w-full max-w-3xl mx-auto flex flex-col gap-4 text-lg" action="https://api.staticforms.xyz/submit" method="post">
|
title: 'Warning',
|
||||||
<div class="hidden">
|
description: 'This page is under construction',
|
||||||
<input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
|
duration: 0,
|
||||||
<input type="hidden" name="replyTo" value="@">
|
type: 'warning',
|
||||||
<input type="text" name="honeypot" style="display: none;">
|
placement: 'center-center',
|
||||||
<input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
|
showProgress: true
|
||||||
|
})}
|
||||||
</div>
|
</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"
|
|
||||||
/>
|
|
||||||
</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>
|
|
||||||
<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>
|
|
||||||
|
@ -1,46 +1,18 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { loadRepos, repos } from '$lib/stores'; import { onMount } from 'svelte';
|
import { loadRepos } from '$lib/stores';
|
||||||
import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
|
import { onMount } from 'svelte';
|
||||||
|
import { toasts } from 'svelte-toasts';
|
||||||
import FlexGallery from '$lib/components/FlexGallery.svelte';
|
|
||||||
import Card from '$lib/components/Cards/Card.svelte';
|
|
||||||
|
|
||||||
let repoImages: Record<string, string | null> = {};
|
|
||||||
|
|
||||||
// When repos load, check for images
|
|
||||||
$: if ($repos.length) {
|
|
||||||
(async () => {
|
|
||||||
for (const repo of $repos) {
|
|
||||||
if (repoImages[repo.name] === undefined) {
|
|
||||||
const url = repo.html_url + IMAGE_URL_SUFFIX;
|
|
||||||
repoImages[repo.name] = (await checkImage(repo)) ? url : null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(loadRepos);
|
onMount(loadRepos);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<FlexGallery>
|
<div style="display: none;">
|
||||||
{#each $repos as repo}
|
{toasts.add({
|
||||||
<Card
|
title: 'Warning',
|
||||||
headerLeft={repo.name}
|
description: 'This page is under construction',
|
||||||
headerRight={repo.language}
|
duration: 0,
|
||||||
footer={timeSince(repo.updated_at)}
|
type: 'warning',
|
||||||
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"
|
placement: 'center-center',
|
||||||
>
|
showProgress: true
|
||||||
<div class="relative z-0">
|
})}
|
||||||
{repo.description}
|
|
||||||
</div>
|
</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}
|
|
||||||
</Card>
|
|
||||||
{/each}
|
|
||||||
</FlexGallery>
|
|
||||||
|
67
src/timeline.svelte
Normal file
67
src/timeline.svelte
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let timelineData: any;
|
||||||
|
|
||||||
|
import Timeline from '$lib/components/timeline/Timeline.svelte';
|
||||||
|
import TimelineItem from '$lib/components/timeline/TimelineItem.svelte';
|
||||||
|
import TimelineSeparator from '$lib/components/timeline/TimelineSeparator.svelte';
|
||||||
|
import TimelineDot from '$lib/components/timeline/TimelineDot.svelte';
|
||||||
|
import TimelineConnector from '$lib/components/timeline/TimelineConnector.svelte';
|
||||||
|
import TimelineContent from '$lib/components/timeline/TimelineContent.svelte';
|
||||||
|
import TimelineOppositeContent from '$lib/components/timeline/TimelineOppositeContent.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Timeline
|
||||||
|
position="alternate"
|
||||||
|
style={`
|
||||||
|
border-radius: 3%;
|
||||||
|
padding: 1rem;
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{#each timelineData as item}
|
||||||
|
<TimelineItem>
|
||||||
|
<TimelineOppositeContent slot="opposite-content">
|
||||||
|
<p class="oposite-content-title">{item.duration}</p>
|
||||||
|
</TimelineOppositeContent>
|
||||||
|
|
||||||
|
<TimelineSeparator>
|
||||||
|
{#if item.duration.includes('Present') || !item.duration.includes('-')}
|
||||||
|
<div class="elementToFadeInAndOut">
|
||||||
|
<TimelineDot
|
||||||
|
style={`background-color: var(--link); border-color: var(--accent);`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<TimelineDot
|
||||||
|
style={`background-color: var(--link); border-color: var(--accent);`}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
<TimelineConnector />
|
||||||
|
</TimelineSeparator>
|
||||||
|
<TimelineContent>
|
||||||
|
<h3 class="content-title">{item.title}</h3>
|
||||||
|
<p class="content-description">{@html item.description}</p>
|
||||||
|
</TimelineContent>
|
||||||
|
</TimelineItem>
|
||||||
|
{/each}
|
||||||
|
</Timeline>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.oposite-content-title {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
.content-title {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-description {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 1rem;
|
||||||
|
color: var(--fg);
|
||||||
|
font-weight: lighter;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
</style>
|
18
static/themes/dark.css
Normal file
18
static/themes/dark.css
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #282c34;
|
||||||
|
--bg-secondary: #3e434b;
|
||||||
|
--accent: #59616d;
|
||||||
|
|
||||||
|
--header: #E06C75;
|
||||||
|
--fg: #9eaac0;
|
||||||
|
|
||||||
|
--input: #2b3136;
|
||||||
|
|
||||||
|
--link: #98C379;
|
||||||
|
--glow: #C678DD;
|
||||||
|
--hover: #56B6C2;
|
||||||
|
|
||||||
|
--green: #98C379;
|
||||||
|
--red: #E06C75;
|
||||||
|
--blue: #79aec3;
|
||||||
|
}
|
18
static/themes/light.css
Normal file
18
static/themes/light.css
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #f5f5f5; /* Slightly deeper light grey for subtle contrast */
|
||||||
|
--bg-secondary: #d9dddf; /* More defined soft grey */
|
||||||
|
--accent: #8ea29b; /* Stronger muted sage green */
|
||||||
|
|
||||||
|
--header: #4a5a56; /* Darker desaturated green-grey for better contrast */
|
||||||
|
--fg: #2f3739; /* Richer dark grey for improved readability */
|
||||||
|
|
||||||
|
--input: #e4e7e8; /* Slightly deeper soft grey input background */
|
||||||
|
|
||||||
|
--link: #5f8480; /* Darker muted teal for contrast */
|
||||||
|
--glow: #b0bdb9; /* More noticeable but soft glow */
|
||||||
|
--hover: #85a29c; /* Stronger pastel hover effect */
|
||||||
|
|
||||||
|
--green: #6fa984; /* More vibrant pastel green */
|
||||||
|
--red: #e8858f; /* Slightly deeper pastel red for contrast */
|
||||||
|
--blue: #6fa9a4; /* Same as accent */
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user