Build and Deploy a Fullstack Responsive Portfolio Website | ULTIMATE Step By Step Tutorial 2023

Do you know the best way to show your skills to employers or potential clients? Stand out from the crowd by presenting a well-digitalized flexible portfolio and get your dream job.

✅ A special YOUTUBE discount code is automatically applied!

📚 Materials/References:

In this video, you'll learn #ReactJS Best Practices, file, and folder structure, the use of SCSS, #Animations using the most popular animation library - Framer Motion. And most importantly, you’ll learn how to use #Sanity. Sanity will allow us to dynamically manage the content of the entire application.

Use the special promo code "YOUTUBE" on checkout to save $60!

❤️ Support JavaScript Mastery & Suggest Future Videos:

🌎 Find Me Here:

💼 Business Inquiries:

Time Stamps 👇
00:00:00 Intro
00:03:55 Backend Setup
00:21:23 File & Folder Structure
00:32:34 Navbar
01:05:18 Header Section
01:32:29 About Section
01:43:53 Sanity & React
01:56:19 Higher-Order Components
02:09:37 Work Section
02:42:52 Skills Section
03:24:38 Testimonial Section
03:50:57 Contact Section
04:18:25 Deployment

[nirmalshah]

If only I could express my gratitude towards you, my friend. You keep dropping these absolutely out-of-the-world videos, week after week and they help me learn something new every single time. Thank you so much!

[tusharghildiyal]

I always disable my adblocker for a few channels, so that ads run on their video and they get the revenue which they totally totally deserve.
Javascript Mastery, you are one of them.
Great stuff again my man. cant thank you enough ❤️

[MrtnX]

For the people having trouble with the different versions of Sanity up to 13:00 What you have to do is to import your file name into the script.js file inside the schemas folder:

import tesstimonials from "./testimonials"
export const schemaTypes = [testimonials]

You create the "testimonials" file as instructed in the video and skip creating a chema.js file

[talebulkawser]

Oh how could we ever showcase our appreciation to you! Bringing us the best of the best contents for free! Thanks a lot Adrian!❤❤

[simon-olivierdesautels]

For those who wants a Quick fix for the bugged navbar (in mobile):

1-Add style={{ opacity:0 }} in your <motion.div>
2-Add opacity:[0.9, 1] in whileInView

Hope this helps

[mangodale.bingleman]

Just finished building this website in 3 days, and turns out it's awesome! As a beginner developer with no prior experience, it's hard to understand what many courses teach out there. Therefore, I search how to make websites on youtube and I found this video, follow along, and practice. Dang, it's easy yet very fun to make, and most of all, I understand 100% of what you talk! Especially that bug fix part thing, I have fun while fixing it along with you, turns out I have a typo and fix it shortly afterwards. Not gonna use it to get a job though, but I've learned so many things, including that higher order component, it's very cool. Thank you for providing this free course for everybody, and you deserve more attention on the Internet. Maybe can you do a part 2, where you can add dark mode or implementing blogs? Thank you so much! 😎👍

[SvetaSveta-mshi]

I've been looking for a project with Sanity for so long. I'm so happy that you made one. I'm on cloud nine. I can't thank you enough for making such cool and instructive videos. I'm blown away by your consistency, hard work, proficiency in these technologies. Hands down, you're the best! 🙌

[MostlyPeacefulNinja]

Guys, I just finished building the site in this tutorial and it works. Going to deploy and customize it soon. You will run into a few or a lot of problems, but if you're serious about being a developer you will have to learn how to Google the solutions and solve then yourself. It's part of the job.

Thank you again for the great tutorial. Gotta go now, I have a few more apps to build... 🏃🏼‍♂️😅

[TheGrandmaster]

I'm not even sure what to say except thank you. This is just awesome. I have many, many courses I bought on Udemy. This one just jumped ahead of all of them. You've somehow managed to capture exactly what I wanted to learn and build, and without a 30 min course where I can't learn enough, or a 50 hour course where I"ll never be able to get around to it. This is something I can do, learn, build, to get back on track and back in my field and improve my entire life. Awesome man. Starting it now.

[vladislavlatsko]

I found a little improvement in the "Skills / Work exp." section:

If we've not the same length of years for ex: 2020-2021 && since 2019 && 2020 - now, then div on the right side won't be in a straight column and it seems not good.
To fix this simply add "width: 100px;" to the ".app__skills-exp-year " class.

BTW thanx for this awesome video and the whole channel as well, you are being helpful for a lot of people

[frontend_notes]

Guys, whose site was crashed at Testimonials section after adding an <img/> tag, I wrote exactly like in Sanity: "imageurl". And it worked. The final version should be like <img />

[MrtnX]

I often say that I'm blessed by the algorithm and this video is proof of that. I'm currently working on and project and I needed an easy way to allow the users to add content to the page and your channel popped out. Thank you so much for this.

[richardrobertbraulporras]

I HONESTLY DON'T HAVE WORDS TO DESCRIBE HOW MUCH I APPRECIATE YOU, THANK YOU SO MUCH MAN, IT WAS MY FIRST PROJECT IN REACT. YOU ROCK!!!

[HimanshuSharma-spys]

I always watch your videos and then try to make things myself. It taught me a lot about project structure and best practices thanks a ton, Adrian! 🙂

[alstudiowebdev]

Another amazing project by JSM that I can't wait to dive into!!

Edit: Absolutely LOVED the Higher Order Components section. I've watched many, MANY React-related videos and you are the first to include this! A million thanks!

Edit2: Just finished the video in its entirety. I can't tell you how pumped I am to start implementing Sanity into future projects.

For anyone that is using Firefox and is new to CSS that may get caught off-guard by the backdrop-filter not working, it is just because it is incompatible with Firefox. If you want to achieve the same result, a ::before or ::after pseudo selector will need to be used along with some additional CSS styling :)

[devanochi]

Man you are a god gift, your teaching algo is god touch . The clear accent, explaining every tech from scratch, separating videos and repeating infos ( helps starters and mid developers to understand much more ), and finally a real world projects . Man if i ever get a job i will definitely pay you back, you are the most guy who deserve coffees and patreon i ever seen .
p.s : some people may get scared of long videos, you can make every long video as a play list ( chapters are already there ) + including the long video on the end of the list, so both sides gonna be satisfied, and you got more views and likes too ( many creators did it ) .

[lucasdelima]

I didn't expect to find higher order components around here, I'm learning a lot with this video! Thanks for doing this, it's helping me a lot!

[synt-x]

This is not only next level. It's JSM level!!!
Update: That HOC worked like a gem❤️. Magical JSM!

[awildkiera]

Thank you so much for this tutorial! I've been learning React for the last year or so and have been building small projects, but this really leveled up my skills. I am now writing code that is much cleaner and more efficient, there are so many good practices in here.

[azreenisaac]

finally finish the whole project! A lot of things need to be fix by looking at new updated documentation but overall it's nice! Thank you