Add raster-react pixel icons and GitHub repo metadata

Replaced text icons in feature grid with pixel-art raster-react
components (SearchIcon, NetworkIcon, FolderIcon, etc.). Added
GithubIcon and LinkedinIcon to nav and author section.
SpaceInvadersIcon in nav branding. Set repo homepage to claudm.com
with topics: claude-code, tui, terminal, bun, launcher, cli.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
2026-02-23 23:26:45 +00:00
parent cd20c33b25
commit ffa676ddf7
3 changed files with 35 additions and 13 deletions

View File

@@ -1,5 +1,19 @@
import Image from "next/image";
import { EmailReveal } from "./email-reveal";
import {
SearchIcon,
GithubIcon,
TerminalIcon,
FolderIcon,
NetworkIcon,
GamepadIcon,
BlocksIcon,
ArrowRightIcon,
ExternalLinkIcon,
LinkedinIcon,
MailIcon,
SpaceInvadersIcon,
} from "raster-react";
function PixelDivider() {
return (
@@ -50,13 +64,13 @@ function FeatureBlock({
title,
desc,
}: {
icon: string;
icon: React.ReactNode;
title: string;
desc: string;
}) {
return (
<div className="border-2 border-border p-5 bg-surface hover:border-accent transition-colors group">
<div className="font-[family-name:var(--font-pixel)] text-2xl mb-2 group-hover:text-accent transition-colors">
<div className="mb-3 text-dim group-hover:text-accent transition-colors">
{icon}
</div>
<h3 className="font-[family-name:var(--font-pixel)] text-accent text-sm mb-2 uppercase tracking-wider">
@@ -87,15 +101,17 @@ export default function Home() {
<div className="relative max-w-5xl mx-auto px-6 pt-16 pb-20">
{/* Nav */}
<nav className="flex items-center justify-between mb-20">
<div className="font-[family-name:var(--font-pixel)] text-accent text-lg tracking-widest">
<div className="font-[family-name:var(--font-pixel)] text-accent text-lg tracking-widest flex items-center gap-2">
<SpaceInvadersIcon size={20} />
CLADM
</div>
<a
href="https://github.com/alezmad/cladm"
target="_blank"
rel="noopener noreferrer"
className="font-[family-name:var(--font-mono)] text-dim text-xs border-2 border-border px-4 py-2 hover:border-accent hover:text-accent transition-colors uppercase tracking-wider"
className="font-[family-name:var(--font-mono)] text-dim text-xs border-2 border-border px-4 py-2 hover:border-accent hover:text-accent transition-colors uppercase tracking-wider flex items-center gap-2"
>
<GithubIcon size={16} />
GitHub
</a>
</nav>
@@ -244,32 +260,32 @@ export default function Home() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<FeatureBlock
icon=">"
icon={<SearchIcon size={28} />}
title="AUTO-DISCOVERY"
desc="Reads ~/.claude/history.jsonl to find every project you've used with Claude Code. No config needed."
/>
<FeatureBlock
icon="#"
icon={<NetworkIcon size={28} />}
title="GIT METADATA"
desc="Branch, sync status (ahead/behind), last commit, dirty state — all loaded in parallel."
/>
<FeatureBlock
icon="{"
icon={<FolderIcon size={28} />}
title="SESSION BROWSER"
desc="Expand any project to browse past sessions. See conversation previews and resume directly."
/>
<FeatureBlock
icon="*"
icon={<ArrowRightIcon size={28} />}
title="BRANCH SWITCHING"
desc="Select a non-current branch to launch Claude with an auto-prompt to switch and stash."
/>
<FeatureBlock
icon="+"
icon={<TerminalIcon size={28} />}
title="PARALLEL LAUNCH"
desc="Select multiple projects and hit Enter. Each opens in a new Terminal.app window simultaneously."
/>
<FeatureBlock
icon="@"
icon={<BlocksIcon size={28} />}
title="STACK DETECTION"
desc="Auto-detects project stack: TypeScript, Python, Rust, Go, Docker, and more from config files."
/>
@@ -443,21 +459,23 @@ export default function Home() {
<div className="font-[family-name:var(--font-pixel)] text-text text-lg mb-4">
Alejandro Mourente
</div>
<div className="flex items-center justify-center gap-5 font-[family-name:var(--font-mono)] text-xs">
<div className="flex items-center justify-center gap-6 font-[family-name:var(--font-mono)] text-xs">
<a
href="https://github.com/alezmad"
target="_blank"
rel="noopener noreferrer"
className="text-dim hover:text-accent transition-colors"
className="text-dim hover:text-accent transition-colors flex items-center gap-1.5"
>
<GithubIcon size={14} />
github
</a>
<a
href="https://www.linkedin.com/in/alejandro-mourente/"
target="_blank"
rel="noopener noreferrer"
className="text-dim hover:text-accent transition-colors"
className="text-dim hover:text-accent transition-colors flex items-center gap-1.5"
>
<LinkedinIcon size={14} />
linkedin
</a>
<EmailReveal />

View File

@@ -6,6 +6,7 @@
"name": "site",
"dependencies": {
"next": "16.1.6",
"raster-react": "^0.2.0",
"react": "19.2.3",
"react-dom": "19.2.3",
},
@@ -710,6 +711,8 @@
"queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
"raster-react": ["raster-react@0.2.0", "", { "peerDependencies": { "react": ">=16.8.0" } }, "sha512-Lp0qDHfKIfXXYiNSOIZilh6pLV3TwJWNWNuRFpYM4/acIJfKJhoE+lRsvCSefLaQ56EQ6JJFLRVV/n1jbQJSEw=="],
"react": ["react@19.2.3", "", {}, "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA=="],
"react-dom": ["react-dom@19.2.3", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.3" } }, "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg=="],

View File

@@ -10,6 +10,7 @@
},
"dependencies": {
"next": "16.1.6",
"raster-react": "^0.2.0",
"react": "19.2.3",
"react-dom": "19.2.3"
},