Feature/cicd test thecheesywiggle

.github/workflows/ci.yaml

@@ -0,0 +1,10 @@
+name: CI Pipeline
+
+on:
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  format:
+    name: Code Format Check
+    uses: ./.github/workflows/format.yaml

.github/workflows/quality.yaml

@@ -0,0 +1,26 @@
+name: Code Format Check
+
+on:
+  workflow_call:
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run Prettier check
+        run: npx prettier --check .
+
+      - name: Run Eslint Check
+        run: npx eslint .

app/components/Countdown/index.jsx

@@ -1,51 +1,63 @@
-'use client'
+"use client";
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
 export function Countdown({ registration }) {
-
-	const [counter, setCounter] = useState(registration - new Date().getTime())
-	const [mounted, setMounted] = useState(false)
-
-	useEffect(() => {
-		setMounted(true)
-		setInterval(() => setCounter(registration - new Date().getTime()), 500);
-	}, [])
-
-
-	return mounted && (
-		<div className='flex flex-col gap-8 w-full justify-center items-center'>
-			<div className="flex gap-2 items-center justify-center w-full">
-
-				{/* days */}
-				<div className='relative w-1/6 aspect-[3/4] flex flex-col justify-center items-cente'>
-					<div className='h-1/2 w-full bg-[#171616] rounded-2xl flex justify-center items-center max-lg:rounded-lg' />
-					<div className='h-1/2 w-full bg-HSWsecondary2 rounded-2xl flex justify-center items-center max-lg:rounded-lg' />
-					<p className="absolute w-full h-full justify-center flex items-center text-6xl font-extrabold text-HSWaccent max-lg:text-sm">{Math.max(0,Math.floor(counter / (1000 * 60 * 60 * 24)))}</p>
-				</div>
-
-				{/* hours */}
-				<div className='relative w-1/6 aspect-[3/4] flex flex-col justify-center items-cente'>
-					<div className='h-1/2 w-full bg-[#171616] rounded-2xl flex justify-center items-center max-lg:rounded-lg' />
-					<div className='h-1/2 w-full bg-HSWsecondary2 rounded-2xl flex justify-center items-center max-lg:rounded-lg' />
-					<p className="absolute w-full h-full justify-center flex items-center text-6xl font-extrabold text-HSWaccent max-lg:text-sm">{Math.max(0,Math.floor((counter % (1000 * 60 * 60 * 24))) / (1000 * 60 * 60))}</p>
-				</div>
-
-				{/* minutes */}
-				<div className='relative w-1/6 aspect-[3/4] flex flex-col justify-center items-cente'>
-					<div className='h-1/2 w-full bg-[#171616] rounded-2xl flex justify-center items-center max-lg:rounded-lg' />
-					<div className='h-1/2 w-full bg-HSWsecondary2 rounded-2xl flex justify-center items-center max-lg:rounded-lg' />
-					<p className="absolute w-full h-full justify-center flex items-center text-6xl font-extrabold text-HSWaccent max-lg:text-sm">{Math.max(0,Math.floor((counter % (1000 * 60 * 60)) / (1000 * 60)))}</p>
-				</div>
-
-				{/* seconds */}
-				<div className='relative w-1/6 aspect-[3/4] flex flex-col justify-center items-cente'>
-					<div className='h-1/2 w-full bg-[#171616] rounded-2xl flex justify-center items-center max-lg:rounded-lg' />
-					<div className='h-1/2 w-full bg-HSWsecondary2 rounded-2xl flex justify-center items-center max-lg:rounded-lg' />
-					<p className="absolute w-full h-full justify-center flex items-center text-6xl font-extrabold text-HSWaccent max-lg:text-sm">{Math.max(0,Math.floor((counter % (1000 * 60)) / 1000))}</p>
-				</div>
-			</div>
-		</div>
-
-	)
-}
+  const [counter, setCounter] = useState(registration - new Date().getTime());
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    setInterval(() => setCounter(registration - new Date().getTime()), 500);
+  }, []);
+
+  return (
+    mounted && (
+      <div className="flex flex-col gap-8 w-full justify-center items-center">
+        <div className="flex gap-2 items-center justify-center w-full">
+          {/* days */}
+          <div className="relative w-1/6 aspect-[3/4] flex flex-col justify-center items-cente">
+            <div className="h-1/2 w-full bg-[#171616] rounded-2xl flex justify-center items-center max-lg:rounded-lg" />
+            <div className="h-1/2 w-full bg-HSWsecondary2 rounded-2xl flex justify-center items-center max-lg:rounded-lg" />
+            <p className="absolute w-full h-full justify-center flex items-center text-6xl font-extrabold text-HSWaccent max-lg:text-sm">
+              {Math.max(0, Math.floor(counter / (1000 * 60 * 60 * 24)))}
+            </p>
+          </div>
+
+          {/* hours */}
+          <div className="relative w-1/6 aspect-[3/4] flex flex-col justify-center items-cente">
+            <div className="h-1/2 w-full bg-[#171616] rounded-2xl flex justify-center items-center max-lg:rounded-lg" />
+            <div className="h-1/2 w-full bg-HSWsecondary2 rounded-2xl flex justify-center items-center max-lg:rounded-lg" />
+            <p className="absolute w-full h-full justify-center flex items-center text-6xl font-extrabold text-HSWaccent max-lg:text-sm">
+              {Math.max(
+                0,
+                Math.floor(counter % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
+              )}
+            </p>
+          </div>
+
+          {/* minutes */}
+          <div className="relative w-1/6 aspect-[3/4] flex flex-col justify-center items-cente">
+            <div className="h-1/2 w-full bg-[#171616] rounded-2xl flex justify-center items-center max-lg:rounded-lg" />
+            <div className="h-1/2 w-full bg-HSWsecondary2 rounded-2xl flex justify-center items-center max-lg:rounded-lg" />
+            <p className="absolute w-full h-full justify-center flex items-center text-6xl font-extrabold text-HSWaccent max-lg:text-sm">
+              {Math.max(
+                0,
+                Math.floor((counter % (1000 * 60 * 60)) / (1000 * 60)),
+              )}
+            </p>
+          </div>
+
+          {/* seconds */}
+          <div className="relative w-1/6 aspect-[3/4] flex flex-col justify-center items-cente">
+            <div className="h-1/2 w-full bg-[#171616] rounded-2xl flex justify-center items-center max-lg:rounded-lg" />
+            <div className="h-1/2 w-full bg-HSWsecondary2 rounded-2xl flex justify-center items-center max-lg:rounded-lg" />
+            <p className="absolute w-full h-full justify-center flex items-center text-6xl font-extrabold text-HSWaccent max-lg:text-sm">
+              {Math.max(0, Math.floor((counter % (1000 * 60)) / 1000))}
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  );
+}

app/components/Footer/index.jsx

@@ -2,9 +2,11 @@ import Image from "next/image";
 import Link from "next/link";
 
 export function Footer() {
-	return (
-		<div className="absolute left-0 right-0 w-full h-fit px-[15%] py-5 flex justify-center bg-HSWsecondary z-50 border-t border-HSWtext">
-			<p className="font-thin">test your limits, <span className="font-bold">never</span> stop</p>
-		</div>
-	)
-}
+  return (
+    <div className="absolute left-0 right-0 w-full h-fit px-[15%] py-5 flex justify-center bg-HSWsecondary z-50 border-t border-HSWtext">
+      <p className="font-thin">
+        test your limits, <span className="font-bold">never</span> stop
+      </p>
+    </div>
+  );
+}

app/components/General/DocumentCard/index.jsx

@@ -2,19 +2,27 @@ import Image from "next/image";
 import Link from "next/link";
 
 export function DocumentCard({ document }) {
-	return (
-		<Link href={document.link} className="w-[300px] h-[300px] bg-HSWsecondary rounded-md border border-HSWsecondary2 cursor-pointer relative group">
+  return (
+    <Link
+      href={document.link}
+      className="w-[300px] h-[300px] bg-HSWsecondary rounded-md border border-HSWsecondary2 cursor-pointer relative group"
+    >
+      <div className="absolute top-2 left-2 w-full h-full bg-white rounded-lg shadow-HSWtext shadow-sm group-hover:top-0 group-hover:left-0 transition-all duration-200 z-10" />
 
-			<div className="absolute top-2 left-2 w-full h-full bg-white rounded-lg shadow-HSWtext shadow-sm group-hover:top-0 group-hover:left-0 transition-all duration-200 z-10" />
+      <div className="absolute z-20 bg-black">
+        <Image
+          src={document.image}
+          alt={document.name}
+          width={300}
+          height={300}
+          className="rounded-t-md w-full h-48 object-cover"
+        />
 
-			<div className="absolute z-20 bg-black">
-				<Image src={document.image} alt={document.name} width={300} height={300} className="rounded-t-md w-full h-48 object-cover" />
-
-				<p className="text-2xl text-HSWaccent font-extrabold">{document.name}</p>
-				<p className="text-md text-HSWtext">{document.description}</p>
-			</div>
-
-		</Link>
-
-	)
-}
+        <p className="text-2xl text-HSWaccent font-extrabold">
+          {document.name}
+        </p>
+        <p className="text-md text-HSWtext">{document.description}</p>
+      </div>
+    </Link>
+  );
+}

app/components/General/Popup/Popup.module.css

@@ -1,103 +1,103 @@
 .container {
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
-    padding-top: 5%;
-    padding-bottom: 5%;
-    z-index: 100;
-    background-color: rgba(0, 0, 0, 0.5);
-    animation: popupContainerEnter 0.4s forwards;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  padding-top: 5%;
+  padding-bottom: 5%;
+  z-index: 100;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation: popupContainerEnter 0.4s forwards;
 }
 
 .containerSmall {
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
-    padding-top: 5%;
-    padding-bottom: 5%;
-    z-index: 100;
-    background-color: rgba(0, 0, 0, 0.5);
-    animation: popupContainerEnter 0.4s forwards;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  padding-top: 5%;
+  padding-bottom: 5%;
+  z-index: 100;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation: popupContainerEnter 0.4s forwards;
 }
 
 .containerLarge {
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
-    padding-top: 5%;
-    padding-bottom: 5%;
-    z-index: 100;
-    background-color: rgba(0, 0, 0, 0.5);
-    animation: popupContainerEnter 0.4s forwards;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  padding-top: 5%;
+  padding-bottom: 5%;
+  z-index: 100;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation: popupContainerEnter 0.4s forwards;
 }
 
 .popup {
-    position: relative;
-    background-color: var(--default-fg-colour);
-    padding: 30px;
-    border-radius: 15px;
-    max-height: 100%;
-    margin: auto;
-    box-shadow: var(--default-box-shadow);
-    overflow-y: auto;
-    animation: popupEnter 0.4s forwards;
+  position: relative;
+  background-color: var(--default-fg-colour);
+  padding: 30px;
+  border-radius: 15px;
+  max-height: 100%;
+  margin: auto;
+  box-shadow: var(--default-box-shadow);
+  overflow-y: auto;
+  animation: popupEnter 0.4s forwards;
 }
 
 .container .popup {
-    max-width: 600px;
+  max-width: 600px;
 }
 
 .containerSmall .popup {
-    max-width: 350px;
+  max-width: 350px;
 }
 
 .containerLarge .popup {
-    max-width: 850px;
+  max-width: 850px;
 }
 
 .close {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    padding: 4px;
-    border-radius: 50%;
-    border: none;
-    font-size: 1.2rem;
-    width: 2rem;
-    height: 2rem;
-    transition: 0.2s;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 50%;
+  border: none;
+  font-size: 1.2rem;
+  width: 2rem;
+  height: 2rem;
+  transition: 0.2s;
 }
 
 .close:hover {
-    background-color: rgb(240, 240, 240);
+  background-color: rgb(240, 240, 240);
 }
 
 @keyframes popupEnter {
-    from {
-        opacity: 0;
-        transform: translateY(35px) scale(0.95);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(35px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 @keyframes popupContainerEnter {
-    from {
-        background-color: rgba(0, 0, 0, 0);
-    }
-    to {
-        background-color: rgba(0, 0, 0, 0.5);
-    }
-}
+  from {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  to {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}