fix: Current path cards, things i love cards

Author: btkcodedev

components/GridItems/Languages.tsx

@@ -64,11 +64,11 @@ const Languages = ({ item }: { item: CombinedInterfaces }) => {
       animate={{ opacity: 1 }}
       transition={{ duration: 0.5, ease: "easeInOut" }}
     >
-      <div className="flex flex-col w-full h-full overflow-hidden rounded-3xl">
+      <div className="relative flex h-full w-full overflow-hidden rounded-3xl">
         {displayText.length > 0 && (
-          <div className="flex items-start w-full h-full overflow-hidden p-8 justify-start align-center">
+          <div className="pointer-events-none absolute inset-x-0 top-0 z-30 p-4 md:p-8">
             <motion.div
-              className="z-10 bg-white dark:bg-neutral-900 flex items-start p-3 text-sm font-medium text-black dark:text-white md:h-16 rounded-lg w-full"
+              className="flex max-h-28 w-full items-start overflow-hidden rounded-lg bg-white p-3 text-sm font-medium text-black dark:bg-neutral-900 dark:text-white"
               initial={{ opacity: 0.5 }}
               animate={{ opacity: 0.9 }}
               style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}
@@ -77,7 +77,7 @@ const Languages = ({ item }: { item: CombinedInterfaces }) => {
             </motion.div>
           </div>
         )}
-        <div className="relative flex flex-col items-end justify-end w-full h-full overflow-hidden rounded-3xl p-1">
+        <div className="relative flex h-full w-full flex-col items-end justify-end overflow-hidden rounded-3xl p-1">
           {/* Overlay */}
           <div className="absolute inset-0 z-10 bg-gradient-to-b from-transparent via-neutral-950/30 to-neutral-950/30" />
           {/* Image */}

components/LeftPanel/index.tsx

@@ -6,9 +6,98 @@ import { IconTypes, LeftPanelOptions } from "@/components/Types/enum";
 import { LeftPanelProps } from "@/components/Types";
 import { useState, useEffect, useRef } from "react";
 import { motion, AnimatePresence, PanInfo } from "framer-motion";
-import { FiMenu, FiX, FiChevronLeft } from "react-icons/fi";
+import { FiMenu, FiX, FiChevronLeft, FiChevronRight } from "react-icons/fi";
 import { siteConfig } from "@/config/site-config";
 
+const GoalCardStack = ({
+  controls = false,
+  swipe = true,
+  swipeAxis = "x",
+}: {
+  controls?: boolean;
+  swipe?: boolean;
+  swipeAxis?: "x" | "y";
+}) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const goals = siteConfig.currentGoalItems;
+  const total = goals.length;
+  const nextGoal = () => setActiveIndex((index) => (index + 1) % total);
+  const prevGoal = () => setActiveIndex((index) => (index - 1 + total) % total);
+
+  const handleSwipe = (
+    _: MouseEvent | TouchEvent | PointerEvent,
+    info: PanInfo,
+  ) => {
+    const offset = swipeAxis === "y" ? info.offset.y : info.offset.x;
+    if (offset < -50) nextGoal();
+    if (offset > 50) prevGoal();
+  };
+
+  return (
+    <div
+      className="relative mt-6 h-40"
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      {goals.map((goal, index) => {
+        const stackIndex = (index - activeIndex + total) % total;
+        if (stackIndex > 2) return null;
+
+        return (
+          <motion.div
+            key={goal.title}
+            className="absolute inset-x-0 top-0 h-32 rounded-2xl border border-white/10 p-5 text-white shadow-md"
+            style={{
+              background: goal.color,
+              zIndex: 30 - stackIndex,
+            }}
+            animate={{
+              y: stackIndex * 12,
+              scale: 1 - stackIndex * 0.04,
+              opacity: 1 - stackIndex * 0.18,
+            }}
+            drag={swipe && stackIndex === 0 ? swipeAxis : false}
+            dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
+            dragElastic={0.25}
+            onDragEnd={handleSwipe}
+            whileTap={
+              swipe && stackIndex === 0 ? { cursor: "grabbing" } : undefined
+            }
+          >
+            <p className="text-sm font-medium text-white/75">{goal.label}</p>
+            <p className="mt-2 text-lg font-semibold leading-snug">
+              {goal.title}
+            </p>
+            <p className="mt-2 text-xs leading-relaxed text-white/75">
+              {goal.description}
+            </p>
+          </motion.div>
+        );
+      })}
+
+      {controls && (
+        <div className="absolute bottom-0 right-0 z-40 flex gap-2">
+          <button
+            type="button"
+            onClick={prevGoal}
+            className="grid h-8 w-8 place-items-center rounded-lg border border-neutral-200 bg-white text-neutral-700 shadow-sm dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
+            aria-label="Previous goal"
+          >
+            <FiChevronLeft size={16} />
+          </button>
+          <button
+            type="button"
+            onClick={nextGoal}
+            className="grid h-8 w-8 place-items-center rounded-lg border border-neutral-200 bg-white text-neutral-700 shadow-sm dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
+            aria-label="Next goal"
+          >
+            <FiChevronRight size={16} />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
 const LeftPanel = ({ clickedCategory, handleInteraction }: LeftPanelProps) => {
   const [clicked, setClicked] = useState(LeftPanelOptions.ABOUT);
   const [isOpen, setIsOpen] = useState(true);
@@ -37,27 +126,33 @@ const LeftPanel = ({ clickedCategory, handleInteraction }: LeftPanelProps) => {
 
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') closeMenu();
+      if (e.key === "Escape") closeMenu();
     };
-    
+
     if (isOpen) {
-      document.addEventListener('keydown', handleEscape);
-      document.body.style.overflow = 'hidden'; 
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
     }
-    
+
     return () => {
-      document.removeEventListener('keydown', handleEscape);
-      document.body.style.overflow = 'unset';
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
     };
   }, [isOpen]);
 
   // Handle drag to close
-  const handleDrag = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+  const handleDrag = (
+    event: MouseEvent | TouchEvent | PointerEvent,
+    info: PanInfo,
+  ) => {
     const progress = Math.max(0, Math.min(1, -info.offset.x / 250));
     setDragProgress(progress);
   };
 
-  const handleDragEnd = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+  const handleDragEnd = (
+    event: MouseEvent | TouchEvent | PointerEvent,
+    info: PanInfo,
+  ) => {
     if (info.offset.x < -100 || info.velocity.x < -500) {
       closeMenu();
     }
@@ -67,7 +162,7 @@ const LeftPanel = ({ clickedCategory, handleInteraction }: LeftPanelProps) => {
   return (
     <>
       {/* Mobile Header with Hamburger */}
-      <motion.div 
+      <motion.div
         className="xl:hidden flex items-center justify-between p-4 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-md border-b border-neutral-200 dark:border-neutral-700 sticky top-0 z-40"
         initial={{ y: -100 }}
         animate={{ y: 0 }}
@@ -83,18 +178,18 @@ const LeftPanel = ({ clickedCategory, handleInteraction }: LeftPanelProps) => {
           <FiMenu size={20} />
           <span className="text-sm font-medium">Menu</span>
         </motion.button>
-        
-        <motion.h1 
+
+        <motion.h1
           className="text-lg font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
           initial={{ opacity: 0, x: 20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ delay: 0.1 }}
         >
-          {clicked === LeftPanelOptions.ABOUT ? "Portfolio": clicked}
+          {clicked === LeftPanelOptions.ABOUT ? "Portfolio" : clicked}
         </motion.h1>
       </motion.div>
 
-      <motion.div 
+      <motion.div
         className="hidden xl:flex flex-col justify-between py-6 xl:max-w-sm xl:py-8 xl:h-full"
         initial={{ x: -50, opacity: 0 }}
         animate={{ x: 0, opacity: 1 }}
@@ -121,6 +216,13 @@ const LeftPanel = ({ clickedCategory, handleInteraction }: LeftPanelProps) => {
               </motion.div>
             ))}
           </div>
+          <motion.div
+            initial={{ y: 20, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ delay: 0.75 }}
+          >
+            <GoalCardStack controls swipe={false} />
+          </motion.div>
           <motion.div
             className="hidden mt-6 xl:flex cursor-pointer relative group"
             onClick={handleInteraction}
@@ -150,27 +252,27 @@ const LeftPanel = ({ clickedCategory, handleInteraction }: LeftPanelProps) => {
               onClick={closeMenu}
               transition={{ duration: 0.2 }}
             />
-            
+
             {/* Slide-out Panel */}
             <motion.div
               ref={constraintsRef}
               className="fixed inset-0 z-50 w-screen xl:hidden"
               initial={{ x: "-100%" }}
               animate={{ x: 0 }}
               exit={{ x: "-100%" }}
-              transition={{ 
-                type: "spring", 
-                stiffness: 400, 
+              transition={{
+                type: "spring",
+                stiffness: 400,
                 damping: 30,
-                mass: 0.8
+                mass: 0.8,
               }}
               drag="x"
               dragConstraints={{ left: -250, right: 0 }}
               dragElastic={0.1}
               onDrag={handleDrag}
               onDragEnd={handleDragEnd}
               style={{
-                x: dragProgress ? -dragProgress * 250 : 0
+                x: dragProgress ? -dragProgress * 250 : 0,
               }}
             >
               <div className="h-full bg-white dark:bg-neutral-900 shadow-2xl flex flex-col">
@@ -199,9 +301,9 @@ const LeftPanel = ({ clickedCategory, handleInteraction }: LeftPanelProps) => {
                   >
                     <Bio compact />
                   </motion.div>
-                  
+
                   <div className="border-b my-6 border-neutral-200 dark:border-neutral-700" />
-                  
+
                   <div className="flex flex-col gap-2">
                     {menuItems.map((item, index) => (
                       <motion.div
@@ -215,13 +317,25 @@ const LeftPanel = ({ clickedCategory, handleInteraction }: LeftPanelProps) => {
                           category={item.icon}
                           href={`#`}
                           clickedCategory={clickedCategory}
-                          setClicked={() => handleMenuClick(item.text as LeftPanelOptions)}
+                          setClicked={() =>
+                            handleMenuClick(item.text as LeftPanelOptions)
+                          }
                           clicked={clicked}
                         />
                       </motion.div>
                     ))}
                   </div>
 
+                  <div className="flex-1 overflow-y-auto pt-6">
+                    <motion.div
+                      initial={{ y: 20, opacity: 0 }}
+                      animate={{ y: 0, opacity: 1 }}
+                      transition={{ delay: 0.35 }}
+                    >
+                      <GoalCardStack swipeAxis="y" />
+                    </motion.div>
+                  </div>
+
                   <motion.div
                     className="mt-8 flex cursor-pointer relative group"
                     onClick={handleHiddenClick}
@@ -235,26 +349,26 @@ const LeftPanel = ({ clickedCategory, handleInteraction }: LeftPanelProps) => {
                 </div>
 
                 {/* Drag Hint */}
-                <motion.div 
+                <motion.div
                   className="absolute right-4 top-1/2 transform -translate-y-1/2 opacity-30 pointer-events-none"
-                  animate={{ 
+                  animate={{
                     x: [0, -10, 0],
-                    opacity: [0.3, 0.6, 0.3] 
+                    opacity: [0.3, 0.6, 0.3],
                   }}
-                  transition={{ 
-                    duration: 2, 
+                  transition={{
+                    duration: 2,
                     repeat: Infinity,
-                    ease: "easeInOut" 
+                    ease: "easeInOut",
                   }}
                 >
                   <FiChevronLeft size={24} />
                 </motion.div>
 
-                <div 
+                <div
                   className="absolute right-0 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-500 to-purple-500 rounded-l-full transition-all duration-200"
-                  style={{ 
+                  style={{
                     opacity: dragProgress,
-                    transform: `scaleY(${0.3 + dragProgress * 0.7})`
+                    transform: `scaleY(${0.3 + dragProgress * 0.7})`,
                   }}
                 />
               </div>

config/site-config.ts

@@ -642,6 +642,27 @@ const GridItems: GridItemInterface[] = [
   },
 ];
 
+const CurrentGoalItems = [
+  {
+    label: "My current goal",
+    title: "Neuro AI RSE career path",
+    description: "Build toward research software roles in neuro AI.",
+    color: "linear-gradient(135deg, #2563eb, #9333ea)",
+  },
+  {
+    label: "Now learning",
+    title: "Neuroscience tooling",
+    description: "MNE, signal workflows, reproducible analysis.",
+    color: "linear-gradient(135deg, #0891b2, #16a34a)",
+  },
+  {
+    label: "Next proof",
+    title: "Open-source research work",
+    description: "More useful commits, notebooks, and small tools.",
+    color: "linear-gradient(135deg, #ea580c, #db2777)",
+  },
+];
+
 export const currentYear = new Date().getFullYear();
 
 export const siteConfig = {
@@ -661,4 +682,5 @@ export const siteConfig = {
   achievementItems: AchItems,
   experienceItems: ExpItems,
   projectItems: ProjItems,
+  currentGoalItems: CurrentGoalItems,
 } as const;