refactor: ♻️ Update work images, add gear page with content

next.config.ts

@@ -2,6 +2,13 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
 	reactStrictMode: true,
+	images: {
+		remotePatterns: [
+			{
+				hostname: "f.media-amazon.com",
+			},
+		],
+	},
 };
 
 export default nextConfig;

src/app/(routes)/gear/page.tsx

@@ -1,20 +1,49 @@
 import type { Metadata } from "next";
 
+import { Item } from "@/components/gear/gear-item";
+import { type GearCategory, type GearItem, gear } from "@/components/gear/gear.constants";
+import Section from "@/components/ui/section";
+
 export const metadata: Metadata = {
 	title: "Gear",
 	description: "My toolbox. This is gear I actually own and recommend.",
 };
 
 export default function Page() {
+	const categories = gear.reduce((acc, item) => {
+		if (!acc.has(item.category)) {
+			acc.set(item.category, []);
+		}
+		acc.get(item.category)?.push(item);
+		return acc;
+	}, new Map<GearCategory, GearItem[]>());
+
+	const sortedCategories = Array.from(categories.entries()).sort((a, b) => a[0].localeCompare(b[0]));
+
 	return (
-		<div className="flex flex-col gap-16 md:gap-24">
+		<div className="flex flex-col space-y-12 md:space-y-24">
 			<div className="flex animate-in flex-col space-y-4">
 				<h1 className="animate-in font-bold text-lg text-primary">Gear</h1>
 
 				<p className="animate-in font-light leading-relaxed" style={{ "--index": 1 } as React.CSSProperties}>
 					List of tools I actually own and enjoy using.
 				</p>
 			</div>
+			{sortedCategories.map(([category, items], index) => (
+				<Section
+					className="animate-in"
+					style={{ "--index": index + 2 } as React.CSSProperties}
+					key={category}
+					heading={category}
+					headingAlignment="left"
+				>
+					<ul className="animated-list flex flex-col gap-8">
+						{items.map((item) => (
+							<Item key={item.title} {...item} />
+						))}
+					</ul>
+				</Section>
+			))}
 		</div>
 	);
 }

src/app/(routes)/page.tsx

@@ -1,6 +1,6 @@
-import { Introduction } from "@/components/home/components/introduction";
-import { Project } from "@/components/home/components/project";
-import { Work } from "@/components/home/components/work";
+import { Introduction } from "@/components/home/introduction";
+import { Project } from "@/components/home/project";
+import { Work } from "@/components/home/work";
 
 export default async function Home() {
 	return (

src/components/gear/gear-item.tsx

@@ -0,0 +1,40 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import type { GearItem } from "@/components/gear/gear.constants";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export function Item({ title, description, image, link }: Readonly<GearItem>) {
+	return (
+		<li className="col-span-1 row-span-1 flex snap-start items-center gap-4 transition-opacity">
+			<Link className="relative h-20 w-20 flex-shrink-0" href={link} target="_blank" rel="noreferrer">
+				<Image
+					src={image}
+					alt={title}
+					fill
+					className="rounded-md border border-input bg-white object-contain object-center p-2"
+				/>
+			</Link>
+			<div className="flex grow items-center justify-between gap-2">
+				<div className="space-y-1">
+					<h3 className="line-clamp-2 font-medium text-primary leading-tight">{title}</h3>
+					<p className="line-clamp-3 text-muted-foreground text-sm leading-tight">{description}</p>
+				</div>
+				<div>
+					<Link
+						className={cn(
+							"ml-auto h-fit rounded-full bg-tertiary px-4 py-2 text-sm",
+							buttonVariants({ variant: "outline" }),
+						)}
+						href={link}
+						target="_blank"
+						rel="noreferrer"
+					>
+						Get
+					</Link>
+				</div>
+			</div>
+		</li>
+	);
+}

src/components/gear/gear.constants.tsx

@@ -0,0 +1,110 @@
+import type { StaticImageData } from "next/image";
+
+export enum GearCategory {
+	Home = "Home Desk Setup",
+	Everyday = "Everyday Carry",
+	Apps = "Apps",
+	Other = "Other",
+}
+
+export interface GearItem {
+	title: string;
+	description: string;
+	category: GearCategory;
+	image: string | StaticImageData;
+	link: string;
+}
+
+export const gear: GearItem[] = [
+	{
+		title: "BenQ  Monitor Light",
+		description: "Auto-dimming comes in clutch with zero screen glare.",
+		category: GearCategory.Home,
+		image: "https://f.media-amazon.com/images/I/51TVzOs05eL._AC_SL1500_.jpg",
+		link: "https://a.co/d/iHjTfm3",
+	},
+	{
+		title: "Anker USB-C Hub",
+		description: "One cable solution for a MacBook.",
+		category: GearCategory.Home,
+		image: "https://f.media-amazon.com/images/I/61dt+Oo4PfL._AC_SL1500_.jpg",
+		link: "https://a.co/d/ezFCEfd",
+	},
+	{
+		title: "Apple Magic Trackpad",
+		description: "Best trackpad for MacOS gestures and control.",
+		category: GearCategory.Home,
+		image: "https://f.media-amazon.com/images/I/41KZtzhlK+L._AC_SL1500_.jpg",
+		link: "https://a.co/d/7X2yXE2",
+	},
+	{
+		title: "Logitech MX Master 3S",
+		description: "Ergonomic and comfortable for daily use.",
+		category: GearCategory.Home,
+		image: "https://f.media-amazon.com/images/I/61xKiCADfpL._AC_SL1500_.jpg",
+		link: "https://amzn.to/3PFWCKu",
+	},
+	{
+		title: "Keychron Q1 Max",
+		description: "Wireless - favorite keyboard for work and gaming.",
+		category: GearCategory.Home,
+		image: "https://f.media-amazon.com/images/I/616rea0RO4L._AC_SL1500_.jpg",
+		link: "https://a.co/d/eop43z3",
+	},
+	{
+		title: 'LG 27" UltraGear OLED',
+		description: "Crisp, great display, and great for gaming.",
+		category: GearCategory.Home,
+		image: "https://f.media-amazon.com/images/I/616ZOS5bnnL._AC_SL1500_.jpg",
+		link: "https://a.co/d/cJ25XuO",
+	},
+	{
+		title: "Patagonia Refugio Pack 26L",
+		description: "Versatile daypack for everyday carry and travel.",
+		category: GearCategory.Everyday,
+		image: "https://f.media-amazon.com/images/I/51YI1+sgISL._AC_SL1200_.jpg",
+		link: "https://a.co/d/amJ1yIx",
+	},
+	{
+		title: 'MacBook Pro 16"',
+		description: "Daily driver. Sleek, great display, and powerful.",
+		category: GearCategory.Everyday,
+		image: "https://f.media-amazon.com/images/I/618d5bS2lUL._AC_SL1500_.jpg",
+		link: "https://a.co/d/deJ5vZ1",
+	},
+	{
+		title: "Apple AirPods Pro",
+		description: "Perfect for on-the-go listening and calls.",
+		category: GearCategory.Everyday,
+		image: "https://f.media-amazon.com/images/I/61SUj2aKoEL._AC_SL1500_.jpg",
+		link: "https://a.co/d/95nVh2Z",
+	},
+	{
+		title: "Sony WH-1000XM5",
+		description: "Premium noise-canceling, perfect for bass music lovers.",
+		category: GearCategory.Everyday,
+		image: "https://f.media-amazon.com/images/I/51aXvjzcukL._AC_SL1500_.jpg",
+		link: "https://a.co/d/6QF6UuG",
+	},
+	{
+		title: "Notion",
+		description: "All-in-one workspace for notes and project planning.",
+		category: GearCategory.Apps,
+		image: "https://cdn.brandfetch.io/idPYUoikV7/theme/dark/symbol.svg?c=1bfwsmEH20zzEfSNTed",
+		link: "https://notion.so",
+	},
+	{
+		title: "Raycast",
+		description: "Spotlight replacement with powerful workflows and extensions.",
+		category: GearCategory.Apps,
+		image: "https://cdn.brandfetch.io/idxxHV50Mm/theme/dark/symbol.svg?c=1bfwsmEH20zzEfSNTed",
+		link: "https://raycast.com",
+	},
+	{
+		title: "Cursor",
+		description: "VS Code alternative with AI. Perfect for development.",
+		category: GearCategory.Apps,
+		image: "https://www.cursor.com/assets/images/logo.svg",
+		link: "https://cursor.sh",
+	},
+];

src/components/home/components/project-card.tsx → src/components/home/project-card.tsx

@@ -7,24 +7,26 @@ interface ProjectCardProps extends GitHubRepository {
 	index: number;
 }
 
-export function ProjectCard({ link, repo, description, stars, index }: Readonly<ProjectCardProps>) {
+export function ProjectCard({ link, repo, description, stars }: Readonly<ProjectCardProps>) {
 	return (
 		<li className="rounded-lg transition-opacity" key={`${repo}-${link}`}>
 			<Link
 				target="_blank"
 				href={link}
 				rel="noopener noreferrer"
 				aria-label={repo}
-				className="-my-2 flex w-full justify-between py-3 no-underline"
+				className="-my-2 flex w-full flex-col py-3 no-underline"
 			>
 				<div className="flex flex-col gap-px">
-					<p>{repo}</p>
+					<div className="flex w-full items-center justify-between">
+						<p className="mr-4">{repo}</p>
+						<div className="flex flex-shrink-0 items-center gap-1 text-muted-foreground">
+							<IconStar className="size-4" />
+							{stars}
+						</div>
+					</div>
 					<p className="line-clamp-2 text-muted-foreground">{description}</p>
 				</div>
-				<div className="flex items-center gap-1 text-muted-foreground">
-					<IconStar className="size-4" />
-					{stars}
-				</div>
 			</Link>
 		</li>
 	);

src/components/home/components/work-card.tsx → src/components/home/work-card.tsx

@@ -13,7 +13,13 @@ export function WorkCard({ title, company, imageSrc, date, link }: Readonly<Work
 	const content = (
 		<>
 			<div className="flex items-center gap-4">
-				<Image src={imageSrc} alt={company} width={48} height={48} />
+				<Image
+					className="rounded-md border border-input bg-background transition-colors hover:bg-accent hover:text-accent-foreground"
+					src={imageSrc}
+					alt={company}
+					width={50}
+					height={50}
+				/>
 
 				<div className="flex flex-col gap-px">
 					<p>{title}</p>

src/components/home/components/work.tsx → src/components/home/work.tsx

@@ -13,14 +13,14 @@ const workplaces = [
 		title: "Software Engineer II",
 		company: "Tesla",
 		date: "2023 - 2024",
-		imageSrc: "/work/tesla.jpeg",
+		imageSrc: "/work/tesla.png",
 		link: "https://www.tesla.com",
 	},
 	{
 		title: "Software Engineer Intern",
 		company: "Tesla",
 		date: "2022 - 2023",
-		imageSrc: "/work/tesla.jpeg",
+		imageSrc: "/work/tesla.png",
 		link: "https://www.tesla.com",
 	},
 	{

src/components/ui/section.tsx

@@ -1,18 +1,20 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import clsx from "clsx";
 import type { ReactNode } from "react";
 
-interface SectionProps {
+interface SectionProps extends React.HTMLAttributes<HTMLDivElement> {
 	heading: string;
 	headingAlignment?: "right" | "left";
 	children: ReactNode;
 }
 
-export default function Section({ heading, headingAlignment, children }: Readonly<SectionProps>) {
+export default function Section({ heading, headingAlignment, children, ...props }: Readonly<SectionProps>) {
 	return (
 		<section
-			className="col-reverse flex flex-col gap-4 md:flex-row md:gap-9"
+			{...props}
+			className={cn("col-reverse flex flex-col gap-4 md:flex-row md:gap-9", props.className)}
 			id={heading.toLowerCase().replace(/\s/g, "-")}
 		>
 			<h2