A fully responsive clone of the official Hardhat website, built with React 19, TypeScript, Tailwind CSS 4, and React Router.
This project replicates the look and feel of the Hardhat documentation site, while also focusing on clean code, scalability, and modern best practices.
- ⚛️ Modern Frontend — Built with React 19 + TypeScript for type-safety and maintainability.
- 🎨 Tailwind CSS 4 — Utility-first styling for rapid development and consistent design.
- 🌗 Dark/Light Mode — Theme toggle using React Context.
- 📚 Documentation Pages — Supports nested routes, hash-based navigation, and sidebar menus.
- 🔌 Plugins Section — Dynamic plugin details rendering with reusable layouts.
- 🧭 Tutorial Section — Step-by-step pages with sidebar navigation.
- 📱 Responsive Design — Works seamlessly on desktop, tablet, and mobile.
- ⚡ Optimized Build — Vite for fast dev server and production bundling.
- 🔍 SEO-Friendly — Metadata and semantic HTML structure for better discoverability.
UI Enhancements:
Follow these steps to run the project locally:
- Clone the repository:
git clone https://github.com/Umairulislam/hardhat-clone.git cd hardhat-clone - Install dependencies:
npm install
- Start the development server:
npm run dev
- Open your browser:
Navigate to
http://localhost:5173to see the project in action.
This project is for educational purposes only. All rights for the original Hardhat website design belong to the Nomic Foundation.
Crafted with care by Engr. Umair Ul Islam