From 73c7798eb5863086f9165823750cebf0304ff635 Mon Sep 17 00:00:00 2001
From: Laercio Rios <contact@laerciorios.com>
Date: Mon, 9 Sep 2024 21:22:32 -0300
Subject: [PATCH] feat: create projects page

---
 next.config.mjs                             | 22 +++++++++---
 src/app/assets/icons/arrow-left.svg         |  9 ++---
 src/app/components/Header/index.tsx         |  4 ++-
 src/app/components/Header/styles.module.css |  4 +++
 src/app/i18n/locales/en.json                | 37 ++++++++++++++++++++-
 src/app/projects/page.module.css            |  7 ++++
 src/app/projects/page.tsx                   | 14 ++++++++
 7 files changed, 83 insertions(+), 14 deletions(-)
 create mode 100644 src/app/projects/page.module.css
 create mode 100644 src/app/projects/page.tsx

diff --git a/next.config.mjs b/next.config.mjs
index 86b71b1..833a6ca 100644
--- a/next.config.mjs
+++ b/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;
   },
diff --git a/src/app/assets/icons/arrow-left.svg b/src/app/assets/icons/arrow-left.svg
index 3caba6e..cb0437d 100644
--- a/src/app/assets/icons/arrow-left.svg
+++ b/src/app/assets/icons/arrow-left.svg
@@ -1,8 +1,3 @@
 <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <mask id="mask0_55_511" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
-    <rect width="48" height="48" fill="#D9D9D9" />
-  </mask>
-  <g mask="url(#mask0_55_511)">
-    <path d="M31 42L13 24L31 6L34.2116 9.21162L19.4232 24L34.2116 38.7884L31 42Z" fill="#910000" />
-  </g>
-</svg>
\ No newline at end of file
+  <path d="M31 42L13 24L31 6L34.2116 9.21162L19.4232 24L34.2116 38.7884L31 42Z" fill="#910000" />
+</svg>
diff --git a/src/app/components/Header/index.tsx b/src/app/components/Header/index.tsx
index cdf7af3..f9ba8a2 100644
--- a/src/app/components/Header/index.tsx
+++ b/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 && (
diff --git a/src/app/components/Header/styles.module.css b/src/app/components/Header/styles.module.css
index 25a1c13..c392f2e 100644
--- a/src/app/components/Header/styles.module.css
+++ b/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;
diff --git a/src/app/i18n/locales/en.json b/src/app/i18n/locales/en.json
index f77c391..e5c7f86 100644
--- a/src/app/i18n/locales/en.json
+++ b/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": {
diff --git a/src/app/projects/page.module.css b/src/app/projects/page.module.css
new file mode 100644
index 0000000..deaaa32
--- /dev/null
+++ b/src/app/projects/page.module.css
@@ -0,0 +1,7 @@
+.projects {
+  width: 100%;
+}
+
+.projects-main {
+  min-height: 100vh;
+}
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
new file mode 100644
index 0000000..c20cbf2
--- /dev/null
+++ b/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>
+  );
+}