feat(cripto): live NFT gallery, SkateHive & Gnars build pages with real PRs and 3D noggles

NFT gallery goes live: server-side Alchemy fetch of the wallet across
eth/base/zora (spam + ENS-registrar filtered, hourly ISR), with graceful
fallback to the placeholder grid when the key is missing or a fetch fails.
Cards render real artwork and link to OpenSea. NOTE: excludeFilters[]=SPAM
500s on base-mainnet, so spam is dropped via contract.isSpam instead.

Build detail pages get per-project flavors backed by verifiable data:
- SkateHive: dark matrix-rain header (canvas, reduced-motion safe),
  mixed-font title, Built on Hive glyph, curated merged PRs with links,
  What I learned section, evidence slots for screenshots/gifs.
- Gnars: light noggles-watermark header in a new gold accent, interactive
  3D NogglesRail (CC0 model from gnars.com, lazy-loaded via next/dynamic
  so three.js stays off every other route), same PR/learned/evidence blocks.

Copy rewritten (EN + PT) from actual merged PRs in SkateHive/skatehive3.0
and r4topunk/gnars-website instead of generic bullets.

Author: louzoshi

.env.local.example

@@ -0,0 +1,12 @@
+# Onchain NFT gallery (/cripto) — copy this file to .env.local and fill in.
+# .env.local is gitignored, so your key never gets committed.
+
+# Free Alchemy API key: https://dashboard.alchemy.com → create an app → API Key.
+ALCHEMY_API_KEY=
+
+# Your wallet. A raw 0x address is preferred — it lets the gallery read every
+# chain below. An ENS name works too, but only resolves on Ethereum mainnet.
+CRIPTO_WALLET=louzoshi.eth
+
+# Optional. Chains to scan (only used when CRIPTO_WALLET is a 0x address).
+# ALCHEMY_NFT_NETWORKS=eth-mainnet,base-mainnet,zora-mainnet

app/cripto/_components/Contributions.tsx

@@ -42,7 +42,7 @@ export default function Contributions() {
                   {
                     ["--row-accent" as string]: `var(${c.accent})`,
                     ["--row-fg" as string]:
-                      c.accent === "--c-lime"
+                      c.accent === "--c-lime" || c.accent === "--c-gold"
                         ? "var(--c-on-bright)"
                         : "var(--c-white)",
                   } as CSSProperties

app/cripto/_components/Nfts.tsx

@@ -3,11 +3,16 @@
 import type { CSSProperties } from "react";
 import Reveal from "@/components/Reveal";
 import Window from "./Window";
-import { nfts } from "../_data";
+import type { Nft } from "../_data";
 import { useLanguage } from "@/lib/useLanguage";
 import { criptoDict } from "../_i18n";
 
-export default function Nfts() {
+type NftsProps = {
+  items: Nft[];
+  isLive: boolean;
+};
+
+export default function Nfts({ items, isLive }: NftsProps) {
   const { lang } = useLanguage();
   const t = criptoDict[lang].nfts;
 
@@ -19,61 +24,20 @@ export default function Nfts() {
       <div className="max-w-[1160px] mx-auto px-5 py-20">
         <Reveal className="flex flex-wrap items-end justify-between gap-4 mb-12">
           <div>
-            <p className="c-label mb-3 !text-[var(--c-white)]/60">
-              {t.label}
-            </p>
-            <h2 className="c-display text-[clamp(30px,5vw,58px)]">
-              {t.title}
-            </h2>
+            <p className="c-label mb-3 !text-[var(--c-white)]/60">{t.label}</p>
+            <h2 className="c-display text-[clamp(30px,5vw,58px)]">{t.title}</h2>
           </div>
           <span className="c-tag !border-[var(--c-white)]/40 !bg-transparent !text-[var(--c-white)]/70">
-            {t.sampleTag}
+            {isLive ? t.liveTag : t.sampleTag}
           </span>
         </Reveal>
 
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-5">
-          {nfts.map((nft, i) => {
-            const bright = nft.bg === "--c-lime";
-            return (
-            <Reveal key={nft.name} delay={i * 0.06}>
-              <div className="nft-card border-2 border-[var(--c-white)] bg-[var(--c-paper)] text-[var(--c-ink)] shadow-[5px_5px_0_var(--c-white)]">
-                <div
-                  className="relative aspect-square overflow-hidden border-b-2 border-[var(--c-ink)]"
-                  style={{ background: `var(${nft.bg})` } as CSSProperties}
-                >
-                  <div
-                    className="halftone absolute inset-0 opacity-30"
-                    style={{ ["--dot" as string]: "var(--c-ink)" }}
-                  />
-                  <span
-                    className={`absolute inset-0 grid place-items-center c-display text-[clamp(30px,7vw,56px)] ${
-                      bright
-                        ? "text-[var(--c-on-bright)] opacity-80"
-                        : "text-[var(--c-white)] mix-blend-overlay"
-                    }`}
-                  >
-                    #{nft.tokenId}
-                  </span>
-                  <span
-                    className={`absolute top-2 left-2 c-mono text-[9px] tracking-[0.12em] ${
-                      bright ? "text-[var(--c-on-bright)]" : "text-[var(--c-white)]"
-                    }`}
-                  >
-                    {nft.collection.toUpperCase()}
-                  </span>
-                </div>
-                <div className="p-3 flex items-center justify-between">
-                  <span className="c-mono text-[11px] font-semibold truncate">
-                    {nft.name}
-                  </span>
-                  <span className="c-mono text-[11px] text-[var(--c-ink-soft)]">
-                    ↗
-                  </span>
-                </div>
-              </div>
+          {items.map((nft, i) => (
+            <Reveal key={`${nft.chain ?? "x"}-${nft.collection}-${nft.tokenId}-${i}`} delay={i * 0.06}>
+              <NftCard nft={nft} />
             </Reveal>
-            );
-          })}
+          ))}
         </div>
 
         <Reveal delay={0.1} className="mt-10">
@@ -83,13 +47,89 @@ export default function Nfts() {
             bodyClassName="p-5 bg-[var(--c-paper)] text-[var(--c-ink)]"
           >
             <p className="c-mono text-[12px] leading-[1.7]">
-              {t.notePre}
+              {isLive ? t.liveNotePre : t.notePre}
               <b>{t.noteBold}</b>
-              {t.notePost}
+              {isLive ? t.liveNotePost : t.notePost}
             </p>
           </Window>
         </Reveal>
       </div>
     </section>
   );
 }
+
+function NftCard({ nft }: { nft: Nft }) {
+  const bright = nft.bg === "--c-lime";
+
+  const card = (
+    <div className="nft-card h-full border-2 border-[var(--c-white)] bg-[var(--c-paper)] text-[var(--c-ink)] shadow-[5px_5px_0_var(--c-white)]">
+      <div
+        className="relative aspect-square overflow-hidden border-b-2 border-[var(--c-ink)]"
+        style={
+          nft.image
+            ? undefined
+            : ({ background: `var(${nft.bg})` } as CSSProperties)
+        }
+      >
+        {nft.image ? (
+          // NFT art comes from arbitrary CDNs / IPFS gateways, so next/image
+          // (which needs an allowlist of hosts) isn't practical here.
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={nft.image}
+            alt={nft.name}
+            loading="lazy"
+            className="absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04]"
+          />
+        ) : (
+          <>
+            <div
+              className="halftone absolute inset-0 opacity-30"
+              style={{ ["--dot" as string]: "var(--c-ink)" }}
+            />
+            <span
+              className={`absolute inset-0 grid place-items-center c-display text-[clamp(30px,7vw,56px)] ${
+                bright
+                  ? "text-[var(--c-on-bright)] opacity-80"
+                  : "text-[var(--c-white)] mix-blend-overlay"
+              }`}
+            >
+              #{nft.tokenId}
+            </span>
+          </>
+        )}
+        <span
+          className={
+            nft.image
+              ? "absolute top-2 left-2 c-mono text-[9px] tracking-[0.12em] px-1.5 py-0.5 bg-[var(--c-ink)] text-[var(--c-white)]"
+              : `absolute top-2 left-2 c-mono text-[9px] tracking-[0.12em] ${
+                  bright ? "text-[var(--c-on-bright)]" : "text-[var(--c-white)]"
+                }`
+          }
+        >
+          {nft.collection.toUpperCase()}
+        </span>
+      </div>
+      <div className="p-3 flex items-center justify-between gap-2">
+        <span className="c-mono text-[11px] font-semibold truncate">
+          {nft.name}
+        </span>
+        <span className="c-mono text-[11px] text-[var(--c-ink-soft)]">↗</span>
+      </div>
+    </div>
+  );
+
+  if (!nft.href) return card;
+
+  return (
+    <a
+      href={nft.href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group block h-full"
+      aria-label={`${nft.name} — view on OpenSea`}
+    >
+      {card}
+    </a>
+  );
+}