A four-page website that bridges Web3 theory and hands-on implementation, built around a single theme: Arbitrum and Ethereum Layer 2 scaling. Built with plain HTML, CSS, and vanilla JavaScript — no frameworks, no build step.
| Page | File | What it does |
|---|---|---|
| Home | index.html |
Landing page introducing Layer 2 scaling — why Ethereum needed it, what Arbitrum is, and a real-world benefit — plus a features grid of core Web3 pillars and an animated rollup diagram. |
| Concepts | concepts.html |
Flip cards comparing Web2 vs Web3, Ethereum vs Bitcoin, public vs private keys, and blockchains vs traditional databases, plus a Proof of Work vs Proof of Stake explainer. |
| Live Prices | prices.html |
A live cryptocurrency dashboard pulling ETH, BTC, ARB, SOL, and MATIC prices from the free CoinGecko API, with 24h change, sparklines, search, and manual/auto refresh. |
| Block Simulator | simulator.html |
An interactive two-block mining simulator using real SHA-256 hashing (via the Web Crypto API). Mine a block by finding a nonce that produces enough leading zeros, then edit earlier data to watch the chain break — immutability made tangible. |
All four pages share one glassmorphism navbar, footer, color system, and typography, and are fully responsive from desktop down to mobile.
No build tools or dependencies required.
# Option 1 — just open it
open index.html # macOS
start index.html # Windows
# Option 2 — serve it (recommended, avoids any local file/CORS quirks)
python3 -m http.server 8000
# then visit http://localhost:8000Web3-Explorer/
├── index.html
├── concepts.html
├── prices.html
├── simulator.html
├── css/
│ ├── style.css # variables, reset, layout, navbar, footer, buttons
│ ├── components.css # hero, cards, timeline, price grid, simulator UI
│ ├── animations.css # keyframes and motion utilities
│ └── responsive.css # tablet / mobile breakpoints
├── js/
│ ├── main.js # shared: nav, background canvas, reveal-on-scroll, hero visual
│ ├── prices.js # CoinGecko fetch, render, search, auto-refresh
│ └── simulator.js # SHA-256 mining logic and chain validation
└── README.md
- CoinGecko's free tier is occasionally rate-limited; the prices page shows a retry button if a fetch fails.
- The block simulator uses a JavaScript mining loop broken into batches to stay responsive — at difficulty 4 (four leading zeros) it can take a few seconds to find a nonce.
- The custom cursor glow and background canvas are disabled on touch devices for performance and are hidden under
prefers-reduced-motion. - Next improvements: persist mined chain state in
localStorage, add more coins to the price dashboard, and add a light theme toggle.
Milan Rathod