chore(ci): setup continuous integration

.github/workflows/ci.yml

@@ -0,0 +1,28 @@
+name: Frontend Continuous Integration
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm run lint

package.json

@@ -9,6 +9,7 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check . && eslint .",
+    "lint-fix": "eslint --fix \"src/**/*.{ts,tsx}\"",
     "format": "prettier --write ."
   },
   "devDependencies": {

src/components/Apropos.svelte

@@ -1,5 +1,6 @@
 <script>
   // Optional: Add any JS if necessary
+  // Optional: Add any JS if necessary
 </script>
 
 <div class="container" id="À propos">
@@ -39,6 +40,7 @@
     color: var(--text-primary);
     text-align: center;
     position: relative; /* Needed for absolutely positioning the images */
+    overflow: hidden;
   }
 
   h1 {
@@ -88,22 +90,21 @@
   }
 
   .gear {
-    position : absolute;
-    transform: translate(40,-5) rotate(0deg);
+    position: absolute;
+    transform: translate(40, -5) rotate(0deg);
   }
 
   .gears {
-    position : absolute;
+    position: absolute;
     transform: translate(0, 0);
   }
 
   /* Show and animate SVGs on button hover */
   .cta:hover + .gear {
     opacity: 1;
     transform: translate(-60px, -4px) rotate(360deg);
-    animate : rotate 0.3s/* Make it visible and spin */
+    animate: rotate 0.3s; /* Make it visible and spin */
   }
-
   .cta:hover + .gear + .gears {
     opacity: 1;
     transform: translate(60px, -30px); /* Make it visible and move into view */

src/components/Banner.svelte

@@ -1,5 +1,6 @@
 <script>
   // You can include any additional script logic here if needed
+  // You can include any additional script logic here if needed
 </script>
 
 <div class="container" id="Acceuil">
@@ -16,6 +17,7 @@
     align-items: center;
     height: 30vh;
     background-color: var(--primary-color); /* Background color */
+    padding-top: 20vh;
   }
 
   .mask {

src/components/Footer.svelte

@@ -4,9 +4,11 @@
 </script>
 
 <footer>
-  <p>
-    {text} - <span>{year}</span> - <a href="https://github.com/etscalibur/etscalibur-web">Github</a>
-  </p>
+  <p>{text} - <span>{year}</span></p>
+  <section>
+    <a href="https://github.com/etscalibur" target="_blank">GitHub</a>
+    <a href="https://www.linkedin.com/company/etscalibur" target="_blank">LinkedIn</a>
+  </section>
 </footer>
 
 <style>

src/components/Header.svelte

@@ -1,7 +1,15 @@
 <script>
   import { onMount } from 'svelte';
-
-  export let links = ['Acceuil', 'À propos', 'Mission', 'Compétitions', 'Équipe'];
+
+  export let links = [
+    'Acceuil',
+    'À propos',
+    'Mission',
+    'Compétitions',
+    'Équipe',
+    'Partenaires',
+    'Contact'
+  ];
 
   // State to determine if the header should be visible
   let showHeader = false;
@@ -11,7 +19,7 @@
     // Show the header when scrolled past 30% of the window height
     showHeader = window.scrollY > window.innerHeight * 0.3;
   };
-  
+
   // Use `onMount` to ensure window access is in the browser
   onMount(() => {
     window.addEventListener('scroll', handleScroll);
@@ -24,14 +32,12 @@
 </script>
 
 <!-- Header -->
-
-<header class="{headerClass}">
-    <h1>ETScalibur</h1>
-
+<header class={headerClass}>
+  <h1>ETScalibur</h1>
   <nav>
     <ul>
       {#each links as link}
-        <li><a href="#">{link}</a></li>
+        <li><a href={link}>{link}</a></li>
       {/each}
     </ul>
   </nav>
@@ -50,13 +56,19 @@
     justify-content: space-between;
     align-items: center;
     backdrop-filter: blur(12px);
-    transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
+    transition:
+      background 0.3s ease,
+      padding 0.3s ease,
+      box-shadow 0.3s ease; /* Smooth transitions */
   }
 
   .header-top {
     background: var(--primary-color);
     color: var(--text-primary);
-    transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
+    transition:
+      background 0.3s ease,
+      padding 0.3s ease,
+      box-shadow 0.3s ease; /* Smooth transitions */
   }
 
   .header {
@@ -74,7 +86,6 @@
     color: var(--primary-color); /* Bright color for the title */
   }
 
-
   nav ul {
     display: flex;
     font-family: 'Poppins', sans-serif;
@@ -94,24 +105,24 @@
   }
 
   nav a:hover {
-    color: var(--primary-color); 
+    color: var(--primary-color);
   }
 
   .header-top nav a:hover {
-    color: var(--text-primary); 
+    color: var(--text-primary);
   }
 
   nav a::after {
     content: '';
     display: block;
     width: 0;
     height: 2px;
-    background: var(--primary-color); 
+    background: var(--primary-color);
     transition: width 0.3s;
   }
 
   .header-top nav a::after {
-    background: var(--text-primary); 
+    background: var(--text-primary);
   }
 
   nav a:hover::after {