refactor: rearrange certs layout

Author: SamHillierDev

src/App.tsx

@@ -1,7 +1,6 @@
 import Header from "./components/Header";
 import About from "./components/About";
 import Projects from "./components/Projects";
-import Certifications from "./components/Certifications";
 import Footer from "./components/Footer";
 
 function App() {
@@ -11,7 +10,6 @@ function App() {
       <main className="container mx-auto mt-20">
         <About />
         <Projects />
-        <Certifications />
       </main>
       <Footer />
     </div>

src/components/About.tsx

@@ -1,5 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGithub, faLinkedin } from "@fortawesome/free-brands-svg-icons";
+import Certifications from "./Certifications";
 
 const About: React.FC = () => {
   return (
@@ -49,12 +50,15 @@ const About: React.FC = () => {
           </div>
         </div>
 
-        <div className="flex w-full justify-center px-4 lg:w-1/2">
+        <div className="flex w-full flex-col items-center justify-center px-4 lg:w-1/2">
           <img
             src="https://raw.githubusercontent.com/SamHillierDev/samhillier.dev/main/src/assets/images/sam-hillier.jpg"
             alt="Sam Hillier"
             className="h-48 w-48 rounded-full shadow-lg lg:h-64 lg:w-64"
           />
+          <div className="w-full">
+            <Certifications />
+          </div>
         </div>
       </div>
     </section>

src/components/Certifications.tsx

@@ -43,18 +43,15 @@ const Certifications: React.FC = () => {
   ];
 
   return (
-    <section className="py-8">
-      <h3 className="mb-6 text-center text-3xl font-semibold">
-        Certifications
-      </h3>
-      <div className="relative mx-auto h-[320px] w-full max-w-4xl overflow-hidden">
+    <section>
+      <div className="relative mx-auto w-full max-w-3xl overflow-hidden">
         <div className="relative flex flex-wrap items-center justify-center">
           {certifications.map((cert, index) => (
             <div
               key={index}
-              className={`relative h-[300px] w-[200px] shrink-0 transform overflow-hidden rounded-lg transition-transform ${
-                hoveredIndex === index ? "z-10 scale-110" : "z-1"
-              } ${index !== 0 ? "-ml-[80px]" : ""}`}
+              className={`relative h-[180px] w-[130px] shrink-0 transform overflow-hidden rounded-lg transition-transform ${
+                hoveredIndex === index ? "z-10 scale-105" : "z-1"
+              } ${index !== 0 ? "-ml-[40px]" : ""}`}
               onMouseEnter={() => setHoveredIndex(index)}
               onMouseLeave={() => setHoveredIndex(null)}
             >