81 lines
4.9 KiB
TypeScript
81 lines
4.9 KiB
TypeScript
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>
|
|
);
|
|
} |