feat: better ux design

Author: zmh-program

public/sh1n3zz.webp

@@ -1,4 +1,6 @@
 import { cn } from "@/lib/utils";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
 
 export interface OrbitingCirclesProps {
   className?: string;
@@ -77,6 +79,15 @@ export function TechStackCircles({
   outerSize = "size-[50px]",
   duration = 20,
 }: TechStackCirclesProps) {
+  const [mounted, setMounted] = useState(false);
+  const { resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const iconTheme = mounted && resolvedTheme === "light" ? "light" : "dark";
+
   return (
     <>
       <span className="pointer-events-none text-4xl font-semibold text-foreground/5">
@@ -91,7 +102,7 @@ export function TechStackCircles({
           radius={innerRadius}
         >
           <img
-            src={`https://skillicons.dev/icons?i=${icon}`}
+            src={`https://skillicons.dev/icons?i=${icon}&theme=${iconTheme}`}
             alt={`${icon} Icon`}
             className="w-full h-full object-contain"
           />
@@ -107,7 +118,7 @@ export function TechStackCircles({
           reverse
         >
           <img
-            src={`https://skillicons.dev/icons?i=${icon}`}
+            src={`https://skillicons.dev/icons?i=${icon}&theme=${iconTheme}`}
             alt={`${icon} Icon`}
             className="w-full h-full object-contain"
           />

src/components/orbiting-circles.tsx

@@ -12,23 +12,17 @@ interface TimelineProps {
 
 export function Timeline({ events, className }: TimelineProps) {
   return (
-    <div className={cn("relative space-y-0", className)}>
-      <div className="absolute top-0 left-[3.25rem] w-[1px] h-full bg-border/60" />
+    <div className={cn("relative", className)}>
+      <div className="absolute top-0 left-8 w-px h-full bg-border" />
       {events.map((event, index) => (
         <div
           key={index}
-          className="group relative flex gap-4 items-center py-2 hover:bg-muted/50 rounded-md transition-all duration-300 px-1.5"
+          className="group relative flex gap-3 items-center py-1.5 hover:bg-muted/50 rounded-md transition-colors px-1"
         >
-          <div className="text-sm font-medium text-primary/80 w-12 flex-shrink-0 relative z-10 cursor-default">
+          <div className="text-xs font-medium text-muted-foreground w-7 flex-shrink-0 relative z-10">
             {event.year}
           </div>
-          <div
-            className="absolute left-[3.25rem] w-[1px] h-full bg-gradient-to-b from-transparent via-primary/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
-            style={{
-              transform: "translateX(-50%)",
-            }}
-          />
-          <p className="text-xs text-muted-foreground group-hover:text-foreground/80 transition-colors duration-300">
+          <p className="text-xs text-muted-foreground group-hover:text-foreground transition-colors">
             {event.description}
           </p>
         </div>