x

Author: SamHillierDev

src/components/About.tsx

@@ -11,8 +11,8 @@ const About: React.FC = () => {
 
   return (
     <section className="py-12">
-      <div className="container mx-auto flex flex-wrap items-center gap-12 lg:gap-0">
-        <article className="w-full px-6 lg:w-1/2">
+      <div className="container mx-auto flex flex-wrap items-center gap-12 xl:flex-nowrap">
+        <article className="order-2 w-full px-6 text-center xl:order-1 xl:w-1/2 xl:text-left">
           <header>
             <h3 className="text-4xl font-extrabold text-gray-800">About Me</h3>
           </header>
@@ -28,7 +28,7 @@ const About: React.FC = () => {
             <h4 className="text-xl font-semibold text-gray-800">
               Let's connect
             </h4>
-            <div className="mt-4 flex gap-4">
+            <div className="mt-4 flex justify-center gap-4 xl:justify-start">
               <a
                 href="https://linkedin.com/in/samhillier"
                 target="_blank"
@@ -50,11 +50,11 @@ const About: React.FC = () => {
             </div>
           </footer>
         </article>
-        <aside className="flex w-full flex-col items-center px-6 lg:w-1/2">
+        <aside className="order-1 flex w-full flex-col items-center px-6 xl:order-2 xl: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"
+            className="h-50 w-50 rounded-full shadow-lg"
           />
           <div className="mt-8 w-full">
             <Certifications />