Migration to Svelte 5 - Post-auto-migrate
This commit is contained in:
parent
2017ca50f1
commit
941eacfb3f
@ -21,7 +21,7 @@
|
||||
"daisyui": "^4.12.13",
|
||||
"eslint": "^9.12.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-svelte": "^2.44.1",
|
||||
"eslint-plugin-svelte": "^2.45.1",
|
||||
"globals": "^15.11.0",
|
||||
"postcss": "^8.4.47",
|
||||
"prettier": "^3.3.3",
|
||||
|
@ -1,21 +1,21 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
|
||||
let w: number = 0; // Width of the screen, using the svelte binding
|
||||
let w: number = $state(0); // Width of the screen, using the svelte binding
|
||||
|
||||
const GRADUATION = new Date(1753797600000).valueOf();
|
||||
const FORMATTED = new Date(1753797600000).toDateString();
|
||||
let interval: ReturnType<typeof setInterval>;
|
||||
|
||||
let timeTo = Math.abs(GRADUATION - Date.now().valueOf()) / 1000;
|
||||
let timeTo = $state(Math.abs(GRADUATION - Date.now().valueOf()) / 1000);
|
||||
|
||||
// Calculate time remaining from milliseconds to graduation (30 Jul, 2025)
|
||||
$: years = Math.floor(timeTo / 31556926);
|
||||
$: months = Math.floor(timeTo / 2629743) % 12;
|
||||
$: days = Math.floor(timeTo / 86400) % 30;
|
||||
$: hours = Math.floor(timeTo / 3600) % 24;
|
||||
$: minutes = Math.floor(timeTo / 60) % 60;
|
||||
$: seconds = Math.floor(timeTo % 60);
|
||||
let years = $derived(Math.floor(timeTo / 31556926));
|
||||
let months = $derived(Math.floor(timeTo / 2629743) % 12);
|
||||
let days = $derived(Math.floor(timeTo / 86400) % 30);
|
||||
let hours = $derived(Math.floor(timeTo / 3600) % 24);
|
||||
let minutes = $derived(Math.floor(timeTo / 60) % 60);
|
||||
let seconds = $derived(Math.floor(timeTo % 60));
|
||||
|
||||
// Update the timeTo variable every 1000 milliseconds
|
||||
// Don't go past 0 though! Stop the updates afterwards
|
||||
|
@ -1,9 +1,13 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
export let src: string;
|
||||
export let altText: string = "";
|
||||
interface Props {
|
||||
src: string;
|
||||
altText?: string;
|
||||
}
|
||||
|
||||
let loaded = false;
|
||||
let { src, altText = "" }: Props = $props();
|
||||
|
||||
let loaded = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
const img = new Image();
|
||||
@ -18,5 +22,5 @@
|
||||
{#if loaded}
|
||||
<img {src} class="w-48 h-64 shadow-2xl max-w-sm rounded-2xl" alt={altText} />
|
||||
{:else}
|
||||
<div class="skeleton w-48 h-64 shadow-2xl max-w-sm rounded-2xl" />
|
||||
<div class="skeleton w-48 h-64 shadow-2xl max-w-sm rounded-2xl"></div>
|
||||
{/if}
|
||||
|
@ -2,8 +2,12 @@
|
||||
import Star from "lucide-svelte/icons/star";
|
||||
import HalfStar from "lucide-svelte/icons/star-half";
|
||||
|
||||
export let count: number = 5;
|
||||
export let half: boolean = false;
|
||||
interface Props {
|
||||
count?: number;
|
||||
half?: boolean;
|
||||
}
|
||||
|
||||
let { count = 5, half = false }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="flex">
|
||||
|
@ -1,6 +1,11 @@
|
||||
<script lang="ts">
|
||||
export let middle: boolean = false;
|
||||
export let classes: string = ""; // Further classes to pass through
|
||||
interface Props {
|
||||
middle?: boolean;
|
||||
classes?: string;
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { middle = false, classes = "", children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<!-- If the text is between some other text, adjust padding to not seperate it out too much -->
|
||||
@ -9,11 +14,11 @@
|
||||
<div>
|
||||
{#if middle}
|
||||
<p class="px-5 mx-auto text-xl max-w-3xl {classes}">
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
</p>
|
||||
{:else}
|
||||
<p class="p-5 mx-auto text-xl max-w-3xl {classes}">
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
@ -12,7 +12,7 @@
|
||||
<time class="font-mono" datetime="2020-3">Mar 2020 - Jul 2020</time>
|
||||
<div class="text-xl">Villanova College</div>
|
||||
<div class="text-sm">Information Technology Officer</div>
|
||||
<div class="divider my-1" />
|
||||
<div class="divider my-1"></div>
|
||||
Help Desk Role:
|
||||
<ul class="list-disc list-inside mt-2">
|
||||
<li>Performed repairs and troubleshooting for both students and teachers.</li>
|
||||
@ -29,7 +29,7 @@
|
||||
configuration throughout school.
|
||||
</li>
|
||||
</ul>
|
||||
<div class="divider my-1" />
|
||||
<div class="divider my-1"></div>
|
||||
Key Experiences and Takeaways:
|
||||
<ul class="list-disc list-inside mt-2">
|
||||
<li>Became more comfortable and confident in an end-user facing role.</li>
|
||||
@ -56,7 +56,7 @@
|
||||
<div class="text-xl">St Pauls School</div>
|
||||
<div class="text-sm pb-2">Information Technology Officer</div>
|
||||
</div>
|
||||
<div class="divider my-1" />
|
||||
<div class="divider my-1"></div>
|
||||
Help Desk Role:
|
||||
<ul class="list-disc list-inside mt-2">
|
||||
<li>
|
||||
@ -71,7 +71,7 @@
|
||||
Gained more experience in Azure ecosystem, SCCM deployment, and networking.
|
||||
</li>
|
||||
</ul>
|
||||
<div class="divider my-1" />
|
||||
<div class="divider my-1"></div>
|
||||
Key Experiences and Takeaways:
|
||||
<ul class="list-disc list-inside mt-2">
|
||||
<li>Working in a larger group to cover more ground</li>
|
||||
@ -96,7 +96,7 @@
|
||||
<time class="font-mono" datetime="2022-10">Oct 2022 - Feb 2023</time>
|
||||
<div class="text-xl">St Pauls School</div>
|
||||
<div class="text-sm pb-2">System Administrator</div>
|
||||
<div class="divider my-1" />
|
||||
<div class="divider my-1"></div>
|
||||
System Administrator Role:
|
||||
<ul class="list-disc list-inside mt-2">
|
||||
<li>
|
||||
@ -112,7 +112,7 @@
|
||||
importing new users into TASS and AD.
|
||||
</li>
|
||||
</ul>
|
||||
<div class="divider my-1" />
|
||||
<div class="divider my-1"></div>
|
||||
Key Experiences and Takeaways:
|
||||
<ul class="list-disc list-inside mt-2">
|
||||
<li>There is always something to be improved upon if you look hard enough.</li>
|
||||
|
@ -2,10 +2,15 @@
|
||||
import "../app.css";
|
||||
import Navbar from "$lib/components/navbar/navbar.svelte";
|
||||
import Footer from "$lib/components/footer.svelte";
|
||||
interface Props {
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<Navbar />
|
||||
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
|
||||
<Footer />
|
||||
|
Loading…
Reference in New Issue
Block a user