experience section

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>

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">
+    <article id="tech" className="technologiesContainer">
-    <h2 id="tech">This is Tech area title</h2>
+    <h2 className="experienceTitle">Experience</h2>
-    <p>This be some technologies</p>
+    <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>
   );
 };

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"
+    ],
+  }
+]

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 {
+  
+}