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:
@@ -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 />
|
||||||
|
|||||||
@@ -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=="],
|
||||||
|
|||||||
@@ -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"
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user