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

Поделиться
HTML-код
  • Опубликовано: 18 сен 2024

Комментарии • 1,7 тыс.

  • @nirmalshah9947
    @nirmalshah9947 2 года назад +309

    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!

    • @javascriptmastery
      @javascriptmastery  2 года назад +27

      My pleasure!

    • @sanketss84
      @sanketss84 2 года назад +5

      same thoughts, just amazing stuff

    • @fleckenfurz77
      @fleckenfurz77 2 года назад +2

      @@javascriptmastery
      I can only concur: Thanks a lot!! Simply great art!
      But I have a small but very tricky problem:
      Let's say I wrote a small game in plain javascript (with canvas).
      And I would like to link this e.g. in the section "work"/experience (code is on github).
      How could I achieve this?
      It's only one (html) file, since I put all the css and javascript in there.
      So my question would be:
      Can I link from your react one pager to another file on my hosting server (digitalocean)?
      (..so that only this static file (the html) is delivered to the client, which then opens in a new tab)

    • @techcomp5974
      @techcomp5974 2 года назад +1

      @@javascriptmastery sir pls help i could not install node-sass dependencies help me!

    • @dipankarchetia843
      @dipankarchetia843 2 года назад +1

      plase help me i am stuck

  • @simon-olivierdesautels2619
    @simon-olivierdesautels2619 2 года назад +13

    For those who wants a Quick fix for the bugged navbar (in mobile):
    1-Add style={{ opacity:0 }} in your
    2-Add opacity:[0.9,1] in whileInView
    Hope this helps

  • @mangodale.bingleman
    @mangodale.bingleman 2 года назад +77

    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! 😎👍

    • @YashCurious
      @YashCurious 2 года назад +2

      Since how long you have been learning web development ?

    • @mangodale.bingleman
      @mangodale.bingleman 2 года назад +2

      @@YashCurious Started learning some HTML last summer but stopped after 3 days due to lack of motivation. Now I'd like to find something new for 2022, and then I decided to come back to coding, and now I forgot everything. Then I found this video and the rest of the story is in my main comment.

    • @jaffasunny
      @jaffasunny 2 года назад +1

      Thats great!! Can you tell me if your testimonials navigation dots are working?

    • @naturaladdict7005
      @naturaladdict7005 2 года назад +1

      @@jaffasunny I have same issue brother

    • @jaffasunny
      @jaffasunny 2 года назад +3

      @@naturaladdict7005 i already fixed it by going to the navigation dots jsx file and followed the array containing names of different pages just make sure that you've spelled testimonial correctly. I hope this fix things for you too

  • @talebulkawser5865
    @talebulkawser5865 2 года назад +69

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

    • @javascriptmastery
      @javascriptmastery  2 года назад +3

      Thank you!! ❤️

    • @3minutesbibletruth
      @3minutesbibletruth 2 года назад +1

      The master teacher I can't forget his great works when I become a senior developer

    • @talebulkawser5865
      @talebulkawser5865 2 года назад

      @@twizzler1415 i really wish I could tho. I live in an Asian country and I don't have any card with dual currency, the bank wouldn't give me a dual currency card without certain conditions like I'm studying abroad or I do business with the outer world etc

  • @tusharghildiyal6814
    @tusharghildiyal6814 2 года назад +27

    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 ❤️

    • @javascriptmastery
      @javascriptmastery  2 года назад +1

      Thanks you so much!!

    • @tusharghildiyal6814
      @tusharghildiyal6814 2 года назад +1

      @Shivani wow. i never thought i would be getting interview opportunities on youtube 😂😂

    • @yousufhossain9768
      @yousufhossain9768 2 года назад +2

      @@tusharghildiyal6814 Maybe some scammers be careful dude .. this lads asking this same question to almost everyone.

  • @M4rt1nX
    @M4rt1nX Год назад +23

    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

    • @sai-em5ed
      @sai-em5ed Год назад +1

      Can you please send your source code please.....

    • @anuj_176
      @anuj_176 Год назад

      hey did you get error in hoc when i tried exporting app wrap passing component and id it showed error

    • @M4rt1nX
      @M4rt1nX Год назад

      @@anuj_176 Hi, I didn't complete the project because it was giving me too much trouble with the dependencies. I went to the repository and read some recommendations but it didn't worked. I wasn't able to download Sass and I changed the node version, but that conflicted with everything else.
      I only needed to learn the Sanity part for my project so I decided to go ahead with vanilla Javascript because that suits me better.

    • @fuseplan4507
      @fuseplan4507 11 месяцев назад

      @@sai-em5ed
      delete the schema.js and if there is not an index.js file in schema then create one and paste it and then run the sanity server again you should have them. cheers
      import abouts from "./abouts"
      import testimonials from "./testimonials"
      import works from './works'
      import brands from './brands'
      import experiences from './experiences'
      import skills from './skills'
      import workExperience from './workExperience'
      import contact from './contact'
      export const schemaTypes = [testimonials,
      abouts,
      brands,
      works,
      experiences,
      skills,
      workExperience,
      contact ]
      ]

    • @rutujagosavi4450
      @rutujagosavi4450 10 месяцев назад

      Helpful!!

  • @SvetaSveta-ms4hi
    @SvetaSveta-ms4hi 2 года назад +50

    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! 🙌

    • @javascriptmastery
      @javascriptmastery  2 года назад +1

      Thank you so much, Sanity is great!

    • @stephanpaul8954
      @stephanpaul8954 Год назад

      He has another AWESOME one, ruclips.net/video/XxXyfkrP298/видео.html its the ecommerce app.

    • @Developer888
      @Developer888 Год назад

      Adrian is the best out site instructor I've seen on youtube period, easy to understand, explains every step, you can tell the guy has a passion for this because explaining it so throughly. I recommend doing his chat gbt clone app first that way you can use it to help you understand the code in all the other videos.

  • @MostlyPeacefulNinja
    @MostlyPeacefulNinja Год назад +4

    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... 🏃🏼‍♂️😅

    • @MostlyPeacefulNinja
      @MostlyPeacefulNinja Год назад

      @@pd6991 Sorry for the late response. YT never sent me a notification for this reply. I hope you have resolved the issue. If not, it is helpful to provide a timestamp in the video where you are stuck, then I may be able to adequately help you.

    • @MostlyPeacefulNinja
      @MostlyPeacefulNinja Год назад

      @omjaju9251 Maybe. It worked 4 months ago. Try it yourself. Try to sign up. It costs you nothing to check, smh.

    • @pranayg6816
      @pranayg6816 Месяц назад

      @@MostlyPeacefulNinja can you tell how the backend sanity works like i am not getting the same way like in the video and i cant find schema.js file in the build before 13:00

  • @TheGrandmaster1
    @TheGrandmaster1 2 года назад +17

    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.

    • @javascriptmastery
      @javascriptmastery  2 года назад +2

      Thank you so much Michel, this is a wonderful comment and I highly appreciate it. Means a lot!

    • @bez1196
      @bez1196 2 года назад

      I hope you got around to it.

  • @vladislavlatsko5782
    @vladislavlatsko5782 2 года назад +7

    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

  • @alstudiowebdev
    @alstudiowebdev 2 года назад +15

    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 :)

    • @smilepk9297
      @smilepk9297 2 года назад

      please can you help me My sanity data not shown on my website in front end I write same code match same code from your code but can't fetch data from sanity to front end i tried all your same code can your GitHub link please help me to find bug

    • @wolfpride9416
      @wolfpride9416 Год назад

      Is Sanity a paid subscription?

  • @frontend_notes
    @frontend_notes 2 года назад +33

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

    • @Devbello.
      @Devbello. Год назад

      thanks so much. was stuck till i saw your comment 👍

  • @HimanshuSharma-sp8ys
    @HimanshuSharma-sp8ys 2 года назад +14

    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! 🙂

    • @javascriptmastery
      @javascriptmastery  2 года назад +1

      Amazing, thank you! 😊

    • @vibhusharma2881
      @vibhusharma2881 2 года назад

      Brother i am in first year.which path should I follow to be a good web developer.

    • @HimanshuSharma-sp8ys
      @HimanshuSharma-sp8ys 2 года назад +2

      ​@@vibhusharma2881 My advice might be opinionated but here it goes ...
      Don't jump straight to web dev. First, do DSA with java. If you know java you can learn spring boot in the future.
      After doing DSA, you will have a good knowledge of programming that will help you to make good projects. Build a good resume and do internships from the second year.
      Just remember that you can make a good project in a matter of weeks but doing DSA takes time.

    • @vibhusharma2881
      @vibhusharma2881 2 года назад

      @@HimanshuSharma-sp8ys brother i know c++ so can I do DSA in c++.or is it necessary to do DSA in Java.

    • @HimanshuSharma-sp8ys
      @HimanshuSharma-sp8ys 2 года назад

      @@vibhusharma2881 You can definitely use C++, It is a great language but ...
      1. You will never use it in web dev.
      2. It's much harder to contribute to open source c++ projects as they are too complex.
      3. Since you have time, learning Java is worth it as you can even try android app development.

  • @devanochi3073
    @devanochi3073 2 года назад +1

    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 ) .

    • @javascriptmastery
      @javascriptmastery  2 года назад +1

      Thank you so much for the tips!

    • @javascriptmastery
      @javascriptmastery  2 года назад +1

      Hi there, I love your comment so much. I want to use your comment as a testimonial for my upcoming course platform, is that all right with you? :)

  • @awildkiera
    @awildkiera 2 года назад +8

    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
    @azreenisaac Год назад +2

    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

    • @besthor_tech
      @besthor_tech 11 месяцев назад +1

      Hello! @azreenisaac Congratulations on completing the project successfully. I'm currently working on it as well and have noticed that some updates are needed based on the new documentation for sanity V3. Would you be willing to share any insights or guidance on how you approached these updates?

    • @besthor_tech
      @besthor_tech 11 месяцев назад +2

      I understand that it might be a lot to ask, but if you're willing to share any relevant source code or configurations, it would be immensely helpful for me and others who are working on the project.

    • @Thor0056
      @Thor0056 9 месяцев назад +1

      Yes please share @@besthor_tech

  • @downtotheroots1755
    @downtotheroots1755 2 года назад +14

    Absolutely LOVE your videos. I am self teaching myself how to write code and develop websites and your videos are top-notch. You have helped me so much understand what coding is about. Hopefully one day I can transition my career to a front end developer. Please keep up the good work and as mentioned in the video I would love to see you do a video on animations!!

    • @joel9909
      @joel9909 Год назад

      We are proud of you, and you will get there soones

  • @hiteshkaushik2950
    @hiteshkaushik2950 2 года назад +2

    I bought hosting on hostinger last week after your recommendation and was thinking of creating a portfolio project, 🎉
    And here you go,
    Thanks Adrian 😍🔥🙏

  • @voodoo5299
    @voodoo5299 2 года назад +7

    It has been a wonderful experience. I hoped to learn React in a more practical manner and I have been able to do so. Thanks to you. I have learnt how to debug and how to code with good practices. Really excellent tutorial and I wish this reaches to most people.

  • @M4rt1nX
    @M4rt1nX Год назад +1

    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.

  • @davidokwudili7779
    @davidokwudili7779 2 года назад +5

    This is really great, i have been looking forward to something like this. This is great.

  • @richardrobertbraulporras9649
    @richardrobertbraulporras9649 2 года назад +1

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

  • @alicenyw1872
    @alicenyw1872 Год назад +4

    Tooltip solution:
    The new version of react-tooltip works diffrently.
    Import following:
    import { Tooltip } from "react-tooltip";
    import "react-tooltip/dist/react-tooltip.css";
    add an id="exp-item" to the div with the class namee of "app__skills-exp-work".
    At the div's closing tag add the tooltip:
    You can also style the tooltip with data-tooltip-variant="light". Found this in their v5 documentation.

    • @shivamsarang
      @shivamsarang Год назад

      Hey, I am not able to figure out this problem, I did what you said. The website just pops up for some time and goes black. Just aa white screen. Any help will be appreciated.
      Edit: Thanks very much, I solved it. Made a blunder mistake in closing tag of motion.div. Thanks very much

    • @burningvertex
      @burningvertex Год назад

      @@shivamsarang any chance you can post a code snippet for this as also having the issue. Thanks

    • @burningvertex
      @burningvertex Год назад

      any chance you can post a code snippet for this as also having the issue. Thanks

  • @albertb4460
    @albertb4460 Год назад +4

    Fix for Tooltip and ResizeObserver errors!
    (react-tooltip version > 5.21.1)
    On your :
    - Remove "data-tip"
    - Remove "data-for"
    - Use "data-tooltip-id={the id of the tooltip}"
    On your :
    - *ADD* closeOnResize={true}

    • @chrisaguirre_entrenador
      @chrisaguirre_entrenador 11 месяцев назад

      amz! How did you manage to solve it? I spent a lot of time looking for the solution, and I also read the documentation, but I couldn't figure it out on my own.

  • @bryantfoo9816
    @bryantfoo9816 2 года назад +3

    This is the best portfolio out there. Thanks Adrian!

  • @user-yq7nr5rq9o
    @user-yq7nr5rq9o Год назад +1

    I have to say that this is only channel where such premium content is available, learn by doing ia best way to learn,

  • @pranavkastury9610
    @pranavkastury9610 2 года назад +4

    Adrian, I am absolutely blown away by this tutorial. Stealing this shamelessly and changing the style with more framer / CSS code. One question I have:
    when the navigation bar is opened in mobile view, there is a slight flicker before the animation. Is there a way to fix this? I'd love to do this to improve the overall UI. Thanks again.

    • @1krystyan
      @1krystyan 2 года назад +1

      Hey, probably you don't need this anymore, but leaving this for anyone else to see, I've had the same problem and it's happening on Adrian's build as well.
      I've found a fix in the comments from @Simon-Olivier Desautels
      1. To the that has the mobile Menu -> Add the following style={{opacity: 0}}
      2. Add to the whileInView opacity: [0.9, 1] (ex: "whileInView={{x: [50, 100], opacity: [0.9, 1]}})"

  • @grsjohn1178
    @grsjohn1178 2 года назад +1

    This is the best react portfolio tutorial on RUclips, no question! Thank you for your kindness.

  • @ThannMalin
    @ThannMalin 2 года назад +3

    You are a great teacher so far that i found on the internet!!

  • @howardleen4182
    @howardleen4182 16 дней назад

    Started building this, first thing ive noticed is starting a new sanity project is different and creating schema types (not called schemas) is different as well. Make sure to follow the getting started videos (pure documentation would be better than only having to go through than videos but no matter)

  • @jimlee8016
    @jimlee8016 2 года назад +3

    Just finished the whole video. I would definitely recommend this video for beginners like me. Epic tutorial!

  • @oduniyitinuijioluwa2768
    @oduniyitinuijioluwa2768 2 года назад +1

    You have no idea what you are doing for thousands of people out there! Only God can repay you!! Great Stuff!

  • @mdridoy-ef2pw
    @mdridoy-ef2pw 2 года назад +4

    I am learning full stack for more than a year now.
    My backend skills are good.
    But my design skills are average.
    sure I can copy any design pixel perfect, but if you tell me to make the design from scratch, I got nothing.
    Can you do a video on how you come up with these awesome designs?
    I want to know how you start from scratch, focus on a topic, pick perfect images, make custom ui elements, etc.
    I want to see your actual grinding behind these designs.

  • @lucasdelima6500
    @lucasdelima6500 Год назад +1

    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!

  • @raphaeljaggerd3585
    @raphaeljaggerd3585 2 года назад +4

    Hey man. You make complicated concepts simple. Thanks for all the great videos.

  • @EduardoSanchez-un2hh
    @EduardoSanchez-un2hh 2 года назад +1

    Finally! Most portfolio websites tutorials use plain Js or not javascript at all.

  • @colekramer9892
    @colekramer9892 Год назад +3

    Love the content, is there an updated video with the current way sanity is set up?

  • @MrEvansjethro
    @MrEvansjethro 2 года назад +1

    Our dear and good friend. We truly appreciate your kindness and wish you all the best in life. Thank you for the tutorial and many others you've shared on this channel. Thank you!

  • @denysantos9012
    @denysantos9012 Год назад +4

    if node-sass dont work, type: npm config set legacy-peer-deps true and then npm i node-sass --save :)

    • @adulojujames2985
      @adulojujames2985 Год назад

      where can i locate the npm config pls?

    • @adulojujames2985
      @adulojujames2985 Год назад

      I have been stuck on this for a while now

    • @denysantos9012
      @denysantos9012 Год назад

      @@adulojujames2985 to fix this problem? It's just to type (npm config set legacy-peer-deps true) at the terminal, don't it work to you?

    • @denysantos9012
      @denysantos9012 Год назад

      @@adulojujames2985 you can also seach for the file .npmrc but before put active to see ocult files in your explore

  • @cristhianrogletek2249
    @cristhianrogletek2249 2 года назад +2

    You have a new subscriber, you are my total superHero. Thanks.
    This weekend i'll build this portfolio, God willing.
    Thanks!!!

  • @abhishekchaurasia_
    @abhishekchaurasia_ 2 года назад +7

    Thank you, Adrian, for a great tutorial. Another level🥰you always impress us with amazing and incredible projects 😎👍

  • @alkebulanmylove5348
    @alkebulanmylove5348 2 года назад +1

    I'm done ! thank you so much @Adrian, you're just something else, out of this world!

    • @nwosuemmanuel2143
      @nwosuemmanuel2143 5 месяцев назад

      How did you download the assets zip folder...the link here says dangerous site

  • @ayush88
    @ayush88 2 года назад +4

    I would like to thank you for all the efforts you put in to make such videos with amazing explanation

  • @shambashibmajumdar1268
    @shambashibmajumdar1268 2 года назад +2

    Love you Adrian! More power to you!

  • @danielolah5682
    @danielolah5682 2 года назад +3

    This guy just made awesome the new normal, Thanks man 😉

  • @Clytax
    @Clytax 2 года назад +1

    ngl its really satistfying to work with a clean file and folder structure like that :D

  • @gsusplaya40
    @gsusplaya40 2 года назад +3

    Man. For everything you have done and are doing, I truly thank you bro. You've helped me so much. I know there is much more to learn, but you have given me a great foundation. If you would, could you do a video on framer motion whenever you have a chance?

  •  Год назад +1

    Nevjerovatno dobri tutorijali, svaka čast i hvala ti na detaljima koje niko drugi do sada nije objasnio i pokazao. Mnogo pomaže u unaprijeđenju načina programiranja. Svako dobro ti želim.

  • @guillem5863
    @guillem5863 2 года назад +4

    Great job Adrian! I think everyone would love to see a Framer Motion / React Animation video, keep up the good work!!

  • @redghost433
    @redghost433 7 месяцев назад +1

    For anyone having issues with a sass error, such as cannot find sass module, try the npm I -g sass or the npm i sass -save-dev command. The latter fixed it for me.

    • @harshshukla_5544
      @harshshukla_5544 7 месяцев назад

      did u make the rest of the project complete?

    • @redghost433
      @redghost433 7 месяцев назад

      @@harshshukla_5544 not yet, still working on it. I’m guessing he points out fixes down the road?

    • @harshshukla_5544
      @harshshukla_5544 7 месяцев назад

      @@redghost433 hey you done with the project ? can i connect with you somewhere? your discord? github?

    • @mikeg6272
      @mikeg6272 7 месяцев назад

      Thanks! It works!

  • @adimishra3046
    @adimishra3046 2 года назад +3

    Your videos excites me more than any series 🔥🔥

  • @spencerpick3621
    @spencerpick3621 2 года назад +2

    excellent video man. Love how you explained every step for someone who is not completely proficient such as me!

  • @zeeshan4341
    @zeeshan4341 2 года назад +3

    This weekend.i am definitely going to create my awesome portfolio . thank you very much for this video ❤️🙏.you are awesome person and excellent teacher☺️ your videos help me a lot to learn and grow ❤️

  • @juanguirao
    @juanguirao 2 года назад +1

    Outstanding! Great job!
    I have followed the tutorial. The app is working and deployed, and I am now going to modify it to make my own version. Thank you!

    • @frostyfreezemovies
      @frostyfreezemovies 2 года назад

      Hello sir can u plz provide me a clone of this project actually i am getting an error i can not fetch my data from sanity .plz help me

    • @ryejinn9802
      @ryejinn9802 2 года назад

      @@frostyfreezemovies I am having this same issue as I am going through and constructing it let me know when you find a solution.

    • @azizvohra3142
      @azizvohra3142 2 года назад

      @@frostyfreezemovies Did you get any solution?

  • @thanzeelhassan
    @thanzeelhassan Год назад +5

    20:44 "node-sass" is is deprecated. use "sass" instead

    • @godagain
      @godagain Год назад

      hey, can you please help me regarding this project.

  • @andgoedu
    @andgoedu 2 года назад +1

    Dude thank you for the tutorial it enabled me to try and develop one on my own

  • @hamzezancaani6405
    @hamzezancaani6405 2 года назад +4

    Another level🥰you always impress us with amazing and incredible projects 😎👍

  • @devkumar9889
    @devkumar9889 2 года назад +4

    First thing I did was to like this video for providing it free

  • @PGSCHOOLFORPROGRAMMING
    @PGSCHOOLFORPROGRAMMING 2 года назад +2

    Thank you A Lot for this video

  • @HRicKbelo
    @HRicKbelo Год назад +5

    sanity is now in V3, and it's quite different from this tutorial... honestly I could not set up to work

  • @eagle-x8s
    @eagle-x8s 2 года назад +2

    I was literally looking for this! Thx for tutorial at the right time! You are literally my inspiration!!!

  • @preetikrushna9289
    @preetikrushna9289 2 года назад +3

    I Appreciate your efforts. Thank You for this tutorial.

  • @user-yq7nr5rq9o
    @user-yq7nr5rq9o Год назад +1

    Thanks For Clear and Understandable English , Am sure many indians takes benefits by this way ,

  • @oussamamidouch1286
    @oussamamidouch1286 2 года назад +3

    This man is himself a masterpiece, thank you for the quality content and your efforts sir !

  • @ayoabimbola777
    @ayoabimbola777 2 года назад +2

    Thank you so so much... I built the previous portfolio just a week ago and now this super amazing one!! Much love man 💙💙

  • @milanz2265
    @milanz2265 Год назад +3

    At the very start of the project im facing difficulties, instead of js files my sanity files are all TS. I personaly love jsm but i think im gonna try with another portfolio video.

    • @saurabh7650
      @saurabh7650 Год назад

      they ask you while building the sanity project that you want to use typescript or javascript. 'ts' for typescript and 'js' for javascript

    • @BananaBaragan
      @BananaBaragan Год назад

      @@saurabh7650 yes but in the video he has javascript and ts files, its absolutely misleading and wasted me 1 hour.

  • @adrianlaub6128
    @adrianlaub6128 2 года назад

    I just finished this tutorial and I learned so much.
    I only have two things to criticize:
    1. Why did we create the Work Experience Shema? We don't use it at all.
    2. It would be useful to put the job experience in chronological order. When I insert records into Sanity, they are randomly displayed.

    • @melvintowo654
      @melvintowo654 2 года назад

      How did you get your sanity to connect with your build? For some reason after doing the clientJS like twice from the ground up my Sanity won't connect with my local host

  • @KlenkDesigns
    @KlenkDesigns 2 года назад +5

    3:29:22 after adding the details for the testimonial the 'image-url field' is without an upload img option in my case. that leads to the problem that if I copy and paste the image url there, the whole page either turns completly blank or it's not showing anything of the testimonial details I recently filled out. Probably someone is facing the same or a similar issue and is able to help me here!
    Thank you!

    • @naturaladdict7005
      @naturaladdict7005 2 года назад

      I have the same issue, if you find the solution please tell me

    • @BK-201
      @BK-201 2 года назад

      did you check that array is exist? and also if you used react 18 you can try to remove strict mode

  • @toppmoviehighlights
    @toppmoviehighlights 2 года назад +1

    This is by far the best coding tutorial I've participated in. I enjoyed it so much. Much gratitude. Plus I'm definitely tagging you on Twitter with my finished project. Thanks again.

  • @theuncannyepicurean
    @theuncannyepicurean 2 года назад +3

    We are getting 6 figure paying jobs because of you. God bless.

  • @FascalRanky
    @FascalRanky 2 года назад +2

    Thank you, just what I needed after graduating

  • @mahmaraslam
    @mahmaraslam Год назад +4

    As Sanity V2's support is ended and now all should move to Sanity V3, so please guide how to do the needful changes according to that V3
    I am stuck and I want to make and build this tutorial

    • @picodvisual
      @picodvisual Год назад +1

      Me too, I too am stuck on the creation of the project, more precisely on the creation of the "Schema"

    • @KuldeepSahu-sq3cq
      @KuldeepSahu-sq3cq Год назад

      Mee too.

  • @muhammadraihannasywaan5591
    @muhammadraihannasywaan5591 2 года назад +2

    Thanks Sir thanks!!!

  • @Ga2-20
    @Ga2-20 2 года назад +3

    Hey, thanks for your efforts you do for us !
    Is it possible to make some advanced (or not advanced) fullstack app using Strapi v4 and NextJS?
    God bless you 😊

  • @mohammedtaha3219
    @mohammedtaha3219 2 года назад +1

    The Higher Order Components part was simply mind-blowing. Thank you soooooooooooooooooooo much for teaching us all this

  • @gbrachetta
    @gbrachetta 2 года назад +4

    It's a bit concerning that the token and the appId (or any other sensitive data) are compiled on the frontend for anyone to see in plain text.
    Moreover, the token allows editing, so it's a huge security risk.
    I believe that using the backend to fetch data and therefore dealing with confidential information would have been a WAY more valuable lesson than typing about three hours of HTML and SCSS.
    I believe that that alone would have a lot more beneficial results for future coders.

    • @alexreyne
      @alexreyne 2 года назад

      He's using a .env file. Which you would put in your .gitignore. So it's just as secure as putting it anywhere else.

    • @gbrachetta
      @gbrachetta 2 года назад

      @@alexreyne man do you know what you’re talking about? This is client side code. Anyone can see env variables as plain text.

    • @alexreyne
      @alexreyne 2 года назад

      @@gbrachetta I've been spending too much time with Next.js lmao.
      Though yaeh you don't want this, it's probably not a huge deal in this case. it's your personal portfolio. someone would have to care A LOT to bother even trying to scrape through a build file to try and find something like that.

    • @alexreyne
      @alexreyne 2 года назад

      @@gbrachetta and even then what are they gonna do? change your images? I mean it's not like you are gonna store your SIN number on your website or something stupid.
      though I guess there needs to be security for users sending you emails. Never know what dumb stuff people put in a text box.

    • @gbrachetta
      @gbrachetta 2 года назад +1

      @@alexreyne I understand but that’s not the point. Having personal tokens or credentials compile on the front end is a terrible idea and it shouldn’t be taught this way at all.

  • @theatypicaldeveloper
    @theatypicaldeveloper 2 года назад +2

    This is definitely something to get inspired from if you're looking to create your portfolio, great video!

  • @meocado
    @meocado 2 года назад +4

    I couldn't fetch data from Sanity even no errors caught. How to fix that please?

  • @suryansh70
    @suryansh70 Год назад +1

    I have completed the project thank you very much very nice project

  • @eliyahutarab4862
    @eliyahutarab4862 2 года назад +1

    Thank you man you just made my day with the HOC and all of this thank you so nuch keep it up

  • @merntech
    @merntech Год назад +3

    🎯 Key Takeaways for quick navigation:
    00:00 🌐 Building a digital portfolio is essential for showcasing skills.
    01:07 🛠️ Portfolio creation taught using React, SCSS, and Sanity.
    03:13 🚀 Initial setup involves creating an empty folder and installing dependencies.
    08:01 📄 Sanity used to set up schemas and dynamic content management.
    21:18 ⚙️ File and folder structure established for the project.
    26:27 🛠️ The tutorial focuses on building and deploying a fullstack responsive portfolio website.
    27:23 🧩 Components like header, footer, skills, testimonial, and work are organized into a readable structure.
    28:18 📚 Navigation bar is created as a simple component, not a container, using BEM naming methodology.
    35:08 🎨 SCSS is utilized for styling, including CSS variables and responsive media queries.
    48:54 📱 A hamburger menu for mobile navigation is implemented using React Icons and Framer Motion.
    52:33 🎬 The presenter offers to create a detailed video on Framer Motion and animations in React based on viewer interest.
    54:23 🎨 Styling the mobile navigation menu using media queries to control display and appearance.
    56:52 🕹️ Implementing animations for the mobile menu using Framer Motion for smooth transitions and effects.
    01:08:42 🖼️ Designing the hero section of the portfolio website with animated text, images, and circles.
    01:16:16 🎨 Adding background image, styling, and circles to the hero section for visual appeal and interactivity.
    01:18:00 🎨 Styling the app header: Flex layout, responsive design, and media queries for different screen sizes.
    01:20:45 🌐 Styling the header info: Flex layout for header info section with media queries for responsiveness.
    01:22:21 🏅 Styling badges and tags: Adding styles to badges, borders, and shadows for a 3D effect.
    01:24:53 🌀 Styling circles: Creating circles with varying sizes and responsive design using media queries.
    01:29:07 💼 Building the about section: Creating a dynamic about section with titles, descriptions, and images, while utilizing Framer Motion for animations.
    01:43:44 📝 Connecting Sanity CMS to the React Application: Learn how to connect Sanity CMS to your React application using a simple setup process involving project ID, data set, API version, CDN usage, and an API token.
    01:45:24 🚀 Utilizing Sanity Image URL Builder: Discover how to use the Sanity Image URL Builder to fetch images for your portfolio items and dynamically generate image URLs.
    01:49:50 📊 Fetching Data from Sanity CMS: Learn how to fetch real dynamic data from the Sanity CMS for your portfolio items using React hooks like useState, useEffect, and the Sanity client's fetch function.
    01:56:12 🛠️ Implementing Higher Order Components: Explore the concept of higher order components (HOCs) to wrap and reuse sections of your components, such as navigation dots, social media icons, and copyright, efficiently.
    02:07:26 📱 Enhancing Section Layouts with App Wrap: Discover how to enhance section layouts using the App Wrap higher order component, which adds consistent styling, social media icons, and navigation dots to your sections.
    02:11:18 🛠️ Set up works/portfolio section using React components and states.
    02:12:46 📊 Implement filter categories using state and mapping over predefined categories.
    02:16:16 🔄 Fetch and display portfolio data from a backend source (Sanity) using useEffect and states.
    02:20:16 📸 Style portfolio item layout, adjust image sizing, and apply hover effects for better UI/UX.
    02:27:34 💡 Add dynamic responsiveness with media queries to adapt the layout for different screen sizes.
    02:38:09 👩‍💻 Adding multiple projects: The tutorial adds additional projects to the portfolio, demonstrating how to include various categories such as UI/UX, mobile app, and more.
    02:39:41 🎨 Implementing project filtering: The tutorial modifies the project filtering functionality, making the filter options responsive and dynamic.
    02:41:01 🎨 Styling skills section: The tutorial demonstrates how to style and display skills using circular icons and responsive design techniques.
    02:54:43 💼 Displaying work experiences: The tutorial introduces the display of work experiences, utilizing React Tooltip for providing additional information.
    03:00:58 🛠️ React Tooltip usage: The tutorial explains the usage of the React Tooltip library for creating tooltip components to display more information about work experiences.
    03:03:41 🛠️ Debugging experience fetching: Identifying and fixing errors in code related to data fetching from experience array. Adding null checks and debugging logs to troubleshoot issues.
    03:04:21 🧪 Console logging data: Using `console.log` to inspect and understand the structure of fetched data, particularly the experience object and its nested arrays.
    03:05:42 🐞 Debugging nested mapping: Recognizing the need for nested mapping to access specific elements within arrays of experiences. Dealing with issues caused by nested data structures.
    03:07:33 🎨 Styling experiences section: Applying CSS styling to the experiences section, including flex layouts, margins, and media queries for responsive design.
    03:17:55 🪄 Creating reusable motion wrapper: Building a higher-order component (HOC) to add Framer Motion animations to sections, enhancing user experience with smooth transitions when scrolling through sections.
    03:29:13 🛠️ The tutorial demonstrates adding content to a testimonial section in a React application, including names, companies, and feedback.
    03:30:23 🎨 Styling of testimonial content and logos is explained, involving CSS properties like width, height, and flex layout for responsive design.
    03:32:30 ⏪ Buttons for navigating through testimonials are added, with click handlers and transitions. Handling first and last testimonial indices is also demonstrated.
    03:37:07 📢 Brands' logos are showcased using a mapping approach with Framer Motion animations and media queries for responsive logo display.
    03:48:58 📝 The footer section is implemented with contact information, including email and phone number links, along with a form layout for user input.
    03:57:06 📝 Defined state variables: Created form data and other states like "isFormSubmitted" and "loading".
    03:57:48 📝 Implemented handleChange function: Dynamically updates form data based on input changes.
    04:00:05 📝 Implemented handleSubmit function: Initiates data submission, updates loading state, and shows success message.
    04:01:12 📝 Styled form and footer: Applied styling to form inputs, text areas, and buttons for better UI/UX.
    04:15:19 📝 Deployment: Demonstrated how to build and deploy the React application using Netlify.
    Made with HARPA AI

  • @yoqubboyyaqupboyev5254
    @yoqubboyyaqupboyev5254 2 года назад +1

    Hi Adrian. Thank you for such an amazing build. I can't totally illustrate my appreciation to you. It took me off a lot of burden. I extended your build, adding some pages using react-router on top of it with Goggle Authentication when people want to see the whole of my works plus light/dark mode. I hope employers will love it. Thank you again

    • @kushagrashukla4364
      @kushagrashukla4364 2 года назад

      Hey can I know how you implemented light/dark mode? did you had to change background of every page and card or it worked without changing much of the background ?

  • @javascriptmastery
    @javascriptmastery  2 года назад +66

    Need the projects to put on this portfolio? Impress your employers with the NFT Marketplace and Filmpire - www.jsmastery.pro 🔥
    I asked Sanity to hook up some free stuff for this video... They made a custom 🔥 boosted free plan 👉 www.sanity.io/javascriptmastery2022
    I've also created The Ultimate Portfolio Guide to highly increase your chances of getting a job 👉 resource.jsmasterypro.com/portfolio-guide

    • @sadee7124
      @sadee7124 2 года назад +4

      Ur're GOD, teacher

    • @DeveloperJunaid
      @DeveloperJunaid 2 года назад +1

      Just love you ❤

    • @ChadidiDev
      @ChadidiDev 2 года назад +3

      node --v

    • @MuhammadAwais-xk8ft
      @MuhammadAwais-xk8ft 2 года назад +2

      It's very helpul for new developers to learn how to code and what to do next after learning react. Thank you soo much for helping me a lot. I have learned cray things from your videos. Please make some videos on NodeJS projects if possible please.

    • @bismarkcodes
      @bismarkcodes 2 года назад +1

      Awesome 🔥🔥🔥

  • @santhoshm1847
    @santhoshm1847 2 года назад +2

    Awesome😍, thanks a ton Adrian.

  • @brytebee1
    @brytebee1 2 года назад +2

    In my first experience with the React Higher Order Components (HOC) concept, you totally smashed it! Thanks for such an amazing video with such valuable content.

  • @atharvamali3081
    @atharvamali3081 2 года назад +1

    You have the top quality content for the learners like me. Definitely I am just subscribing your channel and turning on the notifications for all your upcoming videos. You just made me confident enough to build a website and just increase my skills.

  • @sarthakagarwal7128
    @sarthakagarwal7128 Год назад +1

    I liked the video before watching it!

  • @lucachang4178
    @lucachang4178 2 года назад +1

    Just finished the tutorial and deployed the site, such an amazing learning experience, thanks JSM!

    • @frostyfreezemovies
      @frostyfreezemovies 2 года назад +1

      Hey bro can u plz provide a clone of this project actually i am getting error i am unable to fetch my data from sanity plz bro help me

  • @manchao1416
    @manchao1416 2 года назад

    I cannot believe that someone can be this generous. I learn so much. Thanks

  • @Code_Solver
    @Code_Solver Год назад +1

    Excellent Video

  • @tolulopesoneye537
    @tolulopesoneye537 2 года назад +1

    I've been looking for a very nice template to build my own portfolio.
    I guess my prayers have been answered.
    This is just too good to be free.

  • @TheAremoh
    @TheAremoh 2 года назад +2

    Great tutorial! Great guy!! Thank you!!!

  • @nateenese
    @nateenese 2 года назад +1

    loved it! thank you very much sir

  • @sarfarajshaikh6038
    @sarfarajshaikh6038 2 года назад +1

    Simply Awesome. Great Job. God Bless you😇

  • @esmael.c2b
    @esmael.c2b 2 года назад +2

    Always excited to your content cause I already know it's high quality 🙌

  • @TheMisswity
    @TheMisswity 2 года назад

    Best tutorial I have ever done and I actually completed. Your God sent, your content is incredible! Keep on doing this!

  • @sourcecode315
    @sourcecode315 Год назад

    Wow honestly my man you are on of the few smartes and jenrous humans that exist in this world no words man live long thank you very much you have thought me every thing about react and i will still learn a lot from you again thank you

  • @mdaugak
    @mdaugak 2 года назад +2

    Nothing but the best!!!

  • @davidoyelade7482
    @davidoyelade7482 2 года назад +1

    Wow! Another video... let's go!!🔥

  • @kebronsolomonzerie3523
    @kebronsolomonzerie3523 2 года назад +1

    Super useful Higher-order components section. Can't thank you enough for the value you have packaged in here.