Upload components/Work.js with huggingface_hub

components/Work.js

@@ -0,0 +1,127 @@
+'use client';
+
+import { motion, useScroll, useTransform } from 'framer-motion';
+import { ArrowRight, Github, ExternalLink } from 'lucide-react';
+import { useRef } from 'react';
+
+const projects = [
+  {
+    title: 'NeuroGenesis',
+    category: 'Generative AI',
+    description: 'A diffusion model capable of generating high-fidelity synthetic data for autonomous training.',
+    image: 'https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=1965&auto=format&fit=crop',
+    tags: ['PyTorch', 'CUDA', 'Diffusion'],
+  },
+  {
+    title: 'Sentient Grid',
+    category: 'Reinforcement Learning',
+    description: 'Multi-agent system optimizing energy distribution in smart cities using advanced policy gradients.',
+    image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=2070&auto=format&fit=crop',
+    tags: ['RL', 'Python', 'IoT'],
+  },
+  {
+    title: 'Vision Cortex',
+    category: 'Computer Vision',
+    description: 'Real-time semantic segmentation pipeline running on edge devices with <10ms latency.',
+    image: 'https://images.unsplash.com/photo-1555255707-c07966088b7b?q=80&w=2070&auto=format&fit=crop',
+    tags: ['OpenCV', 'TensorRT', 'C++'],
+  },
+];
+
+export default function Work() {
+  const containerRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ['start end', 'end start'],
+  });
+
+  return (
+    <section id="projects" ref={containerRef} className="py-32 px-6 relative overflow-hidden">
+      <div className="max-w-7xl mx-auto">
+        <motion.div
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          className="mb-20 flex flex-col md:flex-row justify-between items-end"
+        >
+          <div>
+            <h2 className="font-serif text-4xl md:text-6xl mb-4">Selected Works</h2>
+            <p className="font-mono text-sm text-faint max-w-md">
+              Research initiatives and commercial applications pushing the boundaries of intelligence.
+            </p>
+          </div>
+          <div className="mt-6 md:mt-0 font-mono text-xs uppercase tracking-widest border border-white/20 px-4 py-2">
+            2023 - 2024
+          </div>
+        </motion.div>
+
+        <div className="flex flex-col gap-32">
+          {projects.map((project, index) => (
+            <ProjectCard key={index} project={project} index={index} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ProjectCard({ project, index }) {
+  const ref = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ['start end', 'end start'],
+  });
+  
+  const scale = useTransform(scrollYProgress, [0, 0.5, 1], [0.8, 1, 0.8]);
+  const x = useTransform(scrollYProgress, [0, 0.5, 1], [index % 2 === 0 ? -100 : 100, 0, index % 2 === 0 ? 100 : -100]);
+  const opacity = useTransform(scrollYProgress, [0, 0.2, 0.8, 1], [0, 1, 1, 0]);
+
+  return (
+    <motion.div
+      ref={ref}
+      style={{ scale, x, opacity }}
+      className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center group"
+    >
+      {/* Image Section */}
+      <div className={`lg:col-span-7 relative overflow-hidden ${index % 2 !== 0 ? 'lg:order-2' : ''}`}>
+        <div className="absolute inset-0 bg-white/10 z-10 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+        <img 
+          src={project.image} 
+          alt={project.title}
+          className="w-full h-[400px] md:h-[600px] object-cover grayscale group-hover:grayscale-0 transition-all duration-700 ease-in-out transform group-hover:scale-105"
+        />
+        {/* Decorative Frame */}
+        <div className="absolute top-4 left-4 w-full h-full border border-white/20 -z-10 group-hover:translate-x-2 group-hover:translate-y-2 transition-transform duration-300"></div>
+      </div>
+
+      {/* Content Section */}
+      <div className={`lg:col-span-5 ${index % 2 !== 0 ? 'lg:order-1 lg:text-right' : ''}`}>
+        <div className="font-mono text-xs text-faint uppercase tracking-widest mb-4">
+          0{index + 1} / {project.category}
+        </div>
+        <h3 className="font-serif text-4xl md:text-5xl mb-6 group-hover:text-gray-300 transition-colors">
+          {project.title}
+        </h3>
+        <p className="text-gray-400 leading-relaxed mb-8 font-light">
+          {project.description}
+        </p>
+        
+        <div className={`flex flex-wrap gap-2 mb-8 ${index % 2 !== 0 ? 'lg:justify-end' : ''}`}>
+          {project.tags.map((tag) => (
+            <span key={tag} className="px-3 py-1 border border-white/10 text-xs font-mono uppercase">
+              {tag}
+            </span>
+          ))}
+        </div>
+
+        <div className={`flex gap-4 ${index % 2 !== 0 ? 'lg:justify-end' : ''}`}>
+          <button className="liquid-btn px-6 py-3 font-mono text-xs uppercase tracking-widest flex items-center gap-2 group/btn">
+            View Case Study <ArrowRight size={14} className="group-hover/btn:translate-x-1 transition-transform" />
+          </button>
+          <button className="px-6 py-3 border border-white/20 font-mono text-xs uppercase tracking-widest hover:bg-white hover:text-black transition-colors">
+            Source Code
+          </button>
+        </div>
+      </div>
+    </motion.div>
+  );
+}