cleanup

dromzeh · Dec 29, 2023 · eebbe0e · eebbe0e
1 parent c2f13ec
commit eebbe0e
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 109 deletions.
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
         "cmdk": "^0.2.0",
         "date-fns": "^2.30.0",
         "dayjs": "^1.11.10",
+        "framer-motion": "^10.16.16",
         "geist": "^1.2.0",
         "lucide-react": "^0.295.0",
         "million": "^2.6.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,11 +1,12 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import { GeistMono } from "geist/font/mono";
 import { GeistSans } from "geist/font/sans";
 
 const geist = GeistSans;
 
 export const metadata: Metadata = {
-    title: "home • dromzeh.dev",
+    title: "dromzeh.dev",
     metadataBase: new URL("https://dromzeh.dev"),
 };
 

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,9 +1,14 @@
 import { About } from "~/components/main/about";
 import { LanyardProfile } from "~/components/main/lanyard/profile";
 import { FollowGrid } from "~/components/socials/follow-grid";
-import { Badge } from "~/components/ui/badge";
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "home • dromzeh.dev",
+    metadataBase: new URL("https://dromzeh.dev"),
+};
 
 export default function Home() {
     return (
@@ -22,17 +27,19 @@ export default function Home() {
 
 function JoinWaitlist() {
     return (
-        <Link href="https://waitlist.wanderer.moe/" target="_blank">
-            <Badge
-                className="mb-8 font-normal text-sm group border-amber-500 text-amber-500 hover:bg-amber-500  hover:text-white transition-all duration-150"
-                variant={"outline"}
-            >
-                join wanderer.moe&apos;s update waitlist (beta access)
-                <ArrowRight
-                    size={16}
-                    className="inline-block ml-2 group-hover:translate-x-1 transition-transform duration-150"
-                />
-            </Badge>
-        </Link>
+        <>
+            <Link href="https://waitlist.wanderer.moe/" target="_blank">
+                <button className="mb-8 relative inline-flex h-6 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 group">
+                    <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E5B8F4_0%,#810CA8_50%,#E5B8F4_100%)] group-hover:animated-[spin_0.5s_linear_infinite]" />
+                    <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-3 py-1 text-sm font-medium text-white backdrop-blur-3xl">
+                        join wanderer.moe&apos;s update waitlist
+                        <ArrowRight
+                            size={16}
+                            className="inline-block ml-2 group-hover:translate-x-1 transition-transform duration-150"
+                        />
+                    </span>
+                </button>
+            </Link>
+        </>
     );
 }
diff --git a/src/components/main/about.tsx b/src/components/main/about.tsx
@@ -1,30 +1,22 @@
 "use client";
 import Link from "next/link";
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger,
-    TooltipProvider,
-} from "../ui/tooltip";
-import dayjs from "dayjs";
+
 import * as React from "react";
 
-const ageDateTimestamp = 1156118401000;
-const fallBackAge = 17;
+// const ageDateTimestamp = 1156118401000;
+// const fallBackAge = 17;
 
 export function About() {
     return (
         <div>
             <h2 className="text-neutral-100 mb-2">About</h2>
             <div className="flex flex-col space-y-2">
                 <p>
-                    👋 Hey! I&apos;m Marcel - <Age /> year-old full-stack
-                    developer currently residing in the UK. My primary focus is
-                    within serverless computing, infrastructure and backend
-                    development.
+                    Hi, I&apos;m Marcel - a full-stack developer focused within
+                    serverless computing and backend development.
                 </p>
                 <p>
-                    I made{" "}
+                    I&apos;m the creator of{" "}
                     <Link
                         href="https://wanderer.moe/"
                         target="_blank"
@@ -67,31 +59,3 @@ export function About() {
         </div>
     );
 }
-
-export function Age() {
-    const [age, setAge] = React.useState<number>(fallBackAge);
-
-    React.useEffect(() => {
-        const intervalId = setInterval(() => {
-            setAge(dayjs().diff(ageDateTimestamp, "year", true));
-        }, 50);
-        return () => {
-            clearInterval(intervalId);
-        };
-    }, []);
-
-    return (
-        <TooltipProvider delayDuration={100}>
-            <Tooltip>
-                <TooltipTrigger asChild>
-                    <span className="text-neutral-100 hover:text-neutral-500 transition-all duration-150 cursor-pointer">
-                        {age.toFixed(4)}
-                    </span>
-                </TooltipTrigger>
-                <TooltipContent>
-                    <p>{age.toFixed(12)}</p>
-                </TooltipContent>
-            </Tooltip>
-        </TooltipProvider>
-    );
-}
diff --git a/src/components/main/lanyard/profile.tsx b/src/components/main/lanyard/profile.tsx
@@ -26,67 +26,67 @@ export function LanyardProfile() {
     });
 
     if (loading || !status) {
-        return <Skeleton className="h-[56px] w-[200px] rounded-md" />;
+        return <Skeleton className="h-[84px] w-[300px] rounded-md" />;
     }
 
     return (
         <div className="flex flex-row space-x-2 items-center">
-            <Image
-                src={`https://cdn.discordapp.com/avatars/${status.discord_user.id}/${status.discord_user.avatar}`}
-                alt="discord avatar"
-                width={64}
-                height={64}
-                className="rounded-md mr-1"
-            />
+            <div className="relative mr-2">
+                <Image
+                    src={`https://cdn.discordapp.com/avatars/${status.discord_user.id}/${status.discord_user.avatar}`}
+                    alt="discord avatar"
+                    width={64}
+                    height={64}
+                    className="rounded-lg"
+                />
+                <div className="absolute bottom-0 right-0 transform translate-x-1 translate-y-1">
+                    <span className="relative flex h-4 w-4">
+                        <span
+                            className={`animate-ping transition-all absolute inline-flex h-full w-full rounded-full ${
+                                statusColorMap[status.discord_status]
+                            }`}
+                        ></span>
+                        <span
+                            className={`relative inline-flex rounded-full h-4 w-4 ${
+                                statusColorMap[status.discord_status]
+                            }`}
+                        ></span>
+                    </span>
+                </div>
+            </div>
             <div className="flex flex-col space-y-1">
                 <p className="text-neutral-100">
                     {status.discord_user.username}
                 </p>
 
-                <Badge variant={"outline"} className="font-normal">
-                    <div className="flex flex-row space-x-1 items-center">
-                        <span className="relative flex h-2 w-2 mr-2">
-                            <span
-                                className={`animate-ping absolute inline-flex h-full w-full rounded-full ${
-                                    statusColorMap[status.discord_status]
-                                }`}
-                            ></span>
-                            <span
-                                className={`relative inline-flex rounded-full h-2 w-2 ${
-                                    statusColorMap[status.discord_status]
-                                }`}
-                            ></span>
-                        </span>
-                        {status.activities[0] ? (
-                            <p className="text-neutral-400 text-sm">
-                                {status.activities[0].type === 2 ? (
-                                    <span>
-                                        Listening to
-                                        {status.spotify?.song.length! +
-                                            status.spotify?.artist.length! <
-                                        30 ? (
-                                            <span>
-                                                {" "}
-                                                {status.spotify?.song} by{" "}
-                                                {status.spotify?.artist}
-                                            </span>
-                                        ) : (
-                                            <span> Spotify</span>
-                                        )}
-                                    </span>
-                                ) : (
-                                    <span>
-                                        Playing {status.activities[0].name}
-                                    </span>
-                                )}
-                            </p>
-                        ) : (
-                            <p className="text-neutral-400 text-sm">
-                                {statusMap[status.discord_status]} on Discord
-                            </p>
-                        )}
-                    </div>
-                </Badge>
+                <div className="flex flex-row space-x-1 items-center">
+                    {status.activities[0] ? (
+                        <p className="text-neutral-400 text-sm">
+                            {status.activities[0].type === 2 ? (
+                                <span>
+                                    Listening to
+                                    {status.spotify?.song.length! +
+                                        status.spotify?.artist.length! <
+                                    30 ? (
+                                        <span>
+                                            {" "}
+                                            {status.spotify?.song} by{" "}
+                                            {status.spotify?.artist}
+                                        </span>
+                                    ) : (
+                                        <span> Spotify</span>
+                                    )}
+                                </span>
+                            ) : (
+                                <span>Playing {status.activities[0].name}</span>
+                            )}
+                        </p>
+                    ) : (
+                        <p className="text-neutral-400 text-sm">
+                            {statusMap[status.discord_status]} on Discord
+                        </p>
+                    )}
+                </div>
             </div>
         </div>
     );

diff --git a/src/components/socials/follow-grid.tsx b/src/components/socials/follow-grid.tsx
@@ -90,7 +90,7 @@ export function FollowGrid() {
                         height={16}
                     />
                     <p className="text-neutral-100 group-hover:text-neutral-500 transition-colors duration-150">
-                        @dromzeh (7.5K)
+                        @dromzeh
                     </p>
                 </Link>
             </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -90,7 +90,7 @@ export function FollowGrid() { @@
                             height={16}
                         />
                         <p className="text-neutral-100 group-hover:text-neutral-500 transition-colors duration-150">
-                            @dromzeh (7.5K)
+                            @dromzeh
                         </p>
                     </Link>
                 </div>
@@ Expand Down @@