fix: Cards style and star border no gradient

Author: etherbeing

src/assets/photo.jpg

@@ -39,7 +39,7 @@ const infoRight: Array<{ header: string; content: string }> = [
     <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
         <SpotlightCard
             client:only="react"
-            className="text-justify select-none cursor-default"
+            className="text-justify select-none cursor-default bg-transparent backdrop-blur-2xl"
         >
             {
                 infoLeft.map((art) => {
@@ -61,7 +61,7 @@ const infoRight: Array<{ header: string; content: string }> = [
         />
         <SpotlightCard
             client:only="react"
-            className="text-justify select-none cursor-default"
+            className="text-justify select-none cursor-default bg-transparent backdrop-blur-2xl"
         >
             {
                 infoRight.map((art) => {
@@ -81,30 +81,36 @@ const infoRight: Array<{ header: string; content: string }> = [
     <div class="flex flex-col items-center justify-center relative">
         <SpotlightCard
             client:only="react"
-            className="flex flex-col justify-between aspect-9/16 p-0! w-75"
+            className="flex flex-col justify-between aspect-9/16 p-0! w-75 bg-transparent backdrop-blur-2xl"
         >
-            <Image src={photo} alt="Photo" />
-            <div class="flex flex-col my-5 px-5 cursor-default">
+            <div class={"max-h-[60%] overflow-hidden hover:alter-ego"}>
+                <Image src={photo} alt="Photo" />
+            </div>
+            <div class="flex flex-col my-5 px-5">
                 <GlowingText client:only="react">
                     <span class="text-xl font-bold">Short bio</span>
                 </GlowingText>
-                I am a crustacean and I love to eat shrimp. Hell yeah long life to
-                Ferris! Let us feed the Rust community with amazing content.
-            </div>
-            <div class="w-full flex justify-end items-end px-3 mb-5">
-                <a
-                    target="_blank"
-                    href="https://paypal.me/etherbeing"
-                    class="w-full cursor-pointer"
-                >
-                    <StarBorder
-                        client:only="react"
-                        className="flex flex-row gap-3 justify-center items-center w-full"
+                <p class="text-sm text-justify cursor-default">
+                    I'm a cybersecurity enthusiast and Rust developer with a
+                    knack for solving complex problems.
+                </p>
+                <div class="w-full flex justify-end items-end px-3 mt-5 mb-3 z-10 cursor-pointer">
+                    <a
+                        target="_blank"
+                        href="https://paypal.me/etherbeing"
+                        class="w-full"
                     >
-                        <span class="font-bold text-sm">Buy me a coffee</span>
-                        <Icon name="simple-icons:buymeacoffee" />
-                    </StarBorder>
-                </a>
+                        <StarBorder
+                            client:only="react"
+                            className="flex flex-row gap-3 justify-center items-center w-full"
+                        >
+                            <span class="font-bold text-sm"
+                                >Buy me a coffee</span
+                            >
+                            <Icon name="simple-icons:buymeacoffee" />
+                        </StarBorder>
+                    </a>
+                </div>
             </div>
         </SpotlightCard>
     </div>

src/components/About.astro

@@ -47,11 +47,11 @@ const skills: Array<{
         {
             skills.map((skill) => {
                 return (
-                    <li class="h-[300px] md:h-auto mx-auto">
+                    <li class="h-[300px] md:h-[275px] mx-auto">
                         <SpotlightCard
                             client:only="react"
                             spotlightColor="rgba(0, 229, 255, 0.2)"
-                            className="flex aspect-square justify-center items-center flex-col gap-3 h-full cursor-default select-none text-sm uppercase text-center font-bold"
+                            className="bg-transparent backdrop-blur-2xl flex aspect-square justify-center items-center flex-col gap-3 h-full cursor-default select-none text-sm uppercase text-center font-bold"
                         >
                             <Image
                                 draggable="false"

src/components/Skills.astro

@@ -47,7 +47,7 @@ const StarBorder = <T extends React.ElementType = "button">({
         }}
       ></div>
       <div
-        className={`relative z-1 bg-linear-to-b from-black to-gray-900 border border-gray-800 text-white text-center text-[16px] py-4 px-[26px] rounded ${className}`}
+        className={`relative z-1 bg-linear-to-b from-black to-black border border-gray-800 text-white text-center text-[16px] py-4 px-[26px] rounded ${className}`}
       >
         {children}
       </div>