From a9b3a593e806998b7abfa0c5bee523a190517f2e Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 7 Mar 2026 21:36:31 +0000
Subject: [PATCH] Changes

---
 src/pages/Index.tsx | 137 +++++++++++++++++++++-----------------------
 1 file changed, 64 insertions(+), 73 deletions(-)

diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 3cbe607..5b6a7cc 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -18,6 +18,7 @@ const Index = () => {
   const [lines, setLines] = useState<{ x1: number; y1: number; x2: number; y2: number }[]>([]);
   const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
   const [mounted, setMounted] = useState(false);
+  const [dims, setDims] = useState({ w: 0, h: 0 });
 
   const updateLines = useCallback(() => {
     if (!containerRef.current || !avatarRef.current) return;
@@ -25,13 +26,17 @@ const Index = () => {
     const avatarRect = avatarRef.current.getBoundingClientRect();
     const cx = avatarRect.left + avatarRect.width / 2 - containerRect.left;
     const cy = avatarRect.top + avatarRect.height / 2 - containerRect.top;
+    setDims({ w: containerRect.width, h: containerRect.height });
 
     const newLines = cardRefs.current.map((card) => {
       if (!card) return { x1: cx, y1: cy, x2: cx, y2: cy };
       const cardRect = card.getBoundingClientRect();
-      const cardCx = cardRect.left + cardRect.width / 2 - containerRect.left;
-      const cardCy = cardRect.top + cardRect.height / 2 - containerRect.top;
-      return { x1: cx, y1: cy, x2: cardCx, y2: cardCy };
+      return {
+        x1: cx,
+        y1: cy,
+        x2: cardRect.left + cardRect.width / 2 - containerRect.left,
+        y2: cardRect.top + cardRect.height / 2 - containerRect.top,
+      };
     });
     setLines(newLines);
   }, []);
@@ -40,29 +45,30 @@ const Index = () => {
     updateLines();
     const timer = setTimeout(() => setMounted(true), 100);
     window.addEventListener('resize', updateLines);
-    return () => {
-      window.removeEventListener('resize', updateLines);
-      clearTimeout(timer);
-    };
+    return () => { window.removeEventListener('resize', updateLines); clearTimeout(timer); };
   }, [updateLines]);
 
   useEffect(() => {
-    // Re-calc after fonts/images load
-    const timer = setTimeout(updateLines, 500);
-    return () => clearTimeout(timer);
+    const t = setTimeout(updateLines, 500);
+    return () => clearTimeout(t);
   }, [updateLines]);
 
   const handleMouseMove = useCallback((e: React.MouseEvent) => {
-    if (!containerRef.current) return;
-    const rect = containerRef.current.getBoundingClientRect();
-    setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    setMousePos({ x: e.clientX, y: e.clientY });
   }, []);
 
+  // On mobile, use a smaller radius
+  const isMobile = dims.w < 640;
+  const radius = isMobile ? 140 : 220;
+  const count = items.length;
+  // Start from top (-90deg) and spread evenly
+  const angleOffset = -90;
+
   return (
     <div
       ref={containerRef}
       onMouseMove={handleMouseMove}
-      className="min-h-screen bg-background relative overflow-hidden flex flex-col items-center justify-start py-10 md:py-16 px-4"
+      className="min-h-screen bg-background relative overflow-hidden flex items-center justify-center"
     >
       {/* Global mouse glow */}
       <div
@@ -97,100 +103,85 @@ const Index = () => {
         </defs>
         {lines.map((line, i) => (
           <g key={i}>
-            {/* Glow line */}
             <line
               x1={line.x1} y1={line.y1} x2={line.x2} y2={line.y2}
-              stroke="hsl(25 95% 55% / 0.1)"
+              stroke="hsl(25 95% 55% / 0.08)"
               strokeWidth="4"
               filter="url(#glow)"
             />
-            {/* Main line */}
             <line
               x1={line.x1} y1={line.y1} x2={line.x2} y2={line.y2}
               stroke="url(#lineGrad)"
               strokeWidth="1.5"
               strokeDasharray="6 4"
             />
-            {/* End dot on card */}
             <circle cx={line.x2} cy={line.y2} r="3" fill="hsl(25 95% 55% / 0.4)" />
           </g>
         ))}
-        {/* Center dot */}
         {lines.length > 0 && (
           <circle cx={lines[0]?.x1} cy={lines[0]?.y1} r="5" fill="hsl(25 95% 55% / 0.6)" />
         )}
       </svg>
 
-      {/* Center Avatar Hub */}
-      <div ref={avatarRef} className="relative z-10 mb-8 md:mb-12 flex flex-col items-center">
-        <div className="glass-card rounded-full p-1.5 ring-2 ring-primary/20">
-          <img
-            src={avatar}
-            alt="Mohamad"
-            className="w-28 h-28 md:w-36 md:h-36 rounded-full"
-          />
+      {/* Hub container - centered */}
+      <div className="relative z-10" style={{ width: radius * 2 + (isMobile ? 120 : 160), height: radius * 2 + (isMobile ? 120 : 160) }}>
+        {/* Center Avatar */}
+        <div
+          ref={avatarRef}
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center"
+        >
+          <div className="glass-card rounded-full p-1.5 ring-2 ring-primary/20">
+            <img
+              src={avatar}
+              alt="Mohamad"
+              className="w-24 h-24 md:w-32 md:h-32 rounded-full"
+            />
+          </div>
+          <div className="mt-3 text-center whitespace-nowrap">
+            <h1 className="text-lg md:text-xl font-heading font-bold text-foreground">👋 Hey!</h1>
+            <p className="text-xs text-muted-foreground">
+              I'm <span className="text-gradient font-semibold">Mohamad</span>
+            </p>
+          </div>
         </div>
-        <div className="mt-4 text-center">
-          <h1 className="text-2xl md:text-3xl font-heading font-bold text-foreground">
-            👋 Hey There!
-          </h1>
-          <p className="text-muted-foreground text-sm mt-1">
-            I'm <span className="text-gradient font-semibold">Mohamad</span> — welcome to my space.
-          </p>
-        </div>
-      </div>
 
-      {/* Cards arranged around */}
-      <div className="relative z-10 w-full max-w-3xl">
-        {/* Top row - 3 cards */}
-        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 md:gap-4 mb-3 md:mb-4">
-          {items.slice(0, 3).map((item, i) => (
+        {/* Orbiting cards */}
+        {items.map((item, i) => {
+          const angle = ((360 / count) * i + angleOffset) * (Math.PI / 180);
+          const x = Math.cos(angle) * radius;
+          const y = Math.sin(angle) * radius;
+          const cardW = isMobile ? 110 : 130;
+          const cardH = isMobile ? 80 : 90;
+
+          return (
             <a
               key={item.label}
               ref={(el) => { cardRefs.current[i] = el; }}
               href={item.href}
               target="_blank"
               rel="noopener noreferrer"
-              className="block"
+              className="absolute"
+              style={{
+                left: `calc(50% + ${x}px - ${cardW / 2}px)`,
+                top: `calc(50% + ${y}px - ${cardH / 2}px)`,
+                width: cardW,
+              }}
             >
-              <GlassCard className="p-4 md:p-5 h-full link-arrow-parent cursor-pointer">
+              <GlassCard className="p-3 md:p-4 link-arrow-parent cursor-pointer">
                 <div className="flex items-start justify-between">
-                  <item.icon className="w-5 h-5 text-primary mb-2" />
-                  <ExternalLink className="w-3.5 h-3.5 text-muted-foreground link-arrow" />
+                  <item.icon className="w-4 h-4 text-primary mb-1.5" />
+                  <ExternalLink className="w-3 h-3 text-muted-foreground link-arrow" />
                 </div>
-                <p className="font-heading font-semibold text-foreground text-sm md:text-base">{item.label}</p>
-                <p className="text-xs text-muted-foreground mt-0.5">{item.desc}</p>
+                <p className="font-heading font-semibold text-foreground text-xs md:text-sm leading-tight">{item.label}</p>
+                <p className="text-[10px] text-muted-foreground mt-0.5 leading-tight">{item.desc}</p>
               </GlassCard>
             </a>
-          ))}
-        </div>
-
-        {/* Bottom row - 2 cards centered */}
-        <div className="grid grid-cols-2 gap-3 md:gap-4 max-w-md mx-auto">
-          {items.slice(3).map((item, i) => (
-            <a
-              key={item.label}
-              ref={(el) => { cardRefs.current[i + 3] = el; }}
-              href={item.href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="block"
-            >
-              <GlassCard className="p-4 md:p-5 h-full link-arrow-parent cursor-pointer">
-                <div className="flex items-start justify-between">
-                  <item.icon className="w-5 h-5 text-primary mb-2" />
-                  <ExternalLink className="w-3.5 h-3.5 text-muted-foreground link-arrow" />
-                </div>
-                <p className="font-heading font-semibold text-foreground text-sm md:text-base">{item.label}</p>
-                <p className="text-xs text-muted-foreground mt-0.5">{item.desc}</p>
-              </GlassCard>
-            </a>
-          ))}
-        </div>
+          );
+        })}
       </div>
 
       {/* Footer */}
-      <p className="relative z-10 text-center text-xs text-muted-foreground font-mono mt-10">
+      <p className="absolute bottom-4 left-1/2 -translate-x-1/2 text-xs text-muted-foreground font-mono z-10">
         damaj.tech
       </p>
     </div>