From 50ebc41a9d0a11d9714929a8e13edaf606bb9dac Mon Sep 17 00:00:00 2001
From: II-Paulus-II <paulus.coding@gmail.com>
Date: Thu, 7 Mar 2024 13:19:53 +0000
Subject: [PATCH] experience section

---
 src/components/Details.jsx      |  2 +-
 src/components/Technologies.jsx | 22 +++++++++++++---
 src/data/modsdata.js            |  2 +-
 src/data/techdata.js            | 46 +++++++++++++++++++++++++++++++++
 src/styles/technologies.css     | 32 +++++++++++++++++++++++
 5 files changed, 99 insertions(+), 5 deletions(-)

diff --git a/src/components/Details.jsx b/src/components/Details.jsx
index b6dafca..1a9cb48 100644
--- a/src/components/Details.jsx
+++ b/src/components/Details.jsx
@@ -12,7 +12,7 @@ function Details() {
         <div className="detailsTextInnerContainer"><h2 className="detailsTitle">Paul Hughes</h2></div>
         <div className="detailsTextInnerContainer"><p className="detailsComment">Full Stack Developer</p></div>
         <div className="detailsInfoLinksContainer">
-          <a className="detailsInfoLinks" href="#tech">Tech</a>
+          <a className="detailsInfoLinks" href="#tech">Experience</a>
           <a className="detailsInfoLinks" href="#projects">Projects</a>
         </div>
       </section>
diff --git a/src/components/Technologies.jsx b/src/components/Technologies.jsx
index e9f1e68..5325165 100644
--- a/src/components/Technologies.jsx
+++ b/src/components/Technologies.jsx
@@ -1,12 +1,28 @@
 /* ----- Project Imports ----- */
 import "@/styles/technologies.css";
+import { techData } from "@/data/techdata.js"
 
 
 function Technologies() {
   return (
-    <article className="technologiesContainer">
-    <h2 id="tech">This is Tech area title</h2>
-    <p>This be some technologies</p>
+    <article id="tech" className="technologiesContainer">
+    <h2 className="experienceTitle">Experience</h2>
+    <section className="experienceContainer">
+    {techData.map((data) => {
+      return (
+        <div key={data.Name} className="experienceInnerContainer">
+          <h3 className="experienceItemTitle">{data.Name}</h3>
+          <ul className="experienceList">
+          {data.List.map((item) => {
+            return (
+              <li key={item} className="experienceListItem">{item}</li>
+            );
+          })}
+          </ul>
+        </div>
+      );
+  })}
+    </section>
     </article>
   );
 };
diff --git a/src/data/modsdata.js b/src/data/modsdata.js
index 8e73d91..d0eda44 100644
--- a/src/data/modsdata.js
+++ b/src/data/modsdata.js
@@ -1,5 +1,5 @@
 const BLANKTEMPLATE =  {
-    Name: "",
+  Name: "",
     GitHub: "",
     Steam: "",
     Workshop_ID: "",
diff --git a/src/data/techdata.js b/src/data/techdata.js
index e69de29..74d9dc7 100644
--- a/src/data/techdata.js
+++ b/src/data/techdata.js
@@ -0,0 +1,46 @@
+export const techData = [
+  {
+    Name: "Languages",
+    Text: "",
+    List: [
+      "C++",
+      "JavaScript",
+    ],
+  },
+  {
+    Name: "JS Frameworks",
+    Text: "",
+    List: [
+      "Express",
+      "React",
+      "Next", 
+    ],
+  },
+  {
+    Name: "C++ Libraries",
+    Text: "",
+    List: [
+      "Win32 API",
+      "Ncurses",
+      "SFML",
+    ],
+  },
+  {
+    Name: "System Admin",
+    Text: "",
+    List: [
+      "Debian/Ubuntu",
+      "Nginx",
+      "PM2",
+      "BASH",
+    ],
+  },
+  {
+    Name: "Databases",
+    Text: "",
+    List: [
+      "PostgresQL",
+      "Sqlite3"
+    ],
+  }
+]
diff --git a/src/styles/technologies.css b/src/styles/technologies.css
index 2317386..b34a0a3 100644
--- a/src/styles/technologies.css
+++ b/src/styles/technologies.css
@@ -1,4 +1,36 @@
 .technologiesContainer {
+  color: white;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
   min-height: 100vh;
+  gap: 3rem;
   padding: 3rem;
 }
+
+.experienceContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+}
+
+.experienceInnerContainer {
+  border: 1px solid white;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.experienceItemTitle {
+  
+}
+
+.experienceList {
+
+}
+
+.experienceListItem {
+  
+}