Build modern portfolio with react js and next js

Name: Build modern portfolio with react js and next js
Rating: 4.4 (22 reviews)

Created byMohamed Hajji

Last updated 2/2026

English

What you'll learn

Master Next js 14: Gain a comprehensive understanding of Next js 14, the latest version of the Next js framework, and learn how to leverage its features
Create Stunning Visual Effects: Learn how to implement animated noisy backgrounds, custom cursors, and dynamic water effects using React js and Next js
Design Beautiful and Interactive Components: Develop skills in designing and implementing beautiful project cards, expandable sections
Master the deployment process and learn how to deploy your portfolio live on Vercel, ensuring that your projects are accessible to everyone

Course content

10 sections • 40 lectures • 7h 3m total length

Course trailer1:10

Animated heading component18:54
Learn to build a featured heading component with a backdrop number, animated SVG curve, and hover-enabled SVG interactivity, using a hidden component architecture in React TSX.
Featured card: Header14:12
Featured Card: Video12:19
Build a featured card with two video components, control an external active state to play or pause via useRef, and apply grayscale when inactive.
Expandable cards13:32
Build expandable cards for a portfolio with a featured card and hover-driven expansion using a hovered index, collapsing to one column on small screens and three on large screens.

Building the structure of about section7:24
Let's create the Me card12:33
Build a me card for a React and Next.js portfolio by importing gallery images from a data file, and rendering a responsive, image-backed card with absolute positioning and styled tags.
Let's create the Resume card7:33
Let's create the Background card2:36
Create the background card in the cards component, with the title my background, and style the text in white, underlined, and italic using nbsp for spacing.
Let's create the Gallery swiper8:40
Let's create the Timeline component20:47
Let's create Experience, Education, Instructor, Certifications cards9:10
Let's create the Stack card16:49

Contact cards12:21
Contact form structure10:38
Build a responsive contact form in a react and next js 14 app with a two-column layout, name, email, subject, budget, message, and a send button, storing values in state.
Select input and handle all complexity17:32
Build a reusable select input in React that supports multi-select and single selections. Map service and budget options, manage state with useState, and toggle choices with checkbox or radio inputs.
Send emails easily from frontend only20:52
Discover how to send emails from a Next.js frontend using EmailJS, set up a Gmail service and template, and wire form fields for name, email, subject, and message.

Menu setup13:26
Learn to set up a full screen menu in a React/Next.js portfolio, including header integration, a toggle button, and a boolean open state, with basic motion animations.
Profile card and menu links13:11
Explore building a responsive full-screen menu with a profile card and animated navigation links using Framer Motion in a React and Next.js 14 project.
Navlink dot scale effect with framer motion5:53
Learn to build a navlink dot scale effect with framer motion by creating a white circular dot, animating open and close states via variants, hover, and state management.
Working on Footer links4:09
Blend mode about menu card10:29
Develop a split-layout menu card for a React and Next.js 14 portfolio, with a 500-pixel pane, header and links, animated text, and a blended background shade image.
Show/Hide toggle button after scrolling3:13

Requirements

Basic Understanding of next js
Desire to Learn

Description

"Embark on a journey of modern web development mastery with our course 'Building Modern Portfolios with React.js and Next.js 14 (2024)'. Dive into the latest advancements in web technology as you harness the power of Next.js 14 to craft dynamic and visually stunning portfolios.

Throughout this comprehensive course, you'll learn to create a modern portfolio utilizing the cutting-edge features of Next.js 14. From setting up your development environment to deploying your masterpiece live on Vercel, every step of the process is covered.

But that's just the beginning. Delve into the world of advanced web design techniques as you discover how to create captivating animated backgrounds, custom cursors, and dynamic water effects using React and Next.js. Impress your visitors with beautiful project cards and expandable sections, all designed to showcase your work in the best light possible.

In addition, you'll master the art of crafting an engaging 'About' section complete with timelines and exquisite typography, setting your portfolio apart from the rest. And when it comes to user interaction, our course has you covered. Learn to create an advanced contact form with ease, and effortlessly integrate email sending functionality to stay connected with your audience.

But the excitement doesn't end there. Explore the realm of SVG animations with Framer Motion, adding a touch of creativity and interactivity to your portfolio like never before. And to tie it all together, discover how to create a fully animated menu with seamless slide animations, providing users with a delightful browsing experience.

By the end of this course, not only will you have built a stunning modern portfolio from scratch, but you'll also have gained invaluable skills in React.js, Next.js 14, and advanced web design techniques. So, are you ready to unleash your creativity and showcase your talents to the world? Join us on this journey and bring your portfolio to life like never before!"

Who this course is for:

Web Developers Looking to Enhance Their Portfolios
Students and Recent Graduates
Freelancers and Entrepreneurs
Designers Transitioning to Web Development
Anyone Interested in Modern Web Development

Build modern portfolio with react js and next js

What you'll learn

Explore related topics

Course content

Course trailer1 lecture • 1min

Creating our project4 lectures • 32min

Visuals: Grain background, Water effect, custom cursor3 lectures • 28min

Let's create our basic ui components first7 lectures • 1hr 15min

Landing section2 lectures • 24min

Featured section4 lectures • 59min

About section8 lectures • 1hr 26min

Contact section4 lectures • 1hr 1min

Full screen animated menu6 lectures • 50min

Deployment1 lecture • 7min

Requirements

Description

Who this course is for: