A dark-mode, Matrix-green hero section for a Web3 Developer portfolio. Built with Next.js 14 (App Router) + Framer Motion.
components/
├── HeroSection.jsx # Main hero section
├── HeroSection.module.css # Hero styles & design tokens
├── ParticleBackground.jsx # Animated particle canvas
└── ParticleBackground.module.css
npm install framer-motionIn app/layout.jsx:
import { Syne } from "next/font/google";
const syne = Syne({ subsets: ["latin"], weight: ["400", "700", "800"] });
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={syne.className}>{children}</body>
</html>
);
}// app/page.jsx
import HeroSection from "@/components/HeroSection";
export default function Home() {
return (
<main>
<HeroSection />
</main>
);
}| What | Where |
|---|---|
| Name / bio text | HeroSection.jsx — content block |
| GitHub URL | HeroSection.jsx — href on btn |
| Contact email | HeroSection.jsx — mailto: href |
| Stats numbers | HeroSection.jsx — stats array |
| Terminal lines | HeroSection.jsx — TerminalLine |
| Colors / fonts | HeroSection.module.css :root |
| Particle count | ParticleBackground.jsx — PARTICLE_COUNT |