change experience to expertise

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">Experience</a>
+          <a className="detailsInfoLinks" href="#tech">Expertise</a>
           <a className="detailsInfoLinks" href="#projects">Projects</a>
         </div>
       </section>

src/components/Technologies.jsx

@@ -6,7 +6,7 @@ import { techData } from "@/data/techdata.js"
 function Technologies() {
   return (
     <article id="tech" className="technologiesContainer">
-    <h2 className="experienceTitle">Experience</h2>
+    <h2 className="experienceTitle">Expertise</h2>
     <section className="experienceContainer">
     {techData.map((data) => {
       return (

src/styles/technologies.css

@@ -1,17 +1,22 @@
 .technologiesContainer {
   color: white;
+  display: flex;
   justify-content: center;
   align-items: center;
-  display: flex;
   flex-direction: column;
   min-height: 100vh;
   gap: 3rem;
   padding: 3rem;
 }
 
+.experienceTitle {
+  font-size: 3rem;
+}
+
 .experienceContainer {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   gap: 2rem;
 }
 
@@ -24,13 +29,15 @@
 }
 
 .experienceItemTitle {
-  
+  text-align: center; 
+  white-space: nowrap;
+  font-size: 2rem;
 }
 
 .experienceList {
-
+    padding-inline-start: 2em;
 }
 
 .experienceListItem {
-  
+  font-size: 1.5rem;
 }