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

View File

@@ -6,6 +6,7 @@
"name": "site", "name": "site",
"dependencies": { "dependencies": {
"next": "16.1.6", "next": "16.1.6",
"raster-react": "^0.2.0",
"react": "19.2.3", "react": "19.2.3",
"react-dom": "19.2.3", "react-dom": "19.2.3",
}, },
@@ -710,6 +711,8 @@
"queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="], "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": ["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=="], "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": { "dependencies": {
"next": "16.1.6", "next": "16.1.6",
"raster-react": "^0.2.0",
"react": "19.2.3", "react": "19.2.3",
"react-dom": "19.2.3" "react-dom": "19.2.3"
}, },