feat: create projects page

next.config.mjs

@@ -1,11 +1,23 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/i,
-      issuer: /\.[jt]sx?$/,
-      use: ["@svgr/webpack"],
-    });
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.(".svg"),
+    );
+
+    config.module.rules.push(
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },
+        use: ["@svgr/webpack"],
+      },
+    );
 
     return config;
   },

src/app/components/Header/index.tsx

@@ -15,7 +15,9 @@ interface HeaderProps {
 
 export default function Header({ hasBackButton }: HeaderProps) {
   return (
-    <nav className={styles.header}>
+    <nav
+      className={`${styles.header} ${hasBackButton ? styles["header--transparent"] : ""}`}
+    >
       <div className={styles["nav-wrapper"]}>
         <ul className={styles["header-side_left"]}>
           {hasBackButton && (

src/app/components/Header/styles.module.css

@@ -6,6 +6,10 @@
   background-color: var(--home);
 }
 
+.header--transparent {
+  background-color: transparent;
+}
+
 .nav-wrapper {
   display: flex;
   justify-content: space-between;

src/app/i18n/locales/en.json

@@ -57,7 +57,42 @@
     }
   },
   "data": {
-    "projects": {},
+    "formation": {
+      "": {
+        "institution": {
+          "label": ""
+        },
+        "course": {
+          "label": ""
+        }
+      }
+    },
+    "experience": {
+      "": {
+        "institution": {
+          "label": ""
+        },
+        "position": {
+          "label": ""
+        },
+        "location": {
+          "label": ""
+        },
+        "description": {
+          "label": ""
+        }
+      }
+    },
+    "projects": {
+      "": {
+        "title": {
+          "label": ""
+        },
+        "description": {
+          "label": ""
+        }
+      }
+    },
     "presentations": {
       "masterChefEcomp": {
         "title": {

src/app/projects/page.module.css

@@ -0,0 +1,7 @@
+.projects {
+  width: 100%;
+}
+
+.projects-main {
+  min-height: 100vh;
+}

src/app/projects/page.tsx

@@ -0,0 +1,14 @@
+"use client";
+import Footer from "../components/Footer";
+import Header from "../components/Header";
+import styles from "./page.module.css";
+
+export default function Projects() {
+  return (
+    <main className={styles.projects}>
+      <Header hasBackButton />
+      <section className={styles["projects-main"]}></section>
+      <Footer />
+    </main>
+  );
+}