Build modern portfolio with react js and next js 14 (2024)

Build modern portfolio with react js and next js 14 (2024), available at $54.99, has an average rating of 4.67, with 40 lectures, based on 9 reviews, and has 130 subscribers.

You will learn about 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 This course is ideal for individuals who are Web Developers Looking to Enhance Their Portfolios or Students and Recent Graduates or Freelancers and Entrepreneurs or Designers Transitioning to Web Development or Anyone Interested in Modern Web Development It is particularly useful for Web Developers Looking to Enhance Their Portfolios or Students and Recent Graduates or Freelancers and Entrepreneurs or Designers Transitioning to Web Development or Anyone Interested in Modern Web Development.

Enroll now: Build modern portfolio with react js and next js 14 (2024)

Summary

Title: Build modern portfolio with react js and next js 14 (2024)

Price: $54.99

Average Rating: 4.67

Number of Lectures: 40

Number of Published Lectures: 40

Number of Curriculum Items: 40

Number of Published Curriculum Objects: 40

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

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

Target Audiences

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

“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!”

Course Curriculum

Chapter 1: Course trailer

Lecture 1: Course trailer

Chapter 2: Creating our project

Lecture 1: Create next app

Lecture 2: Metadata and favicon

Lecture 3: Clsx and Tailwind-merge

Lecture 4: Adding google and custom fonts

Chapter 3: Visuals: Grain background, Water effect, custom cursor

Lecture 1: Grain background

Lecture 2: Custom animated cursor

Lecture 3: Water wave effect

Chapter 4: Let's create our basic ui components first

Lecture 1: Creating the card component

Lecture 2: Creating the button component

Lecture 3: Creating the Input and Textarea components

Lecture 4: Creating the profile component

Lecture 5: Creating the fancy button component

Lecture 6: Createing the Live clock component and handle live time with moment

Lecture 7: Magnetic effect wrapper

Chapter 5: Landing section

Lecture 1: What we will build, and working on header

Lecture 2: The Slogan

Chapter 6: Featured section

Lecture 1: Animated heading component

Lecture 2: Featured card: Header

Lecture 3: Featured Card: Video

Lecture 4: Expandable cards

Chapter 7: About section

Lecture 1: Building the structure of about section

Lecture 2: Let's create the Me card

Lecture 3: Let's create the Resume card

Lecture 4: Let's create the Background card

Lecture 5: Let's create the Gallery swiper

Lecture 6: Let's create the Timeline component

Lecture 7: Let's create Experience, Education, Instructor, Certifications cards

Lecture 8: Let's create the Stack card

Chapter 8: Contact section

Lecture 1: Contact cards

Lecture 2: Contact form structure

Lecture 3: Select input and handle all complexity

Lecture 4: Send emails easily from frontend only

Chapter 9: Full screen animated menu

Lecture 1: Menu setup

Lecture 2: Profile card and menu links

Lecture 3: Navlink dot scale effect with framer motion

Lecture 4: Working on Footer links

Lecture 5: Blend mode about menu card

Lecture 6: Show/Hide toggle button after scrolling

Chapter 10: Deployment

Lecture 1: Let's deploy !

Instructors

Mohamed Hajji
Full Stack web developer

Rating Distribution

1 stars: 0 votes
2 stars: 1 votes
3 stars: 0 votes
4 stars: 0 votes
5 stars: 8 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu