Nous components

src/lib/about.svelte

@@ -5,10 +5,13 @@
   export let headerImage: string | null = null;
   export let imageDesc: string = '';
 </script>
-<div class="mx-auto my-5 w-[60%]">
+<div class="my-5">
   {#if headerImage}
     <Image {headerImage} {imageDesc}/>
   {/if}
-  <p class='text-5xl'>About {who}</p>
-  <slot />
+  <h1 class='text-5xl'>About {who}</h1>
+  <div class="grid grid-cols-1 gap-y-3 my-3">
+    <hr>
+    <slot />
+  </div>
 </div>

src/lib/code.svelte

@@ -0,0 +1,4 @@
+<code class="bg-neutral-200 dark:bg-neutral-950 px-2 py-1 rounded">
+	<slot/>
+</code>
+

src/lib/link.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { type LinkHref, type LinkReferrer, type LinkTarget, type LinkText, type LinkUnderline } from "$lib/types/link"
+    import Code from "./code.svelte";
+	
+	export let link: LinkHref;
+	export let text: LinkText;
+	export let target: LinkTarget = '_self';
+	export let referrer: LinkReferrer = 'no-referrer';
+	export let underline: LinkUnderline = undefined;
+	export let asCode: boolean = false;
+</script>
+<a href={link} target="{target}" referrerpolicy="{referrer}" class:hover:underline={underline === 'hover'} class:underline={underline === true} >
+	{#if asCode}
+		<Code>{text}</Code>
+	{:else}
+		{text}
+	{/if}
+</a>

src/lib/sqmenu.svelte

@@ -2,10 +2,10 @@
     export let menudata: {menuName: string, menuLink: string}[] = [];
     $: colNum = (Math.floor(menudata.length / 2) < 3) ? Math.floor(menudata.length / 2) : 3;
 </script>
-<div class="w-[60%] grid gap-y-6 gap-x-6 grid-cols-{colNum} text-center mx-auto py-5 sm:grid-cols-1 justify-content-center">
+<div class="grid gap-y-6 gap-x-6 grid-cols-{colNum} text-center sm:grid-cols-1 justify-content-center">
 {#each menudata as menu}
     <a href="{menu.menuLink}" target="_self">
-        <div class="flex content-center justify-center border rounded-md border-white border-solid px-6 py-8 dark:hover:bg-zinc-900 dark:bg-transparent bg-transparent min-w-[50%]">
+        <div class="flex content-center justify-center border rounded-md border-black dark:border-white border-solid px-6 py-8 dark:hover:bg-zinc-900 dark:bg-transparent bg-transparent min-w-[50%]">
             <h2 class='text-xl'>{menu.menuName}</h2>
         </div>
     </a>

src/lib/title.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+	export let title: string;
+</script>
+<h1 class="text-5xl mb-5 font-semibold">{title}</h1>

src/lib/types/link.ts

@@ -0,0 +1,5 @@
+export type LinkUnderline = boolean | 'hover' | undefined;
+export type LinkTarget = '_blank' | '_self' | undefined;
+export type LinkReferrer = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | undefined;
+export type LinkText = string;
+export type LinkHref = string;

src/lib/ubication.svelte

@@ -0,0 +1,4 @@
+<svelte:head>
+	<script src="https://kit.fontawesome.com/c20c99c16a.js" crossorigin="anonymous"></script>
+</svelte:head>
+<span><slot/> <span class="fa-solid fa-location-dot"></span></span>