feat: Add a photo of myself

Author: etherbeing

src/assets/photo.jpg

@@ -3,6 +3,10 @@ import ferris from "@/assets/ferris.png";
 import SpotlightCard from "./react/SpotlightCard";
 import GlowingHeader from "./react/GlowingHeader";
 import GlowingText from "./react/GlowingText";
+import { Image } from "astro:assets";
+import photo from "@/assets/photo.jpg";
+import StarBorder from "./react/StarBorder";
+import { Icon } from "astro-icon/components";
 
 const infoLeft: Array<{ header: string; content: string }> = [
     {
@@ -32,7 +36,6 @@ const infoRight: Array<{ header: string; content: string }> = [
     <div class="text-center animate-fade-up mb-20">
         <GlowingHeader>About</GlowingHeader>
     </div>
-
     <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
         <SpotlightCard
             client:only="react"
@@ -74,4 +77,35 @@ const infoRight: Array<{ header: string; content: string }> = [
             }
         </SpotlightCard>
     </div>
+
+    <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"
+        >
+            <Image src={photo} alt="Photo" />
+            <div class="flex flex-col my-5 px-5 cursor-default">
+                <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"
+                    >
+                        <span class="font-bold text-sm">Buy me a coffee</span>
+                        <Icon name="simple-icons:buymeacoffee" />
+                    </StarBorder>
+                </a>
+            </div>
+        </SpotlightCard>
+    </div>
 </section>

src/components/About.astro

@@ -1,54 +1,58 @@
-import React from 'react';
+import React from "react";
 
-type StarBorderProps<T extends React.ElementType> = React.ComponentPropsWithoutRef<T> & {
-  as?: T;
-  className?: string;
-  children?: React.ReactNode;
-  color?: string;
-  speed?: React.CSSProperties['animationDuration'];
-  thickness?: number;
-};
+type StarBorderProps<T extends React.ElementType> =
+  React.ComponentPropsWithoutRef<T> & {
+    as?: T;
+    className?: string;
+    children?: React.ReactNode;
+    color?: string;
+    speed?: React.CSSProperties["animationDuration"];
+    thickness?: number;
+  };
 
-const StarBorder = <T extends React.ElementType = 'button'>({
+const StarBorder = <T extends React.ElementType = "button">({
   as,
-  className = '',
-  color = 'white',
-  speed = '6s',
+  className = "",
+  color = "white",
+  speed = "6s",
   thickness = 1,
   children,
   ...rest
 }: StarBorderProps<T>) => {
-  const Component = as || 'button';
+  const Component = as || "button";
 
   return (
     <Component
-      className={`relative inline-block overflow-hidden shadow ${className}`}
+      className={`relative overflow-hidden inline-block shadow ${className}`}
       {...(rest as any)}
       style={{
         padding: `${thickness}px 0`,
-        ...(rest as any).style
+        ...(rest as any).style,
       }}
     >
       <div
-        className="absolute w-[300%] h-[50%] opacity-70 bottom-[-11px] right-[-250%] rounded-full animate-star-movement-bottom z-0"
+        className={
+          "absolute w-[300%] h-[50%] opacity-70 bottom-[-11px] right-[-250%] rounded-full animate-star-movement-bottom z-0"
+        }
         style={{
           background: `radial-gradient(circle, ${color}, transparent 10%)`,
-          animationDuration: speed
+          animationDuration: speed,
         }}
       ></div>
       <div
         className="absolute w-[300%] h-[50%] opacity-70 -top-2.5 left-[-250%] rounded-full animate-star-movement-top z-0"
         style={{
           background: `radial-gradient(circle, ${color}, transparent 10%)`,
-          animationDuration: speed
+          animationDuration: speed,
         }}
       ></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">
+      <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}`}
+      >
         {children}
       </div>
     </Component>
   );
 };
 
 export default StarBorder;
-