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

CHORE: Starting to get to work with changing some of the old formatting over to tailwind config

Browse Source
This commit is contained in:
luke-else
2025-05-21 22:45:18 +01:00
parent fc642a4ecd
commit 24a7ebf02a
28 changed files with 118 additions and 734 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main.svelte
+35 -92
View File
@@ -1,105 +1,48 @@
<script lang="ts">
import { getJson } from "$lib/data";
import { Toast, ToastType } from "$lib/toast";
import { addToast } from "$lib/stores";
import { getJson } from '$lib/data';
import { toasts } from 'svelte-toasts';
import Skills from './skills.svelte';
import Timeline from "./timeline.svelte";
import Loading from "$lib/components/Loading.svelte";
import Loading from '$lib/components/Loading.svelte';
</script>
{#await getJson('/json/me.json')}
<Loading />
{:then info}
<div class="bg-secondary rounded-xl p-8 pb-12 shadow-lg mb-16">
<div class="flex items-center justify-between mb-0">
<h1 class="text-3xl font-bold">{info.name}</h1>
<h3 class="not-required text-xl font-semibold">{info.job_title}</h3>
<div style="display: none;">
{toasts.add({
title: 'Welcome',
duration: 5000,
type: 'success',
placement: 'bottom-center',
showProgress: true
})}
</div>
<div class="bg-slate-100/10 dark:bg-slate-100/10 p-10 m-5 rounded-2xl shadow-2xl">
<div class="flex flex-row justify-between text-red-500 p-4">
<p class="text-3xl md:text-4xl font-bold">
{info.name}
</p>
<p class="max-md:hidden text-2xl md:text-3xl">{info.job_title}</p>
</div>
<hr class="my-4 border-accent" />
<div class="flex items-center gap-8 flex-wrap md:flex-nowrap">
<img class="rounded-full h-32 w-32 p-4 border-4 border-accent not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
<p class="about text-lg md:text-xl px-4 md:px-12 flex-1">{@html info.about}</p>
<hr class="max-md:hidden border-3 m-5" />
<div class="flex flex-row items-center gap-5 m-2">
<img
src={info.profile_photo}
alt="Avatar"
class="max-md:hidden rounded-full w-64 h-64 mt-5 mb-5 p-3 border-5"
/>
<p>{@html info.about}</p>
</div>
</div>
<div class="container mx-auto mb-12">
<h1 class="text-2xl font-bold">Skills</h1>
<hr class="my-2 border-accent" />
<Skills skills={info.skills}></Skills>
</div>
<div class="container mx-auto mb-12">
<h1 class="text-2xl font-bold">Experience</h1>
<hr class="my-2 border-accent" />
<Timeline timelineData={info.timeline}></Timeline>
</div>
<div class="hidden">{addToast(new Toast("Click on a skill to open a prompt", ToastType.Info, true, 8_000))}</div>
<div class="hidden">{addToast(new Toast("Welcome!", ToastType.Success, true, 7_000))}</div>
{:catch}
<div class="bg-secondary rounded-xl p-8 shadow-lg mb-8">
<div class="flex items-center justify-between mb-0">
<h1 class="text-3xl font-bold">Unable to load portfolio overview data</h1>
</div>
<div style="display: none;">
{toasts.add({
title: 'Error',
description: 'There was an error loading static site data',
duration: 0,
placement: 'bottom-center',
showProgress: true
})}
</div>
<div class="hidden">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
{/await}
<style>
.main-card {
background-color: var(--bg-secondary);
border-radius: 1em;
padding: .2em 2em 2em 2em;
box-shadow: .5em .5em .5em var(--glow);
margin-bottom: 4em;
}
.flex-container {
display: flex;
align-items: center;
}
.profile {
border-radius: 100%;
height: 8em;
width: 8em;
padding: 1em 1em 1em 1em;
border: .25em solid var(--accent);
}
.about {
padding: 0em 5% 0em 5%;
font-size: 125%;
}
@media (max-width: 800px) {
.flex-container {
align-items: center;
flex-direction: column;
padding: 0px;
}
.about {
font-size: 100%;
}
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0em;
}
.card-header h1 {
font-size: 2em;
}
.card-header h3 {
font-size: 1.5em;
}
</style>