import { useState, useEffect } from "react" import { motion } from "framer-motion" import { Container } from "@/components/ui/container" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { Button } from "@/components/ui/button" // Enhanced portfolio data with technical metadata const portfolioItems = [ { src: "https://picsum.photos/seed/digital1/600/400", title: "Digital Art", metadata: { size: "2.4MB", dimensions: "1920x1080", format: "PNG", colors: ["#1a1a2e", "#16213e", "#0f3460", "#e94560"] } }, { src: "https://picsum.photos/seed/ui2/600/400", title: "UI Design", metadata: { size: "1.8MB", dimensions: "1440x900", format: "Figma", colors: ["#2c3e50", "#3498db", "#e74c3c", "#ecf0f1"] } }, { src: "https://picsum.photos/seed/brand3/600/400", title: "Brand Identity", metadata: { size: "3.1MB", dimensions: "2000x1500", format: "SVG", colors: ["#000000", "#ffffff", "#ff6b35", "#f7931e"] } }, { src: "https://picsum.photos/seed/motion4/600/400", title: "Motion Graphics", metadata: { size: "5.2MB", dimensions: "3840x2160", format: "MP4", colors: ["#2b2d42", "#8d99ae", "#edf2f4", "#ef233c"] } }, { src: "https://picsum.photos/seed/3d5/600/400", title: "3D Rendering", metadata: { size: "4.7MB", dimensions: "2560x1440", format: "EXR", colors: ["#1e1e2e", "#3b3b58", "#6c5b7b", "#c06c84"] } }, { src: "https://picsum.photos/seed/photo6/600/400", title: "Photography", metadata: { size: "1.2MB", dimensions: "4000x3000", format: "RAW", colors: ["#2d1b2e", "#4a1c40", "#7b2d37", "#e0aaff"] } }, ] // Geometric clip paths for visual variety const clipPaths = [ "polygon(10% 0%, 100% 0%, 100% 90%, 0% 100%)", "polygon(0% 0%, 100% 0%, 90% 100%, 0% 90%)", "polygon(5% 0%, 100% 0%, 95% 100%, 0% 95%)", "polygon(0% 5%, 100% 0%, 100% 95%, 5% 100%)", "polygon(8% 0%, 100% 0%, 92% 100%, 0% 92%)", "polygon(0% 0%, 92% 0%, 100% 100%, 8% 100%)", ] interface PortfolioItem { src: string title: string metadata: { size: string dimensions: string format: string colors: string[] } } export default function App() { return (

) } function HeroSection() { return (

{/* Geometric Grid Overlay */}

Design Engineering

v2.4.1

Precision{" "} Crafted{" "} Interfaces

A living portfolio of design systems, component libraries, and interactive experiences built with mathematical precision and artistic vision.

) } function CarouselSection() { const [isHovered, setIsHovered] = useState(false) const [loadedItems, setLoadedItems] = useState>(new Set()) const [currentIndex, setCurrentIndex] = useState(0) // Duplicate for seamless loop const items: PortfolioItem[] = [...portfolioItems, ...portfolioItems] const handleImageLoad = (index: number) => { setLoadedItems(prev => new Set([...prev, index])) } // Calculate visual progress const progress = ((currentIndex % portfolioItems.length) / portfolioItems.length) * 100 return (

{/* Background Texture */}

Portfolio Showcase Built by creators, for creators.

Explore a curated collection of digital experiences crafted with precision and creativity.

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} aria-label="Portfolio carousel" role="region" > {items.map((item, i) => ( {/* Image Container with Loading State */}

{!loadedItems.has(i) && (

)}

handleImageLoad(i)} loading="lazy" /> {/* Overlay on Hover */}

{item.title}

Active Project

{/* Technical Metadata Bar */}

ID: {String(i).padStart(4, "0")}

))} {/* Gradient Overlays for Seamless Loop */}

{/* Controls & Stats */}

12+

Projects

System Metrics

Real-time performance data and component statistics. Updated live as you interact.

98.7%

Performance

0.42s

Load Time

A+

Accessibility

) } function Footer() { return ( ) }

Design Portfolio Carousel