Build a Portfolio Website With React & Sanity.io

[Music] aloha everyone my name is kapeh and in today's video we are going to be building out our very own portfolios super excited for it super excited for our final product so without further ado let's see what our final product looks like so here we have our home page we have blog posts we have projects and we have about me we also have social icons over here now this whole um front end is built with react we're going to be building out a single page application if you prefer a static site generator you can use next.js that's a great alternative so that's gonna be our front end our back end where all of our content is going to be managed is going to be used going to be with sanity sanity has the sanity studio and this is where we will have titles for a blog post slugs author all that good content projects that kind of stuff so all of our content will live here we'll be able to add stuff remove stuff but that's where our content will live and then all the styling will be done with tailwind css it is the css framework that we will be using for this project it's kind of like a shorthand way of writing css and it turns out beautiful so super excited for that now some prerequisites that you will need you will need node installed on your computer so if you go to nodejs.org be sure to follow the instructions and get that downloaded onto your computer now let me um tell you about my social links and where to find me so we have twitter twitter you can find me at kapeh underscore okay for my youtube i do have my own channel uh slash kapeh and then linkedin kapeh as well now on my twitter my twitter dms are open so feel free to um send over your project send over your portfolio when you are done with it i would love to see how yours turned out i would love to see how you customized it what content you have on there it's super awesome to see all the work that you put in so my dms are open definitely send a message my way with the link to your finished portfolio i would love to see it so yeah let's get started and let's get coding okay so let's get our react application set up then our sanity studio set up and then let's connect the two so i'm going to grab my terminal and um wherever you want your project to live navigate to that folder i'm going to run the command npx create react app and then the word portfolio i'm going to hit enter and while that builds let me talk about that command so npx brings in the latest version of whatever package follows npx so instead of doing npm install globally create react app we're going to one time grab the package create react app and use it with the latest version then we're going to use create react app to create a react app and then the word portfolio is what we're naming it and that's just what our project is named now so looks like it's done building and it will give us a couple instructions but if we do cd portfolio that changes directories or changes folders into our new project named portfolio so using the command code space period that is a shortcut for opening up our text editor vs code from the code from the terminal so i'm going to hit enter that's going to open up my portfolio project and right here we have source this is where our application lives app.js this is just the boilerplate stuff now let's see if this is actually running so if we hit control tilde oh let me bring that up ctrl tilde and then in here we're going to do npm start npm start we'll start it on localhost 3000 in our browser and i have it on the other monitor but let me bring that in and it looks good so that's what the create react app did for us so awesome our react application is all set up now back into our code i'm going to hit this little plus sign so what i'm doing here is i'm adding another terminal window and i'm going to start building out my sanity studio okay so there's a couple things we need to do beforehand if we don't have sanity installed on our computer already so if you need the sanity cli you can do npm install dash g and then it's at sanity cli that will allow us to run the sanity commands that we need to run throughout building this project i'm not going to run that because i already have it and then to make sure you are logged in to your sanity account you can do sanity login and then follow the login prompts and you're good to go so because i already have both of those already set up the next command we're going to do is sanity init and this is going to initialize a brand new project for us so it's going to ask us a series of questions let's go through them so create new project yep so press enter project name let's call this studio yeah hit enter default data set yes so it's creating the data set and then next it's going to give us the path for our project to make sure it's correct portfolio studio cool and then here are the different templates we can choose from there's movie e-commerce blog or clean project so blog and portfolio are so similar we're gonna actually use the blog template so what this is doing is all of our content will live insanity in our sanity studio so and we'll we'll show the studio in a second but this is creating a boilerplate template for us so we can start building on a blog or e-commerce or movie project so navigate to blog with the arrow keys and hit enter and it's doing stuff it's adding files you can see studios right here so it's building it all out and it should be done very soon and once that's done we will see a couple of different commands we will need to cd into our new project and that will be using cd studio in our case or whatever you named it so hit enter and now that we're in the studio let's get it started so to get it started all you need to run is sanity start so it's kind of easy to remember that because for react we did npm start and for sanity sanity start it just kind of makes it easy to remember so yeah once we do that i'm actually going to open up localhost 3333 because that's where it's going to live and we see that there and then we bring that over so i need to log in i did it by my github so whatever you did google or github um then we have posts we have author category so this is the template that it built for us this is my studio this is the ui that is very customizable so we're actually going to be changing a couple things here as we move on we're going to be removing category and we're going to be adding project but here this is where we can add content and it will show up on our website so yeah let's not spend too much time in the studio yet because we're going to be using it a lot okay so now that we have our sanity project and our react project all set up let's connect the two so if we go into our route of our project for our react so within the source folder we're going to create a new file and we'll call it client.js um this is what we're going to use to talk to sanity so whenever we try and grab data it's going to say well what project do you need it from and this is where it will look so i'm going to add another terminal while i'll keep those running and we need to install the sanity client package so to do that we're going to do npm install at sanity client so while that installs let me bring this down we're going to import that and we'll do import sanity client from sanity client then we're going to do export default we'll do sanity lowercase camel case i keep hitting it sanity client open that up and in here we're going to have our project id and our data set which we set to production when we set up our entire project when we did sanity init okay so project id what is that every uh sanity project that you have has a project id and there's two spots we can find it let me show you those two spots so if we go into studio and we go to sanity.json it's right here so i'm actually going to copy that because i'm going to need it but that's our project id so if we come back here save it there awesome now we have it linked up let me show you another place you can find it so if you go to manage.sanity.io and you're logged in this will pop up this is where all of our projects will live so i named it studio so this is where this one is click on that and we will see our project id same thing as what was right there nice so those are the two spots that we can find our project id now our react application knows which project to look at and from react to sanity it's all good now let's do from sanity to react so we want sanity to tell react hey you're asking for this data i don't know if you're trusted so to do that to make sure we have trusted urls in place in our managed sanity click on go into the project and click on settings click on api within here we have our course origins so this is how when we fetched it for data this is how we know it's a trusted url and we can give the data to that url that's requesting the data so because we are on localhost 3000 with our react app we want to add that here so we're going to add new origin http localhost 3000 add new origin awesome so now when react asks for the data it says okay you're trusted now when we go to host it we got to remember to add the hosted url here as well but yeah those are set up let me move this over here let me save this and that was installed awesome and it's all set up it's all ready to go now as we do projects and we're building things out we want to always make sure we save our progress and that's what we have github for so let's actually get this project into github we're not going to be committing throughout this entire video but it's a good practice to be committing as you do changes but let's get it set up now so i'm going to go to my github and i have a brand new repository set up i'm going to call this my portfolio you can name it whatever you'd like but my portfolio we'll skip all that for now we'll do create repository so what i'm going to do is follow these instructions right here so let me bring that over let me bring this up and i'm in portfolio okay so the first one was get before i do that okay before i do that this has 5000 new files we don't want to push all that to get so we're going to go into our get ignore and everything that's in the ignore won't go to github and all we want to do is remove this forward slash on node modules save that come here refresh that now it's down to 22 instead of 5000 much better and now we are good to push this to github so we'll do git init okay initialize now we'll do git commit dash m and this is just our first initial commit so we'll just do first commit we'll do git branch main to change that and then we'll do git remote add origin and then i'm going to just copy the path to my new repository hit enter and then we'll do git push origin main and that is good now i didn't add any files it was just initialized and it has the boilerplate stuff so let's add all the things that we added so we have 22 files so we'll do git status that's checking to see what's been changed everything in red has not been added it's kind of just like hanging out so we'll do git add period get add period adds all of them everything that was modified or added or deleted get add period and then i always like to do kit status again because i like to see the green and then we'll do git commit dash m and we'll say adding in sanity studio hit enter so all i'm doing is naming my commit and then we'll do get push origin main and that's done and let me pull over the repo and if i go up and i go to my portfolio we see 18 seconds ago adding insanity studio so everything that we just did is in our github and we're good to go and if you're working on a bigger project that isn't you're going to spend more time on more days on you would commit as you go because you don't want to lose your progress so yeah so we've created the react application the sanity studio connected the two it's now safely in our github let's move on to making it ours okay so now that we have our application set up and ready to go let's set up our tailwind our styling so that as we build it out it'll all look nice so tailwind is a css framework that is highly customizable as it says here and it gives us all the building blocks we need to build our designs so yeah we're going to be using this today let's get it installed into our application so that it's ready for us so up here at the top type in installation and here are just different ways to install tailwind we are because this is just a quick demo we're just going to take this url and i'm going to copy that if you want to customize it more definitely look at these other installation processes that are available so i'm going to bring in our application and if we go to index.css within the source folder we're going to come in here and we're going to delete all that and we'll do at import url inside there and we're going to put in that url that we just copied from tailwind now there is one more thing we also need and it's for our block content so if we type in oh if we type in pros this pros class will allow us to get that proper styling so if we have a p tag if we have an h1 if we have a list of items it it does the correct styling that we would expect so we're going to want to bring that in so i'm going to get that so in here i'm going to bring that down and at the top just so this gets applied before the tailwind does put it above so that is for our pros class now the last thing we want to do to import is we want to do a font but i'm not going to spend so much time looking through fonts right now because i definitely can waste a lot of time on fonts but we're not going to do that today so i'm using emotic today and you can find that on google's font page but yeah definitely go through and pick the one that you would like okay so there's a couple different custom css things that we need and i'm just going to add those in right now because i know we need them so the first one i'm going to call cursive and the font family is going to be that emotic a mod tick sc and then it will go to cursive if that's not available and then wait 700 and then under here we're going to use that prose clasp but we're going to dive into the image of it and we're going to do margin left auto we're going to margin right auto and then we're going to do border radius 5 pixels and the reason why we're doing a custom one for this is because we're diving into the pros and so this just allows us to tell when it can do it but this just makes it just a little bit easier for us on this demo and then home name font size we will do 150 pixels because tailwind has specific sizes and so we want to make it a very specific giant size so that's why we're using that and you'll see um i'm going to save that you'll see as we go through we'll use these throughout and i'll i'll show where we're using it where it's not tailwind where it's one of these custom ones but yeah that's all set up now let's go set up our components if we go into source we'll do a new folder and we'll type in components this is going to be all of our separate pages so because we're building a single page application we're going to break it up into different components or different pages however you want to call it and each one will have its own view its own functionality so we're gonna go here we're gonna do a new file and we have a home we have a home js we have an about that's on our about page we have our navbar navbar is going to live on all of these so we're going to do posts we're going to do project and last one single post single post one two three four five six yep that's it okay so these are our pages these are our components and so every time we visit the about page it's going to pull up this about component or page however you want to call it but we have to be able to tell our application hey you need to navigate to this component and show this component when i'm at this url that is done by react router or react routing so let's install react routing so that we can be able to navigate to all these so in our app.js let's get rid of this div now let's do that whole thing and we don't need this logo and we don't need that so because we're using the react router we need to be able to let me get that error goes away so we need to install the react router dom so in order to do that within our terminal that we have for our project we're gonna do npm install react router dom and this is the package we need in order to navigate within react so up here i'm going to import and from react router dom there's a couple different things we're going to be using we're going to be using route browser router route and switch and that's going to be from if i can type react router dom and it's not okay so now it's done and it's not being used so that's why that's all kind of grayed out in the return this is where we're going to start using our browser router awesome and it just opened right up for us and then in here we're going to use our switch so that as we are building stuff out as people are clicking throughout the website it switches to the particular component that needs to be um displayed so we're going to do in here route and we're going to do a component equal to and we're going to put something in there we're going to do path is equal to and close that off now we're gonna do this five times because we're gonna navigate to five different pages so i'm gonna copy that and five cool so in here we need to declare our routes over here we have about home navbar we're not going to navigate to because navbar is always going to be visible we have post project and single post so let's start at the top so we'll do home we're going to give that a path of forward slash because we want that to be our our homepage yeah and we're gonna do an about page and we'll do this one as slash about we will do next single post and we will do slash post and i'm going to tell you why i did single post above regular post so regular post or all posts really and then project and we'll give that a path of oh don't forget that slash project okay so notice how all of these have a slash at the front and then this one also has a slash at the front so we want to make sure that if we're at this forward slash don't be confused about any of the other slashes just know that if it's exactly this if it's just a slash by itself we're gonna do the home page so that's why we put the word exact for home because we don't want it to be confused by these other ones now we have posts of and slug above just regular just post by itself so the reason why we put it above is because it's gonna want to find that full url with the slug if not just show just the post page so that's why we put that one above so yeah that's looking really good now we have to import all of these so import home from and it's like that cool we're going to do it for all of these about we have single post post from single post awesome and then we have post and see how they're all being used because we have them down there in our routes and then project from cool so that is what we need for our routing okay so the last thing we want to do is test this to make sure that our routing is set up correctly but we do want to do kind of like a um an empty component for each one just so like it can kind of show something so we're going to do import react from react export default function and this is the about page and then i'll do that about page okay so i'm going to copy all this and this is just like a very simple component setup we're importing the reacts we can use it and then um export default function we call it about to match up with the name of the file and then we're just putting an h1 that says about page so let's copy that and let's do that for post and we just need to change this to actually so nifty trick cursor there hit option and then you just made another cursor so we can type in multiple places okay we'll do for project hold down option and we'll do project save that single post hold down option single post save that and then i think i missed home yeah hold down option nope i didn't hold down option okay and then that's home and then nav bar we'll just put i mean it won't look like this but we'll just oh no i messed up on my option thing okay okay so let's get this running and let's see if our navigation works okay home page so if i did a forward slash for about i did not spell that right for about about page and if we do um oh single post won't show up because there's no route that's called single post so we didn't really need to put anything in there but post works there um yeah cause we don't have slugs for uh the routing right now and we did about yeah they're all working so that's really awesome and if we click back to the forward slash by itself we go back to homepage so yeah all of our routing is set up and our tailwind is brought in so i think we're ready to make our homepage look really awesome so yeah let's go ahead and let's work on the navigation bar yeah let's work on that first okay so our navbar we need a couple of things um to be imported at the top of this file so because we are using the routing part of our application the most up in the nav bar we don't want people to be clicking or having to type the url in the nav bars they're going to click to it and we'll take them to that url that they're clicking on so in here we're going to be using the nav link from react router dom okay and then we're also going to be importing something else but we will worry about that in a second okay so i'm going to delete all this and we're going to do a new return and in here we're going to have a header a div and then the nav section so let's build out our html part of our of our navbar so in here so in our nav we're going to have our nav links this is going to be we're going to be using nav link and we're going to do this three times but let's build out one okay so in our nav link our first one it's gonna be kapeh but you can put whatever you want that navigates people to your home and i think i have four okay hey we're gonna do um blog posts and this is just the name that's going to show up in the navbar blog post projects and this one will be about me okay and then within each nav link we're going to give it a navigate to cape is going to be navigating to home page the blog post one is going to go to post it's singular project is going to go to project and about me is going to go to the about page and i almost forgot all these forward flashes okay so that looks great now we're gonna do the exact same thing and we're gonna put exact on this just so it knows to not be confused by these other slashes and if it's the singular one go to the homepage okay so right now navbar isn't really being used we can't really test it right now so let's test it so i'm going to go over here and we need to come to app.js let's import our nav bar from awesome okay and then right under browser router we're going to add in navbar okay so now anytime the application is open and running navbar will show up at the top okay and let's go check it out i have an error oh it's inside my quote so let's move that out save and there it is okay so it's not pretty but we'll get there so everything is clickable you see how my cursor changes so if i click on kapeh it'll keep me on home so click on blog post it'll take me to post page if i click on projects projects page about about me about me page so yeah it all looks good navbar's working and it's going to be on every single one because we put it in our app.js so now that we have it all working let's style it all and let's get tailwind working so for our navbar in our header this is where this is how tailwind will look for our entire project so we're going to do class name and class name is how react does styling we're going to do in here i'm going to start off with bg red 600. so what this is is background color is going to be red at a darkness level of 600. 900 is the darkest 100 is the lightest so we are at a 600. so let me save that let me just show you what that has done so it's giving us a background color of red and it's going to be pretty dark let's move to our div we'll do same thing we'll do class name is equal to so container so we're going to create a container for everything within this div we'll do mx auto so that's going to be a margin around the x-axis of auto we're going to do flex and flex is how we're going to put everything within this div we're going to justify between and justify between is going to make like spacing between each thing and let's say that and sure enough it kind of pushed everything over so i'm not going to go back and forth for all these but i just wanted to kind of like show what it looks like as we go at the beginning and then class name we're going to give it flex for the navigation now in our nav link each one of these is going to have pretty much the same styling so i'm going to go through one and then we will um copy and paste it's just so copay will be different than blog post projects and about me so we'll copy for those but copay will have its own and yeah so right here we'll do class name is equal to so inline flex so the flex is going to be in line with each other items center center the items padding y of three so padding on the y axis of three padding on the x axis of three oh wait no not three on this one i wanted six for the y okay and then we want margin right of four and we want a text red of 100 so pretty light now the really awesome thing about tailwind is we can do hover effects right in here so we can do hover text green 800 so when we hover over it it becomes green now we want all the text to be pretty large at 4 xl then we want the font to be bold we want to use cursive which is our custom one that we made earlier and we want tracking widest tracking widest is the spacing between the letters and yeah that is all we need for the first one i am wrong no we need an active class name so i'm going to do active class name is equal to now active class name is when we are on the page that this one links to do something a little bit different so that active class name is going to have a text of white so the text will be white when we're on the home page and that's it for kapeh okay so you're gonna so i'm gonna save this and you are going to see that it all kind of cleaned itself up so i'm using prettier on here it's a extension for vs code and so it kind of like cleans up the code as you type so when i save that's why it's changing so now that that's there i'm going to work on blog post projects and about me and these are all going to have the exact same class name styling to it so in here i'm going to do same as the other one inline flex items center padding y3 so a little bit different there padding x of 3 we're going to do a margin y of 6 rounded text red of 200 so pretty light we're going to do a hover of text green 800 and let's save that and you saw the prettier just do its thing right there i'm going to copy that copy and then put it in there put it in there save that and that should look really awesome let's go check it out yay so it does so now our blog or now our nav bar is looking pretty good actually let me zoom in so you can really like check that out looks good and as we hover it changes to green now we don't have active class name on those three so let's go build it out so right here we'll do it right underneath so active class name so when it is clicked we are when we are in the blog post page this is what our styling will look like so our text will be red of 100 and we'll do a background color red of 700. let's copy that put it on all these and let's go see what that looks like sure enough so it has like that little background rounded looks good now we want to have little social icons over here so people can go to our twitter or our youtube or whatever platform we're using for our content so let's come here and underneath this nav we're going to open up for another div we're going to be using a another um package so this one's called react social icons so i'm going to do ctrl tilde i'm going to ctrl c that so it ends it we're gonna do npm install react social icons let me show you react social icons real quick okay now in here it's going to look like this and if we want to customize it we're going to see more usage options on the example site so here it's going to detect the url and so that's why the particular icon will come up we'll have our url in here and we'll know which one to put and then if we want to style it we're going to do this inline styling and change the size of our icon because it starts out pretty small so we're going to make it a little bit bigger so yeah let's get those going so now that is installed let's put this away all right so right in here let's import it real quick import social icon from react social icons now we're going to open up a couple different ones so we're gonna type in social icon close it off and we're gonna just do that three times because we're gonna do three different social icons you can do as many as you want this package is really awesome because it really just detects the url that you put in there finds icon for it and then voila you have it so the url is going to be our first bit we're going to have class name and in here we're just gonna have a margin right of four we're gonna have a target for blank so that opens up a new page we don't want people to leave our portfolio um maybe we're gonna have a foreground color of and this is a part of the package doing the fg color we're gonna do white so that's gonna make the icon more um bright for us and then we're gonna do style is equal to and this is the inline styling that we have to do for this package and we'll do height of 35 and width of 35 and before i finish that off i'm going to copy that whole thing so i don't know why i typed those out but that's okay and then each one of these will just be different because of the url that we put in so let me grab my twitter and this is where you get your url of choice there's my twitter here is my youtube and then here is my linkedin save that and again prettier is installed so that's why i did all that let's go look at it oh i gotta restart it fingers crossed there they are and they're really high up oh i know what we forgot we need to style this div right here so this div is going to have okay a class name and so this is for social icons that's why they're like push to the top um we'll do inline flex we'll do padding y of three and a padding x of three and a margin y of six save that and yeah looks good okay so if i were to click on one of these it takes me to my twitter so yeah if i click on this it takes me to my youtube and opens up a new tab every time that was the target uh underscore blank so yeah there's our navbar our navbar is totally set up and ready to go let's style our home page okay next we're going to work on the homepage and the home page is going to have that back background image and then word uh i do aloha my i'm kapeh so we're going to work on that right now so navigate to your home.js folder and we're going to empty out the return and open it up we're going to have a main tag and within that we'll have an image we'll also have a section and then within that section we're going to have an h1 and that h1 is going to say aloha i'm pepe hey so yeah it'll look like this this is going to be our breakup so the image is going to be our background image and then the main is the entire page the entire component we want to pull in our own image so i'm going to from my downloads i'm going to grab an image and i'll put it into my source folder so this is monstera leaves this is going to be my background you can pick any image you'd like but we're going to use monstera leaves because i love monstera leaves so using that let's import image from and it should be to up monstera leaf dot jpeg okay so that is going to be our image right here so we're gonna do a source of image and then we're gonna have an alt so the alt tag is for screen readers um that's going to be what it would like what the text would be um for it to say instead of showing the image so we're going to have it say monstera leaves and then we're going to give it a class name we're just going to style this right away of absolute so absolute will make it so while it's scrolling or like while things are happening it has its own position it's not being it's not being manipulated by the things around it it just it worries about itself and it's absolute position we're gonna do object cover so it covers the area that we needed to we're gonna do with full and a height full so we're gonna save that and that should be good in there in our section we're going to do a class name here of relative so relative to the things around it it's going to have a flex and a justify center it will also have a min height screen and then a padding top of 12. and then on large screens okay this is a really awesome thing about tailwind until when you can do responsive styling within your styling that's happening right here so if you don't do anything before it so like hover happens when you hover lg means for large screens we're going to have a particular styling and then there's medium screens and then small screens but we're going to work on large so large would be padding top of 64. and then always padding x of eight okay and then our h1 class name is equal to we'll do text of six xl so pretty big we're gonna do text green of 100 so pretty light on the one on the green we're gonna do a font bold and then we're gonna use our custom css that we made the cursive we're gonna do leading none so like the area around large screens we're gonna do leading snug so it's close and then we're going to use that home name that we did in our index.css and that should be everything for our home page let's pull that up and sure enough now this i'm zoomed in a little bit so this is what it looked like not zoomed in but yeah our homepage is done we brought in our background image we brought in our text and our styling for it so it looks super good and again if we were to navigate around those aren't styled but homepage and navbar are all styled and ready to go so let's move on to let's do our blog post page next and we're actually going to be getting into our content so our sanity studio is going to start showing up so let's get let's get started on that one okay so let's work on the blog post section let's pull that code up so under post and we have our post page let's get rid of that and let's hide this okay so in this this is where all of our blog posts are going to live um or any content that you may have that you want to showcase on your portfolio we're going to be pulling in the data from our sanity studio and so that's where we're going to finally like see the connection between the two and how that's going to work there's two different ways you can query for your information with sanity so there's either graphql or grok we're going to be using the grok way today so grok is an in-house insanity house made query language and we'll walk through how it looks but if you're familiar with graphql this will also look familiar but if you're familiar with either one of them then welcome to grog okay so first thing we need to do because we are going to be using our data from sanity is we need to import our sanity client and that's going to be two up yeah so this file is the one that we made earlier that has let me just remind you all in our st no not in our studio right here client.js this is where our sanity project id lives this is where we pulled in the sanity client so that we can use all this so that's where we're at right now so let me go pat back to post and get rid of these we don't need that okay so i brought in the sanity client now above the return this is where we're going to set our state and query for our information so in react the way we want to get our state is by using react hooks react hooks was introduced a couple years ago so we're going to be setting our state and then we're going to be using that state with a use date um and then we're going to be setting that state so that's how our data will flow so state use the state and then set our new state our new data so we are going to import not only react but also use state use effect use effect is also a react hook that will be fetching for our data so kind of so what we're going to be doing is fetching for our sanity data use effect will help us get that data and use it so first we're going to do we're going to set our state we're going to do cons do post data and then set post so post data is what our state is called setpost is what setting our state is called and then we're going to do use state and set that so set our initial state to null and then underneath this this is where we're going to use the use effect we're going to do an arrow function open that up and we're going to use the sanity client and fetch for our data at this point we are now in grok mode so those back ticks are where the grok query is going to live and yeah let's just start writing it out and we'll walk through it all slowly just so we can kind of see what's happening so the asterix in grock is all data and oh not curly and here we're going to do underscore type so the type that is equal to post and i will show you between sanity studio in this how that looks we're going to open this up and in here we are going to be finding the title the slug the main image and then for this we're going to be pulling out from the main image the asset of id and url and then down here we're going to be pulling in the alt of the image so let's walk through this let me save that it did prettier and fix some of the spacing for us let's go over this real quick so we're going to look at all types that are equal to post grab the title the slug the main image and the alt for that now out of here because once we grab all that data we need a dot then so fetch the data then what are we going to do with it we're going to get the data and equal it to whoops set post so now the data that we've pulled out our data is now being set post which is setting our state so that's what we've named it and then if there's any errors we're gonna do a dot catch and we'll do console.error now we want this to only run once so after this we are going to do that and we are good to go okay so this is our entire query for our information so in our return we will open this up we're gonna have a main section we're gonna have a section within that and then within that section we're going to have an h1 we're going to have an h2 and we're going to have a div so i'm just really setting up for our layout of our post page within the div we're going to have an article in the article we're going to have a span and within the span we're going to have an image another span within that and an h3 cool and this entire thing right here is going to be clickable so it's going to be it's going to link us to the page because this is all of our blog posts so if we click on one it will go into the particular blog post that we picked on save that so this is what our page looks like so we have our main section this is going to be the entire page we have a section of content and within that we have an h1 and h2 it will say blog post page and then our h2 will say welcome to my page of blog posts so it's a title and then a subtitle for our page and then we'll style those a little bit and then within that we have our article that includes a clickable tile of an image and the h3 will be the title of our blog post so let's get this all built out and let's just work our way down so our main let's give it some styling we'll do class name and let me move this over class name equal to so background of green of 100 so pretty light min height screen and then p12 so a padding of 12. this section we're going to do a class name of container so we're making a container out of this section and then the margin on the x will be auto our h1 class name will be so text 5xl so pretty big flex so we're bringing in flex justify center so things are centered and then cursive that's our custom one that we made earlier our h2 will have a class name equal to text large so smaller than the main header text gray of 600 flex justify center so it'll be the same spot as the header and then we'll do a margin bottom of 12. then we have let's do our div right above the article so class name equal to so we're going to be making a grid with this it'll be a grid of tiles of all of our blog posts so grid on a medium screen the grid we want to be columns of 2 and on a large screen grid columns of 3. so if it's a large screen it's gonna have three columns medium screen so like an ipad two columns anything smaller than that one column so we just did responsiveness in line with a tailwind that's awesome and then a gap of eight so that's the spacing around all the tiles okay now that looks really good let's save that now this is where we're going to use the data that we've pulled in from sanity studio we're going to be using it in this because that's where we're going to have like our blog post title like we brought in up here title main image all that good stuff so we want to link to oh we need to bring in because this is react router dom we need to bring in right here import we'll do link from react router dom awesome so now we can officially use it okay so in here when you click on a tile in your blog post page we want to link to it's not going to be hard coded in because every single time we click on something it's going to be particular to that that tile so we're going to do right here curly braces and then in here we'll do post plus post dot not data dot slug dot current so whatever slug we're clicking on the current one we're gonna show that one we're gonna give it a key of and we will name this slug dot current that will be the um unique key that it gets cool now in our span around this we're going to give it a class name this is just so we can style our cards we'll do block height of 64. relative so that's like location it's relative to the stuff around it rounded it's gonna have a little rounded edge we're going to give it a shadow leading snug so spacing around it around like the letters background of white border on the left side of eight border will be green at 400. we also need to give an index so we'll do key equal index great now our image in here we're gonna do source of and if we were to do a like what we did with the homepage where we just brought in the monstera leaf file if we wanted to do that then we could bring that in but because we want it to be particular to whatever content we have in our studio and whatever we have for that blog post we are going to do post dot main image dot asset dot url the alt remember the alt text is going to be if um if it's a screen if it's using a screen reader this is what it will say instead of showing the image we're going to do post.main image.alt and we brought that in in our grok and then let's give it some styling class name and we'll do width full height full and this is in the area that it's in we'll do rounded on the right and then we'll do object cover and then absolute so it has an absolute position now span we have we just need to add a class name to this we'll do block relative height is full we're going to bring in flex justify end so now we're pushing it to the end we've been using justify center which brings things to the center this is going to be the end and then items end panning right of 4 padding bottom of four in our h3 we're gonna give it some styling as well we're gonna do an eight we're gonna do class name of text gray 800 text large font bold we'll do a padding x of 3 padding y of 4 background red at 700 so pretty dark text is going to be red 100. now we're gonna have a background opacity of 75 so it'll be a little see-through kind of so it won't be like just like a block with the title on it and then rounded save that and because we want it to be a where's my h3 right here because we want the title to match whatever title the blog post is we are not going to hard code in anything we are going to look for the post dot title now the only thing we need to do is we need to map over all of this data so starting right above the article because this contains all the stuff that we're doing we're going to map over our post data so let me remove that curly and bring it down below this article and then once we hit save on prettier that should help it out so right here we're going to do post data so we're finding that data that we've set for the post data and postdata.map so we're going to map over all this information we're going to do post and the index of it do an arrow function and open that up now these two we want to cut that and bring it down right in front of that curly save that now we're mapping over all the information that's clickable so this whole like grid system it's mapping over and it's making sure we're showing all of the data that we need to and then that should be it so let me bring up my terminal do npm start and then in another terminal oops that's just reloading in another terminal we will cd into studio now we're in studio and let's do sanity start to get our sanity studio going so while that goes we will have localhost 3000 has our stuff i don't wanna click on blog posts yet but it should look really good localhost 3333 this is where our sanity studio lives so let's make sure we add in some content so when we go to our post so this post is same as get rid of this this post now let me show you how that looks in the sanity code so if we come over here let's collapse that let's open up our studio if we come to schemas and we click on post this is where our post document type lives so we have name of post and title of post so that name that type is what we're looking for right here that lower case but it has a title of capital p post and that's what lives right here so we have title we have slug we have author main image all this stuff that you see here we go back to our studio click on post and we click on that little thing to add a new one and we have all that stuff that was over in our code right here so if we clicked on title and we did my very first blog post we generate that slug and it's going to create a slug for us author we shouldn't have anything in here yeah there's no results so we will create an author in just one second but right now um an author would go there right here and we're just matching up with main image so we just skipped author main image this author has a type of reference to author which is this author schema right here so everything's connected it's really awesome so this is the author one that we're going to add information to and we'll look at that in just one minute so referencing that schema now this main image we're going to add stuff to it there's category published at but we're really just going to worry about this main image right now we're going to upload from our downloads let's do monstera leaf open i'm just going to be using this picture all over um because i love it there it is awesome and then body will just do this is my blog post hope you like it and then we'll do an old-fashioned smiley face okay let's publish that okay it's published but let's go add an author real quick so i'm going to click on author type for my content nothing has been added so i'm going to click on this little button right here and we will fill in our information generate a slug and you could type that slug in if you wanted to do something different upload i have my picture and then bio will do developer relations at sandy also enjoys anime okay so publish that it's published now we're gonna go back to our post click on this now we can add an author voila so let's see what it looks like it's all published if we come back here let's just refresh it just in case if we click on blog posts we should see that blog post and our grid all set up it'll only show one so we actually kind of won't see the grid but we should see our blog post that we just created so we'll click on it and there it is so if we click on it it'll do nothing right now because that's our single post component but yeah it looks super good it's actually getting our data that we wanted and we have our very first blog post if i were to add one more thing so we'll do right here my second blog post will generate we'll add that upload we'll do the plumerias this time because i love plumaria's favorite flower and then i'll say this is my second blog post woohoo okay publish that and then if we come back here refresh and there it is super quick my second blog post came up and we see that like opacity thing that we did click on it and it goes to single post page because we haven't really done anything here but yeah it's working it's talking to our sanity studio we have our blog post showing up remember that little border that we did on the side that that green border that's what that is we have our rounded edges so super excited about this it's looking really good let's move on to the projects page okay so before we can build out our projects page we actually want to add the schema for projects so right now let's look at the ones that we do have we have post which we're already using we have author which we're already using and we have category which we are not using but it is in our post section so just for demo purposes i'm going to clean it up just so we don't have it there we're not gonna be using it if you'd like to keep it of course you can keep it and i'm gonna go in here and i'm gonna go i'm in my studio folder under schemas go to category and we're just going to delete this file and then we're going to go to schema and get rid of category get rid of that import and then the one spot it is being used in post there's a reference to category so i'm just gonna get rid of that and we should see that missing awesome so now category is gone categories gone from our posts and awesome let's now add a project schema so in the schema folder still we're gonna do new file we're gonna do project dot js and before we start building anything out let's go to schema let's import project from project and then down here let's bring in project save that okay and then we'll go over here back to our project and let's start building out our schema so export default open that up we'll give it a name of project a title and we'll call it project just with a capital p because that's what is going to show up in our studio and the type is going to be document now within this we're going to have different fields the fields are going to be not curly um the fields are going to be what we see when we are like adding stuff so like title or that kind of that kind of thing so within here we're going to do name title and this will have a type of string and then we're going to do another one let's do name is we'll do date type is date time and that's going to be the date of our finished project we're going to do a name so place and you can edit any of this add or take away whatever you would like type will be string so we will also add name is description and then this description will also be a type of not not also but it will be a type of text it'll just be a block style okay so then we're going to add a fun one so we're going to do another object we're going to name is project type the title is going to be project type and then the type is going to be string now the fun part we're going to do an options list so we have the project type we're going to add options open that up we're going to do list and we're going to give this value personal and i will walk through this let me just type it out real quick title personal okay so let me hide this because it's just giving us stuff okay oh this not curly needs to be like that okay okay so project type the title is project type type of string but options we're gonna give it a list so we're going to as many times as we want to do items in the list we can just keep going and it'll just be a big drop-down list of things that we want in here so this value we're going to do client so these are just different projects that we work on and who the project was for was it a personal project was it a client project or was it a school project so those are going to be our three options in our drop down and we will see that drop down in a minute and then we will come out of here and we will do name of link and we're going to link to the url that's gonna be our type of our project because if our project is hosted we can take them right to the link them with the url to the project so they can just see it right away and then yeah we'll add tags we won't do much with these tags but just so we can see how tags are added in a schema so type will be array and will be tags of type will be string that's really far down there let me pull it up options will be the layout of tags and you'll see how tags are done in just a moment okay so that should look good we have an error oh i know it's fields with an s okay so fields not field save that and it should be good now cool okay so here it is we have our post author and project project will have nothing so far because we don't have anything but if we click here we'll see that whole schema that we just did okay so title my first project place um i mean i don't know why you can put anything there but for now we'll do that description this is a project i did for myself project type so if it was a personal project see that drop down we can click on personal link two and we'll just do google and then tags this is where we can do different tags um let's say we want to do personal um project react sanity okay maybe those are the tags we put in but that's how the tags work in our studio let's publish that and we're not going to see it anywhere because we're not querying for it so let's go back to our code and let's navigate to so let's collapse all that to our component of project so our page page for projects let's clean up all this and collapse that and let's go let's do this okay so like in the other one we're going to be using react hooks so let's add in we know we're going to be using use effect and use state save that and we know we're going to be using the sanity client from i think it's up one more yeah okay let's query for our data so let's set our state first and we'll do project data and set project data just like our other one and we'll do use state and we'll set that to no awesome now with our use effect we will do the same thing we'll do sanityclient.fetch open that up backticks and it's ready for our grok so in here we'll do all types of and all his asterisks remember all types that are equal to and we named it project okay we want to pull out the title we want to pull out the date we want to pull out the place we want to pull out the description we want to pull out the project type the link and the tags so now we can do whatever we need to with that information and just like the other one we'll do a dot then and we're getting the data and setting it to we called it set project data and that's now our data and then a dot catch dot catch and then console. error okay and then we want to run just once and there we go we're done with the query side of things so let's now work on the return so in here let's open it up and we have we have a main section we have a section and this is going to look very similar to our blog post because it's still going to be like a grid type thing of just our projects section we have an h1 oh let's not open that up yet okay h1 we have an h2 and we have within that we have another section within this section we have an article within the article we have an h3 and then underneath the h3 we're going to have a div within that div we are going to have a span we're gonna have one two three spans so we'll just copy that paste paste awesome and then we're gonna have ap tag i know this is like a lot of html right now and then within that we have a span okay okay so let's just look at what's going on here so we have our main section we have our a section for that within that we have our header we have our subtitle our title we have our subtitle we have a section another one that takes care of the article that has the title of the project and then all the information of the project and this is where like the like the project type the date all that kind of stuff is going to live so on the main section we just need to add some styling we'll do a class name of we'll do background green at 100 and we'll do a min height screen and a padding of 12. this section is going to have a class name of we're going to give it a container and then margin auto h1 this is our header we're going to give it a class name of text 5xl flex justify center and curse of that that one that we did earlier that was custom and then we'll say my projects rh2 class name of text large and this is very similar to how the other page looks so it's not like too different but it will have different content on it margin bottom 12 and then our subtitle will say welcome to my projects page okay now this section down here this will have our grid of content so we're going to do a class name of grid and then grid columns 2 gap 8 article will have a class name of relative rounded large shadow x xl background white and a padding of 16. and then this h3 h3 is not going to have a hard-coded title like our h1 and our h2 but this will have a class name of text gray 800 text 3xl font bold margin bottom 2 hover text is going to be red 700. now within this h3 let's open this up because we're going to be doing a clickable a tag okay and then in this it's going to be the project dot not project data project dot title okay so this a tag let's make this function so href is going to be equal to project dot link and we're gonna that's in our sanity studio remember that our hrefs are our alt so what pops up if um there's a screen reader it'll be project.title target is equal to and we want blank so it opens up a different page and then for rel we and we explain this we're going to do no opener and no refer so it removes the referral option um with http header so we're just going to refer wait no referrer there we go okay so yeah now we have our project title and it is clickable and it takes a tags around it and it looks good so now that's our h3 now div this is all the other information we had let's give it some styling class name is equal to text text gray of 500 text will be extra small and then space around it x access of four okay so in our span let's open this up and we're going to put a strong tag around this so in our strong tag we want to do class name is equal to and we really want this really strong font bold because this is finished on and then outside of the strong do that and give it a space and this is the date so we're going to do the simplest way javascript allows us to format a date um there's plenty of ways to do it there's packages you can install but the quickest way is new date and this is a javascript way to do it new date and we're gonna do our project update that's the data that we pulled in that's our stuff and then two locale date strings so that's going to be oh locale to locale date string that's going to be what um it's going to read like where you're at and how it needs to look and yeah so that's how our date is going to be outside of that span we're going to do another strong tag with a class name of font bold close that off and this will be company and we'll do the same thing as before and we'll give it a space and then below this it will just be our project dot place so where it happened so i put las vegas you i mean because it was personal i did that um if i did it for a client and you are able to put the company like they're like yeah you can definitely share this on your portfolio um this is where you would put that information right here we have our project type that we're going to be working on so let's give it strong with a class name oops of fontbold and then this will be type and then after that same thing give it a little space and then it will be project dot project type now we have a p tag now we use the p tag instead of span because p tag is going to hold our description so in here in our p tag let's do oh let's do it in this for class name is equal to margin y of 6 text is going to be large text is going to be gray at 700 and then leading relaxed so just like a nice spacing and then in here this will be our project dot description now our last span is going to be clickable so this is going to be like the main spot we want people to click for our project even though we did add this title as clickable it just gives it like another spot this span is going to have an like the main spot for clicking to see the project so let's put an a tag around it and let's bring that around and then in this a tag let's give it an href of not that right there project dot link same thing as before no opener no ref free fur i can't say that um target is equal to blank so that opens up a new window a new tab not window and then we'll give it a class name of text red of 500 font bold we'll do hover is underline so it looks like a clickable thing hover is going to be text read at 400. save that bring this back over awesome and then underneath this before the span we're going to do view the project we're gonna give it a little space so that's what's happening here is i'm doing a string of a space so it's making that space in this span we're going to put an emoji like a little pointer finger so this is how emojis need to be done so the role is an image it's a little image arya label it is kind of like an alt tag but for emojis kind of but it's right pointer is what i'm going to be using and to pull up on a mac the emojis command control spacebar opens it up and i'm going to do the pointer and now we have our little emoji but yeah this aria label is just like saying like what is the emoji it's kind of like the alt tag for it now same thing as before we have to do a um we have to map over all this information okay so above article and below section let's do our map so we're going to do project data project data dot data.map we're going to open that up and in here we're going to put project index do an arrow function open that up and before we open that up we want to wrap these three around down here right there yeah okay so now we're mapping over that section of all of the tiles of the projects that we're going to have and it all looks good so if everything is correct we have our project we published one if we go to our react app cool so we have our homepage blog posts projects and it's there okay so this is the description that we wrote in these are um the like spans that we did type is personal company and finish on invalid date oh i know why because we didn't put a date so let's do yesterday publish that okay refresh that there it is okay now if we were to click on my first project that takes us to google and if we did view the project it takes us to google so either one those are both clickable but this is like the the one like that makes it look a little more obvious if we wanted to make that just a little more obvious come to projects let me collapse that um we'll do text that's too big text excel there a little bit bigger but yeah um looks good and if we were to add another one let's add another one real quick project my school project and we'll say we finish this then place will do um my university i mean you can put whatever you want there my final project for my class old-fashioned smiley project type school link uh we'll still just do google it's just the easiest one and then tags will say university school project and education publish that and we go back here give it a little refresh and there it is okay so now that our projects page is talking to the sanity studio let's actually make our blog post so projects click into a url and it takes us somewhere else but blog posts if we were to click into one of these it takes us to our single post page so let's get that up and running so the way we're doing our image for this is we are bringing in the image directly from the garage query and using it like that a different way we can use our images is by using our image url package that sanity has so let me show you how that works so in single post let's bring in just a couple things that we know that we need so we know we need to use effect and use state and we know that we need the sanity client from client and then because we are looking at the url and we're looking at the slug of the url every single one of these is going to be unique so every time we go into this this component this page it's going to show different data depending on which tile we clicked on in the post component so this one we're actually going to also bring in use params from react router okay so what we what use params does is it's going to take out like sections of the url that we need and use it accordingly so because we're getting the slug we need to get these prams in there now down here we're going to set our state we'll do const and we'll do single post and set single post and we'll set that equal to you state and our initial state will be no okay now we're going to be using the use param so we're going to do const and we're going to set that to our slug because that's the part of the url that we really want to pull out use params and so we'll just let that sit there for a second and when we use params we're gonna be calling it slug okay now the package that we want to bring in that's the sanity package is the image url so this image url is going to help us chain on stuff for our image pull out the url maybe chain on the width height whatever it is but um let me show how to do that so the package that we want to add let's go to this one this is our react so let's cancel that or stop that running so ctrl c and we're gonna do npm install and it's going to be at sanity image url so we'll let that install bring that down and over here we're going to import image url builder from sanity image url okay so this is going to allow us to do the thing that i was telling you earlier where we're going to chain on some stuff and it's just it's really pulling out the url from the image so it's just kind of an easier way to do it but i did both ways so you could see both ways and pick whichever one works for you we do need to build out a function also a variable that we are going to be using in that function so image url builder using the sanity client and then in here we're going to do function url for the source of this return of builder dot image and the source of that so by typing all this out real quick we have the building blocks for this url for that we're going to be using for our image and it looks like that was installed awesome so that was added and we can collapse this okay so now that we have that and we're not going to use it yet we're going to use that in our return let's build out our grout query so same as last time we'll do use effect and then in here we'll do an arrow function that uses the sanity client that fetches our grok query okay now this one's going to look a little different than the other two because the slug is dependent on whatever post we click on so we're going to do all all slug dot current that is equal to whatever the slug is so whatever slug that was clicked on we're gonna look at that slug dot current now we're gonna open that up and let's bring this down we're going to pull out the title we want the id we want the slug we want the main image we want to pull out the id of that and last thing is we need the body and because um we want the uh like the author card to show up on this we're going to give it okay let me let me explain what i'm doing here because this is kind of fun but let me just finish typing it out and we'll do author image okay so what's happening here is name and author image i could actually change that to author name but i'm just going to have both so we can see both but i'm diving into the author and the name and the author and the image and i'm giving it a name that works better for me rather than having to dive and do author.name so i'm giving it an alias name kinda so you can name that whatever you like i'm naming a name and author image now after that we need to do a dot then and we have our data that is now set single post and we want the first bit of data that comes out of that so a little bit different than the other two then we're going to catch any console. catch any errors with console.error and then we want just the single slug to come out okay now if there's not a post if there's not a slug that comes out like maybe this slug was broken maybe we deleted some something happened but if there is no single post then return a div that says loading so it doesn't break anything but just in case you have that so yeah now in our return this is where we're going to use the url for we're also going to be using another sanity package that i won't give any spoilers yet but let me clean that up and yeah we're going to have and we're going to do our whole html setup thing real quick main we're going to have an article we're going to have a header we're gonna have a div within that another div within that an h1 and underneath that h1 we're gonna have a div with an image in it and i know what that image is but we'll look at that in a second and then we're gonna have a p tag underneath that okay now underneath all those divs we're gonna have one more image oh that wasn't right there we go okay and then underneath the header we're gonna have one more div and this is going to be block content we will get back there in a second that's totally going to change but that's what that looks like right now let me put this to the side or get rid of that so here's our return we have our main oh our tickle cool so we have article we have our header and in that header we have an h1 an image and a p tag so yeah let's style these out slowly one by one and we'll make it look good so main class name is going to be equal to background of gray at 200 min height screen and padding of 12. our article is going to have class name of container so this should look very similar to the other ones mx auto auto background of green 100 and rounded large our header we're just gonna have a class name relative and then this div is going to be class name of absolute we want height to be full we want width to be full flex the items we want to be centered and justify center and a padding of 8. now this div class name of background white background opacity 75 rounded p 12. this h1 we'll do a class name we're going to be using cursive the one that we our custom one that we made cursive text 3xl and on large screens we want that text to b6 xl and a margin bottom of four now this h1 is going to be our single post title oh this p tag should be right underneath this image because this is the image of our author and this is the p tag of the author's name so that's why we have a little like div around it a little like author card so let's style that so we have our the title of the post and we have a little author card that we're creating so class name is going to be flex we'll do justify center text is gray at 800. our image our source is going to be and this is where we get to use our url for so url4 and you'll see how this is a little bit different than what we've been doing with the other images so it'll be single post the author image and then dot url so it's pulling out the url for it if i wanted to manipulate the size of it i could do dot width but we won't do that right here but that's how it's going to work right now we're going to have an alt equal to single post on name remember that is the author's name and then we'll have a class name equal to oh width of 10 height of 10 rounded full save that and then the last one we need to work on is the p tag for the author card so class name is equal to we'll do cursive the one that we made flex items center padding left of 2 and a text of 2xl and in the p tag we're going to have single post dot name so that's where the author's name is going to show up awesome now in this image this image is going to be our main image that we have okay so we have image we have source equal to we're going to do single post dot main image dot asset url okay now this is where i want to show you the differences between the two see how i did url for oh good thing i went back up because that's a typo url4 and i didn't have to so this is like a chain on that i had to do to get that url instead i can just grab that that image and get the url out of it right away so i don't need to do much work but then i can chain on a lot of things for it so let me pull that up real quick so here you can like you can add a width to it you can add a height to it you can add a blur to it there's a lot of like different things you can do to it and it's just like quick like styling and manipulation of the photo without having to do a lot of work so this package is really awesome um we're not showing like the true potential of it here because this is just like a quick portfolio that we're creating you can choose how you want to use it but they're both there both options are there okay so let's get back we have this one let's do an alt of single post dot title and then we'll do a class name oh let's go up class name equal to we'll do with full object cover because we want to cover the whole thing and rounded top now we're going to give a little bit of styling to this that we have to do inline because this is kind of like a specific size that we want to get and it's just a little bit easier right now so we're going to do 400 pixel because we want this thing to be pretty big okay now the last thing we need to worry about is this block content so in this div let's just give some styling to it class name is equal to padding x of 16 on large screens well on large screens we want a padding padding x of 48 padding y of 12 and on large screens we want padding y of 20 we're using pros class here pros is going to allow our block content so if we have a list if we have anything that needs like its default styling pros from tailwind is what we're using for that and we brought that in at the very beginning pros on large we want pros to be xl max width is full save that now in here we need to install a sanity dependency so control tilde open that up and i'm going to install npm install at sanity block content to react now while that installs let me import it at the top of the file oh i'm glad i like see these things but i was like why is it still grayed out because we used it because i forgot the s typos are good are gonna they're getting me so yeah we'll import block content from at sanity block content to react and let's use that at the bottom so all we need to do is do block content close it off and in here we'll do blocks is equal to so the blocks of content is equal to single post dot body and we have a project id remember our project id lives in client we'll grab that and we have our data set is production production okay so that is our entire entire single post um component so what's going on here block content this block content is this so if i click activate and i make this big we can add images we can add different styling we can add bulleted lists urls strong so in order for all this to look correct we added in block content and this one is specific for react so that's why we use this one so block content is taking all of our portable text and putting it all together in one rather than like having the chunks and showing a beautiful single post-op body that we asked for so super awesome and let's see how it looks so we can bring that down so if everything is correct oh everything is not correct i need to restart my server npm start let it load okay now if everything is correct if i click into one of these it should show my stuff my content and it does and it shows my author card it shows my title it shows that little div that we made for all that to like sit in it shows my main image the text so this looks really good let's add a bulleted list um this is fun i love my new portfolio awesome stuff okay publish that let's see what it looks like there it is so i mean i just made the edit and it's already showing up that's awesome so there's our blog post same thing here looks good now projects are done and let's work on the about me page it's our last one and then we can deploy all this and send the url out to everyone okay so our final one is the about page so let's work on that some things that we know that we need are use effect and use state and then we're gonna want to bring in the sanity client from that client file that we made and so this one's going to have a background image the image of the author and then the bio so let's set our state up real quick so we're going to do const we'll set it to author and then set author and then use state our initial state will be set to null and then for our use effect we'll do the same thing that we've been doing sanityclient.fetch and then in here is our grok now this croc is going to be a little bit smaller than what we have been working with but we're going to get all that have the type equal to author and then open that up and we're going to look for the name of the author bio and we're going to do the author image and set that to image.asset url okay nice and then we're gonna do our dot then and we'll do our data and set that to our set author and then the first part of that and then next we're going to do a catch and do console.error that looks really good and we want to run once now if there's no author we can do the thing that we've been doing the if no author then we'll return a div that says loading now for a background image i'm just going to use an image from my downloads let me grab that real quick so in here in the source we'll drop it in there and we have our plumaria picture this is going to be our background for our about page so let's bring that in we'll do import loop plumeria from and it's two up plumeria.jpg awesome now that image is going to be used in our return down here so let's start doing the return and let's set up our html okay so we have our main we have an image right here we have a div within that div we have a section that's going to hold an image and within that it's also going to hold another div that has an h1 and our block content for our bio is going to be right here and we'll just say block content and we'll do like what we did with the single post we'll do our block content from react and we'll bring all that in it's already been installed so we don't have to wait for that install and yeah so let's start building out this main section let's give it some styling so we'll do class name is equal to relative now our image is going to have a source of that plumeria that we just brought in we're going to give it an alt of plumeria flower and then class name is going to be absolute and then with full okay now we should have a background image right now but let's not look at it yet now in this div we'll do a class name of we'll do padding 10 on large screens we're going to have a padding top of 48 and then container mx auto i wanted to write author right there and then relative awesome so in this section we'll do a class name of background green of 800 so pretty dark we'll do a rounded large shadow 2xl and then on large screens we'll have flex and then a padding of 20. and then this image this image is going to be our author image that we brought in from the studio so let's do the url for that we've been using and i got to bring in that package but let me just build this out real quick so we'll do author author image because that's what we called it up there and then we'll do that url okay so from the top let's bring in image url builder from sanity image url and then we need to use this so i'm going to bring in that function that we built out from single post and have that right there and then it's going to be using the url for that we use right here okay so this class name for this image is going to have rounded width 32 height 32 and then on large screens width of 64 and a height of 64. and then margin right always of 8. now we are just creating a square for our image and then the alt let's do all is going to be author dot name so whatever the name is for the author now this div let's give it a class name of text large flex flex column and then justify center this h1 this h1 is going to have our name let's do class name is equal to cursive that one that we made earlier text six excel text green of 300 and then a margin bottom of four within this h1 we are going to do so we're gonna do hey there hey there i'm and we're gonna create a space right there and then under here let's do a span that will have a class name of text green 100 so it's going to be a little bit different color than the hey there i'm and this will have author dot name so the name and then let's style where this block content is going to go we'll do class name is equal to pros on large screens pros excel and then text white so this block content is going to be what we did in the single one the single post component so we'll do block content and then in block content let's give it blocks is equal to the author's bio so author dot bio and then project id that id right here and then we'll do data set is equal to production now it's not going to be happy because we need to bring in uh import when you bring in the block content from block content to react there we go okay so this should all be working and i see a mistake that's not a path so let me save that and yeah oh oh it looks good okay so here's the background image that we brought in here's that span that we created so we did like the different text and there's the bio and the image and it looks great so yeah the about page is done so i'm super stoked on this this looks really good the last thing we need to do is deploy all this and get it all ready so i'm just going to commit all of this we already set up github at the beginning so we'll do git status there should be a lot yeah git add git status because i like to see the green green says it's been added so git commit dash m it's going to be um um entire portfolio because it really is get push origin main that is being pushed and it's done and let's get this deployed okay so because this is a single page application and we are going to be deploying our front end to netlify we do need to actually add a redirects file to our project so that as netlify is reading it it knows like i need like as i'm navigating this project i'm going to be redirected to other things so very quickly let's do that let's get rid of this and in our public we're going to do a new file it's going to be underscore read directs and in here it's just going to say html index.html of 200. so every time it goes it's going to look for this and then it will redirect from there so we're good there let me push that real quick get status hit add get status git commit dash m um redirects redirects file and git push origin main okay so let's pull in my netlify and new site from git is what i've clicked on and we're going to create a new site so from github because that's where mine lives authorized okay we're going to look for my it's called my portfolio let it think let it find it there it is so click on that from main and let's deploy the site looks good from my team okay so that's starting up over here let's go back to our sanity studio kill this and let's do sanity deploy this is going to deploy our sanity studio so notice i'm in the sanity folder for this i do sanity deploy hit enter and studio hostname so i can name this anything i would like i can do um portfolio let's see if that's available it is so at capeheyportfolio.sanity.studio is where my sanity studio for this project is going to live so it's building it out let's see how our netlify is doing still deploying still working on it and this is still working on it being able to deploy our studio and our front end and every time we add something to our front end it's going to [Music] or everything we add anything we add to our studio will show up in our front end so i'm going to take this that's where our studio lives now that's pretty awesome that's fun oh and this is done okay okay so there's a little thumbnail i'm going to do domain settings and i'm going to do edit site name and i'm going to do portfolio already taken i may have taken it two okay that one works okay i'm gonna copy that i'm gonna paste that in let's hit enter let's hit enter on our studio and it is deployed and it is deployed okay that's awesome now we need to tell our sanity studio that this is a trusted url because remember we had the course origins before so we need to do manage.sanity go to the studio see that's the deployed url now we need to go to settings api add new origin and we're going to add the one that we just deployed so now it should all be trusted because before that wouldn't have shown up and it looks good and we're going to click into it and we're going to see our content and it looks fantastic now let's change something and see it happen in real time so we're going to come here let me make this bigger because it's so small let's change my bio let's do author let's come here we'll do also enjoys anime and hanging out with her five animals let's publish that and it should be live on our deployed site refresh and there it is oh it's so quick so that's i mean that's real time and it's up on our website and we don't have to work locally we can send this out to our group our team whoever it is that's helping us if we're working on a group project and everyone can have access to the studio you have to do that in settings remember here team you add people here but as they add stuff they have the ability to add a new blog post and right away the whole team can see the updates here but yeah our entire portfolio is done we have everything working it's all functioning it's deployed and we did it we made a portfolio it looks beautiful of course feel free to style and change everything but the functionality is there we have the studio communicating with the front end we have the front end displaying all the great stuff that we've done and thanks to tailwind we were able to do some awesome styling all right we did it it's done it looks fantastic it's functioning how we want it to we have everything deployed the front end and the back end and yeah congratulations everyone so a couple things if you'd like to customize your tailwind a little bit more there are themes there are colors so definitely check out the tailwind docs and you can take it to the next level if you'd like with your tailwind also if you would like to check out the sanity docs this will give you more in-depth of grok we used a lot of grok today sanity studio the sanity studio is actually customizable so if you have a color that you'd rather have the studio you can definitely do that but definitely dive into the docks of sanity if you'd like to learn more there now if you'd like we do have a sanity community slack workspace that you can join slack.sanity.io and here you can find a lot of support in your with your sanity projects whether it be react or next if you did it with next there's a large community there always willing to help also we have and i made this channel so if you have your portfolio and you want to share it definitely share it that i made this channel we'd love to see it and it's very exciting to see what people create so we'd love to see it there if you'd like to find me on twitter let me just click on this because it is functioning you can find me at cape hey underscore okay and my dms are open so if you'd like to send your portfolio there as well i'd love to see it so thank you so much for watching thank you so much for hanging out we did it and it looks great thank you everyone mahalo

Channel: Traversy Media

Views: 159,765

Keywords: react sanity.io, react sanity, react cms, content management system, headless cms, react, react portfolio

Id: NO7_jgzVgbc

Length: 126min 52sec (7612 seconds)

Published: Mon Dec 07 2020