feat: ajout d'un plan du site

bachrc · May 5, 2024 · c37f24e · c37f24e
1 parent d35ddae
commit c37f24e
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 11 deletions.
diff --git a/src/lib/i18n/locales/en.json b/src/lib/i18n/locales/en.json
@@ -27,6 +27,7 @@
   "name": "Name",
   "narration-non-lineaire": "Non-linear narration",
   "ops": "Ops",
+  "plan-du-site": "Site Map",
   "poo": "OOP",
   "procedes": "Process",
   "professionnel": "Professional",

diff --git a/src/lib/i18n/locales/fr.json b/src/lib/i18n/locales/fr.json
@@ -27,6 +27,7 @@
   "name": "Yohann Bacha",
   "narration-non-lineaire": "Narration non linéaire",
   "ops": "Ops",
+  "plan-du-site": "Plan du site",
   "poo": "POO",
   "procedes": "Procédés",
   "professionnel": "Professionnel",

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -18,26 +18,45 @@
     href={pngIcon} />
 </svelte:head>
 {#if !$isLoading}
+  <ul id="evitement">
+    <li>
+      <a
+        class="evitement"
+        href="#contenu">Aller au contenu</a>
+    </li>
+  </ul>
   <div class="flex flex-col mx-2 min-h-screen">
     <nav
       class="px-4 flex flex-row py-2 gap-2 sm:gap-4 h-12 no-print justify-end sm:container sm:mx-auto">
       <a href="/">{$t('home')}</a>
       <span>-</span>
-      <a href="/about">{$t('a-propos')}</a>
+      <a href="/a-propos">{$t('a-propos')}</a>
       <span>-</span>
       <a href="/cv">{$t('cv')}</a>
       <span>-</span>
       <a href="https://cyberendroit.net">{$t('blog')}</a>
       <Flag />
     </nav>
-    {@render children()}
-    <footer class="sm:container sm:mx-auto no-print">
+    <main
+      class="flex grow"
+      id="contenu">
+      {@render children()}
+    </main>
+    <footer class="sm:container sm:mx-auto no-print my-4 flex gap-4 flex-row">
       <span>Yohann Bacha, 2024</span>
+      <a href="/plan">{$t('plan-du-site')}</a>
     </footer>
   </div>
 {/if}
 
 <style lang="postcss">
+  a.evitement {
+    position: absolute;
+    left: -99999px;
+  }
+  a.evitement:focus {
+    position: static;
+  }
   :global(html) {
     background-color: theme(colors.indigo.200);
     font-family: 'Lato';

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -11,7 +11,7 @@
   <title>bachrc</title>
 </svelte:head>
 
-<main class="items-center flex flex-col grow justify-center">
+<div class="items-center flex flex-col grow justify-center">
   <picture>
     <source
       type="image/avif"
@@ -41,4 +41,4 @@
         alt="Linkedin Logo" />
     </a>
   </div>
-</main>
+</div>
diff --git a/src/routes/about/+page.svelte → src/routes/a-propos/+page.svelte b/src/routes/about/+page.svelte → src/routes/a-propos/+page.svelte
@@ -7,7 +7,7 @@
   <title>bachrc - {$t('a-propos')}</title>
 </svelte:head>
 
-<main
+<div
   class="container mx-auto leading-8 bg-indigo-100/50 rounded-xl text-lg p-4 flex flex-col gap-6 text-justify font-serif sm:w-2/3 my-8">
   <LocalisedContent>
     {#snippet frenchContent()}
@@ -115,4 +115,4 @@
       </p>
     {/snippet}
   </LocalisedContent>
-</main>
+</div>
diff --git a/src/routes/cv/+page.svelte b/src/routes/cv/+page.svelte
@@ -10,7 +10,7 @@
 <svelte:head>
   <title>bachrc - CV Yohann Bacha</title>
 </svelte:head>
-<main
+<div
   class="flex flex-col items-center gap-4 sm:text-sm sm:items-start sm:flex-row sm:gap-0 lg:container lg:mx-auto bg-indigo-100/50">
   <aside class="flex flex-col w-11/12 sm:w-1/4 p-4 text-justify">
     <div class="flex flex-col items-center mb-4 text-center">
@@ -141,7 +141,7 @@
     </div>
   </aside>
 
-  <main class="flex flex-col w-11/12 sm:w-3/4 p-4 self-center gap-4">
+  <div class="flex flex-col w-11/12 sm:w-3/4 p-4 self-center gap-4">
     <h1 class="text-xl">{$t('experiences')}</h1>
     <Experience
       titre="Senior Software Engineer"
@@ -339,5 +339,5 @@
         </p>
       {/snippet}
     </Experience>
-  </main>
-</main>
+  </div>
+</div>
diff --git a/src/routes/plan/+page.svelte b/src/routes/plan/+page.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { t } from 'svelte-i18n';
+</script>
+
+<div class="sm:container sm:mx-auto p-4 bg-indigo-100/50 rounded-xl">
+  <h1 class="text-2xl">{$t('plan-du-site')}</h1>
+  <ul class=" list-disc list-inside text-lg">
+    <li><a href="/">{$t('home')}</a></li>
+    <li><a href="/a-propos">{$t('a-propos')}</a></li>
+    <li><a href="/cv">{$t('cv')}</a></li>
+    <li><a href="https://cyberendroit.net">{$t('blog')}</a></li>
+    <li><a href="/plan">{$t('plan-du-site')}</a></li>
+  </ul>
+</div>