From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Building the hero section

Building the hero section

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Building the hero section

“

Welcome to this session on building a stunning hero section for your portfolio website. We'll craft a visually appealing and responsive section, incorporating intro text, call-to-action buttons, a profile image, and floating tech icons. Along the way, you'll learn about responsive layouts, icon overlays, and light-dark styling – all while keeping the code clean and straightforward. This is how the Hero section looks like in the final website. You will build a horizontal Flexbox with two sides. The left side will display some intro text and call-to-action buttons. And the right side will display a profile image and floating tech icons. In small screens, the Flexbox becomes vertical. to index.jsx inside the hero folder. Let's remove placeholder text. Now it is time to add some basic styling and layout using Tailwind CSS. I've added the FlexFlexCall class to make this a flex container, with items stacked vertically by default. Let's make it responsive. I added MD-FlexRow, which means on…

Contents