Seed: portfolio template (18 files)

src/pages/Work.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Palette, ExternalLink, ChevronRight } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const categories = ["All", "Web Design", "Mobile", "Branding", "Full-Stack"];
+
+const projects = [
+  { title: "", desc: "", tags: ["", "", ""], cat: "Web Design", gradient: "from-violet-400 to-purple-600" },
+  { title: "", desc: "", tags: ["", "", ""], cat: "Web Design", gradient: "from-sky-400 to-blue-600" },
+  { title: "", desc: "", tags: ["", "", ""], cat: "Mobile", gradient: "from-amber-400 to-orange-600" },
+  { title: "", desc: "", tags: ["", "", ""], cat: "Branding", gradient: "from-emerald-400 to-green-600" },
+  { title: "Fitness Tracking App", desc: "Cross-platform fitness app with AI-powered workout recommendations and social features.", tags: ["Flutter", "Firebase", "TensorFlow"], cat: "Mobile", gradient: "from-rose-400 to-pink-600" },
+  { title: "Real Estate Platform", desc: "Property listing platform with 3D tours, map integration, and AI-powered price predictions.", tags: ["Next.js", "Three.js", "Mapbox"], cat: "Full-Stack", gradient: "from-cyan-400 to-teal-600" },
+];
+
+export default function WorkPage() {
+  const [filter, setFilter] = useState("All");
+  const filtered = filter === "All" ? projects : projects.filter((p) => p.cat === filter);
+
+  return (
+    <div className="min-h-screen bg-background text-foreground antialiased">
+      <Header />
+      <section className="pt-32 pb-8 px-6">
+        <div className="mx-auto max-w-6xl">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground mb-4">
+            <Link to="/" className="hover:text-foreground transition-colors">Home</Link>
+            <ChevronRight className="h-3 w-3" />
+            <span>Work</span>
+          </div>
+          <h1 className="text-4xl sm:text-5xl font-bold tracking-tight animate-fade-up">My Work</h1>
+          <p className="mt-4 text-lg text-muted-foreground max-w-2xl">A collection of projects I have worked on, from design systems to full-stack applications.</p>
+        </div>
+      </section>
+
+      <section className="pb-24 px-6">
+        <div className="mx-auto max-w-6xl">
+          <div className="flex flex-wrap gap-2 mb-12">
+            {categories.map((c) => (
+              <Button key={c} variant={filter === c ? "default" : "outline"} size="sm" className="rounded-full active:scale-[0.98]" onClick={() => setFilter(c)}>
+                {c}
+              </Button>
+            ))}
+          </div>
+          <div className="grid gap-8 grid-cols-1 lg:grid-cols-2 stagger">
+            {filtered.map((p, i) => (
+              <Link key={i} to="/project" className="group block hover:-translate-y-1 hover:shadow-xl transition-all duration-300 rounded-2xl">
+                <div className="relative overflow-hidden rounded-2xl animate-scale-in">
+                  <div className={`aspect-video bg-gradient-to-br \${p.gradient} flex items-center justify-center transition-transform duration-500 group-hover:scale-105 relative`}>
+                    <div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
+                    <div className="absolute top-6 left-6 w-20 h-20 rounded-full bg-white/10 blur-xl" />
+                    <div className="absolute bottom-8 right-10 w-28 h-28 rounded-full bg-white/10 blur-2xl" />
+                    <Palette className="h-16 w-16 text-white/30 relative z-10" />
+                  </div>
+                  <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent translate-y-full group-hover:translate-y-0 transition-transform duration-500">
+                    <h3 className="text-white font-semibold text-lg">{p.title}</h3>
+                    <p className="text-white/70 text-sm mt-1">{p.desc}</p>
+                    <div className="flex flex-wrap gap-2 mt-3">
+                      {p.tags.map((tag, j) => (
+                        <Badge key={j} variant="secondary" className="text-xs bg-white/10 text-white/90 border-white/20">{tag}</Badge>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </section>
+      <Footer />
+    </div>
+  );
+}