The Hero Section is the most critical part of your portfolio. We'll build it to be fully responsive and utilize our global $color-crimson variable and @include mobile mixin.
1. Hero Styling (Hero.module.scss)
Because we configured prependData in next.config.mjs, we don't need to import our variables or mixins here.
We'll use Next.js Image for performance and standard HTML for the structure.
// src/components/layout/Hero.tsximport styles from './Hero.module.scss';import Link from 'next/link';interface HeroProps { name: string; role: string; description: string;}export default function Hero({ name, role, description }: HeroProps) { return ( <section className={styles.hero}> <h1 className={styles.title}> Hi, I'm <span>{name}</span> </h1> <h2 className={styles.role}>{role}</h2> <p className={styles.description}>{description}</p> <div className={styles.cta}> <Link href="/portfolio" className="btn-primary"> View My Work </Link> </div> </section> );}
3. Usage in the Homepage
Now, simply drop the component into your main page. Next.js will handle the Critical CSS extraction automatically.
// src/app/page.tsximport Hero from '@/components/layout/Hero';export default function HomePage() { return ( <main> <Hero name="Alex" role="Full Stack Developer" description="I build high-performance web applications using Next.js and SCSS." /> {/* Other sections like Projects or Skills go here */} </main> );}
Pro-Tip: Framer Motion Integration
To add an entry animation, you can wrap your hero content in a <motion.section> from Framer Motion. Since animations require browser APIs, you must include the "use client"; directive at the top of your component file.
"use client"; // Required for Framer Motionimport { motion } from 'framer-motion';import styles from './Hero.module.scss';export default function Hero() { return ( <motion.section initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className={styles.hero} > {/* Your Content Here */} <h1>Welcome to my Portfolio</h1> </motion.section> );}