feat: better reactive layout for small screen sizes

src/components/ui/sections/Education.astro

@@ -20,7 +20,7 @@ const certificate = await directus.request(
   })
 );
 
-const baseClasses = ' rounded-xl flex flex-col';
+const baseClasses = 'rounded-xl flex flex-col';
 const borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
 const bgColorClasses =
   'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
@@ -35,16 +35,16 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
   </h3>
   <div class="ml-8">
     <h4 class="smooth-reveal-1 pt-5 text-2xl font-semibold text-neutral-800 dark:text-neutral-200">
-      University
+      College
     </h4>
     <ul class="space-y-4 py-3">
+      <div class="grid md:grid-cols-2 sm:grid-cols-1 gap-4">
         {
-        education.map(({ institution, area, url }) => {
+          education.map(({ institution, area, url, graduationDate}) => {
             return (
-            <div class="smooth-reveal-cards mt-4 grid grid-cols-3 gap-4 rounded-xl">
+              <div class="smooth-reveal-cards mt-4 rounded-xl">
-              <div>
                 <div
-                  class={`p-4 transition-all duration-300 md:p-5 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
+                  class={`p-4 md:p-6 transition-all duration-300 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
                 >
                   <h3 class="flex flex-row text-lg font-bold text-neutral-800 dark:text-neutral-200">
                     <Icon
@@ -54,7 +54,7 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
                     {institution}
                   </h3>
                   <p class="mt-2 ml-7 text-xs font-medium text-neutral-600 uppercase dark:text-neutral-400">
-                    {area}
+                    {area} - {new Date(graduationDate).getFullYear()}
                   </p>
                   <div class="ml-6 flex">
                     <a
@@ -72,10 +72,10 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
                   </div>
                 </div>
               </div>
-            </div>
             );
           })
         }
+      </div>
     </ul>
   </div>
 
@@ -86,12 +86,12 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
           Certificates
         </h4>
         <ul class="space-y-4 py-3">
+          <div class="grid md:grid-cols-2 sm:grid-cols-1 gap-4">
             {certificate.map(({ name, issuer, url }) => {
               return (
-              <div class="smooth-reveal-cards mt-4 grid grid-cols-3 gap-4 rounded-xl">
+                <div class="smooth-reveal-cards mt-4 rounded-xl">
-                <div>
                   <div
-                    class={`p-4 transition-all duration-300 md:p-5 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
+                    class={`p-4 md:p-6 transition-all duration-300 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
                   >
                     <h3 class="flex flex-row text-lg font-bold text-neutral-800 dark:text-neutral-200">
                       <Icon
@@ -119,9 +119,9 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
                     </div>
                   </div>
                 </div>
-              </div>
               );
             })}
+          </div>
         </ul>
       </div>
     )

src/components/ui/sections/Experience.astro

@@ -15,7 +15,7 @@ const experiences = await directus.request(
 ---
 
 <section 
-  class:list={['flex flex-col gap-4', Astro.props.className]}
+  class:list={['flex flex-col gap-8', Astro.props.className]}
 
 >
   <h3 class="relative smooth-reveal-1 flex w-full items-center gap-3 pb-10 text-5xl text-neutral-800 dark:text-neutral-200">Experience</h3>

src/components/ui/sections/HeroSection.astro

@@ -22,7 +22,7 @@ const roundedClasses = Astro.props.rounded ? "rounded-xl" : null;
 ---
 
 <section
-  class="mx-auto grid max-w-[85rem] gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full"
+  class="mx-auto grid max-w-340 gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full"
 >
   <div>
     <h1

src/pages/about.astro

@@ -40,9 +40,9 @@ const global = await directus.request(readSingleton('site_global'));
     rounded={true}
   />
 
-  <section class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
+  <section class="mx-auto max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
-    <main class="relative grid max-w-7xl gap-12 p-8 max-sm:py-16 md:grid-cols-6 md:p-16 xl:gap-24">
+    <main class="relative grid grid-cols-1 md:grid-cols-6 gap-12 p-8 md:p-16 xl:gap-24 max-w-7xl mx-auto">
-      <div class="space-y-12 md:col-span-8">
+      <div class="space-y-12 col-span-1 md:col-span-6">
         <Experience className="smooth-reveal-2" />
         <Education className="smooth-reveal-2 mt-30" />
         <Projects className="smooth-reveal-2 mt-30" />