-> tailwind

src/components/P1/CTO/CTO.astro

@@ -2,11 +2,13 @@
 import "./CtoStyles.css";
 ---
 
-<div class="cto-container">
+<div class="cto-container w-full transition-[0.5s];">
     <div class="cto-geometric-bg">
-        <div class="cto-shadow">
+        <div class="cto-shadow w-full transition-[0.5s] rounded-[72.5px];">
             <span id="cto"></span>
-            <div class="shadowdrop">
+            <div
+                class="shadowdrop shadow-[0px_4px_4px_#00000040] w-full transition-[0.5s] rounded-[72.5px];"
+            >
                 <h2
                     class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
                 >
@@ -27,8 +29,8 @@ import "./CtoStyles.css";
                 </h4>
                 <div class="cto-mini-bio">
                     <div class="cto-info">
-                        <h5 class="cto-name">Derrick Hammer</h5>
+                        <h5>Derrick Hammer</h5>
-                        <h6 class="cto-title">CTO</h6>
+                        <h6>CTO</h6>
                     </div>
                 </div>
             </div>

src/components/P1/CTO/CTOStyles.css

@@ -1,15 +1,5 @@
-.cto-container {
-    width: 100%;
-    transition: 0.5s;
-}
-
-.cto-bp {
-    padding-right: 0%;
-    transition: 0.5s;
-}
-
 .cto-geometric-bg {
-    background-image: url(../../../assets/geometric-bg.webp);
+    background-image: url('../../../assets/geometric-bg.webp');
     background-position: 75vh -2vh;
     background-size: contain;
     background-repeat: no-repeat;
@@ -19,19 +9,6 @@
     transition: 0.5s;
 }
 
-.cto-shadow {
-    border-radius: 72.5px;
-    width: 100%;
-    transition: 0.5s;
-}
-
-.shadowdrop {
-    border-radius: 72.5px;
-    box-shadow: 0px 4px 4px #00000040;
-    width: 100%;
-    transition: 0.5s;
-}
-
 .cto-mini-bio {
     height: 96px;
     width: 100%;
@@ -40,7 +17,7 @@
     justify-content: center;
     flex-direction: column;
     background-repeat: no-repeat;
-    background-image: url(../../../assets/cto-avatar.webp);
+    background-image: url('../../../assets/cto-avatar.webp');
     margin-top: 3vh;
     z-index: 999 !important;
 }
@@ -56,7 +33,7 @@
     transition: 0.5s;
 }
 
-@media screen and (min-width: 0px) and (max-width: 600px) {
+@media screen and (width >0px) and (width <=600px) {
     .cto-container {
         margin-left: -3em;
         background-position: 100px 50px;
@@ -74,7 +51,7 @@
 
     .shadowdrop {
         border-radius: 72.5px;
-        box-shadow: 0px 4px 4px #00000040;
+        box-shadow: 4px 4px #00000040;
         margin-left: 12%;
         transition: 0.5s;
         justify-content: center;
@@ -88,7 +65,7 @@
     }
 }
 
-@media screen and (min-width: 601px) {
+@media screen and (width >=601px) {
     .cto-container {
         background-position: 100px 50px;
         background-size: cover;

src/components/P1/Footer/FooterStyles.css

@@ -1,5 +1,5 @@
 .footer-logo {
-    background-image: url(../../../assets/lume-logo.webp);
+    background-image: url('../../../assets/lume-logo.webp');
     background-repeat: no-repeat;
     background-size: contain;
     margin-left: 5px;
@@ -13,7 +13,7 @@
 }
 
 .footer-email {
-    background-image: url(../../../assets/email-icon.webp);
+    background-image: url('../../../assets/email-icon.webp');
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;

src/components/P1/Grid/Grid.astro

@@ -1,6 +1,4 @@
 ---
-import React from "react";
-import Grid from "dynamic-react-grid";
 import "./GridStyles.css";
 ---
 

src/components/P1/Message/MessageStyles.css

@@ -12,7 +12,7 @@
 
 .message-header {
     color: var(--blue-charcoal-2);
-    font-family: var(--font-family-jetbrains_mono);
+    font-family: var(--font-family-jetbrains-mono);
     font-size: calc(25px + (32 - 24) * ((100vw - 300px) / (1600 - 300)));
     font-weight: 700;
     line-height: 2em;

src/components/P1/Socials/Socials.astro

@@ -2,12 +2,14 @@
 import "./SocialsStyles.css";
 ---
 
-<div class="centered">
+<div class="grid place-items-center overflow-hidden h-auto mb-[1.5vh];">
     <div>
-        <h2 class="centered">get in touch</h2>
+        <h2 class="grid place-items-center overflow-hidden h-auto mb-[1.5vh];">
-        <div class="centered">
+            get in touch
-            <div class="socials-wrapper">
+        </h2>
-                <div class="gitHub"></div>
+        <div class="grid place-items-center overflow-hidden h-auto mb-[1.5vh];">
+            <div class="flex ml-[-5%] mb-[5vh] pb-[5vh]">
+                <div class="github"></div>
                 <div class="discord"></div>
                 <div class="twitter"></div>
                 <div class="fb"></div>

src/components/P1/Socials/SocialsStyles.css

@@ -5,8 +5,8 @@
     margin-bottom: 5vh;
 }
 
-.gitHub {
+.github {
-    background-image: url(../../../assets/github-logo.webp);
+    background-image: url('../../../assets/github-logo.webp');
     background-position: 50% 50%;
     background-size: contain;
     background-repeat: no-repeat;
@@ -15,7 +15,7 @@
 }
 
 .discord {
-    background-image: url(../../../assets/discord-logo.webp);
+    background-image: url('../../../assets/discord-logo.webp');
     background-position: 50% 50%;
     background-size: contain;
     background-repeat: no-repeat;
@@ -26,7 +26,7 @@
 }
 
 .twitter {
-    background-image: url(../../../assets/twitter-logo.webp);
+    background-image: url('../../../assets/twitter-logo.webp');
     background-position: 50% 50%;
     background-size: contain;
     background-repeat: no-repeat;
@@ -36,7 +36,7 @@
 }
 
 .fb {
-    background-image: url(../../../assets/fb-logo.webp);
+    background-image: url('../../../assets/fb-logo.webp');
     background-position: 50% 50%;
     background-size: contain;
     background-repeat: no-repeat;