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

Focused View

Mohamed Hajji

7:03:28

14 View

1. Course trailer

1. Course trailer.mp4

01:10

2. Creating our project

1. Create next app.mp4

07:14

2. Metadata and favicon.mp4

03:52

3. Clsx and Tailwind-merge.mp4

08:19

4. Adding google and custom fonts.mp4

12:22

3. Visuals Grain background, Water effect, custom cursor

1.1 noise keyframes.txt

1.2 noisy-background.zip

1. Grain background.mp4

10:16

2.1 httpsgithub.comstephenscaffreact-animated-cursor.html

2. Custom animated cursor.mp4

08:11

3. Water wave effect.mp4

09:58

4. Lets create our basic ui components first

1. Creating the card component.mp4

09:57

2. Creating the button component.mp4

11:55

3. Creating the Input and Textarea components.mp4

08:35

4. Creating the profile component.mp4

06:25

5. Creating the fancy button component.mp4

08:18

6. Createing the Live clock component and handle live time with moment.mp4

13:03

7. Magnetic effect wrapper.mp4

16:54

5. Landing section

1. What we will build, and working on header.mp4

12:53

2. The Slogan.mp4

11:20

6. Featured section

1.1 globals.zip

1. Animated heading component.mp4

18:54

2. Featured card Header.mp4

14:12

3. Featured Card Video.mp4

12:19

4. Expandable cards.mp4

13:32

7. About section

1. Building the structure of about section.mp4

07:24

2. Lets create the Me card.mp4

12:33

3. Lets create the Resume card.mp4

07:33

4. Lets create the Background card.mp4

02:36

5. Lets create the Gallery swiper.mp4

08:40

6. Lets create the Timeline component.mp4

20:47

7. Lets create Experience, Education, Instructor, Certifications cards.mp4

09:10

8. Lets create the Stack card.mp4

16:49

8. Contact section

1. Contact cards.mp4

12:21

2. Contact form structure.mp4

10:38

3. Select input and handle all complexity.mp4

17:32

4. Send emails easily from frontend only.mp4

20:52

9. Full screen animated menu

1. Menu setup.mp4

13:26

2. Profile card and menu links.mp4

13:11

3. Navlink dot scale effect with framer motion.mp4

05:53

4. Working on Footer links.mp4

04:09

5. Blend mode about menu card.mp4

10:29

6. ShowHide toggle button after scrolling.mp4

03:13

10. Deployment

1. Lets deploy !.mp4

06:33

Description

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

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

Who is this 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

What You Need to Know?

Basic Understanding of next js

Desire to Learn

More details

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

User Reviews

Rating

average 0

Total votes0

Focused display

Hello there ?My name is Mohamed HAJJI, i am a full stack web developer and a good one of course, i have great knowledge in the web development field in both frontend and backend ,i have built countless applications using many different technologies, and my job here is to take everything i know and try and share it with all my fellow developers from all levels especially for new developers because i have been there and i know the struggle of trying to learn and adapt to all the technologies we have nowadays and i will try in my new journey as an instructor to have different courses to build different major projects using different technologies.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.