feat: New Logo

Author: raexera

public/assets/logo-dark.svg

@@ -0,0 +1,60 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+interface PhotoCircleProps {
+  lightSrc: string;
+  darkSrc: string;
+  alt: string;
+  sizeClasses?: string;
+}
+
+export default function Logo({
+  lightSrc,
+  darkSrc,
+  alt,
+  sizeClasses = "w-72 h-72 xl:w-96 xl:h-96",
+}: PhotoCircleProps) {
+  return (
+    <div className={`relative ${sizeClasses}`}>
+      <div className="h-full w-full">
+        <img
+          src={lightSrc}
+          alt={alt}
+          className="block h-full w-full rounded-full object-cover dark:hidden"
+        />
+        <img
+          src={darkSrc}
+          alt={alt}
+          className="hidden h-full w-full rounded-full object-cover dark:block"
+        />
+      </div>
+      <motion.svg
+        className="absolute left-1/2 top-1/2 h-[calc(100%+1rem)] w-[calc(100%+1rem)] -translate-x-1/2 -translate-y-1/2"
+        fill="transparent"
+        viewBox="0 0 506 506"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <motion.circle
+          cx="253"
+          cy="253"
+          r="250"
+          stroke="currentColor"
+          strokeWidth="4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          initial={{ strokeDasharray: "24 10 0 0" }}
+          animate={{
+            strokeDasharray: ["15 120 25 25", "16 25 92 72", "4 250 22 22"],
+            rotate: [120, 360],
+          }}
+          transition={{
+            duration: 20,
+            repeat: Infinity,
+            repeatType: "reverse",
+          }}
+        />
+      </motion.svg>
+    </div>
+  );
+}

public/assets/logo-light.svg

@@ -1,6 +1,6 @@
 ---
 import Button from "@/components/Button.astro";
-import Photo from "@/components/Photo";
+import Logo from "@/components/Logo.tsx";
 import BaseLayout from "@/layouts/BaseLayout.astro";
 import { SITE } from "@/consts";
 import { basics } from "@cv";
@@ -12,7 +12,6 @@ const { name, label, summary, socials } = basics;
     <div class="flex h-full items-center justify-center">
       <div class="container mx-auto my-24 xl:my-0">
         <div class="flex flex-col items-center justify-between xl:flex-row">
-          <!-- Text Section -->
           <div class="order-2 text-center xl:order-none xl:text-left">
             <span class="text-xl">Hi, my name is</span>
             <h1 class="mb-6">
@@ -40,9 +39,13 @@ const { name, label, summary, socials } = basics;
               }
             </div>
           </div>
-          <!-- Photo Section -->
           <div class="order-1 mb-8 xl:order-none xl:mb-0">
-            <Photo client:load imageSrc="/assets/photo.png" imageAlt={name} />
+            <Logo
+              client:load
+              lightSrc="/assets/logo-light.svg"
+              darkSrc="/assets/logo-dark.svg"
+              alt={name}
+            />
           </div>
         </div>
       </div>