Initial commit: sam-pursuits

src/pages/Interests.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { motion } from "motion/react";
+import {
+  Mountain, Tent, Sailboat, Waves, Map,
+  Music, Palette, BookOpen, Globe, CookingPot, Sprout, Utensils, Plane,
+} from "lucide-react";
+import PageHeader from "../components/PageHeader";
+
+interface PursuitItem {
+  slug: string;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  color: string;
+}
+
+const allPursuits: PursuitItem[] = [
+  { slug: "camping", title: "Camping", description: "Weekend trips and multi-day expeditions", icon: <Tent size={22} />, color: "bg-tertiary-container/15 text-tertiary" },
+  { slug: "skiing", title: "Skiing", description: "Alpine and backcountry adventures", icon: <Mountain size={22} />, color: "bg-primary-container/15 text-primary" },
+  { slug: "hiking", title: "Hiking", description: "Trails through national parks", icon: <Map size={22} />, color: "bg-secondary-container/15 text-secondary" },
+  { slug: "canoeing", title: "Canoeing", description: "River and lake paddling", icon: <Sailboat size={22} />, color: "bg-tertiary-container/15 text-tertiary" },
+  { slug: "surfing", title: "Surfing", description: "Chasing waves along the coast", icon: <Waves size={22} />, color: "bg-secondary-container/15 text-secondary" },
+  { slug: "music", title: "Music", description: "Guitar, production, and performance", icon: <Music size={22} />, color: "bg-primary-container/15 text-primary" },
+  { slug: "fine-art", title: "Fine Art", description: "Painting, sketching, and digital art", icon: <Palette size={22} />, color: "bg-secondary-container/15 text-secondary" },
+  { slug: "philosophy", title: "Philosophy", description: "Stoicism, existentialism, and ethics", icon: <BookOpen size={22} />, color: "bg-tertiary-container/15 text-tertiary" },
+  { slug: "reading", title: "Reading", description: "Fiction, non-fiction, and technical lit", icon: <BookOpen size={22} />, color: "bg-primary-container/15 text-primary" },
+  { slug: "cooking", title: "Cooking", description: "World cuisines and techniques", icon: <CookingPot size={22} />, color: "bg-tertiary-container/15 text-tertiary" },
+  { slug: "gardening", title: "Gardening", description: "Organic growing and sustainability", icon: <Sprout size={22} />, color: "bg-secondary-container/15 text-secondary" },
+  { slug: "food-production", title: "Food Production", description: "Salami, cheese, honey, and salt", icon: <Utensils size={22} />, color: "bg-primary-container/15 text-primary" },
+  { slug: "italy-travel", title: "Italy Travel", description: "Skiing, dining, and exploration", icon: <Plane size={22} />, color: "bg-secondary-container/15 text-secondary" },
+  { slug: "global-politics", title: "Global Politics", description: "International relations and theory", icon: <Globe size={22} />, color: "bg-tertiary-container/15 text-tertiary" },
+];
+
+export default function Interests() {
+  return (
+    <div>
+      <PageHeader
+        title="Interests"
+        description="A complete catalog of passions and pursuits that define how I spend my time and energy."
+        tag="all pursuits"
+      />
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {allPursuits.map((pursuit, index) => (
+          <Link key={pursuit.slug} to={`/interests/${pursuit.slug}`}>
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.05 }}
+              whileHover={{ y: -4, scale: 1.02 }}
+              className="bg-surface-container-low border border-outline-variant/40 rounded-2xl p-5 shadow-ambient hover:shadow-ambient-lg transition-all duration-200 cursor-pointer group"
+            >
+              <div className="flex items-start gap-4">
+                <div className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${pursuit.color}`}>
+                  {pursuit.icon}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between">
+                    <h3 className="font-display font-semibold text-base text-on-surface group-hover:text-primary transition-colors">
+                      {pursuit.title}
+                    </h3>
+                    <svg
+                      className="w-4 h-4 text-on-surface-variant opacity-0 group-hover:opacity-100 transition-all transform group-hover:translate-x-1"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                  </div>
+                  <p className="text-sm text-on-surface-variant mt-1">{pursuit.description}</p>
+                </div>
+              </div>
+            </motion.div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}