added MoreSection component to profile page

2026-06-04 01:54:38 -04:00
parent 39a056db25
commit 0b161f3e2d
9 changed files with 317 additions and 61 deletions
--- a/components/ProfileMore.tsx
+++ b/components/ProfileMore.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { useState } from "react";
+import { MoreSection, PROFILE } from "@/data/content";
+import { useStaggerReveal, useWiggle } from "@/hooks/useAnimations";
+import "@/styles/more-section.css"
+
+export default function ProfileMore() {
+  const [delayTimer, setDelayTimer] = useState<number | null>(null);
+  const [hovered, setHovered] = useState<boolean | null>(null);
+  const [morePosition, setMorePosition] = useState<number>(PROFILE.moreSectionsStart ?? 0);
+
+  
+  
+  const { wiggling, progress, handlers } = useWiggle(500, () => {});
+  
+  function handleSectionExpand(){
+    setMorePosition(morePosition + 1);
+  }
+
+  return (
+      <div 
+      className="more-section-container"      
+      style={{
+        minHeight: "100px", 
+        width: "100%",
+        overflow: "hidden"
+        }}
+        >
+        {PROFILE.moreSections.map((item: MoreSection, i)=>{
+            return (
+                <div 
+                key={i}
+                style={{
+                   // display: i < morePosition ? "block" : "none",
+                    opacity: i < morePosition ? 1.0 : 0.0,
+                    transition: "all 0.3s ease",
+                    overflow: "hidden",
+                    minHeight: i < morePosition ? "5em" : "0em",
+                    height: i < morePosition ? "auto" : "0",
+                }}>
+                {item.title && (<h3
+                 style={{
+                    marginBottom: 8,
+                    fontFamily: "var(--mono)",
+                    fontSize: 11,
+                    color: "var(--muted)",
+                    letterSpacing: "0.08em",
+                    textTransform: "uppercase",
+                    }}>
+                    {item.title}
+                </h3>)}
+                <p style={{
+                     fontFamily: "var(--sans)",
+                    fontSize: 16,
+                    lineHeight: 1.7,
+                    color: "var(--fg-secondary)",
+                    margin: "0 0 40px 0",
+                    maxWidth: 560,
+                }}>{item.text}</p>
+                </div>
+            );
+        })}
+      
+      <div {...handlers} className={`drop-handle ${wiggling ? "wiggle" : ""}`}
+       onMouseEnter={() => {
+        if (delayTimer) return;
+        setHovered(true);
+        
+        let timer = window.setTimeout(() => {
+                handleSectionExpand();
+            }, 500);
+            setDelayTimer(timer);
+            
+       }}
+       onMouseLeave={() => {
+            if (delayTimer){
+                clearTimeout(delayTimer);
+                setDelayTimer(null);
+            }
+            setHovered(false);
+        }}
+       style={{ 
+        opacity: morePosition < PROFILE.moreSections.length ? 1.0 : 0.0,
+        backgroundColor: hovered ? "var(--surface)" : "var(--bg-raised",
+        width: "100%",
+        height: "2em",
+        display: "flex",
+        gap: 12,
+        margin: "0 0 40px 0",
+        border: `1px solid ${hovered ? "var(--accent)" : "var(--border)"}`,
+        bottom:  hovered ? "-10px" : "0px",
+        position: "relative",        
+        }}>
+
+        <svg height={"30px"} width={"30px"} fill="var(--fg-secondary)" version="1.1" id="Capa_1" style={{scale:"0.5"}} >
+            <g>
+            <path d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0
+                l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z"/>
+            </g>
+        </svg>
+        <span style={{
+                     fontFamily: "var(--sans)",
+                    fontSize: 12,
+                    lineHeight: 0.5,
+                    color: "var(--fg-secondary)",
+                    alignSelf: "center",
+                    textTransform: "uppercase"                   
+                }}>more?</span>
+        </div>
+        
+      </div>      
+  );
+}