fix(style): fixed few styles here and there with the grid, shadow and…

… outlines

src/components/About.astro

@@ -6,7 +6,7 @@ import Profile from "./Profile.astro";
 <!-- https://github.com/stylessh/stylessh-v2/blob/main/src/components/About.astro -->
 <section class="min-h-screen flex justify-center items-center">
   <div class="grid grid-cols-1 lg:grid-cols-2 w-[90%] mx-auto gap-10">
-    <article class="py-6 px-8 text-center sm:text-left">
+    <article class="py-6 px-8 text-center md:text-left">
       <h2 class="text-4xl dark:text-white text-black font-bold opacity-0 about">
         About me.
       </h2>

src/components/CardTech.astro

@@ -8,7 +8,7 @@ imgClass = tech.invertOnDark ? imgClass + " dark:invert" : imgClass;
 <card-tech class="hidden" data-techId={tech.order}></card-tech>
 <div
   id={"tech-card-" + tech.order}
-  class="card flex flex-col py-3 lg:py-0 md:justify-center border-2 rounded-xl border-black dark:border-white space-y-4 sm:space-y-7 md:min-w-[170px] md:min-h-[200px] will-change-[opacity]"
+  class="card flex flex-col py-3 lg:py-0 md:justify-center border-2 rounded-xl border-black dark:border-white space-y-4 sm:space-y-7 md:min-w-[170px] md:min-h-[200px] will-change-[opacity] shadow"
 >
   <pre
     class="ml-0 sm:ml-3 text-sm md:text-base text-black dark:text-white opacity-40">#{tech.order}</pre>

src/components/Contact.astro

@@ -9,7 +9,7 @@ interface IContactMedium {
     iconSize?: number,
 }
 
-const baseContactClass = "mx-auto mt-8 rounded-xl border border-gray-800 dark:border-gray-200 py-4 px-8";
+const baseContactClass = "mx-auto mt-8 rounded-xl outline outline-1 hover:outline-2 outline-gray-800 dark:outline-gray-200 py-4 px-8";
 const baseIconClass = "gray-800 dark:gray-100";
 const baseIconSize = 45;
 
@@ -38,9 +38,9 @@ const contactMediums: IContactMedium[] = [
 ---
 
 <section class="min-h-screen flex justify-center items-center">
-    <div class="grid grid-cols-1 lg:grid-cols-2 w-[90%] mx-auto gap-10">
-        <article class="py-6 px-8 text-center sm:text-left">
-            <h2 class="text-4xl dark:text-white text-black font-bold opacity-0 contact-me">Say Hello!</h2>
+    <div class="grid grid-flow-col w-[90%] mx-auto gap-10">
+        <article class="py-6 px-8">
+            <h2 class="text-center md:text-left text-4xl dark:text-white text-black font-bold opacity-0 contact-me">Say Hello!</h2>
             <!-- Line -->
             <div class="h-16 w-0.5 bg-gray-700 dark:bg-gray-200 my-6 mx-auto md:m-6 line opacity-0"/>
             <div class="opacity-0 text-center sm:text-left contact-me-methods">
@@ -51,7 +51,7 @@ const contactMediums: IContactMedium[] = [
                         class="underline decoration-2 decoration-gray-500 dark:decoration-gray-200">for you</a>.
                 </p>
 
-                <div class=`grid grid-cols-2 md:grid-cols-5 gap-3 md:gap-4`>
+                <div class=`grid grid-flow-row grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-3 md:gap-4`>
                     {contactMediums.map((medium => {
                         return <a href={medium.href} class={medium.class ?? baseContactClass}>
                             <Icon name={medium.iconName} size={medium.iconSize ?? baseIconSize}

src/components/Tech.astro

@@ -2,7 +2,7 @@
 import techs from '../data/techs.json';
 import Card from './CardTech.astro';
 ---
-<div class="grid grid-cols-2 2xl:grid-cols-4 gap-4 2xl:gap-10 mb-10">
+<div class="grid grid-flow-row grid-cols-2 2xl:grid-cols-4 gap-4 2xl:gap-10 mb-10">
     {techs.sort((a, b) => a.order - b.order).map(tech => (
         <Card tech={tech} data-tech={tech} />
     ))}

src/ui/ProjectList.tsx

@@ -91,7 +91,7 @@ export default function ProjectList() {
                     <img
                         src={project.media}
                         alt={project.name}
-                        class="block md:hidden my-4 w-full object-cover rounded-2xl"
+                        class="block md:hidden my-4 w-full object-cover rounded-3xl border-2 border-gray-600 dark:border-gray-200 shadow-2xl"
                     />
 
                     <div class="flex items-center space-x-2 md:space-x-4">
@@ -128,7 +128,7 @@ export default function ProjectList() {
                             id={index}
                             alt="A project picture"
                             src={photo.media}
-                            className={`fixed scale-50 pointer-events-none select-none rounded-3xl transition-transform ${
+                            className={`fixed scale-50 pointer-events-none select-none rounded-3xl transition-transform border-2 border-gray-600 dark:border-gray-200 ${
                                 isActive ? "opacity-100" : "opacity-0"
                             }`}
                             key={index}