🔴 Let's build a Modern Portfolio with NEXT.JS (Framer Motion, Tailwind CSS, Sanity.io, React) | 2023

foreign [Music] welcome back to another video it's your boy sunny and I am back dropping you the most modern portfolio you've probably seen in a minute it's gonna be a hell of a lot of fun I can see the energy is nuts today I'm excited for this one because you guys drive the energy in me so this video today is gonna be a big big juicy portfolio tons of stuff which you didn't expect trust me so get ready smash the like button let me know what you're watching from right now I'm about to introduce you to our modern portfolio 2.0 check this out guys pow here we have the front screen I'm going to go ahead and demo everything because this deserves as some serious loving right now okay so give me one sec I'm about to show you the anime are you ready for this animation wait for it wait for it watch this when the page loads wait for this beautiful look at this look what in Tailwind CSS that is happening all of that is happening telling CSS this comes up we've got all this beautiful responsive design we're gonna go ahead and have this lovely frame of motion look at that as we scroll down we're gonna go ahead and have our beautiful carousels pop in this is actually snapping right now so it's centering the elements in the screen bam workout fan it's up to you we've got the skill sets loading in so check this out guys you go ahead hover over your proficiency all that good stuff it's all fully responsive as well you can showcase all of your projects on your build and most importantly if I like who you are and I see your build and I think wow I want to work with this guy then boom I contact you right now I'm going to show you that this is a fully responsive build because you know we don't do half measures here so check this out if we click the bottom we go straight back to the top you can see this whole thing is snapping so as I go ahead and scroll up you can see it's actually snapping down into the build this works in all different devices so iPhones tablets whatever what the hell your employer wants to look at it from it's gonna work so we've made sure you impress your employer by not just listing out stuff by showing it with your with your work so you guys can see right here look even the tabs are working perfectly beautiful but beautiful beautiful uh UI so you guys can see even this is working really nice everything's great over here even these icons guys even that is dynamic right so I'll show you how this works but depending on what URL you give us it will go ahead and render out accordingly so as you can see this is all working fully fully responsive beautiful website like even this even the background of this like what it's just so clean we're using Talent CSS to achieve that and you're going to learn how to build something beautiful like this just as well now I want to mention this is not hard-coded information right now yes the UI Dux all that good stuff I'm going to drive code obviously but the main thing that you need to understand is that today's build is actually going to be powered by sanity backend so check this out guys the this entire back end is actually powered by our beautiful Sonic ecms backend so look at this guys right now you can see if we go into Sunny Sanga you're actually going to go ahead and be able to update all of the information that you saw on the page so not only is it going to be something that is going to be absolutely I forgot to put my alarm there you go look at that glow right so not only are you going to be able to go ahead and upgrade update your stuff once it's on there all the information you see on the page is going to go ahead and get rendered just like so so this right here software engineer is pulling from here and so forth you can see we've got all of our experience everything everything is coming through a CMS so as you can see right here if you want to upgrade your experience or update it you can go ahead pull that information in all your social icons are going to come in as well so as you can see Facebook all this if you've got a special link it will come up as a link icon for example if you're interested join the papa fam Cloud we've got loads of that good stuff here guys so you guys can see you can go ahead and actually update anything including the skills that are listed out here right now and to top things off your boy didn't do any half measures this build is heavily heavily using typescript so you're going to learn all about typescript in trust me in a very very powerful way today it's going to be a hell of a lot of fun okay so get ready over 400 people across platforms watching today is gonna be one hell of a build smash the Thumbs Up Button already passing 300 likes in a second that's what I'm talking about let me know where you're watching from right now and without further Ado let's go ahead break down the tech in today's build so we can go ahead and get the juicy stuff started right so today we are building wow it's hot in here today we are going ahead and building out this portfolio and I'm going to go ahead and draw on the screen right now you guys always ask me something what are you actually using to draw on the screen well it's something called screen brush and as you can see I can freeze I can put things on the screen but we're going to be obviously learning react.js so in today's video you're going to be learning react.js right now I'm doing an outline of the video so that way you know exactly what you're going to be learning and also I just want to shout everyone out Georgia in the house India in the house Rwanda in the house UK in the house USA in the house this is sick everyone is tuning in from all around the world that's what I want to see smash 300 likes already guys at this point with that proper Farm energy is too good like we are absolutely killing it right this is amazing stuff Sweden Kenya Japan Poland Cali oh what's up American house this is awesome Rainy World is Alex Thomas I see you dude papicha this is sick everyone around the world international now this is how we do it right so you're going to be learning about react.js you're going to be learning about next Jazz and most in particular you're going to learn how to optimize it in a way that you can can render Pages extremely fast because we're going to build it on the server beforehand as static pages and then go ahead and release it so that way whenever a user comes to your website Pam it's super super fast and we're going to implement ISR so that way if you update anything on the back end it will change on the front end after an interval we're going to learn about telling CSS that's how you saw all that beautiful UI kind of all that magic happening behind the scenes we're also going to be doing sanity IO so I'm going to show you sound e i o and when we get to that stage do not forget the first first link in the description is sunny e.io forward slash sunny as you can see the guys set us up I love those guys over there amazing incredible team always developing the best stuff and you guys can see your boy has hooked you up with a pop-upam special so when we come to the point where we have to install sanity make sure use sanityanit coupon Sunny 2022 and what that's going to give you is you're going to double the free plan if you've done it correctly once you log in you should be able to see C boosted free or boosted plus inside okay so lots of cool stuff to come we're also going to be covering frame emotion on the channel today you guys have not seen this yet on my channel I've done it in my coaching course inside of zero to full stack hero if you want to check it out link is in the description but we are going to cover all of these silky smooth animations that you see happening including this background this ain't just a library that I'm pulling in and just randomly you know plucking things in I'm actually doing this in an awesome awesome way right now and we're going to be using motion to do that right frame emotion so a lot of cool stuff you've never seen before on this channel I'm always trying to push my sort of my levels so that way you guys can go ahead and benefit right so this is what you want to do once we get to that point okay and let me know right now do you guys actually like the UI so do you like the portfolio are you going to be proud to put that on your CV because I want to see this out there I want to see this absolutely killing it I want to see you guys destroying your interviews and all that good stuff and remember guys as I said if you want to join us remember we are just a community of developers if you do get stuck this is what we're here for that's what we have the proper fam that's why we have zero to full stack hero our heart and soul has gone into my course but yeah all of this stuff is free if you just want to go ahead and take that next level Feel Free Jump in we've got an amazing Community amazing set of team and developers over there and yeah you guys are absolutely loving it inside the papa fam right now so that's what we're going to be doing so without further Ado I think we should I think we should get started guys what'd you guys say I think we should get locked in go ahead and code out today's portfolio just to let you know we will be deploying this build with the cell where I'm going to show you how to do it with the CLI today okay you're going to be doing a bunch of full stack development so we've even got the API side of things so we're going to go ahead and create our own API endpoints and we're also going to go ahead and use react hooks form to manage the state inside of our form when we come to con the contact me page so tons of stuff tons and tons of stuff is happening right now okay guys and while I see the retention flying we have 400 people you guys are giving me hyped up without further Ado let me have some water because well I need it because you got the energy today is nuts you guys surprise me every time right nearly at 500 people watching right now wow I'm sweating my AC is blasting as well all right this is crazy wow okay let's kill that it absolutely crush this one all right I'm also going to show you how to do this cool little trick over here right so you guys can see this look at that long hair right there old school sunny all right and these are also obviously clickable buttons right so if I click on about it will take me to the about page and so forth but let me know you guys are loving the UI right now okay but khatib says oh here we go from the master himself thank you guys I'm only good at what I do because of you guys the energy that you give me the the the giving back that's what I learned right so that's what we're going to be crushing it today okay so without further Ado let's dive in guys so first thing I want you to do is focus okay so phones on do not disturb none of that but you know none of that distraction stuff right now if you're watching the replay take your time we're gonna have time stamps here and I want you to obviously just have fun okay so don't worry if it seems hard seems difficult this is actually going to be beginner friendly and yes it may be a little bit kind of fast in some areas but don't worry take your time that's why it's here it's going to be up on you YouTube afterwards so it's all good okay so diving into things firstly you want to make sure you've got node installed otherwise you can't do things like MPX right but we're going to go ahead and install our first project using the create next app template okay and we're going to be doing it with the typescript template and the reason why you might you might be wondering why isn't using his Tailwind template seem to have a bug right so I'm not actually going to be using that one so first thing we're going to do is we're going to copy this right here create next app at latest and I'm actually going to show you all of my processes because I like to do it that way because that way when you're doing it yourself you can go ahead and actually replicate the same things if you ever get stuck okay so I'm going to go ahead and open up my terminal right now you guys can do the same code along with me and let me know if you're coding along as well okay so I'm going to go into my documents right now I like to put things in order right I'm a bit OCD like that you guys can feel free to put it wherever the hell you want all right Savvy programs this typescript is my girlfriend I'm joking I I love that dude good chat all right so at this point MPX create next stop latest typescript and you want to go ahead and put in a title for your build okay so in this case we're gonna say portfolio uh watching from Dubai oh nice let's say portfolio YouTube um I'm just gonna say YouTube 2.0 okay and I'm gonna hit enter and this is going to go ahead and build out a next JS app for me and it's going to go ahead and do it with the correct dependencies so that way typescript is set up out of the get-go any everyone else get this question by the way while this is initializing everyone's always saying to me Sonny why is your music playlist from all that good stuff all you have to do to get the music playlist in the description there's a newsletter just sign up to news hour first thing we do is automatically send you an email which has access to our playlist so feel free to do that links in the description and that way you can enjoy your coding okay so we're going to go into that directory right now so I'm gonna say CD portfolio Dash YouTube 2.0 bam and then I'm going to go ahead and do code dot to go ahead and open this up inside of a vs code okay so I'm going to close that terminal behind now I'm going to go ahead and full screen this now what I'm going to do is if that didn't work for you that code dot command I want you to open up vs code command shift p and I want you to type in install now mine says code insiders because it's actually going ahead and I'm using the beta version you on you won't be using the beta version most likely it's yours will just say install code command in path then you can do the trick I just showed you okay it's a very good trick the reason being that I like to use it is mainly because it actually allows you to go ahead and um uh open up your workspace perfectly so that way you've got all the folders on your left and you've got your vs code set up it's a very good shortcut when you're coding quite a lot making new things and that kind of stuff okay guys so absolutely crushing it nearly a 400 likes already Jay this is not focus mode right now okay awesome stuff all right so we're gonna go ahead and set things up so first thing I want you to do is pay attention to the pages now inside of nyxjs all of our pages are managed inside of our Pages folder so if I have a page called search.tsx that will resemble forward slash search on my website if I have a page called index.tsx naturally that's the home page of that route so in this case forward slash index.tsx would just be my home page okay so that's where all the magic is going to happen so opening this up to Kickstart our app off I'm going to close my other app that I had running and I'm going to show you how things are going to work okay so let's go ahead and do command J and I want you to go ahead and type in and this first thing you need to check actually is you need to go ahead and see if you've got a yarn lock or a package lock it doesn't matter you can switch it's fine but in this case I have a yarn lock so I'm going to be doing yarn run Dev you can do mpm it's fine but if you do npm make sure you you use one and you delete the other log file welcome to the Papa fam special tier engineering with kellyanne thank you for your support dude I appreciate you brother and now I can see you highlighted if anyone else wants to join the join button is down below okay so this is done amazing stuff now what I'm going to do is put my setup to it nicely as I want it so that way we can code in a cool way I'm going to go ahead and throw this over to that side and what I like to do guys is just optimize things a little bit so that way it's not too too messy I'm going to throw this over there right now and I'm going to go ahead and do localhost 3000 just like so now as you you should be able to see this right amazing stuff okay retention is absolutely nuts today thank you so much everyone for tuning in this is going to be one of the best builds because this is the most value to all of you viewers right now because you're going to have a new brand new shiny portfolio at the end of this right so first thing I want you to do is go ahead and remove a bunch of stuff right now probably what you want to do is keep the head and probably say something like Sunny's portfolio okay whatever you want really you can call it whatever you want it's up to you and you can even change the icon as such I'm gonna just remove this right now and we're not going to be using the classes like so we're actually going to be using our own stuff so I'm going to get rid of everything here right and we should have a clean slant all I want to do is H1 saying hey papa Farm let's just say let's build an awesome portfolio and hit enter now you should see this let's build an awesome portfolio good stuff okay and by default I don't know why it's black but anyway so what we're going to now do is I'm going to go ahead and remove this and the first step is we need to go ahead and set up Tailwind CSS okay so Tailwind CSS is basically a way that we can go ahead and shorthand our steps of writing CSS so it allows us to write really cool responsive websites and it's just an overall amazing Library it allows us to have all these utility classes that we write in line in our code and it is much more readable much more easy to work with and trust me it's just damn powerful okay so Tailwind CSS I'm going to show you guys right now you can go ahead head over to the website I would recommend if it's your first time using it go ahead and actually just what right read out their web page and just see for yourself the power of Towing CSS okay and what we're going to go ahead and do is just get this started up so we're going to click on docs up at the top and it's not complicated okay we're just going to follow the steps right so I'm going to do it with you so that way we can kind of grow and do this together okay so npm install D I'm gonna copy the ending because I'm using yarn right now I'm going to do this I'm going to go ahead and create a new terminal so notice in my first terminal I have things running and the second one I have this so I'm going to go ahead and pull this over right now I'm going to say yawn add Dash detail in CSS okay now while that's installing I can go ahead into the next step and then I can go ahead and do this MPX Tailwind CSS init this is basically going to set things up for me so what I now need to do is Type in MPX tailwind.net 101 CSS net okay let us do a thing now it's got we've gone ahead and got a Tailwind config.js file okay so with that config file what I now want you to do is we need to go ahead and add in the following but we're not going to do that because we have a slightly different configuration to the one that they have all of our content actually resides in pages and components right so right now we've got the pages we will have a components folder as well so what I want you to do here is I want you to drop this down and I want you to pop in the following so Pages any file inside any name and the extension should be JavaScript type script JavaScript or typescript S and it's going to go ahead and read our Tailwind utility classes from these files okay so that's going to go ahead and tell hotel when they need to go ahead and look in this area to go ahead and do what I need to do okay nearly at 500 likes keep on going guys wow that is actually amazing thank you so much this is this is incredible today I can't stress enough right the next thing we're going to do is we're going to go ahead and go to our globals Stars right so we've got a globals.css file and what I want you to do is control command a delete everything and I want you to go ahead and copy in the following right so we need this inside of our code then once you've done that what we're going to do is go down and you can see we've got this simple Command right here now actually what I want you to do is there is actually oh sorry I'm getting confused with react native so crazy all right so at this point what we can now do is we don't actually need to do the CLI build process now we can actually should be able to go ahead and use it so if I go ahead and hit save if I go into my code and I go here and I type in class name and type in something like text red 500. let's go ahead and see if my text goes red hit refresh okay so we're not getting red text right now um I probably missed the step because I kind of rushed this a little bit I ain't gonna lie I ain't gonna lie I did Rush that a little bit um right so add toe and right give me two seconds a little quick debugging already all right okay I actually didn't use the right um setup so I should have done now that we've changed a bunch of stuff I need to go ahead and do npm go back here close this off and yawn run Dev there we go okay and let's see what's going on okay I'm gonna pull this to the side let's go ahead and have a look get rid of that and what we should be seeing right now I'm probably missed something very quickly uh okay so I'll tell you what we're gonna do we're gonna go ahead and have a look at this is actually an actual guide for this here right so if you type in installment CSS with next year still actually come up like oh there we go sorry guys I completely used the wrong one right you actually needed to use this one I'm sorry right so use this right here guides next.js so we're going to go ahead and just literally override our stuff with that it's fine it happens it's good we're live right now right there we go uh I'm using npm no no no no no cut that I'm going to use yarn [Music] ad instead of install yarn add there we go okay see easy ass right done we've got that post um there we go that's the one we needed all right now we've got content and there we go everything here so boom let's go ahead and double check our Tailwind config file everything's still good nice then we've got our Global CSS which is exactly what we needed yep everything's looking good and then we can go ahead and check everything is working so we can hit refresh now and I'm probably going to go ahead and do that again so um Tailwind already exists create a poster it says file okay cool now I just need to check that mine is actually correct because I think I've actually screwed something up here going config.js there we go I'm actually going to go ahead and copy this and put mine in here without this plugin we're going to bring that in later okay CSS there we go and let's just go ahead and restart our server now okay hit refresh okay slightly frustrating but it's fine we'll get there let's have a look at the issue text Red let's put an awesome portfolio finding him to hunt 10. the demo gods are against me right now that's fine it's all good [Music] Darwin bass restart the server I did do that I don't think you need to import the um the other thing my bad uh globals okay there we go right there it is all right it just it took a second it took a minute I was thinking I was like what the hell is going on right okay there we go there we are right so now we've got it working so it just takes a little bit of patience I just had to kick in the preprocessor so at this point I want you to make sure that you've got the following installed okay go ahead and type in Tailwind and I want you to get the CSS intellisense over here right so make sure you've got this this is going to help you out because it's going to put a bunch of useful suggestions on the screen while you're working guys 500 people are watching what the hell thank you dude this is nuts wow 500 likes let's go I just it blows my mind okay all right so hit install on that and then let's carry on so at this point now you should be able to start in a super fast nice way if I was to go ahead and change the color of this case I can do text blue and you see here I get all these nice little pop-ups so I can do like a shade of 800 bam we get blue text right awesome awesome stuff okay let's jump into some more juicy stuff that's actually pretty fun to do right so what I like to do if you haven't already we've already set up our tail and CSS so that chapter is done Jay I'm helping you out there um at this point now what we're gonna do is go ahead and Mark things out okay so what I like to do is I always drop comments around my page that way I know mentally what my next step in development is you can do it however you want this way tends to work well for me and honestly it really does help a lot of students are which is why I share the knowledge with you guys okay so I'm trying to share this with you guys so that way you guys can go ahead and benefit like so okay so at this point what I need you to do is we're going to go ahead and firstly we're going to build a header okay after we built the header we're going to go ahead and build a hero section after that we've got the about section then we've got an experiences section we're gonna have a skills section following that and then we're going to have a project and contact me okay so projects and we're going to have a contact me section after that okay so these are all going to be built today so there's lots of stuff that we got to do today okay but it's going to be a hell of a learning experience for you guys and it's going to be one hell of a fun Journey now I do have the build deployed over here so that way we can see this for reference and we can kind of mess around with it and so forth okay so we can use this as one of our reference builds um and that way we can kind of go back and forth I made sure we could do that so that way you weren't left in the dark as I was coding it okay we can close these right now we don't need them anymore and we can move our sanity somewhere else because we're going to come back to that in just a bit okay so we need to get this to that all right it doesn't seem that too hard but we're doing pretty well smash the thumbs up and we're about to cross 500 likes okay first thing I want you to do guys is we're going to go ahead and build out the header so the first thing is our photo structure I like to keep things very neat especially when we're coding big projects like this so I like to click on package.json click on the folder and type in components this is where we're going to have all of our react reusable components a lot of people asking will you save this stream yes I will and guys I'm not ignoring your text right now you guys are saying loads of like thank you messages I thank you so much for tuning in 500 likes bam I can't believe it you guys love your love is incredible I'm going to keep the content coming we've been doing weekly videos that's how we do it it takes a ton of work so I massively appreciate you guys when you say that thank you so much right there's so much work that goes into this it's not okay so at this point we're going to go ahead inside our components we're going to type in header.tsx that's because it's a typescript file which has JavaScript jsx inside of it okay bam we do this now the next little trick that you may or may not know depending on if you're a papa fam OG is you want to type in react extensions right now what I want you to do is grab this extension right here this is called the es7 react Redux react native Snippets I tell you it's in every single video right because honestly it's a game changer of an extension now here what you can do is rfce or there's even a typescript form right typescript rfce and you can go ahead and hit that and this will go ahead and create an outline for your file okay so in this case we've got a nice little outline and it will actually have the props and everything as so now as I mentioned before we are using typescript in today's build so get ready for some typescript work okay it's going to be a lot of fun okay so at this point what we are now going to do is we're going to go ahead and render this on the screen so I'm going to say I am a header I am a header okay hit save and at this point I need to pull this in so I'm going to say header like so and I'm going to go ahead and control spacebar at the end and we have this nice little neat trick to import things into our thing now you can see I am a header comes in and it says Sunny's portfolio based on this block of code right here okay so with that said now what we are going to do is I'm just going to go ahead and neaten up my second screen so that way I can actually see what the hell I'm doing okay so let's do this so what I need you to do now is we need to go into our header and I'm actually first thing's gonna first thing I'm going to do is change up this so we've got syntactically kind of more correct SEO friendly things inside of this right yes you can use TSR afce for a arrow function you're right so we're going to change this to a header so now it's actually a header components that way SEO search engines can find it a little bit easier right so the first thing we're going to do is if we look at this screen we've actually got this we've got the top part right so this is broken down into a few different sections right we've got the top oh God damn it okay I'm gonna do that again pretend that didn't happen we've got a bottom a top box right and the way I like to think of this is on this box we have a few different sections so here you can see on the left hand side we've got these icons right here on the right hand side we've got this like sort of get and touch screen now the main thing when you're a beginner right or anything like that right you need to understand how flexbox Works how that kind of stuff helps you position things and spread them across evenly no matter what the screen size is thank you so much Manoj oh Jamie that was you dude what is up man thank you manage for the uh donation thanks bro because of your projects I've got a job Jay screenshot that amazing stuff chill still I appreciate your donation thank you so much dude oh I've got it coming through the the computer okay so at this point we're now gonna go ahead and uh yeah develop that out basically so for the top left we're gonna have a div right we're gonna have a div uh over here so I'm gonna have two dip I'm actually gonna have um inside of my Dev I'm gonna have let's just say social icons right so as I mentioned before these are going to be the icons that we're going to see inside of our build okay so in this case we're gonna have a bunch of different icons be rendered out on the screen now these icons that you see they're actually a component that we're going to be pulling in from a library so they're called the react social icons Library so I'm going to show you that right now so react social icons with quickly Google search it throw this over to a GitHub page now this is a really awesome library and the reason why is you pass in the URL it will render the correct appropriate icon based on the URL you pass in then it can go ahead and you can customize it however you want and yes I want to mention if you are new to flexbox as I mentioned previously check out flexbox froggy I did a whole video on it you guys can check it out and thank you Mars web 3 for saying Jay Sean 2.0 that I love that that's jokes all right 600 likes coming in clutch so at this point what I need you to do is go ahead head over to the npm I'm going to show you how to install that to be fair I'm going to show you anyway it's easy yeah so here you've got it I'm using yarn so I'm going to do that command J go into our second free terminal and I'm going to type in yarn add react social icons I'm installing the dependency now okay so there we go J and J Sean there you go all right so in this case we've got it working command J to hide it and I'm going to go ahead and import that as needed so I'm going to pull in the social icon from the one that we need there we go okay now in the beginning I'm just going to hard code these values because I don't necessarily know or I'm not pulling any data in from anywhere at the moment so in this case I'm going to use something like my YouTube channel to render the YouTube one and so forth so if we need to render this on the screen you can see we've got an example here of a social icon so now if I was to go ahead and pull over to my screen like so and I hit save you can see we've got a Twitter icon because we've loaded this the following okay now here what I'm going to show you how to do I'm going to make that a little smaller there we go let me know if that's too small or if that's that's okay right nearly at 600 likes wow let's go guys well I'm going to change this now to something like www.youtube.com suddenly saying that yes I have that all right and you see bam look at that lovely right and what's so cool about this is that it's even clickable so if I click into this you will actually see that go into the correct uh you see my YouTube channel pops up awesome stuff and we are live there we go okay so we're actually going to use this in a very clever way shortly okay so first thing I want to do is I want to customize it I want to make the foreground color which is a property of it I'm going to make that gray I'm going to make the background color so it's actually called BG color BG color I'm going to make this transparent transparent like so and as you can see we start getting the look okay um a lot of people saying what is that pretty terminal X extension I'm actually using all my zsh Sasa says this is the best way to spend Saturday I feel you did actually thank you for that right to get this set up initially I'm Mirage thank you for the donation he said can you teach ML and the SMS projects too I sure can with the help of my friend Leon so I will plug him definitely check out Leon clone's channel right but there you go there we go we've got four icons popping up now what I want to do is I want this div to style it out in the way that we need it so I need it looking like that right so on this div I'm going to go ahead and type in class name and this is going to be a flexbox container okay this is going to be a flex row container I'm gonna do this because I'm going to change up a bunch of things later items should be Central okay now what I want to do as well is I need to make these eventually smaller I don't know if I'm zoomed in here no we're good yeah okay so there we go so you see how that's on the top left right now okay the next thing I want to do is I'm going to have the contact me section and then we're going to go ahead and style it out and so forth right we'll even do motion at that point frame of motion okay so I'm going to pop in the div and now what I want to do is I'm going to have a social icon for email now I've already done this one for us and I've actually added an extension where we've got a cursor pointer so if I click save now you can see my cursor is a pointer which is nice and this is actually going to be an email icon okay so I'll just stupidly zoomed in for some reason okay ALS Journey says can I watch this live later on because I have to go yes you can do it it's going to be up on the channel afterwards do not worry right and the next is I'm gonna have a P tag and this one is going to say get in touch okay feel free to customize the text whatever you want is up to you now here I'm going to have class name and I want to have it uppercase and on a small screen I'm going to hide it now what I want you to understand is on tln CSS everything that I write all of this classes that I'm gonna write are mobile first which means that if I write a class such as hidden you see on a mobile that text is hidden as I get bigger and I hit certain break points then we can say that other utility classes can come into effect okay so at this point we're going to go ahead and see this right nearly 500 people are watching right now thank you wow guys I'm Gonna Keep the content going okay this is incredible right so at this point we've got that right so in this case it's going to be hidden on mobile right that's what I want I want to be hidden on mobile so I hit save it's gone right now how do I say after a certain breakpoint I want the CSS to kind of come into play um so what we can do thank you manage because best YouTube channel for JavaScript I've ever found thank you so much dude so on a medium screen we've got medium we've got small we've got extra large the way you say is on a medium screen upwards I want to go ahead and have an inline Flex basically I want it to show afterwards or in a flex fashion okay then I'm going to say text should be small I want to have the text be gray of 400 okay so a shade of 400 there we go now let's go ahead and see that and as you can see as it gets bigger it goes ahead and comes in after a medium break point so that's what classified as a medium screen there you go right oh look at this he goes love the info gold on the first time here welcome to the Papa found my dude right so in this case looking pretty decent so far right so I'm going to go ahead and also send to these icons so that way the text is centered with it so I'm gonna say Flex Flex should be in a row I'm going to Center the icons um so that way in case you add anything afterwards it's going to go ahead and console it there text 300 and I want it to be a cursor pointer over the overall thing okay so now you can see over the overall div I have a customer now the only problem here is they're stacked up because naturally two divs next to each other is an inline all right no two days lecture is a block element right they are block element by style uh their styling is blocked by default all right my my everywhere today now what I do want to do is I want it to stick to the top you see that it's got this nice kind of stick effect so what I'm going to show you how to do now is make it sticky so we say sticky and then we can go ahead and say top zero this means it will actually attach to the top okay I'm gonna go ahead and say flex and I'm going to say items start right and as you can see now we've all I'm sorry I've actually messed that one up I am stopped okay now you can see Flex puts everything in a row by default the way that we go ahead and say how do you position yourself between each other is we say justify and now I'm going to say put space between the two children if as I do it it's going to calculate the exact space between the two children now you can see that looks ugly right that's way too big whereas in here we've got some kind of Max width constraint so I'm going to show you how to implement a Max width so here all you need to do is Max width and we're going to use the default 7xl and you can see what it translates to by hovering over like so right so now if I go ahead and do it you can see it's got a Max width to constrain but it's not in the middle right which is kind of annoying so at this point what we can do is we can say MX Auto to automatically apply margins on the left and y-axis and that will go ahead and Center you out like so okay so really really nice stuff the next thing that we want to do is give this a z value of 20 because it's going to be layered above all the other things so Z value of 20 you can give it higher if you really want it's completely up to you now what I'm actually going to do is I'm going to make it so that the items are start on items are starting on the mobile but on a medium or extra large screen and above I want to Center the items so items should be centered like so so now what you see is as we get smaller let's go ahead and see how this works wait one second move this okay so there we go and Bam the only problem is we haven't got any padding right so padding is the final little piece there um so here I need to go ahead and say padding of five and the reason why I did this guys is because previously I had a different design but I'm going to leave in there so you guys can feel free to mess around with it if you want okay but there you go all right really nice look at that we've got that nice little padding padding is the key to making things look clean trust me when I say that padding is actually going to be that little icing on the cake that you're looking for in most cases trust me right so that's looking pretty good right now what I want to do is I want to animate that I want it to look way more funky than this so if I refresh my portfolio page you can see I get this nice little animation right how the hell do I do that how do I get animations in my in my app so the way with the animations is we're going to use framer motion right so frame of motion is an amazing production ready animation library for react okay Ibrahim thank you so much I'll continue to share tips if you're finding them useful we're going to click read the documentation like so and the first thing we're going to do is actually install this thing right so how the hell do you install it we go to introduction and we should have a intro for installing this somewhere where I'm trying to show you where the heck it is because I've already done it um okay never mind let's just go ahead and just jump into it I guess all right so in this case I'm just going to install it myself so I'm going to do yarn add framer motion so I'll show you right now let's pop this out the way so come on J free terminal yarn add framer motion okay there we go apparently says hey I landed my second internship a week ago thank you so much thank you dude that is incredible green says um no Mela says can you upload it afterwards yes it's going to be uploaded all my lives go straight up on YouTube afterwards by default Okay so it's a One-Shot take all right so in this case we've got that up um so we've got firm Motion in there now so I'm going to show you just how to use it so first thing you need to do is you need to install the motion object from framer motion now I'm not going to go into the documentation too much I'm just going to show you how it works okay so where we have a normal div when we're using framer motion the way we do it is we go ahead and say motion dot div right so motion dot div and you can see that my closing bracket also changed now in frame motion there's so many ways of animating things on your page but typically the way it would work is you have an initial value so where does The X positioning should be initially before the animation triggers or where should y be or what should the opacity be before I trigger an animation then you tend to have an anime and the anime is basically where do I want my animation to eventually reach so should I be going from an initial opacity of zero to an animated opacity of one so that way it animates nicely between the two x value and then another x value so it animates between the two so forth okay so that's how we're going to essentially do this so here I'm going to have an initial value so initial and this takes an object inside of it so notice the two curly brackets here I'm going to say it's actually going to start off with a minus value of 500. Beto says it's a magnificent video thank you so much brother I appreciate you right also the opacity is going to be zero the reason being is because I want the opacity to start off zero right and I'm also going to do scale and you're going to see the nice little effect that's going to happen here right so scale is going to be half initially right so this should be a comma then what do we want to animate to okay so in this case I'm going to say animate and I'm going to pass in an object and here I'm going to say x should basically go to it's basically default position so it should be X of zero right the opacity should become one and I want to make the scale become its regular size thank you so much for the donation Senpai amazing content I appreciate you brother and guys just like that 600 likes already what is happening thank you guys let's hit a thousand today come on let's say a thousand this is the energy we're after I cannot believe the retention I'm going to keep dropping videos every week if this is the case right let's hit save right now now what I want you to see is whoa did you see that look at this if I hit refresh bam super fast look at that right now it's kind of too fast if anything I need to kind of be a bit slower because it's kind of phasing me out right so in this case what we can do is we're going to say transition this is the next magic thing right transition and what I want you to do here is put an object right they like their objects and we're going to put duration okay now duration I'm going to go ahead and say it's going to be in seconds so here I'm going to say 1.5 seconds now let's see how that is refreshed oh that's clean guys what do you think I really like that I think that looks really good right so that is a me like immediately a win for me right so now you can see that's exactly how it's actually going to come in here bam beautiful all right so so slick so if you don't know about frame of motion destroy that like one because I'm changing your life here I promise you okay all right the second one we're gonna do is this one so again motion dot div so very simple to use and then we're going to do an initial State this initial state is going to be essentially the same but it's going to be the opposite direction so rather than going minus 500 I'm going to go 500 in the right direction which means forward okay so there you go and I agree with you it's way better than the um the kind of boring CSS animation that you do regular JavaScript that kind of regular HTML stuff oh my God I got my regular CSS stuff is better than that that's what I'm trying to say wow okay and then we're gonna animate to the following so I've lost myself here anime [Music] to this so object bam okay next thing you know I want to do this one's slightly different I want to do a duration of one so you can really feel free to play around with it as you wish whatever you want to do but the point is is that when I hit save and when I hit refresh wait for it bam that's lovely right that's really nice let's actually do 1.5 it's kind of jarring me a bit 1.5 it's a refresh and there you go boom look at that guys look at that like come on we're gonna take that same principle and eventually have this living and breathing Circle effect and all this cool stuff on our page right so amazing amazing stuff cool to see the likes of flying you guys are enjoying this right now I can tell okay so that is actually the um the header Done Right the head is actually done so at this point we're gonna go back into our index and we're gonna get rid of this comment because we are now done with the header or some stuff Daniel James with a five pound donation great work sunny I love your data lyric explanation about Redux it's brilliant I just landed a job at Deloitte digital and you were a big help dude firstly massive congrats Deloitte amazing company Daniel James everyone Clap That dude man thank you Jay screenshot that and thank you for the donation I appreciate you brother and I'm glad the popafam could help you achieve that goal that is amazing dude wow this is the energy of the papa found guys like it's honestly just we're all about helping each other here that's it right it's just free content to help you guys grow become a better developer that is it and make sure you actually have some water please for the life of me because you will you will burn out I promise you it happened to me if any all right so at this point we're gonna go to the next section so the next section is a hero Banner this is incredible stuff guys honestly you guys are I just can't believe their attention right now okay so what we're gonna now do is we're gonna have sections right so a section is an SEO friendly way of saying basically telling any SEO thing that that is a section of your page right so in this case I'm going to say section now here this section is going to have an ID he goes thanks guys bricking myself for the first dude it's normal it happens if you do want to go ahead and have mentorship in the community if you ever get stuck that kind of stuff feel free to come over to um zero to full stack hero we've got loads of people just like you who are working at big companies awesome stuff we help each other out there but yeah oh that's amazing dude right so at this point we've got the ID of here hero okay this is an allow us to actually scroll back to there at some point later and I'm going to teach you how to have this amazing scroll at like uh Behavior so you see how it's snap so I'm not like say if I scroll that and I let go it's going to snap to the most closest place so if I go far enough then and go so that way we've got this kind of nice Snappy Behavior inside of our web page okay so at this point I'm going to create a hero component okay so oops no not that okay hero there we go now the hero component let's go ahead and jump into that so I'm going to go ahead and create a hero.tsx like so close that down I'm going to do typescript RFC e there you go um and we've got the hero component like so now inside this hero component this is essentially going to represent this all right so we're gonna have the background circles the picture all of this good stuff is going to be coming from that right now okay so I'm going to show you how we're going to do this so let's firstly import this so we go here and we pop it in like so and now you can see we've got hero lovely it always will throw me off that well it's incredible right 20 likes away from 700 guys just keep smashing that like thank you so much all right at this point we got the hero going pretty well and I'm gonna go ahead and start building this out okay so let's get into a nice Focus mode this is my kind of vibe when I'm when I'm coding all right so we're actually going to be using a typewriter library to go ahead and have that awesome kind of you know typing effect now the one that we're going to use is something called react simple typewriter very easy very easy to install you just simply Chuck it in Google show you guys for yourself react simple typo very nice library and for those of you wondering why don't you build this stuff yourself because you don't have to that's honestly the straight up thing you don't have to build everything from scratch yes some libraries are heavier than others so when you go to production it's worth just checking okay uh amazing so another five dollar donation appreciate you I watch way too much Haiku thank you that's Sam's name because follow your month ago work side by side doing your project and learn so much thank you for the great content thank you dude so much for that donation I appreciate you bro right not as much as best you and what again thank you so much guys we're gonna install this like so come on Jay and we're gonna pop that in just like that right so everything's looking pretty good so far and we're five lakhs away from 700 God damn it guys guys I mean just watching it as soon as it hits I'm gonna lose my mind all right 700 likes go for it to go for it I can see it I can see it someone's punching it someone clicked that button right so at this point we're installing it and then I'm going to show you how to pop it into our app so I'm gonna install import two things and there's loads of ways to actually implement this exact Library there's a few different ways you can do it um oh wow it popped up 705 that's it oh man a thousand likes let's go God damn I know it's almost what someone's gonna say in the replay they're gonna be like what the hell is he going crazy for but I'm telling you it's not it's crazy like I can't believe there's that many people just got going nuts over this video all right let's go ahead and hit save and we're going to implement it like so okay so first thing I want to do is we actually need to use something called a used typewriter hook okay so in this case we've got something like this we've got text and I've got this from their documentation okay and this use typewriter use typewriter and what we do is we pass in an object and inside of here we've got something called words and the words you see it can be developer designer creator that kind of stuff in our case I've got a kind of cool geeky kind of vibe going on I've got something like this right I've got a guy who loves coffee.tsx and then I've got loves to code more and then the first one I'm going to say is something like hi my name is sunny hi my name is the names sunny all right the names Sunny Sango there we go all right am I eventually going to make that dynamic as well so it'll pull in right so you guys can feel free to do whatever you want to do there right the next thing I want to do is I'm going to pop in a loop okay so a loop and I'm going to say yeah it should Loop through I want to keep going through and through and through and I want it to stay on it for like a little bit so two thousand milliseconds is about enough time right so a delay oh sorry delay speed delay speed of 2 000 milliseconds okay that's why I like typescript it calls me out on what I'm wrong okay so we've got our div there this then what I'm going to do is I'm going to first go ahead and we're going to implement that in just a second as well right I'm not going to just Chuck that in just yet but I'll show you how that works effectively it's actually fairly straightforward and easy to go ahead and put in so if I had like a P tag here and I just pop in that text now you will literally see that text being rendered out oops let me go ahead and do that so you'll see this go ahead and gets thrown on the screen so if I go back to my code now you see that guy who loves coffee dot TSX and just like that it works right and even nicer than that you can next to it have a cursor and you can put a color on it and you see how the curse is next to it all right I'm going to show you right now actually I'm just going to might as well do this I'm going to change this to a span tag okay and then I'm actually going to have this whole thing surrounded inside of H1 because it's kind of important uh filled it could be a H1 H2 depends on you and you see how now it's next to it so it kind of looks like a typewriter typing right so we're spanning a field and we've got the cursor next to it okay so without further Ado let's jump in further we've got our let's go ahead and create the background circles okay but before we do any of this I actually want to get the background looking the right color because it's kind of jarring right now looking at the wrong color and I don't know what I'm staring at properly so I'm going to show you how I'm going to do that right so firstly I've got the background color saved in the RGB format and I'm going to show you how we can add that um so that way you guys can feel free to do it yourself in whatever color you wish I've got a nice kind of tonal gray so here inside of the home page I'm going to do class name I'm going to say BG RGB 36 36 36 right and as you can see now it's gone ahead and actually made it um the uh this nice gray but I'm gonna actually go ahead and also say that the text should be white so every bit of text is a master rule should be white and I'm also going to say that it should have a height of the screen oops sorry space out height of screen okay hit save and there you go that's a lot nicer already okay so really really cool stuff so far I think it's on one of my funny streams it's really really it's amazing so you can see right now we're slowly getting there we're slowly forming right so now we're going to build this amazing bit right here right and look at if you noticed it's it's breathing it's posting and there's like a little post here right it's really really cool uh Hey says I gotta go you've earned my subset I'll be re-watching this uploaded thank you so much dude for tuning in that's what the energy is about pop fam is here to stay all right so let's go into our code back to our hero and let's carry on with the hero so at this point um we're gonna go ahead and uh background circles right no somebody says Jay's only hit the screenshots off no Jay is actually killing it and he's doing a lot more than that okay um so we're gonna go ahead and Implement something called a background circles this is going to be a component right and I'm going to show you this because it's quite a little bit of working involved in this right so you can have background circles like this uh B I'm gonna go ahead and pop in the components dot TSX create the file rfce typescript rfca let's go ahead and do that touch screwdriver see you cool and then in background circles we're going to go ahead and make it look really nice now obviously this is going to be an animated thing so we're going to have frame of motion inside of here and then I'm going to go ahead and actually have five divs that represent each of the different circles each of these divs aren't going to exist I'm going to show you a little trick you can do a command D oh no actually you know what let's just do that again let's do uh five and while we've got the curses I'm gonna to go ahead and click option option option option click and I'm going to get rid of those and just type in div self closing devs I'm going to show you a little trick right now okay so firstly I want to go ahead and pull this in so background circles this import it so I can see something happening and here is freaking out because we haven't got anything there we go and I'm going to show you how you can actually have a div represent an object like a shape okay so it's kind of cool when you want to draw something on the screen you can go ahead and customize it out as you need to do so right 700 likes literally nearly 800 let's go guys honestly incredible incredible stuff okay so uh nice Einstein said I'm sharing the link to my classmates thank you dude that's what we're doing that's that's awesome man here we've got class name I'm going to start off with the first Circle okay so this is going to be a we're going to give a border and I want to give this one a gray border it's a very subtle grade but in fact before we do this gray I'm actually going to go ahead and say it's just like a red so you should be able to see it right so there we go we got our red border then I'm going to say it's a rounded four right so it's a circle border but right now you're like no it's not I can't see a circle border well that's because they haven't got a height and width around it right so I'm going to give it a set height and width of 200 pixels now notice the square brackets that's something called the just in time compiler by putting a square bracket in you're telling tail when I only use a custom value and at runtime it builds that utility class and gives it to us so there you go we've got a nice little circle right then I'm going to go ahead and say margin top at the at the top should be 52 and I want to animate this one so animate and it should be a ping so now we've got this beautiful animating Circle all right really really nice and um what I'm now going to do is that now that you can see the color I'm going to change it back to the color I wanted and I'm going to show you how we're going to eventually get the desired effect so bam we've got this nice little Grace uh little thing going on and this is Ping yep that's fine and what I'm going to do is the surrounding div I'm going to give this a class name and this is going to be a relative uh container now the reason why this is relative guys is because I'm going to do a bit of sorcery right a bit of Wizardry to go ahead and get them centered right so you can do it however you want this is the way I'm going to do it so justify Center so now we've centered the element I'm also going to do item Center to go ahead and centralize that as well now here what I'm going to do is make this actually be absolutely positioned so absolute positioning and that way it goes to the top right and eventually we're going to push it down a sort of but it's only absolutely positioned relative to the parent hence why we have the relative right so at this point you could have left it you could do whatever you want really right but I'm going to show you my way of doing it right so I'm going to go ahead and do the same thing for two more circles but notice how the height and width change on these two circles all right so I'm going to go ahead and get rid of those and now you can see I've got two more circles exact same code except the height and width changed and they both have got margin 52 at the top okay so looking kind of nice and then I'm going to go ahead and do the same thing but except this time I'm going to slightly change it all right I'm going to have all of the same properties so I'm going to have the Border um up to this point the same properties I'm going to change the color and I'm going to do opacity of 20 as well okay so border is going to be a nice kind of you know the papa Farm um kind of uh you know Arc the color we like right the kind of uh the pub Farm color and then I'm going to give it a height of 650 width of 650 absolutely positioned margin top and I'm going to make this one pulse all right so it's going to be sitting there pulsing okay now you can see it's pulsing all right so it looks pretty good and then the final one is going to be as follows now I do want to show you if you did get rid of absolute you see what happens if you get rid of absolute they're going to be kind of like stacked next to each other squashed up whereas if I absolutely position them they're kind of layered up right so at this point the final one is going to be the same as the previous normal circles except they're going to be 800 pixels okay 800 pixels now okay looking pretty good all right so if we refresh this it looks good it's definitely not at this level yet where we've got this amazing grow effect going on but I will show you how we do that okay so at this point what I now need you to do is go back to Hero okay so head over back to hero and I want you to go ahead and change the div the surrounding divs properties so this one is going to be a height of screen this this hero okay I have screen it's going to be a flex Flex column so everything's going to be stacked up in column fashion we're going to do space between the Y components of eight the items should be in the center okay hit save and I'm going to say justify Center as well and as you can see I pushed it down all right then I'm going to go ahead and say um we're gonna say the text should be Central text should be Central and the Overflow should be hidden like so okay and as you can see we've got slightly different looking um situation right now um that's because I haven't actually done something correctly so let me go back to my index um oh yeah so I need to figure out some more index things over here so index there we go now back at index I need to do a few little changes to over on this side right so first thing I want to do is I'm going to make the snappable so as we scroll through it's going to be snappable containers right so what I want to do here is I think it might look zoomed in no we're not okay there we go okay so first thing I want to do is I want to go here and I'm going to type in the funnel I'm going to say snap on the y-axis okay and I want the snap to be mandatory okay I think you missed a dash on the first div border color um let me just double check that first div border color yes my friend you are correct thank you water color there you go good stuff all right and then let's go back here and uh snap and it's going to be mandatory so you can make it proximity which means that as you get near to that it's going to pull it in I'm going to make a magnitude all right the Overflow I'm going to say a scroll okay so that way it's going to be scrollable okay so you see how it's scrollable right now right and then we're gonna have um I'm going to customize the scroll bar later and this is going to have a z of zero and that's because we're going to have some text layered up on top of it afterwards okay now the first thing I also want to do is I think I need to change my no my head is already stuck that's fine yep that's fine let's go to our hero sorry when I code so many different things it kind of gets overlapping and I have to kind of re-remember what happened right um okay that's it yeah so let's go back into our hero right now yeah that's I know why it's happening okay so here next step is we need to go ahead and send to this one so class name here we're going to say snap Center all right now notice how it snaps to the center now so you see when I try and scroll it's snapping to the center so if I refresh it's going to snap to the center okay so that looks pretty good I say snapping to the center so notice how no matter where I am it's got this like elastic effect all right so even there it's not it's not at the top it snaps down to the center Okay so oh nearly 800 likes let's go guys I love the I love the focus this is so cool um feels like a radar yeah I know it feels like a radar right it's really nice but let's add in the um the really cool bit which is the animations so let's go into our motion so this div right here I want to make it a motion div okay but by the way the key there to making this map work is you set the parent as snap y snap mandatory and you set everything at height screen that's because I want it to literally be snapping at a height sort of setting right so everything's at a height value here I'm snapping depending on how big these are right and then your child will be snapping so you can say snap Center or snap sort of front and that kind of stuff all right so that's how we've done that so on this point the hero let's go ahead and uh and get this animation going pretty well so this entire background circles is going to background circles and I'm going to change this to a motion div right here so motion dot div like so okay now on this bit I'm going to go ahead and type the initial is going to be a value of opacity zero so I want it to be like kind of like unseeable in the beginning right so you can't see that in the beginning so there we go we've got initial value of zero so it's gone right so what should we animate too well in fact I'm not going to use the anime I'm going to use a no I'm going to use anime sorry I'm doing that later so anime I'm actually gonna go and say this so this is what's pretty cool right if you can either have one value so animate from zero to one or you can pass in an array and what it does is it will go ahead and based on the transition time so if I said 2.5 seconds I can pass in an array of five things and it's going to give every single one a fifth of the time to basically keyframe through the animation so I'll show you what I mean right so if I put scale here and I gave it a like one I want to do one two two three one right so now it's going to basically divide up the time of the animation so if in this case if I said transition and I passed in here a duration of 2.5 seconds 2.5 seconds every single One's Gonna Get Like A 0.5 of a second of an animation so if I hit save now we can't see it yet so I need to do the opacity let's go ahead and do the opacity and I've already worked out something like so funky here right it kind of like flickers in right so let 0.1.248 0.1 so it kind of flickers out so Watch What Happens right see how it kind of like it kind of posts its way in because it went 0.1 no point two so forth and then it kind of came back to life um what did I do here I kind of messed something up I expected a string you got undefined likely okay so I've actually missed uh something over here um there we go this is strange oh okay there we go yeah so there we go there we go we've got the scale effect you see how it's scaling in and then it's doing the opacity and the final one I want to do is change the Border radius right so border radius I'm going to give it a different value as well now check this out guys boom boom comes in clutch now if I go ahead and refresh like just look how clean that is guys like that is amazing right it looks so so slick beautiful right really really clean animation oh there we go we got 100 right I'm gonna keep that there for a minute right so at that point looks really really nice Okay so we've got our background circles in check very much so I'm gonna go ahead now and go back to my hero and let's finish off the rest of the build okay so underneath the um background circles I'm gonna have an image now for this image right now I'm just gonna do a hard value now yes yes yes before you say anything if you're using nextges you should be using the image component to go ahead and render your images for the sake of time I'm using regular image components but what you should do is check out my video it's going to be here floating around afterwards in the next year's tutorial for what you should be using for images and I want you to replace it and whitelist your URLs that way it optimizes the load in but you should be doing that okay you should should be doing that all right oh God damn it we're 800 likes Gee let's go update me dude that's crazy 800 likes smashing it wow Okay so we've got the uh eight image right here so I'm gonna go ahead and pull this image over here so I'm going to copy this image and we're just going to use this one for now and yes you should be doing something of your own okay so there you go looks massive right now okay so at this point I'm gonna go ahead and do class name and I'm going to say that this should be a relative it should be rounded it should be four height of 32 width of 32 MX Auto hit save and you can see it and the final thing is rounded for oh grounded fill rounded four okay and then I'm going to say object should cover the picture then that way in case it's a bit bigger and bigger and so forth right um so let's see what's going on and then we got this so image looking good and then underneath the image we're going to have a div okay and this div is going to have all of the text like so inside of it so this is looking really really clean right now guys just just take a second to appreciate that like that is beautiful right for a UI that is actually amazing like it's like living and breathing like if I refresh look at that wow when someone comes to your website it's just like oh wow this is this is a kind of cool welcome right like really really nice sort of way to enter someone in and it shows that you can do it because it's done internal and CSS you can actually say that yeah this was done with Helen CSS right um Okay so we've got our H1 all right and then under on top of that I'm gonna have a slightly smaller and I know it's out of context but it should be like the the row here so I'm gonna say software engineer right and that's h2h1 based because it's it's less of an importance than my name right um so here I'm going to go ahead and say um tracking so I'm actually gonna do it afterwards let's say text should be small it should be uppercase okay and there you go that doesn't look that good right so first things first I'm going to show you how we can transform this in a crazy way so change the color make it blend in a little bit Pat it out from the bottom a tiny bit okay then what I'm going to do is I'm going to change the tracking now the tracking is is basically the spacing between characters now as you can see that's the max tracking but if I want to do custom I can put like I just I said before it's just in time compilation so I can put square brackets in I could say 15 pixels between each letter and just like that that looks so clean and that looks like something like some Avatar thing right that looks so good right so that looks really really clean right so we've got some software Engineers stuff happening there then we're gonna go ahead and have the next bit so for the text I'm gonna go ahead and say class name and it's not the span sorry the span is actually well for the spanner I'm going to do something I'm gonna say margin right should be three so it's not right next to that the H1 I'm going to go ahead and say the text should be 5xl and I'm going to go and say on a large screen it should be six Exiles remember we can change those values right based on the screen so mobile view 5xl large screen 6xl the font should be semi-bold and I want the padding on the x-axis to be 10. all right guys nearly at 900 likes let's go that's crazy right so as you can see we're behind our little background right so I'm going to show you how we can fix that afterwards do not worry um but we will get that working as well okay so once we have that scroll pixel what the hell um scroll scroll scroll that's not correct uh when did I write that semi bone font semi board there we go interesting all right so on H1 after that I'm gonna have a div now in here I'm gonna have about XP variant skills and project alright so these are going to be five different buttons or four different buttons you want to say button Times by four and hit save the first one is going to be about the second one is going to be experience the next one is going to be skills and the next one is going to be projects okay so there you go about skills projects and so forth now instead of repeating class names here right what we can do is we can go ahead and give this something like hero button class if I go into my globals right CSS this is where you can create your own custom utility classes right so what I'm going to do here guys is I'm actually going to go ahead and type in at layer components so basically what I'm doing is I'm injecting my own custom CSS utility class into the components layer that we import with tail and CSS and then I'm going to go ahead and say the hero button class and all you need to do to make sure that you can actually write your tail and TSS here is Type in at apply keyword okay so now I'm going to say panning X of 6 between our different buttons padding y of two and notice how every single one is getting that right now okay there was a border the border of these buttons I wanted to be like a kind of nice dark gray tone right so let's go ahead and do that right now so very dark gray tone rounded full I want these to be four buttons like so I'm gonna make it uppercase the text should be small so text small hit save and there you go we're slowly getting it right I want the tracking to be the widest because that's enough for us at this point so why this tracking okay I'm gonna make the text a gray of 500 right let's go 500 amazing stuff retention is incredible right now guys thank you for tuning in and sticking with me right then I'm gonna say this should be a transition and reason being for this one is because as I hover over it I want the border to change color and I want the text color to change color so what I'm going to do here is I'm going to pop in the following values okay so these are going to be two rules and I'll explain what they do right now so the first one is saying hover I'm just going to pull this online so saying hover the border is a custom color and they're divided by four image means that 40 opacity of that color and I want to do the same with the text right so now if you can see if I hover over this guys um let me hit save Let me refresh sorry um okay let me see hover attacks hover over border hover attacks whatever I messed up oh sorry there you go let's say Okay the reason why I can't hover this by the way is simply because I haven't got the um the text should be extra small by the way yeah I was thinking that's too big right it's because of the layering the layering's wrong right now this circle is in front of us all right so I'm going to change that and fix that but overall you can see how we've created our own um helpful little thing here right so at this point I want to change the div class name to padding top or five one is separated from the top a little bit and I'm gonna make these all clickable link components from an xjs so these are special link components and it helps us to pre-render the next destination in this case it doesn't really matter because the next destination is actually going to be on the same page but that's fine we can go ahead and continue on so I'm going to go ahead and do the same thing for all of these right now and I'm going to do one more down here for this one and all of these are complaining because they require a href now I want to go ahead and hyperlink down to a different point in the page so this one I'm going to click it and it should go down to the about section based on the ID he that we give here so ID hero should be going to hero and so forth so in this case it should be href equals and this one is going to be um a experience so it should be hashtag experience and so forth right we're going to do the same thing with these two as well I'm going to pop that in right here this one is going to be skills this one is going to be projects and that's going to allow us to have clickable buttons that take us to different areas of the web page now let's fix this layering issue because that is kind of an annoying thing that's going to stop us from testing our website right our users are going to be clicking around they're like oh he doesn't even know what he's doing with the Z Index right so let's go ahead and fix that okay so heading back over to Hero I'm going to show you where we begin the journey so right now on our hero um on our index screen we should have a z index of zero at the top right so this is basically saying that's the base layout that's what I'm going to say zero sits out the next thing I want to do is go into my about section okay so into my about sorry into my um my sorry what have I done here I'm going into my uh hero section sorry hero section yeah and then on the hero section I'm gonna go ahead and do the following so we need to make uh let's go here okay that's all good all right a screen in background circles and where have I done my Z index again I've completely lost where my Z index is set index a 20 there we go right so here where we have the software engineer all that good stuff we're going to say a Zen index of 20 exists here but you see how it's not working yet right or is it working yeah it is working yeah that's it nice right so my bad like my size a little bit dodgy right now I've been looking at this computer too long right so you see the reason why this worked is because this in index is greater than this one and I've done 20 because I want to have some leeway right if you did want to have something between there you could do Z10 right so that kind of thing so now we can test it if I click it you see four slash about experience skills and projects bam just like that nearly at 900 likes let's go guys amazing amazing stuff that is the about section pretty much done guys so that's the top section looking incredible okay so that is actually looking amazing right now and it's fully working responsive that kind of stuff look at that bam amazing okay the next step is let's create the uh about section over here okay um and then we're going to go ahead and continue we'll just continue on taking our natural pace so index so TSX let's go ahead and create our section right here so section inside of this section we're going to have an about page right now this about page remember all of this data will eventually be coming from sanity's uh content platform so we're going to eventually be able to customize all this information on sanity publish it and then we should see this on our front end right so it's actually going to be incredible once we get this working okay so let's go ahead and do this right now I'm going to go into our components and I'm going to create an about dot TSX uh file we're going to do typescript rfce bam there we go we've got an about section like so now what I like to do is hit save go over here and do the import and let's just prep ourselves so ID here is going to be about that way when we click the about it will take us to the appropriate point we also want it to be a snap Anchor Point so that way it kind of snaps to it when we kind of scroll down here I want to snap it to the center now the hero I said Center notice I actually want to make this a star okay so you see how I brought a tiny bit up because I wanted to kind of snap towards more to the top than the Bottom now the next one I want to do snap towards the center of its image right so so now we're inside of our about page inside of this page notice what I'm about to do right every single div parent a child component is actually going to go ahead and have from that kind of snapping Behavior a height of screen okay now you can see look how it snaps between the two screens so I'm literally like scrolling down and you see how it snaps as I let go of the scroll but if I scroll hard enough it snaps to that next and look how it perfectly aligns at the top all right so really really nice behavior here all right now what we are going to do is we're going to say flex and I'm going to make it relative because I'm going to have an absolutely positioned element inside of it right this is going to be a flex column container so we're going to have some Flex column stuff inside of it and then I'm going to go ahead and just prepare myself for later on So eventually the text I want it to be central inside this container on the medium screens and above I want it to be left aligned now if you're wondering what the heck is he building right now we are building this about screen okay so we're building this about screen right now okay so once we've got that MD left we're going to go ahead and do um on medium screens and once it's going to turn to a flex row okay so notice how on a phone it's a column and then on a bigger screen it's a row and the color responsive that is guys that's beautiful right so everything's fully responsive here all right smashed a thumbs up button if you're excited to see how we do that we're about to hit 900 likes let's go incredible energy right now this is amazing guys Flex Pro I'm gonna go into the max width should be seven XL should be good enough for us pounding excellent attacks is uh there we go let me show you guys here all right so you see how it's centering already is starting to do its thing and then I'm going to go ahead and say we've already got a higher screen I'm going to say justify evenly the contents on the page so there you go justifying the we've only got one child so let's put in the middle MX water and items should be Central there we go okay now let's start doing stuff with the the children components H3 I'm going to say about now this one these components I'm actually going to go ahead and make these absolutely positioned to the top every time so you see this right here about and so forth they're actually going to be absolutely positioned to the top and so forth right it'll happen there right so it's going to be absolutely positioned to the top right so we've got the H3 here I'm going to go ahead and say that this one should be so this about should be become absolutely positioned so absolutely and I'm gonna go ahead and say absolute top of 24 and we're going to follow this pattern quite quite a lot throughout the build right uppercase the tracking in this case I want it to be 20 pixels because I want to get that nice kind of you know spaced out effect look at that I mean the tracking makes such a clean modern effect to your to your design right let's do text Gray of 500 and let's do text of 2XL right bam all right look at that oh look at that and I scroll down it just snaps into place like look at that incredible right we're already building this like amazing UI right now right the next thing I want you to do is we're going to have an image component right that's going to be the picture of the user so I'm actually going to go ahead copy this image URL for now and then we're going to eventually pull it from our CMS back in I'm going to paste it here just for a second so I have it and then I'm going to go ahead and pull in my framer motion at the top okay now here what I want to do is I'm going to go ahead and have a motion dot image component okay so emotion oops there's gonna be a self-con composed component let's get rid of that that's fine this will be it um sorry guys motion dot image component okay and this is the same thing it's basically an image component but it does what we did previously before right so the source here is going to be um what I had here so let's cut that we can get rid of that now bam put it there and I have my picture okay but I can do all those cool things like anime for example so the initial animation here I want it to be a case of it's going to be oops what am I doing guys come on um we're gonna do a duration I'm sorry an initial value of x minus 200 because I want to come in from the left okay then I'm going to animate it and I want it to basically come back into normality at zero but instead actually what I want to do here is rather than just animate when you kind of load the web page I want it to be when I'm in the view so while in view okay this is a cool way of doing it so you can even do animate or you can do while in view I'm going to say x is zero so now watch this guys right so only when I come into view should it do it look at this scroll down so wait for it scroll down bam you see how it just only when I came into view it did that if I go back up and I Go Back Down Bam and you see how it keeps doing it right so you can actually keep on doing that if you don't want it to keep on repeating all you need to do is simply say that you want the viewport to be once true that's it right you just have to say that now you'll see if I go back down it doesn't do it again so sometimes if you know as an Apple website they kind of have it you know it pops in nicely and then it doesn't keep doing it again make you last as you live yes I am lived in um there you go right so really nice stuff now there's too fast for my likings I'm going to make the transition a lot smaller um somebody says this give me thousands of ideas that's what I'm talking about dude that's why I want to do what we're doing I love to inspire your creative thoughts right duration 1.2 that looks good all right let's go ahead and refresh and see how it's going all right let's look at that firstly beautiful animation scroll down icing on the cake guys icing on the cake right here we can actually say an opacity of zero so let's even do this right let's say opacity of zero and let's do um a while in view I want to go to a opacity of a one as well opacity of one as well right so let's do that one get rid of that hit save refresh and let's go down and look at that oh smooth as hell right and then here I'm going to go and say class name is going to be a um I'm actually going to pull this upwards right because eventually I'm going to have it on a mobile view kind of pulled up on the screen so on a mobile view I'm going to make it a little bit uh sort of higher so mobile view 20 it's going to kind of go a little bit down to right so the opposite way uh on a medium screen I'm gonna have a margin bottom of zero so I'm gonna get rid of that as we get bigger Flex shrink zero I do not want them to make my image smaller as if we run out of space It should always stay at the size it's set up which is a with the 56 and a height of 56 I'm going to say that it's rounded four and I want it to basically be object cover which means that it doesn't distort the way you see it now right so that's how we get that then as it gets bigger I want to change things I want to say on the line medium screens I want to be rounded uh large so medium above is going to get around the large medium above is going to become width of 64. medium above is going to get a height of oops right of um 96 and then on the extra large screens I'm doing a custom value that I've decided with pixel values okay now let's see this in action as it gets bigger medium screen changed and then it got even bigger and Bam it changed to the extra large screen that I set the size all right so really really nice stuff with that said quick water break guys oh my God we punched out 900 likes wow oh my God all right let's keep going I'm so happy you guys are enjoying this right now don't forget smash the Subscribe button if you haven't already subscribed there's loads of people that are watching aren't subscribe so make sure you subscribe supports Channel lets me know to keep on doing this stuff and keep giving you guys value right that's how I know okay so we've got the about looking pretty good right now and what we want to do is we're going to go ahead and uh services on you're looking handsome thank you I appreciate you all right so uh that makes me die well it's got an image here we're gonna have a div with a H4 inside of it and here I'm gonna say something like uh here is a little background right so that's what I want to set and it says you can be a hardcore valve you can change it you can add it yourself after it's fine what I'm going to do here is a and I'm going to span something in now let me show you what we do right here's a little background okay like that here's a little background okay now what I'm actually going to do is firstly let's kind of style this up a bit so we get some look and feel so text for Excel fun semi Bode okay send me about done okay and for this div I'm gonna go ahead and just start space now as well so I'm going to say space between all the components inside of it F10 padding X on the x-axis of zero and on a medium screen and above I want to give it a bit more padding so it can breathe okay there we go so there you go you see that we get a little bit of padding and so forth okay then I want to go ahead and do something nice right so notice how on my build I've got here is a little background right so here's a little background so here I'm going to go ahead and say something like I'm gonna have a span tag a span tag oops span tag like so and I'm gonna go ahead and cut this out I'm gonna pop it in like that right and as you can see here what I can do is I can go ahead and play in a class name and I can put a little bit of starting just around that little bit Aaron hero man says I really only rediscovered your channel we're learning right now if I love your content it's really good I immediately subscribe and even on Saturday I'm watching you now nice that's what I'm talking about dude all right here we have underline and what I can do here that can style up the underlining all right what the hell okay here's the background right I'm gonna have online and I can do something called decoration and I can actually give it a custom color so I'm going to give it a proper foam color and then I'm going to give it a 50 opacity so there you go here is a little background see how nice little touches little touches right nice here I'm gonna have a P tag and this is going to be um basically having some background information about me so in this case I've got a bunch of text here so I'm just going to Chuck this in so we have some reference material you can put Laura mipsum wherever you want there all right so there you go I'm gonna put class name and it's going to be text large just like that well actually in this case it doesn't really have to be it's good because it's completely fine to be like that oh I'm going to make this actually a little bit smaller in fact I'm gonna make this text should be small okay I mean it's fine for now it's completely cool for now okay so with that said now I'm actually going to go ahead and carry on starting this out so um okay camera yeah so we've got this little background here I don't know why I switched camera I was thinking about that so we've got this I'm actually going to make this a little bit base let's do base yeah there we go that's nice so all right so nice looking pretty good so far right here's a little background I'm suddenly blah blah cool all right and uh the next thing I want to do now is have it so that way we have the um animation triggering for the little background bit okay so where it says about and so forth right so this mode this div outside is going to be a motion Dev all right so this one right here is gonna say initial and we're gonna have a while in View and then we're gonna have a transition time so I'm just going to pop those in right now to save a little bit of time there you go okay and there you go guys look at that just like that as we come down it pops into view and it does what it needs to do okay so that is actually perfect that's what we wanted so if we hit refresh test your design out you can see hey name Sunny blah blah scroll down just like that clean right awesome awesome stuff Japan says when I'm trying to work I watch your videos that's awesome man thank you for tuning in okay so about section done we're about to crank out the next section with the experience experience is the awesome bit here we've got these kind of awesome jobs that are going to be popping in and out then we're gonna do skills then we're going to do projects then we're going to do contact and we're going to hook it all up to Sonic ecms so I'm going to go ahead and actually punch in a higher speed right now so we can go ahead and get some stuff done all right so stick with me we've gone through some of the basic explanations we can kind of move a little bit faster now so I'm going to cut this out cut this out we've got our two sections ready and then we're going to do experience so a section and then we're going to have an experience or in fact I'm going to call this one the work experience something like that right so we're going to have a work experience like so okay I'm gonna go ahead and create this component so work experience and again you can name them whatever you actually want you might not like it I know someone says please make that text justify uh feel free to do it dude I know I feel you but I'm not gonna jump around while I'm live um I'm the same as you I feel that typescript RFC there you go okay uh I just put this one done as a function here but the default Expo is fine right you can change it up if you want sorry happy birthday it's his birthday wait right so let's go ahead go into index let's import this pop it in like so and he's watching me on his birthday that's awesome dude thank you okay so now I'm gonna do is for work experience we are going to have CS there it's there just no snapping right that's because again we need to do a class name snap Center okay snap Center all right I'm also going to give this an idea of experience that way when you click it you can do that so I just want to test that as well so if I click on um experience you see how it takes me to experience you just can't see it right about the perfect but the experience is just there we now need to make experience remember that trick we're going to make this a height of the screen that's not of screen and now you have your your different screens that are snappable there we go really really nice um let's carry on so we've got the work experience someone says how's your bank holiday I'm actually in Dubai right now but thank you for asking that my day is going well um Okay so we've got a H3 so I'm gonna get rid of this and say H3 and here I'm going to have experience so we're going to firstly do that top little line right so the same thing we did last time it's exactly the same styling so I'm going to go ahead and pop in the same styling that I had last time um and this is going to be the same for each different time so hence I'm going to save a bit of time pop in The Styling mixer okay now the surrounding div I'm going to say it's going to be a flex container it's going to be relative because that's going to be absolutely positioned according to according to that we're going to say that the Overflow here is going to be hidden and that's because eventually I'm going to have this kind of a scrolling mechanism in play so overflow should be hidden Flex should be a column fashion the text should be aligned left by default okay and then on medium screens and above we're going to turn to a flex row I'm going to change the max width to be full screen I'm going to change the padding X on the to be 10. uh higher screen we've done I'm going to say justify everything evenly and I'm going to center it with MX or if I don't do mxor it's going to be left it's going to be front to the left which isn't nice and item Center should position my stuff in the center there we go okay so really really looking nice so far um use grow smooth so I want this display section particularly yes you can use a Scrolls move right feel free to implement it on your side um but I'm just going to carry on with this pace right but yes it's good a good idea right so here we're going to have another div and inside of here guys we're going to have experience cards so lots of experience cards and that's gonna basically render out accordingly as you see here these can be experience cards like so okay so we're going to create that in just a second but before we do that let's go ahead and just set up our motion uh so that way we've got everything kind of ready and working the way we needed it all right cortex says I just found your channel thank you so much dude he's always enjoying the content Ibraham says yes guys we're nearly a thousand likes let's get to a thousand likes I'm gonna pump the energy up again let's get Havana going and let's get the energy going guys right so motion let's go ahead and do this so motion dot div let's change this to that and then we're gonna go ahead and say initial while in View and then we've got transition time so same as last time right so this will tend to be the same on each screen because I like the consistency so now we've got the opacity we've got while in View and so forth right let's go okay so at this point I'm going to go ahead and create something called an experience card which is going to resemble this all right so we're gonna have these different things for you popping in notice what I've done here I've done this nice hover effect it's like a cinematic Focus feel right so it's looking really clean right now why the legs are flying right now all right so this one I'm going to create a uh file a file called experience card experience called yes I know the naming is not great typescript rfce there we go well it doesn't matter you could use either or it's fine right I'm going to annoy some people with that um so we've got that going well pretty good okay and then this is going to be the experience guide so let's go ahead and firstly pop that in so we can actually see something on the screen so we can see experience card and eventually we're going to be mapping through and pulling these in right so I'm going to have a few like so being pulled in all right so four for now you can see experience card we're going to turn those into that all right so I'm going to show you exactly how to do that okay so at this point um we're gonna go ahead and say experience so guys I can't answer complicated questions like um your thoughts on react neighbor's flutter and that kind of stuff when I'm live right there's Focus time right now we'll answer those things in a separate video H3 we're gonna do experience my thought is in short is great native because you can do it web apps and mobile apps it's better trade-off in time right for this one I'm going to say it's going to be the same thing remember absolutely positioned these are going to be the same for every single screen essentially right so I'm going to go ahead and Pop That in that's where we have that experience no sorry what am I doing oh my god I've completely lost track this is why I don't talk about other stuff okay so we have this now for this I'm going to change these to articles right because imagine like each different experience clock being sent in the SEO article right okay Jamie Davis is around neighbor because dies oh yeah I agree dude all right so we're gonna have a image at the top here so for each of these cards we're gonna have an image so I'm gonna go and just steal one of these images for now and obviously I didn't I haven't worked at Amazon a few of these places this is just demos okay I have not worked with these companies uh at the moment I have friends over there right and I have an interview at some of them um and I got an offer from one okay I'm not gonna say which one for now but anyway I work here I work for myself okay so we're gonna copy this right now and we're gonna do someone says I'm literally watching you and burning website I have no idea but website rapper I learned from you you'll see me if you get fired thank you dude that's incredible uh dude girl I'm not sure but thank you all right so here we're gonna have an image it's actually gonna be a motion image it's a motion image so let's just do Image First The Source we're gonna pop in now temporarily like so and then I'm gonna go ahead and style it out accordingly so here I'm actually gonna have a height and weight of 32. I'm actually going to pop in some of the styling by default so this is just going to save a bunch of time but you can pause it and understand based on what I've said before so we've got rounded four uh as we get big guys it's going to change that actually it stays the same uh as we go into extra large width will change height will change and object cover object center now you can have object start as well if you want object star object and that kind of stuff is object start object Center top there you go so if you did object top you could do that as well but I'm just going to keep it Center it's a bit the majority of things okay so really really nice um cool I'm going to make that a motion image so we're going to import our frame of motion like so import frame of motion and here I'll say motion dot image like so okay and this is going to animate in so we're going to have an initial a transition a while in View and I only want it to happen once so that's why we have this so y from y minus 100 so it starts from the top comes back down 1.2 seconds goes from opacity of zero to one and then a Viewpoint so once this happened once I don't want to happen again right so that's kind of a cool way of doing this and then I'm gonna go ahead and do the following the reason being guys is because when this render's in yeah I kind of want it that way once it's already rendered in with that nice animation I don't want to keep on doing it when it should be a little bit more optimal okay so that's nice okay now what I'm gonna do is I'm gonna have a div underneath that okay so div underneath that and inside of this dip I'm gonna have the details so in this case the job tie all that kind of stuff so I'm gonna have H4 and this is going to be the job title so imagine CEO of the popper farm right that's me right now right so P tag I'm gonna have the companies in this case the papa Farm okay and then um we're gonna have a div and inside of this div we're gonna have all of the different technology Stacks that we're gonna have right so Tech used basically going to be a few of them right and then after that we're gonna have a P tag and inside of there we're gonna basically gonna have the dates right so we're gonna say uh started work dot dot dash ended dot dot dot right so I'm just gonna put in templates right now and then we're gonna go ahead and fill those out as we need to and the final part here is we're going to have a list so it's going to be a unordered list so we're going to say here it's an unordered list and I'm just going to pop in for example five as an example here and just put in here saying test some or summary points summary points okay so we're just kind of drafting out our sort of structure here so we're going to eventually look like that I mean we do not look like that right now and you can see how the Overflow is not working but we'll fix it okay don't freak out so the first thing I want to do is those lists don't have bullet points so I'm going to say it's a list with disks right the space between them is y of four I'm gonna have a margin after five so they're kind of indented and the text should be large if we do hit save there you go looks kind of clean already right so um yeah so many people saying you know you should be using a um the next image tags yes I've already done that in plenty of videos and plus there is also a dedicated video and I've said that in the beginning if you get stuck or if you're wondering why is he using image tags check out that video converting yourself I'm not going to do everything for you but yeah you should be using them all right um but yeah I have not ignored the fact that I need to use those okay so uh we've got that looking pretty good now for this div all right I'm gonna go ahead and firstly say that this should have a planning oh God for this step I'm going to say a planning X of zero and on the medium screen it's a padding X of 10. the reason being is on the medium screens I don't want it to um be so squished together right there you go it looks a bit better right so the next thing I want to do is uh system out which of these individual texts so text for Excel and you're probably wondering oh my God this looks horrible dude fix the overall parent container I will I'll do it I like to trigger people all right so the papa fam this one let's just get this out of the way then we can come move to the fun bit fun Bode text 2XL and margin top of one one okay there we go uh this one I'm gonna say eventually once we've got in there we're gonna say Flex space between all these uh techy things of two margin y of two um for now what we could do I guess is just take one of them and I can just kind of showcase it for you so let's actually just copy that right now and I'll show you eventually what we'll be mapping through right so it'll be an image tag it will be this uh that kind of an image and they'll have a class name so let's go ahead and do a class name and it'll be a height and width of 10 so height and width of 10 rounded will be four okay we're under the four there you go and eventually I basically have a bunch of these so save save save there you go get rid of those and there you go all right so CEO Bob fan JavaScript JavaScript JavaScript right um looking good looking good and uh so that's kind of fresh um underneath that we've got the started work app so I'm gonna go ahead and make that one an uppercase so uppercase uh padding on the y axis of five because we need a bit more breathing room and I'm going to say to text should be gray of 300 okay on all the list we've already done and the list elements are fine the way they are okay now let's fix this because that looks horrible I need that to now look like that right so this is where the true magic is going to come in from the article styling right so first things first flex right guys we're four likes away from 9.96 okay when this beat drops if we hit over a thousand I'll lose my mind smash the Thumbs Up Button are we gonna get a 9.97 9.97 oh come on 999 99 oh it actually did it that is so sick all right if you're watching the replay they actually hit a thousand likes the second they draw that is crazy stuff thank you guys all right they're gonna carry a strong wow I just saw the number go wow straight up that was so sick oh man and this is an upcoming this is in one of my Vlogs when I'm showcasing the car oh it's sick oh wow Flex column there's carry on strong oh my God you can see the smile on my face is stuck right rounded large that's so cool that was pretty cool someone said I unlike the light again all right so in this case items should be oops Center items should be in the center there we go so okay experience called item Center and then we're gonna do space oops around it large space between all of our children space y of seven Flex shrink of zero so Flex shrink of zero and you see that's why it's not sort of shrinking it down that kind of stuff um okay now let's kind of get to the interesting bit how we're going to figure this out so a width and I I'm gonna apply some width and large width and height constraints so in this case our width is 500 pixels on a medium screen I'm switching to 600 and on extra large I'm switching to a 900 okay I want these to snap accordingly and so forth but you know what before I carry on with that I can't even bear to look at this anymore right because it's just so hard to read this so I'm going to go back to my experience my work experience I'm actually going to make this uh a scrollable div right so width four because it's so hard to see that otherwise right so Flex that's better right uh space uh Space X of five overflow X of scroll handing of ten I wanted to snap on the x-axis the snap should be mandatory I wanted to have a scroll bar we'll do afterwards actually and yeah so that so now you should see see it's not snapping yet right that's because in the child we haven't set snap rules so now I can go back to signing it because it was too hard for you not to see otherwise right um mikoi princess is highest and a good stream thank you for tuning in the retention today is nuts I love you guys honestly you make my day um say I'm gonna do snap center right so snap Center and then I'm going to say the background color should be a slightly off gray with a padding of 10 I'm going to add that in so padding of 10 and off gray now look at this snapped to the center that doesn't even matter what screen screen size it is it's all done in a way where it's not hard-coded values right it's Dynamic so it doesn't matter if you're changing stuff and all that kind of goodness right now I'm going to say the opacity should be 40 but when I hover it should go back to 100 right so opacity for 100 when I bought on a hover when otherwise it's 40 so that and then right now it's kind of popping into aggressively right so firstly you want to hover over I want to be a cursor pointer then I'm going to say it should have a transition only on the opacities that I want to waste stuff here transition only on the opacity I want the duration to be 200 millisecond or yeah 200 milliseconds pretty fast and overflow should be hidden bam hit that look at that look look oh my God like what the hell man like that is beautiful I don't even care hey lovely all right and it's just stress this out a little bit more with the summary points let's go ahead and just like have uh some a bit more juicy stuff let's just go ahead and do something like that okay so in this case uh I'm actually did do overflow afterwards but for now I'm just gonna keep it there but yeah okay the what you could do is if you don't want to touch the top you can make this a scrollable container which is perfectly easy to do you set a height you do scrollable for now I'm just gonna leave it like this because we're a bit struck on time I have so much left to do okay but make that scrollable and you can do the following okay looks really really clean though so far okay so this is looking great guys really really nice stuff we are getting towards the finished product so you guys can see everything is coming closely closely together right so with that said we've got the about we've got the experience done and uh we will customize the scroll bars afterwards so I will show you how to do that as a Finishing Touch more than anything right let's go on to the skills now skills is the next section this is this bit over here so we're going to go ahead and Pop That in right now so I'm going to pass in a section the ID of this section is going to be skills so it's going to be skills like that it's gonna have a class name this is going to snap towards I believe the center up I just want to double check actually I'm going to do this one towards the start the next two are going to be snap start all right snap start and then we're going to go ahead and pop in the skills component okay so skills component we are moving over to the next thing right here so create a new file called skills. TSX typescript rfce boom and inside of our skills there's firstly import back over here and let's start getting rid of these ugly things there we go bam right so the next thing is you can see skills so firstly remember as we do always we should set the class height of screen so that way it's going to take up the maximum height of that screen and we can scroll snap to it nice right everything's going pretty good sanity is coming up very shortly so we have a huge chunk now dedicated to sanity very very shortly so stay tuned it's going to be a hell of a lot of fun foreign yeah this is crazy honestly right so skills looking pretty good and um now we're gonna go ahead and jump into skills and it's gonna get crazy I'm telling you we got typescript we've got any loads of cool stuff like if you think they were in the verge of anything yet it's actually getting nuts better very shortly okay so stay with me all right so motion.diff so motion dot div looking great and then inside of skills oops inside the skills I'm gonna go ahead and say H3 and this is gonna have the header remember I said it every time it's going to be the same pretty much throughout so I'm going to go ahead and copy that styling uh for the header there we go skills is in there right then I'm going to go ahead and start this out so Flex relative because I've got an absolute position inside of it Flex column text should be Center and on the medium screens and above text should be left aligned Flex row on extra large right so Flex row on the extra large Flex row and I want to put a Max width constraint of 2 000 pixels so I'm customizing it a bit here right extra large screens I want to do a padding on the x-axis of 10 right so we're sort of customizing it for the large screens here the minimum height share should be the screen but if you do want to extend it see it minimum height so you could actually go ahead and do minimum height as opposed to your height and that way it can go over but it will still snap to the minimum at the center right justify Center that's a good way of getting around that problem XL space y of zero so on extra large screens I want to get rid of my space between my components do I have any space anyway I don't think I do but I'm Gonna Keep it because maybe I did or maybe I had it in my design all right I mix all items Center bam hit save there we go item center Port it into the middle at the end okay so look at this bam amazing stuff all right uh real Maddie says thank you sonny I was able to learn the react in seven days from you that is amazing dude thank you for sharing that all right so we got the skills jumping in right now next you want to do is H3 tag I'm going to say hover over over over four over over a skill for current proficiency proficiency snazzy big words if I even spot right no I didn't spell it right oh don't hate me I I probably as well as wrong I don't know proficiency let's see okay that is wrong we're fishing no that's definitely wrong proficiency okay I'm live I don't care it's fine I'm focusing on coding the the grammar police can kill me for that absolute position this and this one's gonna be it's basically the same thing but the tracking is going to be three pixels instead of 20 and I'm going to change the absolute positioning a bit lower right so there you go and it's also throwing our absolute bam look at the tracking it's so clean it's so clean um let's go all right so at this point we've got a I'm gonna have a div and this is actually going to follow a grid pattern now now I'm going to show you something cool with this right what I've actually done here is I've made it so that way when we go down into this section it actually animates half of the skills that left half of the skills right so look at this off left half right whereas a bit of a win glitch there but yeah the overall feeling is correct right it'll be half left half right if I do skills and I refresh we should see that half left half right look at that it's got a nice kind of snap in right which is really cool all right so I'm gonna go ahead and do something like this now so we're gonna have a div and then inside of here we're going to have all of our sort of skills being rendered out okay I'm going to show you how we'll do that kind of cool little trick later on but to begin with we're just going to say skill right so we're going to render a skill component in there and we're going to have a grid and that column is going to be a grid column of four uh rows as you can see there I mean I can actually change that I wanted to stare at that gap of five between all of them okay so this is looking good uh real medicine not only that I built an app while learning in seven days I already got a job of 30k thousand US dollars as an investment J screenshot that amazing stuff dude thank you so much for sharing it all right now we're going to go ahead and create these skill components of skill.tsx uh typescript rfce bam non-stop learning gets better but free quality tutorials thank you so much for featuring your energy is incredible as always we appreciate you right so I'm gonna go ahead and pop this in and import it like so okay so now you can see we've got skills skill skill let's go back down let's go all right pop these in down like that and I'm just gonna pop in chunk of them like that right there we go let's just do more you can see like a bit more of a demo there we go that's cool okay so at this point now what I'm gonna do is we've got this in play that's looking fine I'm gonna firstly animate the div hair so in this case we've got our initial all that kind of good stuff the transition while in view so when I scroll down it will show as opposed to just Anime so now if I was to refresh this you see how it nicely kind of gradually comes in looks very clean right nearly a 1100 likes thank you so much guys if you're watching the replay of this make sure you subscribe Bell notification all that good stuff and join us to zero full stack hero if you want to take it a step further all right let's go forward okay so um okay so jumping into our skill let's actually start with this right so for the skill if skills actually kind of Fairly straightforward right these are actually going to be motion divs uh motion images sorry uh and then we're going to go ahead and do the appropriate thing so Renato says I love your courses Sunny I'm just doing the UPS course anymore I'll be going on with this one very soon keep on the great but dude it's perfect because you can do the UPS alone then you can add it to your portfolio and Bam you can start getting a job that's cool man oh it will help you get a job right so a lot of our students have had success in that right so motion dot div right so that's looking pretty oh no sorry motion dot image okay and this image right now what I'm actually gonna do is I'm gonna go ahead and actually just copy let's just do like the Firebase one for now and also guys notice how look what's happening here oh look at that nice Jay can you send me a logo just like that please the URL I just need the the jpeg logo thank you and I can use that so Jay's gonna send me that and then I can go ahead and get the source for this um but in the meantime for this div I'm gonna have a special hover effect so in order to achieve this kind of effect here I'm gonna have something like the follow I'm gonna say when I hover over this entire group it should show it will basically be able to I can do certain things I can say group hover so when I hover over something it will go ahead and do some of the following Behavior so in this case group we set the pan to grip I'm going to make it relative because we're going to have to absolutely position things inside flex and I'm going to say cursor pointer like so so Jay is working on sending me that in the meantime I'm going to set up my transitions so remember I said some of them slide in from the left some of them slide in from the right well in that case what I can actually do is I can pass in a prop now I'm going to pass in something called Direction left right it's an optional prop and it's going to be a Boolean prop so now we're starting to do some typescript so I'm going to say this is optional value that you may pass in right now if you did pass it in I'm going to depict on which direction I should initially uh fly in from on the x-axis so you can see here an issue if your direction left then coming from the left otherwise coming from the right the next thing is the transition and while in view so I'm going to go ahead and pop those in as well just like so now the opacity we didn't actually change in this case the opacity here I'm going to say initially was a zero in one second it will go from zero to one and it'll change from X outside to inside Jay has now sent me a sanity logo awesome stuff because we will be popping the insanity very shortly so let's go ahead and pop in the sauce bam all right we've got our sauce and again I will be using Dynamic values very shortly from that that's good Jay that's enough to do now perfect okay um in fact actually no we can use that one as well okay so I will use that at the second one as well nice so we've got this one looking pretty good so our skills are all about sanity today right we're going to be doing loads of Sonic cool stuff so we're gonna go ahead and pop in the class name and let's go ahead and start this out so rounded four I'm gonna give this a border the Border should be gray of 500 or the gray at 500 I want it to be an object cover and I want it to be a height and width of 42 so a width of uh no 24 sorry home width of 24 so width and height of 24. um on a large screen they should get a little bit bigger but not massive so I'm going to go ahead and do a height and width on extra large screens above of 32 okay so already looking very clean right then I'm going to say filter now this is a special effect right um that's all good Jay I've already got enough now so we've got this so group hover I'm gonna say we've got the filter and I'm going to say grayscale so when I hover over this I want it to become a grayscale effect so when I hover over the group the entire group which includes the parent that we assigned group two right so uh group hover and I'm going to go ahead and say grayscale grayscale okay now look at this guys you see when I hover over it applies a filter on top of it right so hover like so now I've got I'm gonna say um yeah that's that's pretty much it I'm gonna say transition duration 300 and yes I could make it for whatever so it is and out easier now there we go so I wanted to ease in and ease out so there you go that's pretty nice right so as we do it as I hover over it I think you see we're getting there we're getting closer to what the end outcome is now how do I get that effect that I've got in my one right so I've got a div inside my one and what I'm actually doing here is going ahead and saying I've got another div with a P tag inside of that and in the P tag I'm going to have a certain level of progress like 100 for example right so I'm going to be 100 in sanity right now but they were going to eventually pour these in from uh the back end so you see right now this is how we do it right so you're gonna see step by step how we layer this up right so first things first let's just make that look a little bit pretty let's do text 3x4 so let's go ahead and do item phone sorry phone Bode text black and then let's do opacity 100 right because you can change it afterwards if you want I'm actually probably going to keep that at the same note right the div here in this case I'm going to go ahead and say Flex items Center justify Center I'm going to say height should be four right now notice how it's in the center of its own div but it's not over my existing one the way we do that is we actually go ahead and say absolute over here but with the parent being relative bam it sits on top of it right so now what I can start doing is I can start playing around with some cool stuff I can see opacity is zero to hide it now when I hover over the group so the parent what I want to do is I want to change the opacity to an 80 value right so 80. then what I want to do is apply a transition so it's not just instant I want to make the duration of that 300 milliseconds I'm going to do easy and ease out you can do ease out as well so that way it snaps in but eases out I'm going to also change the group hover so group hover when I group hover I want a background to become white but it's not just the white remember we have opacity of 80 right I'm gonna make the height and width the same as the background so that way it's a full circle that fits the same so width and 24 which means I need to also make it on the extra large screens change as well okay so let's go ahead and do that and let's say rounded four right and I'm going to do a z index of a zero for this all right so let's go ahead and save and Bam just like that we get a beautiful looking screen right now I did mess up the MD because that one I didn't change here so if you want to do that you can actually go ahead and apply it there as well and you can get the same effect you just need to make sure that it's at the same breakpoint as the circle that you're doing but right now you guys can see that just like that we have a a beautiful looking effect and I hope that helps you because that actually layering effect that understanding of knowing how to do that comes in clutch later on when you start doing more kind of cool stuff so that's a pretty cool way of doing it Jay is getting compliments someone said he's handsome hey there you go man I'm gonna timestamp now I'm gonna write J handsome bit right he gets screwed up and also 1.1 K likes oh my God man this is going nuts today all right so that's looking great right that's actually looking amazing right now the next step is projects right and then we're going to eventually hook up the Asana ecms back end right so projects is the final piece before we hop over to our nice beautiful sanity platform okay so we're gonna have the um project section here so let's go ahead and put that in so projects oops projects like so okay now this one I'm going to go ahead and copy I'm going to go here I'm going to pop it in like so projects.tsx from rfce right oh actually typescript rfce bam there we go okay so very good so far now I want you to do is go ahead and import it into here we're also going to go ahead and give this the appropriate ID so in this case it's going to be projects projects uh cast name is gonna be snap stock okay and we should see it down there and again remember the rule of thumb is you give it a height of screen so that way you can snap to it right bam oh we can snap to it nice all right so at this point um quick little War break wow my mouth is like crying out okay uh also Madness 1.1 K likes thank you guys incredible incredible stuff those people saying we want more J in the scene oh hell yeah I'm bringing J in now Jay you heard it here first everyone wants you on there you go Jake's gonna code so at this point we've got the uh the projects screen up I'm gonna go ahead and pop in the H3 that we typically do so it's going to say projects and then I'm going to go ahead and do the exact same styling that we've been doing before for that one so I'm going to pop it in like so where's the absolute positioning on it so in that case you can see right now but you see how if I don't add relative to the parent it's not going to be relative it's going to be relative to the entire screen which is a No-No whereas now it's going to be relative to its parents that's something you should always remember when you're doing this right it's gonna be a flex box you're gonna say overflow hidden on this we're going to say Flex columns and then we're going to say the text should be left oops left oh left and on the medium screen Flex row Max width is going to be four on this one we're gonna do a height of screen I've already done that and justify the stuff evenly MX Auto and items should be centrally aligned with a z value of zero um there you go looking great okay next step is we're going to go ahead and pop this in so this kind of cool stuff right so um what I firstly want to do is show you how to do that cool little back background line right so that's really cool little thing I actually I'm very actually I'm overly proud of that right so basically I'm going to make a little div right as I've shown you before you can go ahead and do this so at this point you can go ahead and see yourself what class name I'm going to say width of four all right with the four absolute and then I'm gonna go ahead and say top 30 right 30 percent oops eight percent all right so I'm kind of messing around with these values BG of uh the proper phone color but a 10 opacity length left of zero value and a height of 500 so background I have 500 and a width of I think the width we've done for you so there you go so you can see now that that's just a straight up line right now the cool part is is when you play with Tailwinds skew and rotations and stuff like that so in this case I'm going to do minor skew y on the y axis of 12. and as you can see bam I get a skirt and it goes from length to length look at that can never forget Sunny teaching even when the Kia was stuck oh yeah you remember that look at that look how clean that is right it's so nice because look it's just a extra little design thing I thought it looked really Sleek right you can go nuts with this my goal is to show you what is capable with the tech you can run with it and go far right so at this point we are doing awesome all right the next thing I want to do is start putting in the projects right or as the Australians say the projects right so let's go and do this let's go ahead and pop in the div and inside of this div oops god what the heck is on there's no pop in a div and I'm gonna have a motion div inside of that which will customize afterwards and then actually now I'm gonna have here I'm gonna have all the projects right so this is going to be each of the projects so this will actually be um each of the projects being mapped out it's gonna be each of the projects being mapped out so firstly just prepare ourselves for that so the overall standing outside one is going to be a relative width for it's gonna be a flex box it's going to be an overflow X of Scrolls that way we can kind of scroll across it so scroll and I'm showing you what I'm doing I'm preparing the container for this right so I'm preparing the container for that overflex scroll um I'm also going to be doing a overflow wire hidden I don't want to show the YX and axes at Whitehead and snap on the x-axis yes a snap should be mandatory there's going to force you to basically snap between it Z index of 20 I want to come in front of the layering right and then the scroll bar I will decide afterwards okay so there you go we're going to basically be building in that so you see how there's a layer effect here the background is layered behind right so cool stuff and then we're going to go ahead and map through the projects now what I want you to do here so that you can test it is essentially I want you to go ahead and create just a dummy array of projects so here I'm going to say projects equals I'm just going to say an array of like one two three four five it really doesn't matter here the whole point is that you can just test it as you render out someone say projects got map for every single project I'm going to render out the following okay and inside here I'm gonna have a div and inside that div I'm gonna have an image right so that's the first thing is they're gonna be the image so I'm going to take this one as an example Okay so we've just made this image you can feel free to put whatever the hell you want and then after that image we're gonna have a div with H4 the H4 inside of it and that's going to essentially be the um case studies the projects we're going to say that uh case study one of three um this is a UPS clone right so for example so let's go ahead and hit save and now you can see we can start seeing these flying in right we're gonna eventually build this out so it's perfect okay so this one I'm going to say the width of each one should be the width of the screen right and then we're going to say that the flex shrink should be zero that's the reason why it's not actually showing that size so Flex drink of zero now it forces it to be that and you see it's not snapping yet because we have not said what the snap Behavior should be if I do snap center now bam it snaps to the center of that element so I hope you're learning a lot with this if you are smash the Thumbs Up Button we're almost at 1.2 K likes and the pace today is incredible right so snap Center looking very very good and we're gonna go ahead and say with screen flexuring zero we're gonna say Flex it's gonna be a flex column view so there we go looking great and then we'll say space between the Y components of five items should be in the center I'm also going to justify everything in the center so just find the center um the snap Center we were padding at 20 right now to give it a bit of breathing room it's way too close to the end my and on the medium screens and above padding should get greater and at the height of the screen is what I want to do as well because I wanted to take up the full height of the screen you see that nice so there you go guys look at that that looks really good so far now you see it says case study one case study one case anyone well to fix that it's very simple you simply get the index as you Loop through and instead of the this you say case study one I plus one of uh projects.length so in this case projects tolerance and there you go projects okay study one of five and so forth yeah I'll go all about I did I plus one because counting starts at zero in coding and we don't want to show zero right okay this is looking so good right so so good right now so at this point I want to sort of customize it a little bit more so I want to have it as this is the title but this is going to be like an underlined bit so a span let's span this out right now and I want to do a case study and I'm going to get all the way up into the point of the colons I'm going to include all of this bam and I'm going to go ahead and do a class and here I'm going to say uh underline decoration is going to be a custom color with a 50 opacity so a little shorthand trick here as we say boom and now you can see it's a very nice little subtle touch on it for the H4 I'm going to do text for excel um text for Excel awesome and font should be semi-bold nice and then we're going to say text should be Center like so right good stuff look at this guys looking amazing so far and if you're wondering on a computer yes you can scroll it at the bottom right there right so you don't have to worry about not being able to scroll at any point you will be able to subscribe I had that feedback once so I thought I'd fix that in a lot of the builds so H4 last name is going to go into a space between the Y components of 10 planning X of 0 hit save medium values finding X of 10 and we're also going to say Max width of this entire container of 6 or so okay to be fair I don't know if we actually needed that um yeah we didn't I had that before okay but feel free go crazy oh no no I do need that because I'm actually putting in a p attack afterwards yeah project summary so for this one I've already done the project summary somewhere else um but I'm actually just going to copy this for now so we have some kind of dummy text okay so boom is even though it's not about Netflix I'm just putting it Keegan says learning a lot right now thank you dude all I would like is you to smash that Thumbs Up Button And subscribe if you haven't already that is it but enjoy the content dude text Lodge text should be Center and MD text should be left there we go so on small screens it should be Center once we break the median point it should become left aligned and look at that already bam because the width of screen is the snapping Point look at that it's just so clean like what the hell man it's unfair how clean that is so that's looking good all right so at this point we are going to change it to a motion div now I just want to mention we did actually cover a lot of frame of motion inside of zero to full stack here way before I brought it on YouTube so if you ever do want to take things further kind of develop your skill set at a pace that's faster than what I'm doing on YouTube right now feel free to hop into zero to full stack hero our course and Community Link is in the description while we're here might as well let you know about it but yeah feel free our students love it and there's actually some members inside of the chat right now so feel free to ask them questions right so um there you go we got the project looking good and uh that's really nice Einstein says yeah I'm talking about okay so we're going to change the div here to be a motion div so first things first is import it from the top like so okay so motion at the top and I'm gonna go ahead and say this one should be motion dot div and I'm gonna actually do something very simple straightforward the same as what we previously did just a simple opacity in okay that's going to be for the surrounding there now when every single item flies in I actually want the uh image to basically animate downwards right so this image I'm going to make a motion dot image and I'm going to go ahead and apply the following now yes we will be giving keys to our mapped objects I know someone must be going crazy in the replay or whatever but we're going to go ahead and do the following animation so we're starting a y minus 300 so you'll start from way above it'll come down to this value and also going to do opacity of zero to a capacity of one duration 1.2 seconds and once it's done I don't want to keep repeating it so that's it so you see that bam really nice really nice really clean and you see how it when it's done once it doesn't do it again so I mean that is clean that is damn clean I don't care anyone said that is actually really beautiful look at that a reason why I went out is because the view went out and then it animated back in which triggered off this again all right so the parent kind of did it right so that's awesome so far I think what we should do while we're here is finally push past that kind of final hurdle of the contact page and then we can hook up our sanity and we can connect all the missing pieces replace all the code from our Dynamic data on the back end and then we can get moving on that front so final step here before we touch sanity we have the contact me page so section let's go ahead and do that right now so we've got the section and this is going to be the contact me section so we're going to go ahead and create a contact me component so contact me like so I'm going to go over here into my components I'm going to do a contactme.tsx like so and I'm going to go into typescript uh react functional right functional component right rf-c-e-rfc there you go bam okay looks good all right so um at this point I'm going to hit save go back to my index and then I'm going to import this spam I'm going to go ahead and say ID should be the contact um this is going to be snap start as well so snap stop boom looks good and then we're gonna go ahead and say um that's fine okay and then we're gonna go ahead and do the five so you see it's there down there um I'm gonna give this a height of screen so higher screen so that way it can snap towards it boom there you go awesome awesome appearance okay and then we're gonna go ahead and actually build out this one so the div is going to be the following so we're actually going to be building out this right now right so first things first let's put that H3 back in I'm just going to pop it straight in because you've seen me do it a bunch of times now um so that history resembles the contact and then for the top point we're going to do the same thing what we've been doing previously a very similar layout uh Flex column is what we're going to be doing um I'm going to say the text should be Central except on medium screens where the text becomes left aligned all right and then we're going to say medium screens Flex should be coming a row um max width of 7xl uh paniacs of 10 the height screen we've done already I justify everything evenly MX Auto to make sure that we're centered and then I'm going to say items in the center um there we go okay looking good oh Einstein I'm sorry for that um we don't we just don't mention things on the channel um all right so we've got the contact there we go and then at this point we've got a div and inside of this div I'm gonna have H4 and it's basically going to say I have just watching I have got just what you need right so I've got something like sort of some quirky stuff that I'm saying right here right so I've got just watching it I'm actually going to span something in so I've shown you this before so I'm actually going to do in the essence of time is I'm going to go ahead and pop this down and I'm just going to pop the Block in feel free to pause the video when we do this but I'm basically doing the span trick that we did earlier I've got just what you need let's talk right so the H4 here I'm going to go and say text should be 4XL and then I'm going to say font should be semi board and I'm gonna go ahead and say text should be on the center okay really nice good stuff good stuff for the div here I'm gonna go ahead and say the flex and it should be a flex column fix column and then she says the face y of ten there we go and that's because we're gonna have more children component here as well so next things up I've got the div and inside of this div I'm going to have different icons now I'm going to be using hero icons today so we are going to be installing here icons and using them as needed so the first thing I'm going to do is go ahead and Install hero icons into our app so first things first heroicons.com there is a new version of hero icons we're going to go over to the documentation I'll show you how to install it but it's amazing and it works perfectly with Talent CSS so what I want you to do is go ahead copy this I'm doing yarn so I'm going to go ahead and do the following command J Pull It Up yarn add hero icons react and I'm gonna have a quick water break like you should if you're watching me right now amazing Pace we're gonna be we're pretty on time for this make sure you smash that like button 1.2k likes is inbound all right let's do this okay so we've got the div popping in right here uh I completely lost what I was talking about um whoa I completely lost what I was talking about okay so the H4 is um oh yeah hero icons that's it so we installed here icons I went super blank there okay and then we're gonna go ahead and import a bunch of the icons from um or their required directory okay now what I want to show you is if you ever need to search for them you can go ahead and type in something like user and then you see here user user user so forth so what you can actually do there is use that as reference to how I found the icons in the first place and then you import them like so okay so in that case we've got the div and then I'm going to go ahead and say that we've got the phone icon so I'm going to show you firstly how we'll do it for one for phone icon and the P tag here is going to be the software actually you know what this should be wrapped in the div I'm going to go ahead and pull that into a div this div is actually going to be Flex items in the center I'm going to hit save I'm actually going to show you this so you can see what's going on here so I'm going to go ahead and put this on the side left here Flex item Center space between the X components of five so it should have a little bit of a space this P tag I'm going to go ahead and say the phone number so plus one two three four five six seven eight nine that's uh totally my number as you can tell right so there we go we've got a number there and then I'm gonna basically replicate this a few times right so we've got justify Center is what I needed as well just if I Center there we go and then for this I'm going to go ahead and customize it so class name I'm going to go ahead and give it a the proper fam color height and width of seven I'm going to animate it as well so animate posts so you can see it will have this nice little animation of color right the same thing goes for this I'm going to say text is going to be 2XL right now essentially what I've done here is the same thing three times but I've done it for different icons okay so I'm going to go ahead and do the same thing for the address so down here I'm gonna have it for the address oh oops I've got the address that's eventually when we finish things off one two Dev Aleppo Lane okay so let's go to our contact page here we go contact all right and then let's go ahead and and we can see that now I'm gonna have the same thing for the final one let's get rid of that except this one is going to be for the envelope icon right now for the envelope icon I want to do something different I want to actually this one's going to eventually say like email me and the whole point of this is that you can click it and it will mail to the person's email right so in this case if you want to reach us out it's popular.team gmail.com all right so that's what we're going to do just for a placeholder right now and uh what we are going to say is that for this overall div we should style it out and put things at spaced out so space y of 10 right nice Fabricio assistant you're the best thank you dude I appreciate you man um I see is every programmer I see all right so in this case we've got the div here um okay so underneath that I'm gonna have a form okay so I'm gonna have the form now look at that that form just adds like it's a very clean touch once you have that in all right so I'm gonna show you how to do that so here we're gonna have a form and this is where you're going to learn about react hooks form if you haven't already used that in the past right so nearly a 1.2 K likes absolutely Smash It damn why that horizontal scroll bar don't worry dude I'm actually gonna replace it with a very beautiful one shortly and that right now is actually because of an animation over here somewhere that hasn't kicked in uh that's it yeah so I will show you how to fix that afterwards you just have to set an overflow hidden on the parent um that's what we should have done somewhere okay so at this point we're going to put a form and uh the formula and then we're gonna get rid of this get rid of that and inside of our form we're gonna have a div first div is going to have two inputs number times two and then we're gonna have another input a text area so we're going to input a text area and we're gonna have a button okay now this I don't care about any of this let's get rid of that for now get rid of that for now get rid of that for now okay so the text area is actually a self-close component that's fine the button will say submit hit save and there you go I mean that looks awful right but we'll fix it up so it looks really nice so first things first on that form we're going to make it Flex it's going to be a flex column it's going to be space between the Y A components of two and it's going to be W fit to be absolutely just what we need it as and margin X of Auto hit save bam everything's in line that's actually two forms right there right Raj freezing yo what is up we've got a proper fan member in the house if anyone else wants to come pop around remember you see how it pops out and I can see you guys straight away then hit the join button but welcome dude there's a stream here I'm going to say uh class name equals Lex Space X of two right bum and there you go another gives it a little bit of breathing room now here what I want to do is I want to give it a placeholder a name and a contact input it's going to be a custom utility class I want to give these things so I'm going to go ahead and create a multi-cursor here and I'm going to go ahead and do the following I'm going to say class name equals contact input and what I'm going to do is go over to my globals now inside of globals it's worth doing it here because we're going to have a repeating class so I will say contact input apply and as I hit save now you'll see it being taken into effect outline none gets rid of this annoying blue border that's there so now you can see there's no blue border okay then we're going to say background should be a value of slate to 400 and a 10 opacity right so very subtle background rounded the border around the borders a bit we're gonna say border should be on the bottom um oops on here border it should be on the bottom my bad okay and um padding X I'm going to give it a slight dark a gray as well so I'm thinking X planning Y and there you go so slightly better padding on X and Y axis a little bit more on the X than on the Y uh we've given it a border color text should be gray 500 by default and then a placeholder value should be great by 500 transition everything so I'm going to go ahead and apply a transition to all of the things here so there we go sorry guys one second so now if I type in here it's a bit gray but what I want to do is when you're focused it's I want to change the color of the text and the color of the Border all right so let's go ahead and do that right now so Focus changes the color of the text and border so I've done 40 in the past D so now you can see look oh what do you like Hello World sunny blah blah blah blah blah but now you can see that I get this nice kind of animated effect as well and it highlights the text and the eyes right and when we hover over I also want to change the color as well all right so I agree with you Einstein now there's Randy Corners make everything look nice all right so that looks really clean so far as we highlight over it you see how the underline change but the text didn't change until I clicked it and I focused right so um there you go really really nice something can you fix horizontal scoreboard with overflow hidden not if you've got an animation it pops out for a second so that's why you'd want to overflow hide it right so at this point that's pretty cool okay um let's go back to our button and our button we're going to have the following style so I'm just going to pop this in for the sake of time so I'm going to go here class name and here we've got background color padding rounded Corners text black font mode and text large right so very simple stuff there now the only thing we're missing is placeholders right placeholders and then we need to connect it to react hooks form so here I'm going to put in two placeholders um the first one being is going to be um name and the second one's gonna be email so name this one is going to be email so email yeah let me know if anyone's coding along right now because their retention is nuts you are actually crazy good today at coding along so it's been incredible seeing this uh name email as you can see it's popped in we're also going to have placeholder here for subject so the subject line and then we're also going to go ahead and have a message as such oh God oops sorry placeholder it's going to be a message there we go okay and the button here I want it to be a type of submit because we're inside a form so it's going to submit okay so as you can see look and then another thing I like about this is you can go ahead and and pull that apart and stuff like that and animations are going to kick in because we've got animate everything yeah so really really nice so far now how the hell do I submit this form so if I clicking Right Now default behavior is to refresh right that's happening because we're here so I'm gonna get rid of that okay so how the hell do I do that right so first things first is we need to just double check yeah that's good um let's go ahead and actually set up a react hooks form right in oh see thank you thank you thank you done a good little spot there Glenn Smith type should have been email yes you're right time should have an email here so if you click type email now that would actually be an email form it would help you validate that form in the correct way so there you go default validation thank you right um so I want to ask how do you plan designing a web page with us so I will mention it more in xero tool stack hero but I use B hunt in a dribble to go ahead and get my inspiration yeah behunt and durable amazing websites for UI ux okay so that's pretty good right now now I'm gonna do is I'm gonna go ahead and set up a react hooks form so react hooks form I'll show you so heading over here we can go ahead and it's basically a really good efficient library to use for when you're setting things up so we're going to click on typescript for the typescript demo we're going to install the dependency like so so I'm going to go ahead and grab this pop this in command J and I'm going to go ahead and go to my bottom yarn add boom where I took form right really really good stuff 1.2 K likes and let's go that is absolutely amazing thank you guys for today so far your energy has been incredible wow and we are doing very well on the timings so that is now installed now what we need to do is go ahead and set up the following so you can use this as your base right so what I'm going to do is I'm going to copy these two lines this is our basically initialization of the connecting the state from react to its form to our elements on the page so first thing I want to do is go ahead and pull that into sorry I need to go ahead and pull type submit there we go uh we've got we're going to create some custom type so I'll show you what we're going to use there and we're going to import the following as well okay so the inputs are essentially what types of fields are we going to expect so it's not this example example we're expecting this name String email string subject string message string okay so at that point it's looking really good raspberry since there's damn Sunny what a nice boat thank you so much dude I appreciate you right so at this point we have our inputs coming in so what I can now do is inputs are being popped in here now we don't need the watch right now you we're not going to use errors I've done that before in a build we're not actually going to do that right now handle submit is what we're actually going to be using and register so as you can see this is basically going to give us two handlers which are going to help us set up our form and then the on submit is essentially going to say when we submit that form what should we do with the form data that gets submitted right so here what we can actually rename this to is form data okay so that's what's actually going to happen now how the hell do we actually connect this to our form so we go down to our form and what you want to do here is essentially just go ahead and say on submit and we're going to say on submit handle submit and you pass in our on submit function at the top right so if we go to the top uh handle submit is what they gave us and on submit is our own Handler okay so that's how you go ahead and do it so that's literally done and then all we need to do is connect each of the input fields to the following thing so now to do that all you got to do is put your curly braces dot dot dot means that spread and we're going to spread a register and we just pop in the name of the field that we want to basically call it so I'm going to copy this now this one's going to be named this one's going to be email and you can see how it's actually calling me out on it you see how it already knows which one's which if I try to do something wrong it will call me out on it and say no you need to do email that's the power of typescript all right so let's do that and then I'm going to go ahead and pop this in so we've got this and I'm going to do subject and this one's going to be a message okay hit save now you can see we get a nice little prettier working it's magic and then I can go ahead and test this out so let's go back over to our app and let's go ahead and see what's going on it so command uh open inspector and then let's clear this out and let's just type in sunny test uh Gmail .com subject okay let's stop him no I've got a dope build and I build my app bro right and let's click enter and as you can see it got rid of the default Behavior which was to go ahead and refresh the page and instead it gave us this information in that form data object so then we can go ahead and use that in whatever we needed to do right so what I've done here is I'm not going to go ahead and Implement a back-end server send an email that kind of stuff instead it's going to go ahead and open up your mail client for whoever's sending it with pre-filled uh with pre-filled spots basically right so you can go ahead and pre-fill information so that's what we're going to do in this build but you can feel free to change up however you want but it really doesn't it's up to you right so at this point the way we do it is we go to uh on submit function I'm gonna pop a block here around this form data has all of our appropriate data and so now you can see if I do form data dot you see I get all of this I feel it's this is power of typescript and the way we basically redirect someone to send an email from their client is to say window.location.href and then here we go and email address is a good way to send emails yes you're right we'll do back ticks here I'm just going to do it very simple because this is not the focus of today's video but we're essentially going to have the email of the user right so the one that they put in so this is actually going to be the person who's logged in so right now I'm just going to put pop react dot team not not the person logged in sorry it's going to be the person's page who it is so it's going to be this subject now this is going to come from the form there okay so this is going to be the from the form there and the body is going to be from the form data message and um rather than just the body being like this I'm actually going to say hi oops we'll say hi my name is um data name so we could say form data sorry guys one second hi my name is formdata dot name and um and then a message okay cool and um and then you can even in Brackets afterwards put the email address I mean you're going to be sending it from the email address I guess but still you could just put that in there if you really wanted so you can say form data dot email um or however you want to do it you can basically do that so the point is now if I was to do this and I was to go ahead and click on submit you'll see it opens up a mail client and let me go ahead and just move this out oops I've actually put something up there uh let me go ahead and show you this so yeah it will pop out on the screen it'll say dope build and so forth right so say like an email address this is some old one it doesn't work I mean it's not even building my app brow so that's basically like from your own email address it will do that okay so I'm gonna go ahead and get rid of that now so that's basically a templated email structure you can feel free to go ahead and do that in a way that you want to right um so so you can feel free to do that the way you need to right so um all right one second guys all right yeah so you can feel free to do that yourself right so if you want to go ahead and do that with a mail server you can feel free to do that as well okay so at that point now on the next Point what we're going to now do is we're going to go ahead and set up sanity right so first things first actually you know what okay quick quick thing I'm gonna do before I do that is I'm going to quickly customize the uh the scroll bars because right now they're ugly right here so at this point first things first is I need to go ahead and hide the scroll bars for um yeah Jay that's awesome uh index let's go ahead and do this I'm going to go ahead and do uh so here there we go so what we say is here is we're going to go ahead and hide our where is it going overflow y scroll there we go overflow y Square not X yeah and then I'm going to say actually here overflow X scroll sorry hidden overflow X hidden there you go and now we can still scroll in inner containers but that overall one's gone right oops I actually messed that one up there you go we've got this um that's seems to have messed up what I've done there we go skills okay there we go nice okay so it all works right so next thing is we need to customize the look and feel of this so doing amazing so far guys I'm actually so proud of the papa farm for tuning in and literally the retention is unreal I've never seen this it's actually unreal um so thank you guys all right so at this point um what we're now going to do is I'm gonna have the custom scrollers so basically you see how I've got custom scrollers I'll show you how we do it alright so basically it's literally called a Tailwind scroll I believe I'm just gonna find it again so it's called Tailwind scroll bar and I'll show you the installation process so you literally tell us grow bar uh first link on Google turn on scroll by npm you will see this right yarn add Dash D or npm you can feel free to do whatever you want command J install it as a developer dependency and then you go to your Tailwind config and you plug it in right so head over to your Tailwind config and inside your plugins you pop in right now we have additional Tailwind CSS utility classes so command J closed up [Music] and now what we can do is we can go ahead and start taking over all the old ones that look like crap and basically make them look fresh so let's go ahead and do that right now so index .tsx so first things first is the parent one right so let's go and so first thing though I need to say scroll bar that allows me to get access to all of these ones then what I do is I say scroll bar and I can actually change the track color so I'm going to change the track color to gray 400 well at an opacity of 20 right immediately you can see that it's gone a different color and then what I can do is I can change the thumb right so if I say scroll bar thumb and I'm going to change that to the proper firm color button 80 opacity so let's go and do that and now you can see the thumb has changed to a nice color look at the like it's not what it can do right that it can really have a nice impact on your your sort of overall look and feel of your app all right so really really nice subtle changes the next step is experience let's do work experience let's go over here and let's go ahead and modify this one as we need to so I'm going to go ahead and do the same thing but for the div with the experience cards inside of so I've literally got the same thing scroll bar change the track colors change the thumb color and as you can see now we have a beautiful new Styles right so really really nice the final one is the projects right so let's go ahead and go to our projects and let's go ahead and pop it on site I'm pretty sure it's this one I'm just going to do a quick sanity check because we're coming up to Sunny oh uh I'm gonna go here and pop it in like so and there you go guys just like that we have it there as well now for this one if you wanted to make it then you can go ahead and do the following you can actually go to your scroll bar type in scroll bar and you can put thin as well and you can even get a thin version of it so if you did want a thinner version because it's in the middle of the page you could do that as well right so it's really up to you how you want to style it but it really does look quite clean right so super super clean design UI everything's looking awesome and yeah it's very impressive to a future employer now the most anticipated part the CMS right so now what we're actually going to do is connect sanity's content platform which is incredible by the way right I'm going to show you and make sure when you set this up you use the first link in the description what we're now going to do is set up a back end we're going to create a API endpoints for each different core that comes in we're going to pull the information from sanity protected in a protective fashion with typescript so make sure that we make no mistakes and then we're going to use that information on the screen so that way if you're ever using your if you want to update your portfolio you don't have to go in and code everything manually you go to to sanity change what you need to change publish the changes and voila it's working and it works the way we need it okay so somebody's saying where do you get this inspiration for design it's called behance and a dribble okay and with that said we are literally about to crush 1.3 K likes right absolutely amazing stuff guys you guys are going to have beautiful portfolios at the End of This I Promise You okay um also if you want to do that you get rid of that one and then that's it that replicates it awesome so that looks clean as hell guys right I'm really happy with that and also oh for this one yeah so I forgot to mention get in touch we need to make that actually a link so uh for the header uh we can actually make that a link I should have done that otherwise I'm going to forget um so over here what we can do is for the this one what we do is we pop in a link a next JS link sorry and then we cut that out over the other side we pop it in and we simply say href is going to be to the contact point in the screen so contact [Music] save and then now if I go ahead and click it takes me to the contact there you go awesome stuff I also didn't have a little thumb at the bottom I'll show you how we can do that very easy to do and then you can actually have that let's throw you to the front end as well then we're going to jump onto sanity's uh amazing bit in the second all right so here we're going to have a link next chance link all right and oh God damn it yep and then what we've got here is we're gonna have a footer and it's always going to be appended inside there we're gonna have a div with an image that image in this case I'm just gonna have an Imgur for a rough logo that we have um you can feel free to change this as you wish the ahref here is going to take you to the top of the page so in this case it's going to take you to Hero okay and what I'm gonna do here for this is it's going to be a footer so it's going to be class sticky bottom five with this four cursor should be a pointer okay and then we're gonna say that the image should be have a bunch of signing and I want it to be grayscale so in this case I'm gonna go here type in class name width and height at 10 as you see how it's a tiny little image here but when I hover over it it gets rid of the grayscale okay and then for the div here very simply we say Flex item Center so you can basically use this trick to center it and just find the center and Bam just like that as we scroll down now we have our little logo stuck on the page looking fresh right there we go so everything's looking clean if I click it now I go back to the top so you can feel free to do that I actually didn't include that in this honey um CMS part but we can you can feel free to customize it after I show you how to do this okay so bank card says this is six I need to keep up the goodbye thank you dude for being amazing as always let's jump on to the sanity CMS part right so heading over to sanity.io forward slash Sunny this is where everyone needs to be right now right now I want you to go ahead and pay attention to this second line so firstly you need to run this and install the sanity CLI now before we go ahead and jump into things a little bit more I want to mention why Sana e is an incredible uh sponsor of this Channel and why I'm using them because I don't use just any old Tech that comes my way but I want to mention why we're going to use them in the first place and honestly just quite frankly they're amazing of what they do they use a massive they support massive amount of big businesses you can use it wherever you need content or whatever you need to basically be able to update in a non-developer fashion so imagine you've got team you don't need to basically really have to tell them to re-change all the hard-coded values and then redeploy the app right you don't want to do that in the production environment you need to have it so that anyone who's a non-developer can come in change collab add your stuff right so you've got this awesome way that you can go ahead and add products add whatever you've decided in your schema you can go ahead and do that there's tons of apis to go ahead and build on you can feel free to have a look for yourself right and they've got real-time collaboration which is actually really really cool and if you get stuck there's a great slack environment Discord environment and they've also been incredible in helping us in our own slack Community okay so they've been actually really really awesome so make sure you go ahead check them out first thing in the description to get that double quota plan okay so this is the one you need to do so I've already ran this command so you can do it if it doesn't work run sudo in front of it to install it as an admin but then we're going to go ahead and do sanity init coupon so this is where the magic happens so I want you to go ahead open up your terminal and type in the following okay so check this out right now give me two seconds guys two seconds all right so I'm gonna go ahead and say sanity and it coupon Sunny 2022. hit enter and now what you will see is coupon Sunny 2022 validate also guys it supports the popper farm so thank you for that I appreciate you all and you get double the quota okay so at this point it says you're setting up a project looks like you already have a signing account Suite if you didn't it would make you log in right so here I'm going to give it a project name so I'm going to say portfolio YouTube YouTube 2.0 uh two basically um build okay I'm giving it a long name all right I'm going to go ahead and hit enter right now and let's see how many people we can get signed out sunny right it helps us out and it's just an awesome platform I really like pushing people to good Tech because it's actually good Tech um the default database configuration yes just hit enter that's fine and then you want to leave it like this for now create output part so I like to call this one sanity right it's either true that corporate another photo called sanity so I'm going to do that hit enter now here you have a set of templates now you can start from blank however I would recommend just start from blog and I'll show you how you can redefine rebuild things out as you need right so go ahead and hit blog and then we can go ahead and do it like so this will set up a sort of template for you with a Blog schema so once that's done it will install dependencies now remember there is a separate folder now called sanity inside of your domain or inside of your uh your like where you're working so make sure that that to remember to exclude the node modules because that's got its own set of node modules so you also need to be careful now where you install your dependencies right uh Einstein is saying I hope you do a tour coming on how to post on time T either on YouTube or zero tool stacker yes dude I definitely will I think I did it in the Twitter build or one of the builds I definitely did a uh posting two section definitely check it's in zero to full Stacker right so this is going to install and it's going to be done in just a second okay so overall incredible stuff right now guys we're actually going to be moving over to sanity in just a sec so you can see now that it's already started to create the folder structure for us get everything in place as we need and expect it so looking at the schemas that is created you can see while it's installing the dependencies we can jump into it so you can see right now we've got post author category block content so this is basically saying what should the shape of my database be right so I'm going to save you a bunch of time here I've actually pre-built all the schemas for us so we can actually go ahead and save a bit of time there and do it so I've split things up into page info page info is essentially going to represent the entire Page information so heading over to post what I want you to do is basically go ahead and um I'm going to show you how we can re basically change one of the ones that are currently there existing and then I'm going to just do it in a fast fashion for the rest of them so that way you can see what I'm doing so here we've got post I'm going to change this to page info and then we can click ok I'm going to change this to page info with a capital P right because it's the title and then we've got all the fields and this is sanity's documentation for what we essentially need to do so what I want you to do here firstly we're not going to be using previous so scroll down to preview get rid of the preview for now right we'll cover that in a separate video we're going to grab everything from the start of the end of the array to the beginning so that way we've gone empty Fields right and I'm going to go ahead and pop in each of the individual ones I'm going to show you so in the inside of our page info we've got the name and these are going to represent each of the individual things on our page So eventually the name will represent hi my name's Sunny Sangha so it'll be here we set it inside of our sanity CMS right we're going to have an image and we're going to have a row the role is going to say software engineer the hero image is going to be the following then we're going to have things like background information the profile picture and so forth so I'm going to go ahead and pop those in background information profile picture phone number email address and socials okay so I'm going to do these ones right here first so I'm I've got the um sorry guys one second we've got the profile picture and then we're gonna have um the following so address and all of these ones here so there you go we've got profile picture phone number email and address right so what I want you to now do is go ahead and pop in also the final one which is socials and this one will freak out and complain because we haven't actually done it correctly yet all right so socials so these have all got data types string image so forth however right when we have socials I've got a reference to a different type which is social so first thing I want you to do before you get ahead of yourself go ahead and rename this file to page info page info okay and and that way we hit save and go to schema and where we had post previously I'm going to replace all the instances of that with page info okay so you can do it that way right that's why the obviously was I'm just showing you how I was doing it I basically came in messed around played with it in that fashion right Eric milfront has just came here to say Sunny you are the one the best teachers I had you wrote Good Vibes from Brazil Eric I appreciate you dude thank you so much brother 1.3 K likes inbound very shortly right now what we're going to do is we're going to can get rid of all the others so we're going to get rid of this we're going to get rid of that we're going to get rid of this so I'm going to make it very clean for you okay and and then I'm going to basically build it up as we need it okay so now I'm gonna go ahead and actually get the schema category block content author and I'm going to delete oh no sorry no no not the schema okay don't delete the schema okay that's close delete those right no okay I deleted the wrong one God damn it okay delete those three that's it yeah um and now here I want to basically copy and paste page info and I'm just going to keep creating different ones right so page info is one experience is the next one so I want you guys to just you can feel free to pause the video and get here I'm basically I'm basically building out the back end of the database right so for experience we're going to do something very similar but I'm going to go ahead and show you the difference right so experience experience and these are the different fields so job title company image company date started they ended is currently working here because it's going to say present on the experience tab if you are Technologies and that's going to reference skill as well and points is going to be an array of type string okay so that's gonna be a different one we're also going to have a another one which is going to be for project okay this is going to be for the individual projects so let's go ahead and rename that as well so I'm just going ahead and saying project.js and you guys can feel free to take us pause and have a look at this to copy it out as you feel fresh the code is also available in the public get up repo so do not forget that right next thing you know we're going to have the skills so we're going to say skill.js and this is going to be how we're going to label out the back end for skills so in this case I'm going to do this one right here so this is the layout that I've done here and what we've done is we actually added a validation in so it has to be a minimum of zero or a maximum of 100 right thank you Ben he says I'm loving the consistent lady I am really trying so I really appreciate that comment dude thank you right and the final one is we're going to have a social okay so here I'm actually gonna have something called a social so let's go ahead and pop this in here and you can see it's got a title and a URL and that's going to resemble all of the different socials that are going to show up in the header of our app okay so that should be everything now if we go to our schema what we should see um thank you Benny because it's crazy how the value doesn't drop with quantity it takes a lot of work I ain't gonna lie but we do it for you guys so thank you so much all right so here what we're going to do is once we're inside of our schema oh I didn't save it it was strange all right I'm gonna go ahead and grab this and paste it in like so okay so I've got my page info there and that's weird what the hell okay anyway I'm gonna go ahead and pop in the phone so I'm basically gonna uh list out all of the different um schemas in here and you see what we're doing we're basically concatenating all of the different schemas that we've just created into one Global schema okay so in that case we're done with that bit all right so now what we need to do is run our Sunny so sanity gives us two ways of viewing our CMS firstly we can run it locally secondly we can deploy our CMS platform online but it's secure because you would have to log in with the sanity account that you approve or that you created it with so you can actually add several users to your back end as well so that way they can log in and change things as well so imagine you have content management creators that kind of stuff they can do that as well right so here I'm going to go ahead and say yawn run I'm sorry CD sanity and we've installed design ecli tools as I showed you before so now what we can do is we can type in sanity start and let's see if we did all of our setup correctly all right so this is you should go ahead set it up on our local environment and we should be able to log in and do what we need to do let's actually go ahead and save these files as well because I didn't save them okay it's compiling it and then it will go ahead and style up on our server so localhost 3333 awesome let's go check it out localhost 3 and then you can see the Sami studio will load and as you can see nobody can just log into it so we're actually going to go ahead and log in so I'm going to log into with Google so I'm clicking Google I am now logging in and then I can see that I have now got errors in my schema okay so that's fine we're gonna go ahead and check it out so it says invalid type if skill is already defined in the schema cool let's go figure out what the hell's going on so unknown type social social so I probably haven't saved my things here right that's probably the issue here so if I was to go ahead and check my skill there we go that's all good project and so forth let's go ahead and see this for ourselves and then we've got a project agent 4 experience okay so I just didn't save my files that's all it was okay so now I want to give you a little demonstration of the sanity back end right so this is where the magic really happens right so let's first check out page info so if I go into page info and I click create document so in this case this is essentially going to be mapped to eventually to what I have over here right so in this case I'm going to go ahead and show you how we can go ahead and do this right now so if we were to go ahead and pop in right now so imagine I said Sunny Sangha and then I was like software engineer software engineer and so forth and then I went ahead and dropped in the email so I dropped in the image background information would be um as I scroll down here would be this kind of stuff and so forth so what I'm actually going to do now is I'm going to show you my deployed version and I'm going to basically streamline the process of doing this for you so the skills would resemble the different skills that we would have and so forth right so I'm actually gonna basically save us a bit of time rather than import all of this again which you can definitely do you just click add and you start adding out this information and eventually I'll show you how we can go ahead and pop this through as well social would represent all of the social tags so this would be Twitter and then it would be the URL for your Twitter account project would be your project title your summary different technologies that you used and notice how this would reference the old Technologies inside of skills so in this case if I didn't have a skill I can even create a skill from here and reference it so it's a fully relational connected database okay so it's very very powerful stuff so at this point what I'm now going to do is I'm going to create I'm going to load up my old Santa E Studio because I've actually already pre-filled this one and I'll show you how we can work like so because this will save a bit of time as opposed to me adding it all in manually again and I can actually show you how we do this right so I'm going to do is I'm going to cut this one I'm going to run it on my other machine and that will go ahead and launch it on localhost 3000 okay so you want to have that running on this side as well okay so let's give that a second and now we'll go ahead and log in so now I've got that loaded I'm going to go ahead and refresh my localhost and I've actually gone ahead and done this before and so jme went out and spent a lot of time filling this out so if we look at page info now you can see I've added in a bunch of pictures a bunch of different things right so in this case I've got a bunch of numbers a bunch of this that's not a real number don't worry uh skill is going to have all the different skills so you can have next JS you can have your JavaScript and we've also got progress remember I had those different progress metrics so I want you at this point to basically go ahead and import all of your data inside of here right same for experience you can see we've got all of these ones so for example if I click on CEO of the papa Farm you can see the company the date started the technology is used you can see how it's linked and different points as to how and where and the basis the selling points for why you uh think that's a good thing to put on your resume same thing for the socials so again you can put on links you can put on Facebook Instagram YouTube accounts and so forth and it's going to go ahead and eventually pull those in like we need to same thing for the project so with that bit done now what if I want to go ahead and enjoy this right so what we can actually do is I can either use it on my localhost or I can actually even deploy this and I can go ahead and do the following and say sanity deploy and if I do something you deploy now this is actually going to deploy the one that hasn't got the information in but I'll show you just for reference you can go ahead and give it a studio name so I can go and say something like portfolio portfolio YouTube demo and I can enter and what this will do right now is it will actually have essentially another copy of the studio online so that way my team for example when I was building this I deployed my sanity Studio Jay was filling in the information while I was coding it out the rest of the build so you can see how you can actually work in a real-time environment like this just remember your localhost is always going to be up today your sanity studio is going to be the one that's probably going to be behind if you add anything else so you have to redeploy but you can actually have live collaboration between the two things which is awesome right right so this is amazing right now I can see everyone kind of go inside and 1.3 K likes this is nuts we have 300 people still watching this video this is not right so there you go you can deploy and as you can see we can go ahead and reach over there now as I mentioned before it is secured it's logged like you see I'm actually logged in right now which is why I can come to it and this is the one without the documents inside but that is what it would be how you can actually deploy it's very simple now that would be forever up so even in a production environment you can go ahead and do that as you need to okay so let's carry on so I've got my Local Host here that's working well for me what I now need to do is go ahead and what's awesome as well is you can go ahead and connect to that but I'll show you afterwards right so next steps are let's go to our front end and we need to now pull our information from our front end right so what we're going to do is essentially use something called the grok query language to go ahead and query the back end and get the information that we need right so in this case let's go ahead and do an example of this so they have a special querying language called the query language it's actually very simple in China to use it and in this case for example we have a type called social so if you notice there was a type called social here and we know this because if we go to our social let's go to our social right here you remember the name of here that's the type right so social so if I try and query for everything that is of type social and I hit run it's similar to graphql in the sense it will return a bunch of documents back to me okay so I've actually pre-populated these queries to help you out and we're going to go ahead and create API endpoints using next.js's back-end functionality create those endpoints and then we're going to communicate to our back end from our next year as a front end and then we're going to go ahead and go ahead and have a full stack integration right and then we're going to render it on the front end so lots of stuff coming in and it's all going to be on typescript it's all going to be protected everything's gonna be awesome I promise you okay so let's carry on let's move strongly on so at this point what we can now do guys is we can go ahead and if I close this out let's just make our code a little bit near first thing I want you to do before you forget is I want you to go into your git ignore file and I want you to add in the following I want you to add in sanity someone said let me just double check I want you to add in sanity forward slash node modules right anywhere doesn't matter the reason being is because that way if you refresh now you see we get the correct number of source control changes otherwise it goes nuts and the things you're trying to commit your node modules which you're not definitely not right so at this point what I would like to Showcase to you is if we go to R ages you'll see we have an API here this is a full node.js backend that we have running by default when we have a nexjs app so if you notice if I head over to localhost 3000 my app is there right but if I go to forward slash API forward slash hello you will see I have an actual endpoint running on the back end right so this is all because we have this API and you see forward slash hello so that's how in the next JS page ring was also works for its API endpoints so inside of API now I'm going to create a bunch of different endpoints and these are going to have all going to have the responsibility of connecting to my um the responsibility of connecting to my sanity back end and then pulling in the information as needed so first things first we need to connect to sanity so I'm going to use a library called Next sanity all right so let's go ahead and do that right now so this is the sanity toolkit for next.js and I'm going to show you how we do that right now so head over to installation and we need to do the following so I'm going to do yarn install next sanity and a bunch of other useful helpers so let's go ahead and do that right now come on Jay I'm going to make sure you're not in the wrong folder so I need to CD up a level so I'm at my main folder and then I install my dependencies because sanity's folder also has dependencies of its own foreign amazing stuff we're doing amazing guys nearly a 1.4 K likes as well right so once that's done we're going to go ahead and create our endpoints okay so the first one I'm going to create is an example actually before we do that I need to actually create our sanity helper right so I'll show you what I mean by that but we essentially are going to create a file down here called sanity.ts okay and this time in t.ts file so make sure you've installed it just like I have we're going to go ahead and do the following so we're gonna we need to import some helpers right here now this is all available on the sanity docs online essentially what we need to do now is create something called a config right so the config will look something like this okay so it's a config we have to say the data set and we're going to show you how to set up your environment variables and then we don't pass in the data set it's going to use production by default okay the project ID I'm going to show you how to pass that in and then again as a CDN so if we're in the production environment it would use a CDN otherwise it won't if it's development environment okay this is how we're going to connect to the Sony ecms platform that we just created okay and then we need a helper function to go ahead and actually get the images as well so this is actually going to be one of our helper functions it's called url4 and what it's essentially doing is it's using a sanity helper that they've created to turn the the picture that we see on the sanity platform that I showed you previously um so it was actually uh where was that it was it was here so any of these images that you guys can see um let's go ahead and check out for example like this one if we go in here so this picture for example how we can pull that and get a URL that we can then render on the screen okay so in this case this is going to be a helper function so first thing I want you to do is create this now we need to create something called environment variables so first thing I'm going to do a dot m dot example now this is good practice you should always have an example file so that way when you commit it you haven't got incorrect things so the example here is actually next public sanity data set next public sending project ID and next public based URL now that all next public because we don't mind if these get shown okay the next thing I need you to do is I want you to go ahead and copy and paste this environment example except this time we're going to go ahead and rename it to environment.local and this is the one that we're going to be using that's actually going to get picked up by our next year server okay so at this point now what I want you to do is we're going to go ahead and put in our first value inside of here so I'm going to go ahead and go to my example I'm going to go ahead and pop in a production the set of the project ID I'll show you how to find that now for the base URL everything that we're trying to basically connect to is off of our existing local uh C API so it's actually our base URL is localhost 3000 at the moment so we're going to use HTTP localhost 3000 as our base URL for now and the project ID is the next step so how do we get the project ID well click on login at Samy's website go ahead and log in to the account that you've set things up with and I'll show you how we find this now this is the one that we went ahead and connected built just now I'm going to be using this one which is the pre-populated one I built for us beforehand so as you can see if I click into it now you can see boosted free that means you successfully redeemed the coupon in the correct way now as you can see members it's got me right here so I'm an admin and you can go ahead and add members that kind of stuff you've got the project ID and you've got your deployed Studio remember the one that I showed you how to deploy so here you can do access rows you can go ahead and Grant access Rose grind access keys that kind of stuff but as we're doing only read only today we don't need to worry about that right I'm going to make a future video in a future build where we can do our lot more of those kind of things revolved around access rights but in this case we can go ahead and copy the project ID like so so I can go ahead and hit save and now we have it in the example oops I've done it in the wrong one this is actually in the wrong one I can actually keep that stuff here but this should have been the one I wanted to put in production and then we're going to go ahead and say base URL uh this one I'm gonna have here I went a bit nuts with the zoom now I know right um okay it's cool cool stuff right so this is pretty good so far so we've got that the next thing you want to do is go to your node compiler running and it should say loaded environments that's new they never used to do that but I always for safety I just cut my server and I restarted to make sure that it pulls in my new environment variables now these environment variables are going to differ when we deploy this online we're going to be able to basically go ahead and customize this but I'm going to show you today how you can do it with the CLI tool as well right so let's go ahead and do the following so now what I want to do is if I need to go ahead and access those variables you say process dot environment then next public the reason why you have this is because you might have a staging environment you might have a deployment a development environment you might have a production environment all that kind of stuff and they could be different in which case you might want to use different sanity Studios or different Sami projects one for your dummy account one for your real account and so forth right so all that kind of stuff is going to play into why you need to do that so at this point we have Sunny is helper created now we need to go ahead and actually pull stuff in as we need to so what we need to do is create our first URL endpoint so what I'm going to do is I'm going to create one for the socials okay so going over to hello.ts I'm going to create a file here and I'm going to call this getsocials.ts and what we're essentially going to do here is I'm going to show you a bunch of different import endpoints that we're going to import a bunch of different dependencies that we're going to import right so the typings we're going to create in just a second all right so you're going to need these as a helper functions we're going to import rocks that we can make group queries we're going to import our sanity client helper from our the one that we just created first step is we create our group query right so heading over to our sort of section over here the first thing you want to do is you want to test out your query right so in this case I just want to pour everything from social right so in this case if I do this query you can see that that gives me this result okay so the first step I want to do here guys is I want to go ahead and actually just say cons query once query equals and I'm going to go ahead and say grock and then back ticks okay and then here I can just basically paste in this query right because I've tested it I know it works and that's how I'm gonna do it okay so that looks pretty good now now the second thing I want to do is I'm going to create a type definition but I'm going to do that afterwards in just a second right so I'm going to actually go ahead and set up a nexjs templated endpoint so if you don't know how to do this simple way of doing it is you simply copy the one that they give you paste it in and change it up as you need right so the data is actually the type here so in this case we can say type data equals and we have to basically pass in a data value right so in this case um we're saying what should the response be structured as and essentially what we're going to do is respond with a list of social elements so these are all going to be social types right So eventually we're going to have some kind of special type that we're going to write called social it's going to be an array of that type okay then what we're going to do is we're going to go ahead and say that we're going to have const socials so we're going to create a new object which is an array of social we're going to say equals a weight right so notice how this is going to be an asynchronous function so we have to add the word async right and also in the new JavaScript they've actually got rid of uh you can do top level away which is awesome right we're going to say sanity client Dot and then we're going to say fetch the query so what this will essentially do is it will go to our back end execute that query okay that we've got right here execute here and then it will get pulled back into this so This result will come back into here all right then what I'm going to do is I'm going to return this on the back end like so so this will return to 200 with the Json inside of it will be socials okay so we're going to do this a bunch of times I'm going to show you how we can create the type definitions and so forth so we're going to do the type definitions right now so we can get past that error so typings dot d dot TS allows us to create a type definition file um or our project so now one thing I want to mention is all of the sanity responses tend to have the following properties they all tend to have something like this sanity body walls always have something that created that ID rev or updated that all right so I'm going to create a base sanity body interface and what we can do with interfaces are they're basically just inheritable types so in this case I'm going to create a new interface and call this one the image type and uh we'll finish them with that one afterwards I'm going to create the first one which is going to be social okay so this one we're going to say export interface uh Richard B says Hey learn from you is golden you really are one of the best results there come across thank you for everything you truly almost made sure thank you dude I appreciate you so much that means everything to me right so we're going to say export interface social and what we're doing is we're extending signing your body so we're saying this is a type or an interface but it has all of this and it has extra stuff okay so then what I did is I looked through here and I thought okay what do we have different here so in this case here we have a type which is always going to be the value social and then we have a title widget string and the URL which is string right so I've essentially done this for you for all of the following ones to come right now images inside of here will actually come in slightly different so if I change this to page info what you will see is Page info comes up with a bunch of stuff now page info we actually only want the first value right so I only want the first value because it's only going to be one document inside there now notice how images come back in this weird format right so rather than showing that weird format every single time I've created a type definition to help you out right so I've gone ahead and I've masked that one over here so we have the correct type definition now to save time what I'm going to do is I'm going to go through each different type and I'm going to go ahead and put it out onto the screen and show you how we're going to go ahead and do it so the first one is Page info so page we've already done social then I'm going to do page info so you can see we've got page info type string and this is essentially just what I've done I've just mimicked it out and they all extend the sanity body right the next one I'm going to do is technology this is going to be like your experience that kind of stuff right the same thing very simple straightforward skill we're going to do as well okay so skill is going to be another one hit save we're going to do the same thing for project and project even references remember some of them were referencing other ones so in this case technology is actually going to refer be referenced here so you've got type technology array that's completely fine you can do that and then we've got experience which we haven't done yet so experience we haven't done yet so we're going to pop in experience over here so at this point you can feel free to pause the video as I was doing that and just basically copy out the type definitions but I just shown you uh how Savvy says seems lazy sunny is it no it's not lazy because I've done the hard work for you but it's already three hours in and we've still got a lot to do so I don't want to spend ages just doing things which are unnecessary instead I've shown you how to do one and then I've shown you how to basically go ahead and copy this out right so that's basically it right the main principle is that is that you just that's how you would find the types and go ahead and write them okay so we've done our first type definition so I can go ahead and import this in done so that's our first back-end type done okay so what I'm going to mention now is I'm going to go ahead and do the following so I've already done get socials I'm going to do the same thing for all the different types now so let's go ahead and do get skills as well right so get skills I'm going to do the same thing guys because trust me we have a lot to do right get skills get skills dot TS get skills dot TS is going to be the next one I've copied and pasted it and then I'm going to go ahead and change this up now accordingly right so for skill we're doing the same query but we're just changing this up we're changing it to this this is now going to be skill instead and we're going to go ahead and change this to a skill array and this is now going to be rather than socials it's going to be skills simple as that right very simple one-to-one swipe away from that so right so we're done the same thing but we just changed it to a scale query instead we're going to copy this again we're going to do the same thing for projects right now for projects remember we I said we actually had um and we don't get uh projects so I'm going to show you so remember in projects we actually had something a bit more interesting so for projects what we actually had was a situation where we have referenced Fields right so it's projects sorry all right so we have reference rules for example example is technology this is a reference now when you have references in sanity well we can do is I can say I want everything but for the Technologies right so technology is what I can do is I can say I want an array but I want you to expand them so that means expansion right I can go ahead and say What fields I want but if I want all of them I just do that and now if I click into technology you'll see has expanded the referenced type right so it will go ahead and get those information that information as well so project that time I've gone ahead and found that one as well okay so for projects what I've done is I've gone ahead and essentially copied that out as well so we've got type project Technologies expanding with an array type make sure you add that if you don't add the array it comes back no and you'll get super confused trust me I happen to me all right so this point we're going to say project is what get returned back and rather than the skill type we're going to change this to the project right amazing stuff get project is done we're going to do the same thing for get page info as well so this one's going to be get page info get page info like so so here we're going to have get page info I'm going to do the exact same thing but remember I said for page info what I did actually want to do was make it so they only got the first one right so in this case I can only get the first thing back and then what we're going to say is rather than projects it's going to be page info page info and what I want you to do here's this and this is not going to be um uh this can be a single value back so we need to change that accordingly okay and this one's going to be page info type which we just went ahead and created earlier right so page info type done as well the final one is get experience right so get experience is very similar to get projects where we had that referenced field so in this case I'm going to do the same thing here I'm going to say get experience okay experience dot yes and here I'm going to go ahead and do the following so where we have the same thing happening for project we just do experience just like that right and then here it's going to be plural I'm going to have rather than projects it's going to be experiences here is going to be experience instead of that type so I'm just changing it here experience and now you can see we have the same thing happening as we need it so all of these endpoints now will go ahead and fetch the relevant information so if you don't believe me let me go ahead and show you right now so if I go over to forward slash let's just say get socials hit enter you will now see this is making a call to the back end and Bam I get my socials back so I've created an API endpoint now right so these are all work in API endpoints guys we're about to break 1.4 K likes well this end is strong my way I think we bloody my 2000 it is right but the way it's going but yeah the type is a return from the endpoint yes exactly so it allows us to type check all right so this is awesome really really good stuff right you guys can see like LinkedIn that kind of stuff coming in okay so the next thing I'm going to do is I'm going to create helpful utility functions on the front end for each of those and then we're going to use those utility functions to make our life easier on the front end so heading over to practice Json at that level create a folder uh call it utils inside of that I'm going to create something called Fetch skills I'm going to start with this one it's going to be a typescript file and the reason why I'm doing this is basically it's going to be a very easy way to go ahead and actually pull the information in so first thing I want to do is I'm going to import the skill typing from skills right and this is going to be our front end call now so the other one was the back end this can be the front end right so we're going to say export const fetch skills export const so oops uh const fetch skills it's gonna be an asynchronous function so in this case I need to say it's an asynchronous function okay and here what I need to do is make a call to my back end right so in this case what I'm now going to do is I'm going to make the following chord so contrary is equals a weight Fetch and I'm basically doing back ticks here I'm passing in process.m dot base URL forward slash API for get skills so basically what I showed you here is exactly what I'm doing that's actually get socials example but here it would be no different it would just be get skills like so okay so that's basically what's going to come back okay and then what we're going to basically say is the data is going to be a weight uh res dot Json right so a very standard programming practice right if this finds can if you find this confusing join us over as your explosator I teach all this stuff inside out right so in this point we basically go ahead and render out we are type checking to make sure that we've got the correct type and then what you can do if you basically need to check at this point you can put a console log there and just check to make sure that it's actually coming through I would do that that's why I was wanting my debugging steps right just to be honest with you that's what I was doing to basically see if it was actually coming through or not because I made a mistake one point well I wasn't fetching the correct way okay so we're going to do the same thing now for each of them fetch experience fetch Region 4 and all that kind of stuff right so I'm going to do the same thing for fetch socials so I'm going to go here I'm going to go ahead and copy paste I'm going to change this to fetch so it shows fetch socials and now I'm going to change this to be the following right so basically at this point I'm literally going to save us a bit of time I've literally pasted this out and just to save us time because it's the same thing I'm doing but with different types and different response types okay so very very simple stuff that I'm doing now same exact principle so instead of doing it again and again I'm going to create this fetch projects past paste in there you go the exact same there's no difference here guys I'm not changing things I'm just changing up that fact it's a project as opposed from a skill and so forth okay so I'm changing the type definitions and I'm changing the URL the same thing I'm going to do for page info okay so I'm gonna go ahead and do that as well now give me two seconds I'm gonna do this as well for page info so fetch page info fetch page info dot TS let's go ahead and do that as well right and then the final one is fetch experiences so fetch experience is so fetch experiences dot TS hit save and I'm gonna pop that in here as well like so all right so hopefully that makes a lot of sense as to why we're doing it that way um but yeah this is actually uh this is going to be really really like a clean way of doing it so this way now we've got five utility functions which are going to help us pull from our back end code okay so that's going to help you out a lot when it comes to creating your clean code now how do I actually pull this into the front end is a question well let's go to index.ts dot TSX and here is where the magic happens so now we're about to do something called getting the static prop so the benefit of using nextges is you can use different types of rendering for different pages on your website right isn't plural experience also experience I know there's no get into it all right so at that point um what you can now do is you can render different pages in different types of ways you can server side render part requests you can have static Pages which means that it's basically going to build it on the server build them up and basically have it waiting there so every time somebody comes it's just gonna basically send that page already ready and rendered the only difference with that is if I updated the information it wouldn't be updated so we're going to do something called ISR which is that perfect Middle Ground which basically says it's going to revalidate the page so statically generated Pages it's going to revalidate every however long we say it could be 10 seconds it could be 100 seconds it could be an hour whatever we want to do and after that it will go ahead and rebuild the stack page and basically prepare it on the server so look into those things such as static page rendering on next.js if you're confused about how I was talking about but otherwise if you want to know more we do cover that as well in zero to full stack hero okay so the way to get this working is basically you want to go ahead and they've got special functions that all you have to do is mention the word inside of the page so right now we're in the index page so we can use this and we're going to say const get static props okay now you want to make sure to use the special uh appropriate type over here so we're going to use this template here called get static props and what you want to do is import this from next JS and props what we're actually going to do is go to the top of the page and we're going to start creating our first set of props now inside of here eventually we're going to have the following props being delivered to our page right so I'm going to import all of the different types and eventually we're going to have all of these be inside of our page so I'm going to go ahead and pour these in like so okay so in this case you can see we've got all the different props coming in and then thank you so much vetri for the donation appreciate you man can you make a budgies in 3GS I will definitely look into it thank you all right so at this point that looks pretty decent um we've got that kind of coming in but here we've got a problem because we're not returning those props that I'm saying so now what I'm going to do is I'm going to show you an example of how I can fetch the page info so here I can say const page info of type page info equals a weight and I can go ahead and say fetch page info and just like that that line will get me the information from the back end right now what I'm actually going to do is do that a few more times with those helper functions that I made earlier so I'm going to go ahead and import these as needed so I'm going to use my little shortcut there there we go now I've got all the data being prepared on the server beforehand all I need to do is return it to the web page in the form of props okay so I can say page info experiences skills projects and socials right now what's awesome is you see it stops complaining because we're passing over the props back in the props come through here in the form of props and what we could even do here at this point is destructure it so I'm just going to get rid of that for now we don't need it right to make our life easier just in the case of the tutorial and we can actually destructure all of these things right here you can actually get all of our props out like so so projects skills and uh socials so I'm destructuring the props come through just like that now remember like I said so what this does is is when we deploy it will basically fetch that data the way that I basically built it out so it will find that data fetch it build that page and then it will cache it okay so it won't rebuild it every time someone requests it it will cache it so at that point in time it's up to date but a minute later it's outdated right so what we can do here is rather than causing us to every time we change sanity I have to redeploy redeploy redeploy I can now add something called a revalidate flag and the revalidate flag means uh next year's is going to attempt to regenerate that page at the most every 10 seconds or every 100 seconds or something like that in between that Gap it's going to keep sharing that cached page so that way it's got The Perfect Balance right so it won't ever be out of date by a certain amount of time so in this case I'm going to add in the following so I'm just doing this for demonstration I'm doing revalidate of 10 seconds right which is quite extreme you probably want to have something a little bit more like kind of greater than that but this way you're never going to be revalidated past 10 seconds right if you want to do per request you change it to get server side rendering and it'll be power request it'll build out the the page so if you ever always want to be done but again that's going to be more intense it's going to take a little bit longer whereas if you cash it like this it's going to be faster okay so now we've got the appropriate information coming in so now we need to feed in feed through the page info and so forth right I'm gonna have a quick water break here all right thank you Ibrahim uh my God yo the viewers are crazy everyone's like there's still 300 people watching wow we are doing amazing guys this is where it gets really interesting because this is where I literally bring it in and all the everything ties together amazingly right it literally looks so cool at this point so now we're going to go ahead and do the following so I'm going to firstly start off with the header right so the header I'm going to pass through the social so I'm going to prop down so I'm going to pass in the socials right so from that um service aisle statically rendered information I'm going to pass in header so our first thing we're gonna have to do now is basically go ahead and prepare our header to accept those props so I need to say you're about to get a social array right so a social type of race that way we know what's coming through right and they will also tell us off if we do it wrong now right so now we can basically say yes we're going to get our socials through and we're type checking so we can't write incorrect code here by accident if we if we correctly add this in right so it's really really good like that now here what we can do is we can go ahead and where we have the social icons I'm going to have this on the side now because it's going to be awesome to see because I'm gonna have my local 3000 on the side and we should be able to slowly start seeing things literally change as we have effects in place all right so right now we've got hard-coded values here of social icons instead of this now what I can do is because I made the time definitions before all that good stuff I can say socials.map and then I can go ahead and do the following I can basically go ahead and replace one of these with the following now remember every time you map through you want to give it a key right so what's a perfect key value here well remember each one had an ID look at this we get the sanity body type definitions and we even get the social type definition so here I can do ID as a key for the URL let's think about it what could we do we could do social dot URL we've got all the information there right so even as a developer it makes your life so much easier by doing this right we're literally a few likes away from 1.4k I'm about to lose my mind right as soon as I save this as soon as I say this like bam look at that that is now coming in from the back end that's literally coming in from the Sony ecms backend right which is incredible so I want to prove to you this is actually working so we go to social right now and I show you guys uh let's just imagine I was to delete my uh Twitter from here right so let's go ahead and remove the Twitter field um I always removed let's go ahead and delete so I'm deleting the Twitter field I'm deleting it and uh it can still be recovered if I want to but now I've not got to it either right so I wanted to update my portfolio I thought maybe I shouldn't include my Twitter for whatever reason right so now if I refresh it's gonna restatically generate or revalidate after 10 seconds and just like that Twitter is gone I mean come on like that's so sick right and it worked and just like that 1.4 K likes smashed through the bag guys this is insane wow we are going so so nicely right now um I I'm this crazy this is actually crazy I'm so excited for this right now because it this is nuts we've not done it like this before right so this is really good the header is now done let's go into our hero section right let's move on to zero section so you see once you've got the help of done once you've done your types your definition is done right it makes it a hell of a lot easier to go ahead and do this very fast right so index let's go head over here guado what is up dude I see you let's go ahead and pass in page influence and this one is going to be called page info we are passing through the page info statically rendered prop right so all I do is I head into my hero I go ahead I pass in the page info this is actually a singular object it's not an array remember we only wanted the first one coming back and then what I can do now is I can go ahead and pass basically pull that through as a property or page info cool now what I can do is I can use that information and remember for example here where we had hi my name is sunny blah blah blah so forth all that good stuff I can now go ahead and do it beforehand so here if I change this to backticks and I change this to a backtick and I change this to something like for example page and find I'm going to do optional chaining in in the event that it wasn't there right not in case it will be there but it could be undefined on the back end right so I'm going to protect ourselves I'm going to say name now you can see hi my name is sunny Sangha should still be working hi my name is undefined okay that's not correct because I forgot to save here so now I've saved here and it should pass through so in a second we should see hi my name is sunny Sangha all right um so in just a second you'll see that and then afterwards we can also get the hero image and so forth so hi my name is sunny sang yay there we go right and then for the image it comes back in a weird day or time remember so we create a helper function earlier in the assignment you help us we can go ahead and import our helper function we pass in our page info so page info dot image so remember we've got the hero image here we've got the different pictures so this one's going to be the hero image I am going to protect ourselves and then what we do is we simply type in url okay do that and just like that in just a second we should still have the same image applied yep that's perfect that's actually the same image I had on mine right so you won't see a difference there because it's actually the same image which is perfect the same thing with the row I've already done it so in this case like one two three I just want to prove to you that it's that's a hard-coded value right so if I did one two three okay and then here what I want to do now is I want to go ahead and say page info dot roll and you can see like because we've done the type definitions beforehand it's so cool right like it works now look at that software engineer bam it comes through amazing right this is so nice like tiberos is morning's only great content as always please keep this awesome work thank you dude for tuning in I appreciate you Israel says you're so excited for me too hi something good evening what's up bro it's good to see you here uh yeah this I'm excited because it's genuinely cool stuff right this is actually really powerful stuff so I love it right you can use account if you want to mess around with stuff I'm going to involve in that right now but yeah that's the hero done okay so hero is done let's go to the about section so you see what we're doing now right we're working our way through and it's then pretty good all right so at this point in the about section so over here now what I need you to do is pass in the uh page info right so same same principles page info goes through here we're going to go ahead and save and then here we're going to pass in page info and this is going to be page info like so okay page info comes through here page info and now we go through and we start replacing stuff so again the image right so here we have a hard-coded image value so what I can now do is the same thing I did previously I can go ahead and do URL for import it as a helper function I can say page info uh image dot URL and it's not actually the image oh the proper Farm Anthem just came on let's think all right can we get to 1.5 kilos I swear to God this is so sick right let's go ahead and do Dot and this one's not hero image this one is profile pic all right so now it's it hasn't broken which means it's the correct one because my one was the same image right hey let's go and then we've got the here is a little background I'm going to keep the same that's a hard-coded value but you can again do the same thing modify a schema change it up and have it in and then for all of this information I'm gonna do one two three to show you and then I'm gonna pull it from Santa is now so page info is not a fan of this music what dude the papa found music is sick for coding all right so let's go we've got background information hit save and look at that nice so everything's looking pretty good headless team says great video something you like the Sunday show I'm waiting with veganism watching with a delay because of pausing but my scroll snap speed is too fast um the scroll snaps too fast a moment I'll make a separate video on smooth scrolling but yeah thank you dude for tuning in man so there you go that pulls in as well so really nice stuff really really nice stuff right um people have done that I know dude it's crazy um so in this case that's looking pretty good so everything's looking good at this point so that's the about page done right so you've got the here's a little bounce now if we update the background stuff it'll come through and then we've got the experience point in the uh part now so here work experience so um one second let me go ahead and do this so we got the index so now work experience so this is where we're gonna pass through our experiences so experiences equals experiences like so uh we need to go and save the file it's going to freak out in a second this is going to be experiences of type experience and we need to import a type definition that means experience is coming through here cool and now rather than rendering these hard-coded values of experience cards what we can now do is we can pass in our actual experience ones right so now I can go ahead and I can do the following I could say experiences dot map [Music] for every single experience singular I want to go ahead and render out an experience card now remember every time you map you should have a key right so experience dot ID and then here I'm still going to pass through the experience we're going to create another prop that goes into it right so at this point Savvy says something your energy is incredible what we know about sometimes [Music] um so this way we got ID we got experience that kind of stuff uh hit save and then I'm gonna go ahead and pass through the experience here as another props it's a singular experience that we passed through here there we go pass that through oops and then here save and now if I go down here we can actually start using these values to depict the pictures that you're seeing inside the experience card right so I was rendering through them that kind of stuff so now if I go ahead and do this I can go and say url4 and I can go ahead and say something like experience Dot and then you can see I've got all of the uh I've got everything that I need right company image dot URL so it's just so nice that we did it so correctly right so that's nice yeah you can spread as well yes you can if you want to yeah I just like to pass in the entire object for type checking purposes right now for this we've got the images popping up for like JavaScript drops for JavaScript instead of that I can now do experience I've got Technologies got map okay and I can say for every single technology I can go ahead and render out the following I can render out the image tag and the attributes for that image tag are actually going to be the following we've got the url4 and now you can see look boom it's coming in it's coming in nice hey look at that the started work and the ended right this one's a bit more interesting what I've done here is I've gone ahead and I've said something like this so I'm going to delete this out the way and now what I've done is I said new date are passing in the initial value so this is experience dot date started okay and then here I've done two date strings so two date strings so let's firstly show that and you'll see look Wednesday December the third year for blah blah right so different dates and again they're dummy information I've not worked there okay I'm not proclaiming to have worked there just so that no one freaks out and then what I'm doing is I'm saying experience and what I'm going to do is I'm going to check I'm going to say are you currently working there so it is currently working there and if you are working there I'm going to say present otherwise it's going to say date ended dot to date strings so in this case I'm working at that place the CEO of Papa fam and these ones are all previous dates right so again there's dummy information I don't want anyone to freak out but that's how you know all right we're nearly at 1.5 K like incredible stuff guys absolutely nuts the final one down here is the summary points right so in this case rather than listing out these hard-coded values we can say experience dot points DOT map for every single point I can literally render out a list item with the point inside of it right and again remember whenever we do this we should have a key and that key will be Point dot oh in this case we could just do okay the point is actually going to be it could be a case where you had two identical points so we're just going to use the index which is not the cleanest way but it's okay for this smallest hit save and Bam look at that guys nice I checked that out now to fix that overflow issue if you ever do experience right so for example here so where it's a little bit big over the line kind of Vibes right so in this case it doesn't matter too much because it still looks pretty clean but you can fix it by Simply Having a maximum height on that unordered list container right so you can have something like height uh 50 or something wait a second just checking off the top of my head it's kind of difficult I yeah you could do something like this and then you can have it scrollable so you can have something like a overflow scroll I haven't prepped this one to overflow why um sorry um overflow why screw there you go nice and then you could have that as a scrollable container if you did have something longer right so you could do it that way just as an example guys I just want you to know all your options right so 96 I think is another good one yeah so we could do something like that right 96 and then you could go ahead and even customize it for this you can even do scroll bar uh thin there you go and then we could say scroll bar color scroll bar [Music] um track is black look at that oh I'm just freehanding this right now scroll bar um thumb could be something like thumb could be our Papa fam color which is I'm just gonna see if I've got in my saved things so I'm gonna do something like this all right so thumb there we go all right so in that case you could do it that way so if you wanted to that's just an example right you could do something like that it's not got the X as well but you could also do overflow on both directions if you wanted um to have a scroll in that direction so you could have a height and you can have a width of like 96 or a Max width of something like that um yeah this one I'm not going to get too far into but yeah you can go wild with this right and really change it up as you want um oh sorry I've done it as that 52. oh God okay that's horrible I just need to do like forfeits yeah so you can feel free to like change up as you want right but the point is you can go ahead and mess around with all that stuff yourself I don't want to go and break loads of stuff uh because I'm live and it's a bit difficult on live stream so there you go so that's how you would go ahead and fix if it was to overflow right um okay cool and again if you want to do you can do Max height right if you really wanted it so that way it won't break when it's big screen yeah so that's a nice way of doing it as well alright so max high and then it will show that and I know there's a bit of padding issue there you can add a padding right if you really want to fix it it's very simple to do this kind of stuff so there you go planning right five there you go look at that very clean all right so that was a live sort of uh fix on the on that right so you saw me do it actually live okay so there you go and you've got your skills popping in um that one's kind of strange I think it's just a bug right now yeah it's just a bug um now I did want to show um what's it guys here we got another project yeah that's cool awesome stuff okay so let's just carry on with the rest of the implementation so we've got the experience card rendering out so let's go back to index now we've got skills projects and contact me also skills and projects next so on index let's carry on strong so we've got skills I'm gonna pass through so skills equals skills and that's going to be the prop that we've uh statically page rendered save head over to skills and this is going to be a skills typing array this is going to be skill and here we've got a two clashing thing we got a clashing type so I can say as skill type I can rename it all right so that's how you basically go ahead and do that right so now you've got the skills here so rather than doing all of this you can go ahead and have the uh a mapping function instead right so you can go ahead and say something like um skills.map so skills.map and then here I can say skill for every single skill I want to render out a skill with the key being a skill dot ID and I'm gonna pass through the actual skill as a prop right and then yeah I'll do for now so I could basically go ahead and do something like that hit save cool and then we need to say that it's now accepting that prop so this will be of type skill so we can say yep a skill comes in and as a singular we go ahead and pull that through as a prop so you see what I'm doing here right and then you can eventually use that skill in the creation of all of this stuff so you can see here um skill Dot and what is it so you can see if you forget it it's perfect because you have it there dot URL right so the skill comes through there and then the actual skill progress itself can be pulled in like so here so we can have our percentage afterwards and here you could say skill dot progress just like that and Bam you have loads of different skills that is awesome right that one's coming in late I don't know why that's coming tonight but I'll show you a little trick now right so that's pretty damn cool right that was very very nice how I did the skills one now I want to show you how we would go ahead and um I love that someone goes why doesn't he look tired honestly I was crazy I don't know it's stamina dude that's all it is right so here I've got a little trick I want to show you right so what if we want to go ahead and get the first half to animate one way and the other half to animate the other way right so I'm going to show you how we can do that Michael for the first time live cheers from Czech Republic what's up dude good to see you in the house welcome to the Papa fam uh yeah man good to see you almost at 1.5 K likes right so um I'm actually going out after this I'm gonna be that crazy all right so um at this point we've got uh get first half of skills map so I want to go ahead and show you how we can half them have half of them coming in the left half of them animating in from the right right so we actually implemented this functionality earlier oops I've done that what the hell am I doing yep we've actually implemented that earlier over here so remember Direction left so what I need to do is pass the end but I need to basically say grab the first half and grab the second half so how do we do this well the first thing is I just copy it twice and I'll show you how we did it look copy it twice and then we just need to slice and slice right so now I say slice and what I'm going to do is I'm going to go ahead and say the for the first half plus skills.length divided by 2. so that will give me the first half okay and then the second one I say slice and here I'll do the opposite I'll say skills dot length skills dot length divided by two right all the way up into the ending so skills dot length so basically I'm getting the last leg of them afterwards okay and now what I'm going to do with this one is I'm going to actually say Direction left okay so now if we refresh you should see if I go to skills let's go ahead and say skills oh look at that look it does half and half and I always do it based on the length it'll get half and then it'll be the other half look at that boom oh so clean it's so clean right there you go that looks awesome right so in that case that's how you do it right that's how you do a little trick and you can kind of do that stuff replaces mind-blowing energy amazing stuff um per PC says map function very useful haven't seen it in every project yes I actually just dropped the whole series of function tutorials inside of zero to full stack hero map functions filter functions reduce functions all of it is inside zero to full stack hero it's amazing uh okay because I spent a lot of time with it that's why it's amazing right so the next thing is we're going to go to index.tsx and now we're going to go to projects right so the final hurdle is nearly upon us right so um projects so this one here if we go to projects here we go to say projects let's go ahead and go inside and now here what I do as I say projects is of type project oh God project and import it so remember it's an array because it's a number of them and then here we can get rid of our hard-coded one that we were using for testing thank you guys for loving that tip I appreciate this awesome stuff all right and then here we can say it see it's it's undefined at the moment that's because we need to do a hard refresh right so you need to actually hard refresh that one and then here it says undefined so project start map okay so this is interesting oh it's because I didn't save it last night it's not that interesting all right there you go all right so hydrogen for that there we go forget that it'll refresh it's trying to reload there you go so here we had three things popping up and it hasn't got the incorrect the correct information so what do I do here firstly I'm going to do a little trick to get the information in so I say URL for oops URL for oh I love this song project dot uh image dot URL and then we've got the case study one of some soft yeah and then the the title here so we'll have there's a project. title oops sorry title there we go and even here we can say something like um project got summary again we'll protect ourselves so now you can see we've got the different ones the restaurant menu Google clone Google clone restaurant menu nice they're coming in awesome stuff and then we all we we just need to do the um the tech used bit right so I didn't do the tech used here so what we actually forgot to do here was for the um I believe it's for it was where's my deployed one uh let me have like one second um okay there's another one all right so here what we can now do is I I do have Tech used I think here I believe I didn't think I actually labeled out okay so I'll show you how to do it now it's fine right so where we have this right here we can simply do the following right so you can actually go ahead and do um project door Technologies dot map but for every single technology I'm doing this freehand so it's fine so we do image um for every single one we're gonna have a key and it's going to be the technology dot ID and then for the source it's going to be a safely accessing and the reason why I can do this fast is because we've got typescript there so it's actually very safe for doing this can actually damaging dot URL and just like that power right class name is going to be height and width of 10. okay and that's actually too big so let's do something like five and what we'll do is we'll oh no that's too small now oh oops what have I done okay and what you can do here is I can wrap the entire thing in a div uh go back here and I can say that this is actually going to be 10. uh the div can be a flex block so Flex item Center to keep them aligned and quite honestly you could just kind of keep going with it right so you could do that justify them in the center so it's bomb and just like that guys like what the hell man that's crazy in it like look look at that like it shows all the the things that wasn't even on the the deployed version I was just there so absolutely incredible so now you can see your projects you can see all your kind of stuff there a little glitch I'm not sure what's going on um to be fair that's just a weird timing glitch it's only happening while I'm live that's not actually an actual yeah there you go see um but yeah absolutely incredible stuff and the contact form right so quick little breakdown of what we've done so far we've got Sony ecms powering this thing you know let's go back to our actual front there we go we've got a lot of social icons everything being pulled in now is effectively being pulled in from the back end look at the animation so slick all of this stuff's being pulled in from Sony CMS the social icons the name the row we slide down we've got our background we've got the picture we've got the summary all this stuff again coming from the back end right being revalidated every single 10 seconds so if you were to go ahead and change it your ISR will kick in after 10 seconds it will pull that new information cache that page the next person who comes in will see that so you're going to get updated values right if you really want to be anal about you can service out render it's fine right go down further you've got the skills being pulled in again all the different progress like you see that like react why am I what did Jay give me ah there you go thank you Jay gave me that announcement I don't even think I'm not in Amazon but thank you um give me night next year we trying to say dude all right so at this point uh we've got the projects here and then we can go ahead and scroll through so you can see we've got all of this information the different Tech that we've used all this kind of stuff do my code says please probably are you going to upload this video and channel yes dude as soon as I'm done it's uploaded it stays on the channel right and then we go down further and we've got I've got just switching here let's talk right very slick very kind of cool stuff right for currency proficiency typo oh damn it uh current proficiency yeah I type oh currency oh yeah okay I'm gonna fix that um skills skills there you go someone's gonna call me I never Jay fixed it he comes in class see how sharp Jay is right he gets me on those things like current proficiency there we go all right Saturday well spent thank you Ibrahim that's amazing stuff absolutely incredible all right so at this point all we have left to do is deploy this bad boy and then we can go home and we can sleep right I'm joking amazing stuff right Cyrus or nazarus says it's really live yes it is live right we're so close to 1.5 K likes as well you guys have been absolutely incredible today thank you so damn much right for you guys the participation uh everything is not mind-blowing right so at this point what I need you to do is we're going to go ahead and deploy all right so we're gonna go ahead and you've already installed the sanity CLI tools I believe no we haven't done that okay so sanity CLI you need to install the Sony ecli tools because we're going to go ahead and actually deploy with the Sony ecli right so in this case you need to install Samy's CLI tools over here and I'm just going to check oh sorry no we're we're my bad we're deploying to the cell now right we're deploying to the cell again ahead of myself right so what we need is we need the cell CLI tools right so this is where we need it so at this point now what you need to do is run the following command to go ahead and actually install it into your machine so I've already done this installed it globally into my machine so I can use the CLI tools like so right the second step is I'm going to be deploying from I've shown you in a bunch of builds how to deploy from uh Verso in in like and loads of builds I've showed you this right so what I would recommend is that now you just try to CLI approach the reason why I'm going to show you this as well is because we're actually going to pull that data from our statically from our local running um API and then I'm going to show you how you can do it that way as well and yes you can deploy both and do it the normal the cell way on the UI but I'm going to show you this way as well right so I'm going to go ahead and check all right now so we've already done this we've already done this I'm going to deploy from the CLI so first step we need to do guys is the cell build so I'm going to go ahead into my code and I'm going to go into this right here and I'm going to go into zsh second one I'm going to say the cell build right and firstly this is going to find the issue so I'm gonna say yes enter set up uh document goes yes enter that's fine switch scope should contains any Sangha that's fine link to existing project no enter project name that's fine we could do that uh enter it's all in the home directory anyway so it's fine okay so I'm deploying everything at this point okay so at this point it's uploading my code and it's getting everything ready and then it's going to say would you want to modify these settings no I do not so enter a lot of the default things here are actually what we care about right what we need so it's going to go ahead and try and build out my production build now so at this point I will either get errors saying you've done something wrong in your typescript you're not allowed to push this to production in this case we've got a missing key prop inside a project so it's good you see this and we've also got an error in our pages so let's go ahead and fix those errors so typescript is calling us out on it saying you're not allowed to do that if I'm not allowed you're not allowed in this case Sunday's portfolio um here you can actually change this to page info um dot name all right so okay so Sunny Sanga portfolio something like that you could do and that's fine that one fixed that and then we could also do missing key props or projects so you gotta you're getting a live representation of actually how this would go down right so projects is at 24. let's go here to uh key okay so I wasn't putting a key in here so that's right project dot ID there you go awesome stuff let's do it again the cell build suddenly take a little walk back and I think you did all right while that's building water break foreign thing says I'm 15 Junior front-end developer two years experience thanks for your amazing video inspires me a lot thank you dude amazing stuff keep it on look at that guys incredible stuff so it created the pages all right so you can see here we've got all the API endpoints it created the pages and it's statically with ISR rendered the page okay so this is good because the load time was actually quite long which means that now it will be statically rendered rendering that content which means it'll be a lot faster which is good okay so at this point now I need to deploy it right so what I'm going to do is I'm going to do versus deploy pre-built so the stuff that I just built I'm going to do versal deploy pre-built and now this will actually go ahead and deploy it out and give us a URL back so that way and then you can go on the UI Online check out that kind of stuff right so at this point let's go ahead and see for ourselves the deployed URL right and I'm gonna go ahead and uh just check on something right now while they slow down so while that's happening we are almost there guys we're almost at the end we've been covering loads in this build today we literally have had react next.js loads of stuff different happening uh Sunny E frame of motion telling CSS tons and tons and tons of different things in today's build react took form versus CLI all that good stuff right so let's just wait for this to go down and do his thing and deploy and then we can go ahead and see ourselves the final thing so yeah you guys can see right now for yourselves that this is actually an awesome way of doing it um okay in spread production there you go so I've got a production build there so I'm gonna go ahead and show it on the screen in just a second I don't want it getting flooded and then dude Austin and I have to everything's going to crap all right so let's go ahead and load this up right now give me one second okay guys are you ready in three T1 and we're about to break 500 Lies when we when we break 1.5 K lies I'll give a demo of a deploy that right now so two likes away two lights away literally don't leave me hanging there all right don't leave me hanging there one more like three two one one point five k likes that's what I'm talking about check it out guys bam look at that everything looking absolutely beautiful deployed working it's fresh yeah I mean just absolutely fresh right really clean really slick everything's working and it was deployed from the CLI right so everything was deployed from the CLI in the way that we expected it and it's going to be using ISO now as I mentioned if you want to do it the normal way you can definitely do that and if I would highly recommend that you would also go ahead and deploy your sanity Studio that kind of stuff so that way when it does the ISR all that kind of stuff oh no it would do that anyway from the URLs but yeah as you would have to change your base URL to your deployed URL so that way it could be online doing that kind of recheck because when you close your localhost eventually your ISR won't be able to fetch from anywhere so heads up on that front but otherwise this has been one hell of a build guys it's been absolutely crazy oh my God like absolutely Next Level stuff this is crazy Barn says the master need some massage guys let's just go take a rest please and continue honestly thank you so much for tuning in let's do a nice little run through again beautiful animations fully responsive build today pulling in from a sanity content platform absolutely incredible stuff using the grock querying language very similar to graphql it's Dynamic it's updatable it's amazing the proficiency is spelled wrong it's it's four hours of genuine coding that's why right and then we have this awesome snap tool stuff that we haven't done in any build before we haven't used frame emotional on live before this is really something like I'm very proud of and I hope that you guys can benefit from on make your portfolios look beautiful as always guys this is the pumper farm and this is only one way to end this out right there's only one way we're gonna do this in the correct fashion first I just want to say a massive thank you as well to everyone tuned in today you guys are absolutely incredible still 300 people watching I don't know what to say I actually don't know what to say you guys blow me away right we're literally at 160 8 000 subscribers if you're watching the replay of this absolutely nuts we built really amazing project the reason why I wanted to do this so bad is because I know a lot of you are trying to get jobs out there I know a lot of you are trying to push and this will help you just stand out a little bit amongst the rest of the other developers who are trying to do it as well so this should help you out for a little bit and getting that extra job interview extra sort of step towards that career that you look after and as always guys enjoy the free content on the channel if you want to join us at the papa Farm head over to zero to full stack hero to jump into the community aspect of things but otherwise enjoy this stuff guys enjoy the process of coding and as always I love and appreciate every single one of you this is your boy Papa react with the portfolio portfolio 2.0 thank you for tuning in crazy stuff yeah I'll see you in the next one peace already with you hey I'm literally shaking the the energy is nuts enjoy Papa fam peace [Music]

Channel: Sonny Sangha

Views: 745,716

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: urgi2iz9P6U

Length: 234min 44sec (14084 seconds)

Published: Sat Sep 17 2022