Re‑building r3voluti0n.com for Web 3.0

1️⃣ Content extraction (from the Wayback archive)

Grab the page and clean it so you have a stand‑alone copy you can remodel.

1.1 Download the page

wget -E -H -k -K -p "https://web.archive.org/web/20060411185728/http://www.r3voluti0n.com/"

1.2 Strip Wayback‑specific scripts

tidy -asxhtml -q -output clean.html r3voluti0n.com/index.html

1.3 Organise assets

All images, fonts, and CSS end up in r3voluti0n.com_files/. Rename it to assets/ and run an optimizer (e.g., svgo for SVGs or imagemagick for PNG/JPG).

2️⃣ Decentralised publishing (IPFS / ENS)

2.1 Choose a storage layer

Option	Pros	Cons
IPFS (Pinata / nft.storage)	Easy to pin, content‑addressable, widely supported	Needs a pinning service for persistence
Arweave	Pay‑once‑store‑forever	Higher per‑MB cost, less mainstream for UI assets
Filecoin + IPFS	Incentivised storage market, cheap long‑term	More complex retrieval workflow

2.2 Upload the site (example using Pinata)

npm i @pinata/sdk

// upload-to-pinata.js
const pinataSDK = require('@pinata/sdk');
const fs = require('fs');
const path = require('path');

const pinata = pinataSDK('YOUR_API_KEY', 'YOUR_SECRET_KEY');

async function pinFolder(folder) {
  const files = fs.readdirSync(folder).map(f => ({
    path: f,
    content: fs.createReadStream(path.join(folder, f))
  }));
  const res = await pinata.pinFileToIPFS(files);
  console.log('Folder CID:', res.IpfsHash);
  return res.IpfsHash;
}

(async () => {
  const cid = await pinFolder('./dist');   // dist contains index.html + assets/
  console.log('Site URL: https://ipfs.io/ipfs/' + cid);
})();

2.3 Register an ENS name (optional)

Open app.ens.domains with MetaMask.
Register r3voluti0n.eth (or any free variant).
Set the Contenthash to the CID you got from Pinata.

Resulting URL: https://r3voluti0n.eth.limo/ (or any ENS‑compatible gateway).

3️⃣ Interactive, blockchain‑enabled UI

3.1 HTML skeleton (index.html)

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <title>r3voluti0n – Web3 Edition</title>
  <meta name="description" content="A homage to the 2006 hacktivist site, rebuilt for Web 3.0.">
  <meta property="og:title" content="r3voluti0n – Web3 Edition" />
  <meta property="og:description" content="Reborn on the decentralized web." />
  <meta property="og:image" content="https://ipfs.io/ipfs/<ASSET_CID>/banner.png" />
  <link rel="stylesheet" href="assets/style.css">
  <script type="module" src="js/app.js" defer></script>
</head>

<body>
  <header>
    <h1>r3voluti0n</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#donate">Donate</a>
      <a href="#nft">Claim NFT</a>
    </nav>
    <button id="connectWallet" class="btn">Connect Wallet</button>
    <span id="walletAddress"></span>
  </header>

  <main>
    <section id="about">
      <h2>Welcome to the Future of Rebellion</h2>
      <p>…</p>
      <img src="assets/r3v-banner.png" alt="r3voluti0n banner" />
    </section>

    <section id="donate">
      <h2>Support the Revolution</h2>
      <input id="donateAmount" type="number" min="0.01" step="0.01" placeholder="0.01" />
      <button id="donateBtn" class="btn">Donate</button>
    </section>

    <section id="nft">
      <h2>Claim Your “Revolution” NFT</h2>
      <button id="claimNftBtn" class="btn">Claim NFT</button>
      <p id="claimStatus"></p>
    </section>
  </main>

  <footer>
    <p>© 2006‑2026 r3voluti0n. All rights reserved. <a href="https://github.com/yourorg/r3voluti0n-web3">Open‑source</a></p>
  </footer>
</body>
</html>

3.2 Minimal CSS (assets/style.css)

:root {
  --bg: #111;
  --fg: #eee;
  --accent: #ff4b4b;
  --font: "Courier New", monospace;
}
[data-theme="dark"] {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
}
header, footer { text-align:center; padding:1rem; }
nav a { margin:0 .8rem; color:var(--accent); text-decoration:none; }
.btn {
  background: var(--accent);
  border:none;
  color:#fff;
  padding:.6rem 1.2rem;
  cursor:pointer;
  font-weight:bold;
}
.btn:hover { opacity:.85; }

3.3 JavaScript (js/app.js) – wallet, donate & NFT claim

import { ethers } from "https://cdn.jsdelivr.net/npm/ethers@6.7.0/+esm";

const treasuryAddress = "0xYourTreasuryContractAddress";
const nftContractAddress = "0xYourERC721ContractAddress";
const nftABI = [
  "function claim(address to, bytes signature) public returns (uint256)",
  "function tokenURI(uint256 tokenId) view returns (string)"
];

const walletBtn   = document.getElementById("connectWallet");
const addressSpan = document.getElementById("walletAddress");
const donateBtn   = document.getElementById("donateBtn");
const

Re‑building `r3voluti0n.com` for Web 3.0

Table of contents