Made components more re-usable. Added section component
This commit is contained in:
parent
24a7ebf02a
commit
538d9593c2
@ -1,28 +1,26 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { createEventDispatcher } from 'svelte';
|
export let headerLeft: string = "";
|
||||||
|
export let headerRight: string = "";
|
||||||
const dispatch = createEventDispatcher();
|
export let headerColour: string = "text-red-500";
|
||||||
|
export let footer: string = "";
|
||||||
function onClick() {
|
|
||||||
dispatch('click');
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
<div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
|
||||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
<div class="{headerColour} flex flex-row justify-between items-center mb-4">
|
||||||
<div
|
<p class="text-2xl md:text-3xl font-bold truncate">{headerLeft}</p>
|
||||||
class="flex flex-col justify-between p-6 bg-secondary rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl hover:scale-[1.02] snap-start"
|
|
||||||
on:click={onClick}
|
{#if headerRight}
|
||||||
>
|
<p class="max-md:hidden text-xl md:text-2xl truncate">{@html headerRight}</p>
|
||||||
<div class="card-header flex items-center justify-between w-full mb-0">
|
{/if}
|
||||||
<slot name="header"></slot>
|
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr class="mb-4 border-1" />
|
||||||
<div class="card-content flex items-center justify-center w-full max-w-full">
|
<div class="flex-1 flex flex-col justify-center p-5">
|
||||||
<slot name="content"></slot>
|
<slot />
|
||||||
</div>
|
|
||||||
<hr class="not-required" />
|
|
||||||
<div class="card-footer flex gap-4 w-full max-w-full justify-between mb-4">
|
|
||||||
<slot name="footer"></slot>
|
|
||||||
</div>
|
</div>
|
||||||
|
{#if footer}
|
||||||
|
<hr class="my-4 border-1" />
|
||||||
|
<div class="mt-2 text-base opacity-90">
|
||||||
|
{@html footer}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
26
src/lib/components/Section.svelte
Normal file
26
src/lib/components/Section.svelte
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let label: string = "";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="relative flex flex-row w-full min-h-[300px] mt-5 mb-5">
|
||||||
|
<!-- 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,38 +1,7 @@
|
|||||||
import { ToastType, type Toast } from "$lib/toast";
|
import { writable } from "svelte/store";
|
||||||
import { writable, type Writable } from "svelte/store";
|
|
||||||
import type { GitRepo } from "./types";
|
import type { GitRepo } from "./types";
|
||||||
import { fetchRepos } from "./api/git";
|
import { fetchRepos } from "./api/git";
|
||||||
|
|
||||||
|
|
||||||
////////////////////////////////////////
|
|
||||||
// Toast Stores
|
|
||||||
////////////////////////////////////////
|
|
||||||
export const toasts: Writable<Toast[]> = writable([]);
|
|
||||||
|
|
||||||
export const addToast = (toast: Toast) => {
|
|
||||||
// Create a unique ID so we can easily find/remove it
|
|
||||||
// if it is dismissible/has a timeout.
|
|
||||||
toast.id = Math.floor(Math.random() * 10000);
|
|
||||||
|
|
||||||
// Setup some sensible defaults for a toast.
|
|
||||||
const defaults = {
|
|
||||||
id: toast.id,
|
|
||||||
type: ToastType.Info,
|
|
||||||
dismissible: true,
|
|
||||||
timeout: 3000,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Push the toast to the top of the list of toasts
|
|
||||||
toasts.update((all) => [{ ...defaults, ...toast }, ...all]);
|
|
||||||
|
|
||||||
// If toast is dismissible, dismiss it after "timeout" amount of time.
|
|
||||||
if (toast.timeout) setTimeout(() => dismissToast(toast.id), toast.timeout);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const dismissToast = (id: number) => {
|
|
||||||
toasts.update((all) => all.filter((t) => t.id !== id));
|
|
||||||
};
|
|
||||||
|
|
||||||
////////////////////////////////////////
|
////////////////////////////////////////
|
||||||
// Git Repo Stores
|
// Git Repo Stores
|
||||||
////////////////////////////////////////
|
////////////////////////////////////////
|
||||||
|
@ -1,26 +0,0 @@
|
|||||||
/**
|
|
||||||
* @enum Used to refer to the type of toast being displayed
|
|
||||||
*/
|
|
||||||
export enum ToastType {
|
|
||||||
Info = "info",
|
|
||||||
Success = "success",
|
|
||||||
Error = "error"
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @class Toast Notification
|
|
||||||
*/
|
|
||||||
export class Toast {
|
|
||||||
constructor(text: String, type: ToastType, dismissable: boolean, timeout: number ) {
|
|
||||||
this.text = text;
|
|
||||||
this.type = type;
|
|
||||||
this.dismissable = dismissable;
|
|
||||||
this.timeout = timeout;
|
|
||||||
}
|
|
||||||
|
|
||||||
id: number = 0;
|
|
||||||
text: String;
|
|
||||||
type: ToastType;
|
|
||||||
dismissable: Boolean;
|
|
||||||
timeout: number;
|
|
||||||
}
|
|
@ -3,7 +3,7 @@ export type TimelinePosition = 'right' | 'left' | 'alternate';
|
|||||||
export type ParentPosition = 'right' | 'left';
|
export type ParentPosition = 'right' | 'left';
|
||||||
|
|
||||||
export type TimelineConfig = {
|
export type TimelineConfig = {
|
||||||
rootPosition: TimelinePosition;
|
rootPosition: TimelinePosition;
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface GitRepo {
|
export interface GitRepo {
|
||||||
|
@ -3,6 +3,8 @@
|
|||||||
import { toasts } from 'svelte-toasts';
|
import { toasts } from 'svelte-toasts';
|
||||||
|
|
||||||
import Loading from '$lib/components/Loading.svelte';
|
import Loading from '$lib/components/Loading.svelte';
|
||||||
|
import Section from '$lib/components/Section.svelte';
|
||||||
|
import Card from '$lib/components/Cards/Card.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#await getJson('/json/me.json')}
|
{#await getJson('/json/me.json')}
|
||||||
@ -18,23 +20,19 @@
|
|||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-slate-100/10 dark:bg-slate-100/10 p-10 m-5 rounded-2xl shadow-2xl">
|
<!-- Main Card -->
|
||||||
<div class="flex flex-row justify-between text-red-500 p-4">
|
<Section label="Experience">
|
||||||
<p class="text-3xl md:text-4xl font-bold">
|
<Card headerLeft={info.name} headerRight={info.job_title} footer={info.location}>
|
||||||
{info.name}
|
<div class="flex flex-row items-center gap-5">
|
||||||
</p>
|
<img
|
||||||
<p class="max-md:hidden text-2xl md:text-3xl">{info.job_title}</p>
|
src={info.profile_photo}
|
||||||
</div>
|
alt="Avatar"
|
||||||
<hr class="max-md:hidden border-3 m-5" />
|
class="max-md:hidden rounded-full w-32 h-32 md:w-48 md:h-48 mt-2 mb-2 p-2 border-3"
|
||||||
<div class="flex flex-row items-center gap-5 m-2">
|
/>
|
||||||
<img
|
<p>{@html info.about}</p>
|
||||||
src={info.profile_photo}
|
</div>
|
||||||
alt="Avatar"
|
</Card>
|
||||||
class="max-md:hidden rounded-full w-64 h-64 mt-5 mb-5 p-3 border-5"
|
</Section>
|
||||||
/>
|
|
||||||
<p>{@html info.about}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{:catch}
|
{:catch}
|
||||||
<div style="display: none;">
|
<div style="display: none;">
|
||||||
{toasts.add({
|
{toasts.add({
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "Luke Else",
|
"name": "Luke Else",
|
||||||
"job_title": "Software Engineer",
|
"job_title": "Software Engineer",
|
||||||
|
"location": "Crawley, Sussex <br /> UK",
|
||||||
"profile_photo": "/profile.jpg",
|
"profile_photo": "/profile.jpg",
|
||||||
"skills": [
|
"skills": [
|
||||||
{
|
{
|
||||||
|
Loading…
x
Reference in New Issue
Block a user