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.

You’ll also learn how to work with Sanity. Sanity.io is the platform for structured content. It allows you to manage text, images, and other data using APIs.

Need the projects to put on this portfolio? Impress your employers with the NFT Marketplace and Filmpire – https://www.jsmastery.pro 🔥

⭐Sanity JSM Subscribers Special – https://www.sanity.io/javascriptmastery2022
⭐Sanity Content Platform – https://www.sanity.io
⭐Sanity Slack Channel https://slack.sanity.io

📙MUST HAVE PORTFOLIO GUIDE – https://resource.jsmasterypro.com/portfolio-guide

📚 Materials/References:
GitHub Code (give it a star ⭐): https://github.com/adrianhajdin/project_professional_portfolio
Sanity Schemas: https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/adrianhajdin/project_professional_portfolio/tree/master/backend_sanity_portfolio/schemas
Styles & Other Code: https://gist.github.com/adrianhajdin/52b513f1d8a8189747595a587c3132e4
Assets: https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/adrianhajdin/project_professional_portfolio/tree/master/src/assets
CSS BEM Methodology: https://www.devbridge.com/articles/implementing-clean-css-bem-method

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.

🌐 My personal recommendation for hosting services: https://www.hostinger.com/javascriptmastery
💻 Discord – https://discord.gg/n6EdbFJ
💻 Master JavaScript: https://www.completepathtojavascriptmastery.com/
Use the special promo code “YOUTUBE” on checkout to save $60!

❤️ Support JavaScript Mastery & Suggest Future Videos:
BuyMeACoffe: https://www.buymeacoffee.com/JSMastery
Patreon: https://www.patreon.com/javascriptmastery

🌎 Find Me Here:
Discord Group: https://discord.gg/n6EdbFJ
Instagram: https://instagram.com/javascriptmastery
Twitter: https://twitter.com/jsmasterypro

💼 Business Inquiries:
E-mail: contact@jsmasterypro.com

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

source

43 Comments

  1. Also you can face some problems (especially with skills section and with ReactTooltip) only because FKN REACT 18 AND GODDAMMIT STRICT MODE!!! Just don't use it and everything will be much easier 🧙‍♂

  2. 03:09:56 – after that second map i got same error again ( Cannot read properties of undefined (reading 'map') ), but checking if array exist helps to fix it. Maybe it will save your time if you have same error 🙂

  3. Thanks a million, times, brother! This boosted my confidence with my personal portfolio and that too with react. thanks again

    I want to ask you is how can we host the backend part of it , because every time I want to open I need to run that command again and again in VSCode , so is there any way to host the backend also ??

  4. Hello. Somebody knows about this error during the setup? ✖ Resolving dependenciesetching packages

    ✖ An unexpected error occurred: "C:\Users\usuario\AppData\Local\Yarn\Cache\v6\npm-wrap-ansi-2.1.0-d8fc3d284dd05794fe84973caecdd1cf824fdd85-integrity\node_modules\wrap-ansi\.yarn-metadata.json: Unexpected token u0000 in JSON at position 0".

    ✖ Resolving dependenciesetching packages

  5. very nice, but i don't understand why you still use create.root in index city render.root.
    It's not that cool because then the current version of React is not displayed, but the 17th version.

    it's better like this

    import React from 'react';
    import { createRoot } from "react-dom/client";
    import App from './App';
    import './index.css';

    const container = document.getElementById("root");
    const root = createRoot(container);

    root.render(<App />);

  6. I got this error in Testimonial when i add src to img :
    The provided `src` attribute is an unsupported type ImageUrlBuilder. This value must be coerced to a string before before using it here

  7. I am about halfway through the video and for some reason the about section sanity data is not appearing on the page. If ran into this problem and solved it please let me know! : ) That aside this is a great video and tutorial. Thank you so much!

  8. quick question, is there a way to organize the portfolio section after adding different projects? In sanity I dont see how to organize when everything appears when the filter is set to 'All'.

  9. I think ReactDOM.render is not a thing anymore (found the error message when did the setup). Instead I used
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);

  10. This is a very detailed course that I have never seen before. U make me humble in dumb amazement. I do really thank u for your great video letting me get more proficient on website design.

  11. I'll ask for help through here since on stack overflow no one gave a helpful answer. I have an error that says a dataset must be provided when trying to fetch data from the Sanity backend. Can someone help on this?

  12. I would like so start by thanking you for the most comprehensive tutorials on this subject out there. I am a big fac an obviously an even greater noob :). Could you tell me why my App.scss is not showing any changes and should I use watch sass button (that creates a bunch of CSS files)? thank you and keep it up

  13. If you can't see any Sanity data in your About section: make sure you enable CORS for your local address in the Sanity dashboard. On my computer the connection to Sanity CDN was being blocked in the browser when loading the page.

Leave A Reply

Please enter your comment!
Please enter your name here