[LIVE] Create a Gridsome Portfolio - Vue.js project

hi everyone welcome to the stream how are you so as you can tell from the title i thought it would be fun to kind of decide via a poll what i should work on in the stream today and there's this cool site that i found out about on another stream i think it was on coding garden stream let me zoom in here so it's basically a chat poll i can create options here and you guys get to vote in the chat and i wanted to see how well it worked out so i basically put in my twitch id and then i can choose options here so i'm going to put in my twitch id twitch so it's five to three all right looks like i'm going to be building a gridson portfolio page let me create a new repo then so we can plan this and i'll call this grid some [Music] portfolio uh portfolio oh let me zoom in portfolio page built with ujs and gridsome public i'm going to initialize with actually no because i'm going to create a project board so let me create a project board and i'm going to call this mvp to do's not that this is a big site so i don't know if i need an mvp but let me create an ideas column and then i can create let's say to do column and then i'll create in progress and then i need a done column completed okay so if we're going to so actually this should be something like user stories or something right so it doesn't matter because this is a small project so what what pieces of a portfolio would we need so what do we want to show off i guess we want to show a section for projects users can show off their projects viewers can see social media information anyone have any input here we're making a portfolio page in gridsome so we're just coming up with some requirements first experience okay um okay users can show off their experience their i guess previous previous experience this would be work related because their side projects will be in the projects part volunteer i shouldn't call this users why am i calling these people users so let's say devs with this portfolio devs can show off their previous work experience because they're not really users of the app they're the people who host this app i don't know i'll change it to devs contact section with lots of icons future learning goals all right oh wait uh contact section with lots of icons okay that kind of goes along with the social media one certificates okay client testimonials i like the testimonials testimonials section yeah this is better than typing out a whole sentence uh certificates is good cert certifications certificates um i wonder if that would go in education maybe in the education section testimonials uh currently learning currently learning yeah that would be interesting to put on a blog i think currently learning because i think that's the best way to write about what you're working on the struggles you have not just like have a progress bar that says javascript above it i'm learning javascript i'm 80 javascript that's kind of weird okay um i think i got all of these oh testimonials will be images i think testimonials will be quotes that will be um yeah just text like someone says oh i loved working with gwen she did a great job and that would be a testimonial about me okay so these are the different oh yeah and should also have some kind of about me section and then we we need to have a profile image to personalize it make us look human okay so all these things and where was that one future learning girls oh currently learning let me edit this one to blog maybe okay okay so now i have to i want to kind of scrub these and turn them into to do's so let's see um what would come first a section with lots of icons um i think so an about me section and i think this should actually have the profile image like some kind of image of my face unless we put that in a header at the top so i might i might mock this up okay and then let's see i'm gonna get rid of this one so if we have the personal stuff at the top and then the rest of the sections can be interchangeable so it would be really cool if we made this an app that people kind of spun up and chose their sections and then it generated a portfolio for them that would be cool i would need a back end to do that some kind of server can we export to pdf and generate a resume that's that's a good idea generate a resume this is already a bigger project not just a single static page alright so let me edit this to match the rest of the the style of the rest of the to do's so project section with cards with cards that have a title description no title technologies used image and link to code okay be developed using cdns or does it get harder um you mean for the libraries that we want i'm sure we could develop it via cdns if um you mean instead of everything like just make an html document and use cdns i think it would get difficult because then we basically have to create our own file management system like how how are we going to import files manage files we're then going to have to import babel and if we want to use view components we have to import a separate library to use view components on top of you and it it just gets too difficult it's much easier to use a cli to generate an app with single file components yeah i think it it will be too difficult to manage it wouldn't be too difficult but it would take a long time to set up yeah generate resume that's definitely version two currently learning we can get to that we definitely need this certificate certifications i don't know users could pick which section they want first so i don't know if the section matters contact section that's good and that actually goes along with is um oh yeah work experience too oh social media information so let me delete that card okay and actually because this contact session section will have contact section with lots of icons it will have um social media information those are the icons i'm assuming what other icons would you have why are you crying vasteth is this not what you wanted were you the one who suggested it oh someone suggested uh writing view with typescript i will have some view and typescript but when v3 comes out not just the rc oh yeah for macion okay all right so i think actually the first to do since this is a front-end application is i'm gonna open balsamic where's balsamic let me start a new project can i zoom in here no i can't can you see that okay oh that's big oh i zoomed i see you zoom in on the actual screen here okay let me oh that's kind of cool it's right behind me in my chair that's it cool all right so this is a mock-up tool i guess and now i can put the different sections on here okay so we need an about me section so should we make this on one page yeah awesome that was it font awesome not bootstrap although bootstrap is coming out with their own icon set now in bootstrap 5 that's coming out which is an alpha now so we'll get we won't we will no longer have to use fo awesome for small projects it'll just be part of bootstrap should we let me ask does anyone have a recommendation should we make this just one long page with all these sections and then have links at the top yeah or should we make these different pages and use view router and route between the pages yes one long page with navbar okay so let me do horizontal line and then we'll have some text here and because it's a portfolio it'll probably be someone's name i guess i can just put gwen for the space gwen and then so just a simple nav bar i would have about now it's so zoomed in it's getting big so about and then all the rest of the links uh projects and then contact and let me zoom out one more i have to make this bigger there's going to be quite a few links actually so this one would be education and then so on and we can add more sections here however many and then at the top so if we have an image here image one page okay so everyone thinks it's one page so how do you think we should have the image maybe like this some kind of image it could be more styled than that like make a rounded image some kind of background if the page is going to be center aligned it would be better to have the nav bar towards the left um like move all these links to the left uh we can always try it as we're building and see what looks better oh a draw menu okay yeah we can make a draw menu have some kind of menu icon that comes out uh let me actually move these then so let me get a button and say menu and then i can duplicate this mock-up and now when the menus open i'll let me do a rectangle to kind of mimic it so this is when the jaws open oh bring to front ring to front so we'd have about wait bring to front all right in projects yeah that's good because we might have more menu items so the spacing's a little off let me fix that all right okay so this is when the draws open and then this is the menu button so i can delete these hi i'm gwen and then actually i can copy this text i'm a software developer who works with x and likes to do y oh no that's not multiline let me copy that then i think i have to get something else here like text has anyone else used balsamiq before i really like it a lot it's just easy for someone like me who doesn't work in design software every day to just come in here make quick mock-ups okay so we can do something like this or i guess it doesn't matter if it's on the right or the left there and then use draw.io you know i try i tried to use that and sometimes it errors in my browser i'll have to try again this year and see if they made it better so we should probably have um different backgrounds here right so let me do a rectangle like colored background so as you scroll down the sections are different colors so i can change the color here oh no that's really deep okay that's okay and then [Music] i can put you know more text there and that would be the next section like that and then contact would be at the bottom um so this would be projects so if i had projects figma isn't fig so figma is more advanced because i worked with one company that used figma i mean their professional designers used figma so i think that's more complicated i only looked at it from like they were sharing the designs with me i didn't actually use it for designing myself so if we have project cards here i don't know like depending on the screen size you could have two or three in a row and with an image let me just grab that image okay and this would be a screenshot of whatever you built i guess okay have you tried new morphism effect no i i don't think i've heard of that what is that that for design okay so this and then basically i would have um let me change the size of that so actually even smaller my app won then my app too and then do some technologies at the bottom which we could have um what do you call those things like they probably don't have them in here let me just make one real quick like for the technologies that you used this little rectangle and then let me do small text okay oh wait wait wait no so this should be javascript these are tags or something you know what i mean basically it shows all of the things that you used but the good thing is that you don't need a professional to be professional to use figma i think you can still work with this tool without being a professional more versatile than balsamic okay maybe i'll check it out then um i've just been using balsamic for so long it's something that i know i can use and i just open and it just works and also with me having to learn video editing tools i guess i haven't looked into upgrading my design knowledge recently uh i don't know maybe this one is an aws project or something but you can put as many tags as you want here okay that's good so that's basically it you put the technologies at the bottom app title image and then oh yeah let me call this grid some [Music] portfolio okay i think that looks good the only other section i'm going to do is the contact section every other section i think we can just build or design as we go along so let me put the contact section here and this one like like you mentioned uh this one won't just have i guess the icons do they have those icons yeah some kind of icons here twitter linkedin and what what other icons what was the other one oh yeah instagram people use instagram there we go like the big social media and then i don't know if developers use tick-tock or not i haven't really been on tik-tok but kind of a young people's platform all right cool so i have these i can move them over and so that's basically the mock-up now if i export this uh let me see oh yeah that's with the draw open maybe i don't need to export it because i can just reference it here oh yeah i had the other project open okay so now i need to create the actual grid some project for this so let me um where should i put it let me put it in the tutorials folder i have for right now oh wait i already have a gridson tutorial though uh yeah i already have great sum in there um let me go somewhere else then let me just make a directory here and i'll move it later so make directory grid some portfolio and cd grid some portfolio and now i need to install gridsum and i think it's an mpx command so where did my browser go did i lose my browser oh here it is okay so let me move the browser over here and actually i can close these because i won't actually be doing that app today so let me close those apps alright now i just have the terminal and the browser and let me open the grid some docs okay so um where is talks about jam stack okay here it is install gridsome so i think i might have it installed globally i can't remember if i used that or npx but let me try because i could do grid some create and then my project name so let me do grid some create portfolio app okay this takes takes a minute so i guess i did install the cli globally i think it's going to take a couple of minutes to install does anyone here use strappy oh that only took one minute i was gonna say if we wanted to at the end make a quick spin up a quick blog and hook grid some into it that would be interesting because strappy is so easy to to spin up an instance and add blog posts okay so cd portfolio app and then i'm going to open the code and do grid some develop okay and grid some develop and that should open it here oh maybe didn't let me go to that port okay and now let me move the code over here oh now let me move the code here all right and now i have a grid some page with basic routing now of course so with grid sum they give me the router so it wasn't like regular view where i have an option for them to install the router hi to sylvie how are you so it just comes with it so even though we're not using it right now i mean we might create a separate blog page or something later so it might be useful so let me go into source and then i guess if you've never seen grid some before i guess i could give a tour so as you can see this is just a regular javascript project and it's laid out in the same way that a regular view cli project would be with the source folder and then of course the package.json now it has these two specific grid some files this one you can add plugins and stuff later if we need a plugin for something the server this is where so you pull in all your api data in this server um in the server file and then it gets compiled into like one grid some data source that's available to all your pages and components not grid some graphql so then your components can query all of the data that you pulled into your application with graphql queries which is kind of cool especially for small applications all right so we might get to those later and now if you go in the source folder it's it's very similar to a regular uh view application except there's a lot of stuff that's abstracted away from you so you don't see the regular view config server side rendering uh yeah i've done i've done some server side rendering but grid some isn't doesn't do server-side rendering um although in some ways gritsum is similar to nuxt which does do that uh this is just a static site generator basically so let's see um with with some really cool features actually all right so we have our pages and then see it's registering this layout component so all of the pages will go inside of the layout component um it's just kind of like when you start a view application and you know you have the app.view file and usually you put the nav bar you put all your global components in that app.view file and then you have your regular router views nested inside so that's what happens in this layouts file you have this slot right here if you can see this slot is where all of your components will be shown on the screen as you can see the where is it you can see the header up top and then this is the component for home or about that shows up in a slot so instead of router view it just uses the slot syntax which is already part of you um okay so i guess we can start with this this header component because that's the nav bar so what i guess what um design framework should we use here i don't think gridson comes with any yeah dependencies grid sum um what design framework should we use here do i do things in react as well i have in the past on my channel i don't know if i've ever done anything in react maybe i will in the future can we use beautify it always comes down to beautify all right if no one has an objection i'll use react plus redux yeah maybe so maybe in the future i'll do a react tutorial i don't know if i'll use redux again i use that for a couple years and i think there are better options than redux now at least in my opinion anyway not to say that redux is dead or anything uh hi ricardo i got my job a few days ago as a front-end developer i will start next tuesday first real job congrats at the moment i'm afraid a lot stressed doubtful if i'll be able to live up to it is it normal yeah i definitely felt the same way actually for my first two jobs um because my first job i just had for like seven months and then my next job was longer but i think that's a perfectly normal thought the good news is that any kind of code base or tech skill pretty much is something you can learn on the job within the first couple months so um you know companies who hire junior developers or mid-level developers or any kind of developer can really expect you to be i can't remember where i was going with this i had a point uh can you really expect you to be productive in a few months um so i can't remember what i was gonna say it was the same thing i said in my video about this topic uh yeah but i wouldn't get too stressed out about um you know can you get anything done right away because like i said they expect you to be productive in a few months so you know take your time with contributing with learning the code base just start by downloading the code base and looking through like line by line file by file ask yourself what does this do and you pretty much have a sandbox on your computer so you can break things in the code base try things out get to know the code really well and then you'll be able to do pretty much anything with the repo with making updates and stuff even now like when i because i consult in so many different projects it's like i download sometimes i download these repos that are you know like one of them was like a million lines of code and i got so stressed out at first i didn't even want to look at it and then i told myself okay calm down i'm just gonna i'm not gonna stress myself out i'm just going to look file by file and not pressure myself to understand anything and then the understanding kind of comes as a front-end developer we bound to create full html design of a project or do we do any everything between creating full html that depends on the company everyone has a different idea of what a front-end developer is supposed to do so sometimes they expect you to do design work and usually good companies will put in the job description ux if they expect design like ui ux but for just a front-end developer i don't think they should expect you to do any heavy design work but sometimes even now companies will want to add a feature and they'll say i don't know what it i want it to look like so then i just guess i just say okay well i'm just going to make it match the rest of the site as much as i can yeah but that it really depends on the company and one thing i've found from so many jobs is that companies really don't know the proper titles for things like they call front end full stack and uh you know back end they just they mix up all these titles so yeah anyway i kind of got lost in that now let me get rid of this header so the only suggestion i got is beautify so i guess i'm going to be using beautify so um now with grid some let's see i don't think because with beautify usually i add it as uh uh what do you call it as a vcli plugin gatsby's good this this is pretty much gatsby for view grid sum is the same thing as gatsby except in view do the same things uses graphql pretty much in the exact same way in fact in the docs it says that it's heavily inspired by gatsby okay so let me do oh it comes up i typed in design on gritsim and it comes up with beautify global processor files okay using css and gritsum okay so the source assets which we already have source oh i thought it created it for us maybe not assets folder imported are usually located in the source assets folder and imported into source main.js okay so we could do our own sas it's saying to enable sas yeah there's no reason they should expect productivity from you if they're any kind of a quality company they can't expect productivity from you in the first week or two to enable sas you need to run the command npm install actually i know i'm getting sidetracked but large companies don't expect productivity for you literally for three months they don't even expect you to make a pr for three months if you work on some really large projects when i first saw that i was like that's crazy three months into a job but yeah so smaller companies of course the code is smaller so you can make contributions before that um to enable sas uh npm install okay so this is talking about enable sas and css preprocessors global preprocessor files it had something oh add a css framework okay here it is it's talking about tailwind or tailwind just the example it has bulma plug-in coming okay these are plugins for boofy i've actually never used buffy bootstrap view okay here's beautify to install okay so it's saying to follow the npm install guidelines and then okay so that's version 1.5 version two so we're definitely using version two so let let me first install or is it beautify so oh right right isn't it bulma for vue i think that's it i know i've heard that name before i used bulma at one company um i don't know if we were using it fully but it didn't seem to do very much u plus graph i do i really like graphql there are a lot of good ideas in graphql okay why is it installing happy isn't happy the a server-side framework by made by walmart oh hi jared i didn't even know that was you good to see you do i have a tutorial for graphql not yet but it's on my list by the way for anyone who's joined this is the project we're working on we voted on what we were going to build and we basically voted twice and it came down to using vue.js and building a portfolio in gridson so wow my computer just started blowing fans and running hot man beautify is really taking up a lot of juice you're seeing messages twice yeah i know i don't know how to get i can move my mic ah oops did i break it no yeah i don't know how to get rid of that though beautify is bad for the environment yeah okay well it's probably the streaming software that's also recording and everything else that's going on and then beautify is just like the icing layer is anyone else seeing messages twice fans association okay it's just mobile twitch app um yeah i don't know okay so now i have beautify installed and i need to set it up and it's saying to add it says then you will need to register the beautify plug-in include the vidify css file and add a link to the head for google's material design icons in your main js file okay with vidify 2.0 you need to pass a new instance of vidify to app options okay so that's how to install beautify with options and the icons as well which come from material design you can install them as a local dependency or add them as a style sheet in your head from a cdn okay let me try to install them locally the icons okay and then i have to import the css for the icons oops let me go back to the grid some docs testimonials as json in the repo that's a good question um yeah i don't know we could do that um or we could just just put it in plain text it depends how many testimonials we have if you have a lot of testimonials then maybe in json okay so oh yeah so i installed the icons and now i can put this i'm just going to copy paste this inside of my app.js file or my main.js file and let's see okay so i can get rid of this i have that and then it's also already app options head yeah i don't need the router anywhere and i'm still registering the layout component so i can get rid of this actually [Music] and okay that looks good oh and it's pulling in the fonts as well head.link.push for the fonts oh and it's pulling in the material design icons too so actually i'm gonna i'm gonna un install that library because it's already putting them in the head tag so whatever i'm gonna do mdi slash font uninstall all right you would like to add one oh to my to my testimonials uh this it would be cool if we had uh some kind of yeah if we made this into a portfolio generator app i think that would be an interesting project maybe that's where you were headed when you made the suggestion earlier i don't know okay finally there is one last thing you will need to do in order to build your application with beautify you will need to whitelist beautify in webpack in order to build yes it is a real portfolio it is a real portfolio i'm just thinking like 10 steps in the future yeah um i don't know if i'll use it for my portfolio um so right now this is my portfolio which is not a portfolio at all it's basically a blog and i have oh i do have my portfolio which only links to github that's kind of sad maybe i do need a portfolio with projects and stuff yeah so i haven't put much work into my portfolio for a while okay so it says i have one more step to do which is install webpack node externals plug-in because i need to white list view to fi and webpack in order to build okay so i feel like they should make this easier like a one-step install i don't know like have it grid some plug-ins basically so [Music] okay let me install that and then to modify okay then i need to modify my server file to include that no pack web externals package i need to add a chain webpack here which i can do in here okay so i have that plug-in and i set it up or save your bundle size by using beautify tree shaking i'm okay i can do the tree shaking later okay that's it then it's only like five steps and now i should have oh i need to run my server so grid some develop you love this template good maybe i can get some ideas view live preview this is nice yeah that's good i kind of like this actually this bar on the side i don't know if i can beat this one awards and certifications it's kind of straightforward like there's nothing fancy here it looks more like a resume made into a poor an online portfolio education skills interest awards and there's no project piece i guess because this guy already has you know he's already a senior web developer so maybe he's beyond the need for portfolio okay so that's definitely a good one oh that kind of nav bar i yeah maybe we could do that and not have the menu or we could have it where it folds out or stays in if we wanted to i can move it to the left i don't know then i guess i wouldn't have my name there if it stayed out the whole time it would be like that i've just always put the menu bar on the right because then i figure if someone's on a phone it's easier to get to from the right you have to move their hand all the way across the screen to get to the left isn't as exciting as that desktop nav yeah it's not not at all all right so cannot get oh syntax error um let's see this is in main.js 1621 oh i know why because i copy pasted from the docs and yeah so the dot was a placeholder okay so now it should work yeah wow all right so this is beautiful beautify styling okay so i'm gonna scrap all of this and then add an app bar oh no we're not going to have an app bar so i guess let me look at the draw menu and see the examples to see what we can use for that sidebar okay so it would be something like this actually maybe we can make something better than that portfolio because we're using a design framework not because i'm a better designer okay and this is minified i'm not sure if i want the option to minify so i guess i'd have my name at the top like this and then the options here i can probably just copy one of these right positioned yeah yeah okay there's nothing else interesting here so i'm gonna go to the first one then just get this one and where's the card okay so the card so it's inside of a card and then navigation draw permanent okay and then the divider okay this is the divider so when you put v divider it stretches across the whole thing bootstrap view you just have to do more things yourself push up view is good but beautify i mean there are full-time people working on beautify that's why it has so many components and i think bootstrap view is just an open source project from people who like bootstrap so they're just porting bootstrap components over to view but they're not creating so many new things like beautify is so that's why they have so much extra built into it um do you have a plan of what desktop app you will do free code camp allows you yeah it's on my github um so i've asked i asked them um i might send another message to them today i probably will if they don't respond yet because i need to know um i'll pull it up in a second let me do okay so nav nav now i guess i'll just get rid of all the nav okay and then okay and that's my card is there are there any loops or variables yeah uh this item [Music] dot titles graph oh yeah this is a graphql query but i can just add a script here a data method return an object and then i can have a list of items so these are objects with title and icon um so i'll just copy what they have for right now okay this array and let me see if that actually shows up oh wow okay i have to see what's wrong with my layout and why it's being so weird um oh yeah if you want to see that project that i have petitioned to do it's one of my latest i have so many repos now i need to go back and clean some up uh it's this vue nwjs hours tracking and i have a readme that talks about it it's to keep track of your hours and generate invoices for clients because after i created that video on my channel i um basically someone asked if i could make it or said it suggested that it was a good idea to make a desktop app for it so i was like oh that's a good idea okay so i have this sidebar and i want this to be the sidebar on the whole page so where does this class layout go max with 760 pixels all this other margin and pattern margin and padding i don't need any of this really nav link yeah i don't need any of that and what about this body line hide don't need any of this yeah just get rid of all the style cool so that's exactly what i want almost and so now um how do i make this go all the way to the bottom of the page let me see it should be [Music] in actually there should be a prop in navigation draws expands from the bottom of the screen on mobile devices clipped there is a height prop okay so if i say let me go to that so you're saying in navigation draw i have a prop called height and can i set it equal to 100 no i can't oh on the card oh oh oh oh okay oh right i just see now the card already has one let me see what happens when i get rid of it oh okay now it's only part partially there so now let me do this a hundred percent no it doesn't do that okay i think i need to look at the card docs and see look at the height prop there might be another prop that makes it [Music] expand all the way to the bottom append color dark disabled elevation exact uh you're saying tailwind is new tailwind i don't think tailwind is new i've been hearing about it for a while so we looked at it at my company last year tailwind and we basically compared tailwind and takeons and all those ones okay exact height hover oh height set the height for the component number or string so hover href image link motor height max height no we don't want that take target tile to width yeah i actually now that i think about it i don't think that card it wouldn't make sense for card to have a prop uh that would make it a hundred percent height because normally when you're making cards you don't have them as 100 height so i wonder if i got rid of the card if the navigation draw because it is expected for a navigation draw to be 100 height you would think so so there should be a prop let me go back to draw okay so v navigation draw permanent expand on hover background right okay so it's in let's see so it's inside a v card it's inside so i think okay i think this is what the problem is because in grid some instructions it doesn't fully say all the things you have to do to set up beautify and i kind of forgot about this but beautify has very specific things that it wants you to do so i think what i need to do here is class layout yeah i don't need this div actually so i'm going to do a beautify component which is v app and i think that's why everything is weird because i don't have things wrapped in an app so oh man my power my power just flickered on and off that was weird all right it is storming it's been storming quite bad last night all parents have to be sent to 100 or 100 view height okay um thanks i'm going to try to do v app and then actually the slot should also be wrapped in what was it v main is that what they changed it to the v content tag i guess it'll give me an error if that's wrong oh wait this this way okay that's that's better it definitely looks more styled than it did before all right and now is it v main let me see in the console let's see there we go okay v made yeah it's not complaining about it so that's good okay so it stretches down it's just because the about us is below it which i need to change so maybe if i put this inside a card let me see how it changes when i have it inside a card which seems to be only adding elevation was it doing anything else i don't know let's see oh right it's centering the card so i don't want that okay so yeah i don't want the card style not not what i'm looking for here so i'm gonna do that get rid of the card yeah and this is the style that i want so yeah unfortunately it's displaying the page right below the the sidebar so it would go all the way to the bottom if it wasn't displaying the page there let me try putting a v container around the page oops okay so that gives it some spacing and stuff um okay and then the slot let me look inside the components which okay if this is inside the app though if that's inside the app then why wouldn't this display over here let me see let me look at the app so here's the app component and in computed it doesn't have a display oh it does display flex that's why okay um is that why it's so flex direction should be row but instead actually there's another wrapper inside okay so this wrapper v application wrap has flex direction column and this is what i want to change but because i don't have access to that when so when v app when this component renders it gives me these two dom elements it gives me the outer one with id of app the application and then the inner v application wrap which is flex direction column which i don't want so since i don't have access to that in the template i can't use vidify classes so i'm going to make a style tag at the bottom here and let's see i'm gonna target that class and then say flex direction row okay it didn't like that let me see why okay it's still flex direction column let me see because it might not be specific enough to overwrite it um actually it's only targeting that class though the application oh i know because this is scoped so i don't think it'll work because it's because that component is rendered after it's rendered outside of this component i guess yay that worked sweet awesome okay so now i have to figure out how to fix that um because i don't have a width set otherwise this is just displaying flex and gridsum is literally taking up as much space as it can on this page so uh let's see i kind of like this left sidebar actually this is interesting the first time i have i've done this kind of sidebar on in an app where you aren't logging into something i guess for navigation because that's used for dashboards and stuff like that a lot um let's see i need to set a width on the draw so let me keep switching back and forth am i in the draw menus now the container yeah this is the draw so let me see if it has the width prop that would be at the bottom yep and it has a width so let me set the width on this which is i don't know i'll set 200 i think that's pixels although i could specify i guess width let's see 200 pixels 300 okay so it must not be seeing it uh so let me check in the dev tools again and see what's going on inspect all right close that yeah so it's giving me a style of wait where is it display flex height height 100 that's good um float display so why isn't it giving me actually this one so the inner v navigation draw no i thought this one might be setting the um width but it's not actually so did i spell yeah width equals 300 so let me see okay i have no errors everything's running fine um oh yeah it does say width what am i talking about it says width right here so width is 300 pixels as a style but it's still not i guess it's not uh showing it or it's it's not recognizing that width so i wonder if it needs to be this inner let's see width is 300 pixels all right so in v application wrap flex direction row it must have to do with the flex properties i guess this thing is taking up as much space as possible okay so then this application wrap i think i need to set a flex property and maybe so let me go down here i set flex row so maybe i need to say justify content uh space between okay let me take a look at this actually because this might be the problem this v main component yeah it is so it's saying to take up as much space as possible with this flex 1 0 auto so i need to change v main actually um let me so i think because v main doesn't have oh yeah it has v main and then b main v main wrap but i think i can pass a prop here to where is it v main if i pass a class let me see it should go on the parent one so i can say oh no i should just style this because it's custom like flex 1-0 auto and i think if i do let's see no it was if i oh wait let me get back to one yeah if i take away the auto so let me do down here and what is it oh v main so class v main class v main and i'm going to set the flex prop to be the same thing it was just take away the auto and now sweet okay that works now this doesn't have to be 300 pixels so i'll probably make this like 240 pixels or something that's better okay so in a regular application with sas i guess i would overwrite sas variables but i think this is okay for a portfolio page just making small changes directly to the beautify components okay so now i have that now let me add or get this sidebar functional create the sidebar and i'll just add the three components i have here or the four about projects education contact and i can add these in the objects so [Music] about um projects education and then contact let me get icons for them so if i go here to search for youtify for icons i can see material design icons and i don't know i guess about i could just put like a user icon does anyone have us a suggestion here here's the icon site the material design icons okay so and then i have to decide if i want them all to be square outlined account oh this is how to import that so i could do account box outline let's see about okay oh it's mdi for the icon mdi account box outline because those are material design icons okay cool so i have that now for projects and then education contacts so for projects um i don't know app projects what about this apps mdi apps i think that looks good and now education i could do school school outline let's do school outline okay yeah i like outlined icons usually much better than the filled in ones um oh what was the last one oh contact so contact card account mail outline that's a lot going on um social no icons match match the search um message yeah i like that what about this one oh that's message processing um what about this one message text outline i think that one's good all right anyway done with icons message text outline there those look good actually all right and so i have my sections my outline i can add like my name up here then and maybe this will be my portfolio at some point i'm thinking about it i've been thinking about making a portfolio for a while that looks nice and then i guess here i just put like a software developer then i guess i don't i don't need an image i could always add an image like what they have let's see um not icons it's in the draw they have an image at the side gwendolyn sounds very familiar do you mean familiar like homey or familiar like you've heard it before the only the only movie i know with gwendolyn was the wizard of oz i think gwendolyn was the witch right or the oh i think gwendolyn was the wicked witch or something or the cousin of the witch or something like that that's the only time i've ever heard it where is yeah v list item avatar is it using yeah it's using v-list item and then inside v-list items is an avatar and then i might put this and then comment it out for later until i find an actual image but i can put it here oh that's cool it automatically truncates my name there not that i would want that necessarily but i could make this wider if i wanted to or make this text bigger too to match all right so i am going to comment that out for now because i don't have an image that i want to use right now and start on the main page or actually if i'm going to have an image on the main page then i probably don't want an icon so this is i think this is perfect then and my name is pretty long so people with long names could fit in this space i think all right so finally after almost two hours it gets to the actual actually this will have to fix that let me just put it to do here to do fix nav and then make an arrow oh should be should be a left nav draw all right okay cool so yeah let me add an image and then just some title and text so what pages do i have so right now i don't need these two different routes and what gridson does is every time i make a page or a folder in pages it creates a new route for that so i have slash about and i have just a forward slash because this is named index so i i don't want slash about so i'm going to delete this delete okay and now i just have the index which is the only thing that's going to show and i can get rid of all that and okay so g image also is yeah let me delete this um so g image is a special grid some tag basically that they pull in or they render a low quality or i think it's a blurry version of the image and then eventually render the full image so it's better for performance i can't remember exactly how it works but um yeah that's basically why they have the g image tag instead of just a regular image tag okay but i don't want that necessarily or this grid some here where is that coming from favicon dot png that is i guess that's in the static no no oh it's right here favicon.png okay so i could add one of my images and let me find one real quick just like a face shot so i have something to put there let me see do i have an image i have the image that i used for my last interview thumbnail let me copy it okay and i'll paste it here can i paste it oh it doesn't let me paste now let me see if i can drag and drop can i drag and drop in vs code all right let me see good okay cool that worked oh i'm upside down now why did it do that that's weird oh well it wasn't upside down in the file explorer okay so now i can call this let me rename this image profile dot capital jpg that's fine oh yeah let me get out of that and profile dot jpg is it going to work oh it completely screwed up now why did it mess up size is undefined type error size is undefined hmm size where is it talking about size it doesn't give me the file i'm so i'm thinking this is a specific emoji what is an emoji i'm thinking this is specific to images okay so image.png gridson has a built-in g image component okay it also resizes and crops in real time while developing a typical component would be source equals image.png okay yep that's an alias to the source folder saying graphql markdown image cropping me see if it has size so it seems like it calculates the size and it's not able to calculate the size of my image is what it seems like emoji have you seen wwdc what is that wwdc memoji what am i looking for oh oh okay yeah so i actually so i commissioned an artist to make a robot version of me but it turned out he couldn't do it so now i'm getting someone else to do it so maybe i will have some kind of representation of me in the future that would be kind of cool for a portfolio i like the drawings or those kind of sketches of somebody um so i think normally so in the us if i hire an artist in the us um let's see i think it's at least a hundred dollars for someone to sketch you depending on who they are one guy at a coding conference sketched me a while ago for fifty dollars but i think generally it's at least a hundred sometimes a couple hundred dollars depending on the quality and type of image that you want um yeah you could probably find someone on upwork who would do it depending on where they live it might be more or less okay so type error size is undefined yeah this i'm gonna look at the grid some docs and see on github or github so yeah it depends where you live in the world but because people the cost of living here is higher people charge more for things so if i went to if i hired someone in another country i could probably pay a lot less [Music] like one of my old spanish teachers from venezuela she told me her rent was like seven dollars a month or something and i was like that's crazy because you know in the u.s you pay 1 000 1500 2000 or whatever for rent and yeah so in some places it's just so much cheaper to live than here uh what was i doing oh yeah error um let me just look at image size and see what issues come up still quite a few issues g image aspect ratios now i'm going to look in close because i'm sure this is an already answered question let me just type in the exact error that i'm getting size is undefined oh okay so there's actually open issues wordpress source plugin can't query image frame sets all right you know what i'm going to do instead of this see if it helps if i use a png so let me actually open that image and this is what i'm going to do this is a jpeg i think because i i think i imported this from my phone so what i'm gonna do and anyways i wanted to crop this image so for my portfolio image let's see should i cut myself off there yeah i did okay so now ah it escaped okay let me find it in my files now okay now let me import it here let me rename it as profile.png okay and now let me do this png okay cool that worked it just didn't like that jpeg image for some reason but when i took a screenshot of the image that works all right and then of course the width won't be 135 it'll be like 400 or something yeah see i don't know if you saw that um it loaded blurry and then it uh came in as the full size so i think that's a really cool feature of great sum that it does that for performance in india it's 200 200 for a three bedroom in a rural area that's amazing but can you get so in rural areas of india do they have high speed internet or i guess maybe in some rural areas um let's see oh cool i've always wanted to go to india one of these days after coven oh by the way i don't know if any of you heard but uh the u.s anyway got 1 million vaccines i think it's one it was a hundred million it was a lot of vaccines that we got so hopefully that means that we have a working vaccine or we're testing a working vaccine but that's really exciting to think that we could all be vaccinated pretty soon all right so here's my image and oh it's already been two hours all right so let's let's just put some text real quick hi i'm gwen and then some description text and then kind of arrange the page um actually not in gridson did i close the beautify docs i think i closed them let me close that sound is gone oh was it the uk i think it's i think it's the u.s at least that's what i read i don't think people that refuse to wear a mask so that's that's some people that refuse to wear a mask i mean most people that i know will wear a mask so i don't know maybe some people refuse to wear one but as time goes on i and more and more cases come up i think people are seeing the importance of protecting themselves and protecting each other vaccines faked the moon landing what did they say i saw one of those fake moon landing videos and they were trying to say that the flag was there was wind blowing or some kind of reason why the moon landing videos couldn't be real it was the same kind of logic i heard at the flat earther conference that i watched flag can't move all right well now i you're completely distracting me typography i need a typography class oh i think actually so it's beautify that has that has these built in so when i use like an h1 it it just has already styled it so let me try here at this index page to um so first first i'm gonna do section i'm gonna mark off all my sections on this single page portfolio with section tag just so i can differentiate them i only have one now so i'm leaving it in this index file but eventually i'll move these into their own components oh wait it's going to be on the other side right so i need to do let's see i have an image and now let me do i guess in h1 see how that looks and what was i putting there hi i'm gwen hi i'm gwen and i'm a software developer dot okay and now because i made this section um i can give it a class let's say i display flex and that should default to row okay so that defaults to row and now i'm going to hi el raza how are you thanks for the follow oh thanks for all the other follows that i missed i just kind of ignored them because i was afraid they were bots again like last time but i think all of you are real that's called css oh just to style i know but it's so easy built in here with beautify okay so let's see um i guess just div and class equals i'll do the class in a second let me put these inside the div first um and then this will be display flex and flex column flex direction column okay cool so that looks okay and actually i'm probably gonna want a grid here is what i want what should i work on today oh yeah i should have updated that title is building oops built i can't spell building a portfolio in view js and gridson thanks uh i think that nightbot actually doesn't update the title forever like after the stream i'll have to update it again i think that's how it works thanks um yeah so we we actually planned out the whole project in this stream but we only got to one section so in the next stream i guess i'll have to finish it up now that it's already planned it shouldn't take that long and then just add all of the other sections but actually in here so i think what i want to do inside these sections and let me get rid of the display flex for a second because i'm going to get that when i do v should i do v container first so oops v container and then inside v row just so i can use the grid system and that way i can use offsets and stuff and mobile features okay so close the column close the row close the container and now i won't need this i think because i'm gonna do so i have one column for the image and i'm gonna make another v column oh for that stuff and now i'll do close the column and now on small here so on small i'll do six and then the same thing for this column so small equals six yeah nightbot is great okay that added some good spacing to it and then i could make this image take up the whole container and then fix the text a little bit here but i don't know so i think i'm gonna leave it here for now because it's been over two hours and i am starving right now so i think i might even stream tomorrow because i just want to get this done will i be hosting it no but let me push it to github right now so oh it's not a git repository yet so get in it it's a git repository and then i need to add this github here oh i should raid someone oh let me do that wait wait wait i did that once before um i just have to find somebody let me first oh yeah let me first push this to github before i forget and then i'll raid somebody so git remote add origin repository git status um okay so grid some ads that get ignore file for me so i feel pretty safe right now so i'm going to do why does it have a yarn.lock file if i only used npm i don't know oh well i can get rid of it later i'm going to do oh git add and then git commit oh you can't see what i'm doing at the bottom let me clear get commit dash m and then code i'll do first commit because it is the first commit and i'm lazy okay oh get push dash u origin master and now it pushed all right so i'll get started with the app then yeah if you were here last time we basically voted and started on a gridson project which is a vue.js framework similar to gatsby that's used a lot with jam stack applications and base it's basically a static site generator but you have all the power of view behind you so let's see where's my terminal all right so i'm gonna go ahead and start the app which i think is npm run develop okay create some starting and now i can open up the app in the browser okay and this is yeah last time we made the sidebar and we started with the content on the page so this time we're just gonna i guess try to knock out hmm where did the oh i thought i guess maybe i didn't add the mock-ups here default starter for gridson or maybe i overwrote the readme that i had here before that's kind of sad so i basically had four different sections and let me see if i can open up the mock-ups i have my mock-ups in my balsamic here bad network here all right rohan see you later um hi jared how are you is that an octopus an octopus leg i don't know what that is all right so where is i need to open gridson gridson portfolio here it is hey uh yeah so where is it i don't think it opened i think it crashed oh well um so i guess we'll just wing the different sections then but basically um we have these four sections to build and then based off the links it's just going to be one page right now so it's going to scroll to about projects education or contact from here um and then we'll just i guess wing the layout which stack do i recommend for development that depends on what you're doing and uh what are you trying to do get a job your screen border is showing oh oh yeah the bot the box that it's putting me in here is showing um i don't know how to fix that display oh video capture yeah on my other software there's like a threshold but i don't know if there's a threshold on uh not the shadow top corner oh no no this side up here okay there much better oh you can still see one pixel one pixel all right no it's like a flashing pixel okay that's fine all right so i'm gonna do the different sections in gridsome so this is where we left off last time with just making this one section so i'm gonna go ahead and actually move these into different components so the index file only has the imported components because otherwise it's going to start getting messy so in the components directory and let me actually zoom in here um in the components directory i'll make an about component about.view dot view let's see dot view and then projects education and contact i'll make all of those still a student need a suggestion i mean if you do you want to go into web development iot data science my personal opinion i think the two easiest languages to pick up are python and javascript and they have massive communities so much information books tutorials all that kind of stuff for and so many example apps where you can kind of pick through people's code and see all the different kinds of things they made with those two languages if you're doing web development you probably want to go with javascript and if you want to do any anything like iot um yeah just about anything else besides like weber mobile development you could start with python and really the language um doesn't matter so much although i think those are the two easiest languages and then from there you can um light ui yeah i switch i switch sometimes dark and light yeah and from there i mean let's say you learn javascript then later you can learn another language because you already have the concepts and everything from learning the language but it really helps to pick one language and learn it deeply so whatever language you pick um you should learn you know beginner intermediate advanced build as many applications as you want and then if you learn one language really well then you can go to any other language after that hi acm hi anna parto hi tj hi everyone um yeah i don't see the pixel anymore so maybe it's still there i don't know okay so anyway i was about to start creating uh components so project education and contact let's see oops [Music] projects education and contact speed what speed i don't know what speed means why is view better than react um i think actually if you do faq you can see it i gave oops what am i doing faq um i think i put a brief spiel about why i use view in there because everyone always asks yeah hi bassist how are you um oh view is speedier than react yeah that's why you said speed i definitely agree with that especially with view three coming out okay um now what was i doing so i have this this top part which can use a little bit of styling but i might do that later and then the next section will be about so i'm going to create the template here template and close the template i don't know why my auto complete's not working inside here i'll put a div that says about and then basically oops basically copy this for all these other pages and then just change this so contact and then education oh sorry the current repo that's not correct that's not correct i forgot to update it this is the current repo the gridson portfolio can you have a different nav bar for different routes if i wanted to i don't think i need it for any reason here because this this sidebar is just going to stay there in perpetuity so it's not going to go anywhere i'll have to try it on mobile and see if i need to collapse it but because i can just collapse it to just the icons basically and make it pop out or fold on mobile but i'll see how it looks okay and oh yeah so i have education oh did i not save that one education [Music] projects okay and now i need to import all these components into index.view and in my script i can import about from let's see at uh components slash about.view and then i need so after after meta info i'm going to put register my components and then do about and then i'll just copy this for the other sections and then i can start actually doing my sections so projects and projects um education [Music] contact oops i do projects education and contact okay now i have all my components and now i can put them in the dom so i'll put about and then projects this is all boilerplate which i guess you can't avoid as much as gridsum abstracts away some boilerplate it can't abstract away all of it i guess or maybe we'll have voice controls at some point that will develop apps for us we'll just tell our apps to do certain things and it'll generate code okay so i have all of those and now i see all my sections great um head first java hi yashek paul how are you some good coding books yeah i don't know about java um i did i worked in java for like seven months i don't even remember what i used to learn about it i think just a bunch of blog posts documentation and youtube videos i don't even think i own a java book um i don't mean this this project i mean if it's a thing or possible to have a different nav bar for different routes because i want to do something like that in my project yeah you can have as many nav bars as you want why not no framework is going to stop you from putting nav bars all over the place uh you know it depends on your design in in one of my work apps there are uh well it's a it's kind of a dashboard like app but there are definitely at least a couple nav bars in that app okay um so i have this component so now let me put the about component well i think this is actually about so i'm going to actually move this stuff into about because it kind of talks about me so i don't see why i need two separate components for that um so i'm going to do this and yeah i think that's good okay now this is my about component now i need to do projects which will be kind of a list of cards of the projects i've made so let me go into projects and actually i want to oops it's my scrivener's still open for some reason so it's eating my hot keys i can't use my hut keys okay i guess i'm going to use the same kind of section pattern so i'll put a b container i am using bootstrap right no i'm using beautify okay nevermind i thought for some reason i was using bootstrap oh i think the free code camp project i did is using bootstrap uh the one i did on friday that's why i'm confused okay so close v container and then do uh v row okay and then get out okay and then do a v row here and the reason why i want this section is actually because i want to give different background colors to different sections as i scroll um hi gifer how are you okay so i'll do a class of project section and inside of here i'm just gonna well i'll put a column first so v column and then in here finally i'll put in h1 that says project projects or something like that yeah okay so now i have projects and i'm actually going to do i have sas oh i'd never set up sass in this application okay so i guess what i'm gonna do then is just add a style tag and do it component by component for right now so i'll do project section and give it a background color of something so i'm actually going to go to this website which is called colors and fonts dot com and i can go to color palettes and just pick a color palette for my portfolio um let's see don't need anything fancy really i like blues and oranges so maybe i'll go with i don't know maybe i'll go with uh which one did i see oh yeah this is kind of a teal which is okay yeah i think i'll go with this one copy all five of these colors and then i'm gonna put them in my readme so i have so i keep them for reference where's my here's my readme okay so um let me do design and then colors and then paste those five colors and actually i should go ahead and put which color they are so there's white which is off-white i think and then there's a light orange dark orange and teal uh light orange dark orange and teal oh and then this is just dark i don't know if that's dark blue oh let me inspect it oh inspecting won't do anything except except get the color that's weird though why is it showing up as purple oh it's going it's like showing up as purple and blue that's strange okay i don't know what's going on there but that's fine it would be cool if there was a toggle to put this in different colors at some point okay so the background of the project section i guess i'm going to try a light orange and let's see okay cool it doesn't stretch all the way across yet um and i think that's because i think that's because the layout page some server is the app v list item no no none of that oh yeah because it's inside of a v container so i wonder if i um took away the v container yeah and now it stretches all the way across okay good that's exactly what i want and now i want cards for to list all the different projects so let me go to the beautify docs black berry color oh the the dark color that i have yeah i don't know that was weird i've never seen it um inspect i've never seen it where i inspect with the dropper and it turns out to be a different a completely different color than what it looks like from afar okay get started and oh i want to get to the cards some beautify cards beautify has always been like my go-to component library because i feel like i just don't have to worry about design unless i'm working with unless i'm specifically working with a designer it's just so nice to use beautify for everything um i just need a simple simple card example where i can just copy the code let's see i think that yeah this is what i want basically an image on top and then text and a button to go see the code on github for a project so let me copy that the whole v card and i don't think yeah there's no other state or anything i need here so i can that go to projects and okay this is in a v row v column so i should actually put another v row here with another v column i guess and then this is where i can paste that card okay and now indent and let me see how that looks cool my projects now i want i think it would look good especially now that i have this sidebar i think it would look good to have two maybe two next to each other here firefox is colorblind firefox usually works well that's i think the devtools and firefox are actually really nice i was surprised when i switched back to firefox last year um there are a couple things that i think chrome has that firefox doesn't but overall i'm really happy with firefox um okay one more card so let's see i want to loop through cards so here let me create a v4 and then i'll have to put this in my data so v4 card in cards and then the key will be um oh wait the key will be card dot name i don't know and now let me add a script tag here so script and then data return and i need cards oh wait cards is an array of objects so i'm just gonna have i'm just gonna use my own github for these cards and let me make a second object name is oh wait this isn't a component this is the name of the project um then what other project should i use i guess i'll use the let's see let me use the project that i just started on free code camp so the view nwjs hours tracking app and then the other one will be the curriculum app so let me just real quick add github and then the link to the github project and then this one will be our tracking app can you make the nav bar fixed yeah you um in uh yeah in uh what is it beautify you can just add the fixed prop but i'm not you i'm not using a nav bar in this app i'm just using that sidebar which is the new component that we found in the last stream uh let's see okay okay cool so now i have those and uh share explore okay i'll get rid of this second button oops delete and here i'm gonna put its card actually this should be projects why am i calling them cards projects okay so it will actually be projects so for project in projects the key will be project.name because i won't have two projects with the same name um okay and then this this one the oh wait uh oh this is the v button so i need a link here that's two um and that will be project dot github that will be a link to the person's github and now in here i'll put github repo or i should put see the code or something i don't know um let's see okay cool github repo oh i'm using two here i think it should be href right oh uh yeah let's see project dot github let's see yeah that works okay um all right so now i need these two cards to be side by side and then i'll fix the images and everything um so max with mx auto i really don't um that centers the card on the page so i really don't need that and then may i might change this to 300 pixels wide okay and now i want to float these cards next to each other so how do i float them i guess so this is in column here what i could do is add i think this is already display flex let me just check so in beautify columns um just check the docs and you can set mini oh you mean this sidebar yeah um i should do that i'll have to do some mobile testing after i i like how beautify looks it like automatically sizes all the icons for you um in any of the sidebars nav bars anything so buttons icons text everything looks perfectly spaced right out of the box okay so where my column okay so rows are display flex and columns are not uh i wonder if i should just get rid of the column in there and it seems like i shouldn't have a column yeah if i want to display these in a wrapped row and then on the row i can add some flexbox classes like um because a column would be like if i want to denote a grid like i want this placed in this column but i kind of just want to wrap these around so um i want justify um justify space around there i think that looks pretty good for projects um okay and then what else do i want to do um oh on the cards i want to just real quick or on the row actually i want to add some margin so margin bottom of five oh let me do more so eight okay that's good and then margin top of four add some more spacing that's better and now let me fix the text inside these cards uh let's see whitehaven beach island um what i guess it's just a description so here inside card text man okay um inside card text i could just do project dot description and then add a description to each project okay and then the subtitle okay and in the title let me get rid of the subtitle i don't think i need a subtitle so in this title i can put project dot name curriculum hour tracking app okay and the only other thing is for the image so i need to get an image for each project and that should be project dot image so i need project dot description and project project.image so let me just add those description and image and i think from the github repo i can just grab an image let's see yeah in mock-ups because they're hosted here some should be able to just use one but is there a limit for the row yeah yeah just like you said i have max width on the cards um so i guess on a bigger screen it would show more but i don't have any more cards right now let's see draw menu which one would probably be the hours log so let me view image okay and now i have the image from the hours oh no that's the wrong one undo okay now i have the image for the hours one and let me see if that works in the app oh that's kind of ugly because i have some mock-up notes on that one uh let me try a different page let's see um this page is kind of boring but uh it will probably look a little bit better let's see view image okay so view image there okay that looks it looks okay and then when i add the text oh the text is white um okay so i'm gonna have to change the text to be black oh because it says here white text so i'll just remove that beautify class our tracking app um that's a really bland screenshot let me see what i have for the curriculum app yeah these look a bit better let me ch let me take this one the 30th anniversary awesome hopefully they're thinking about updating that disability act for the modern age and the internet okay so i have the curriculum [Music] screenshot i'll put it here oh okay um that's okay i think for the title actually i should put a little bit of a background behind it it should be coming out from the edge that would make it look a little bit nicer um or i can just develop i guess if i was really doing this for my no oh okay you were making fun of me uh is it really the 30th anniversary of the americans with disabilities act um okay so now i need text here and i'm just going to grab this text for the description and paste my description from github and then do the same thing oh wait do the same thing on this repo for the hour tracking app okay okay um that looks okay i want to truncate this so if it's longer than i don't know how many characters is this um i can just try out the characters so let me truncate let me make a truncate function here um where is it where is it so in methods i'll make a truncate function and you did a tweet okay um i had someone named joe caufield on my faraday tech cafe podcast and he he talked about he talked about that the americans with disabilities act and um uh disability rights and all those things so it was really interesting and he mentioned how um disability rights haven't really been updated since the internet came out so there's no laws that govern um or very few laws that govern websites and accessibility and mandate that websites must be accessible although we're coming around to it slowly i guess [Music] okay so truncate uh and then okay so truncate will take a string and then it will return i guess if if a string dot length length is greater than 50 then return string dot slice is this the right syntax string dot slice 0 to 50 or zero to 49 plus dot dot otherwise return string okay well i guess i'll see if this is right so let me pass the description into that so i'll call the truncate method well all federal sites yeah the government sites have to but i think most sites don't okay cool so my truncate function works and i get the dot at the end um but i do want a few more characters so let me try 80 characters 80 and change this to 79. good so it's two rows i like that the image needs some help um nobody ever knows that syntax oh you mean the slice which one do you mean yeah the domino's suit was a big big thing dominoes got sued because disabled people could not use their website like a screen reader it was impossible to use and then domino's if you if you're not from the us domino's is this huge pizza company that's just everywhere all over the country and they said we don't have the money or resources to make our website usable by disabled people and so they got sued for it which was awesome yeah yeah i get confused with slice because python um yeah python just uses the bracket syntax which is easier and then i come back to javascript and it's like oh how do i do this again um okay so what was that oh yeah is there any way to gray out this image a little just so it doesn't look so white can i set opacity how do i set opacity yeah how to set opacity on images css set the alpha right filter grayscale one okay let me try that chic paul says just image id what is i'm not sure what that means that will work for css yeah i thought that was a sass method or i don't i don't know i'm not very good at playing css okay filter grayscale oh wrong place but it did work though um let's see let me just do it on image then filter grayscale oh wait nope so let me see oh 100 yeah opacity was what i was thinking of grayscale nope i don't think grayscale works unless i typed it in wrong filter grayscale oh oh set opacity okay that's what you were saying image id um yeah i don't think grayscale works let me see there is a filter for opacity oh because it's scoped why would scoped matter oh now it's doing this image wait undo undo okay um okay so grayscale did work yeah i yeah that's what i was thinking i'm not targeting the correct element let me look at it it's a v image okay so i think i need to target v image and i guess it's setting a background on the image um oh this one v image image okay let me try this class instead nope so maybe it's just v image that i'm looking for yeah that works oh but um i do want opacity yeah okay i do want opacity so let me try the uh what is it opacity and then 0.5 oh that does the text because the text is on top of the image as well okay um so yeah because this is a background image so i don't know i basically want to gray it out or put gray it out a little bit so that the text stands out more from the background um let me look at how it's set up so here i have the v image align and height 200 pixels project dot image okay and then inside of the image i have the v card title so if so could you put a div between the image and the text the thing about the text being inside of the image is that if i take the text out then it displays below the image which i could do do you think that's better yeah that might be better actually to display below the image yeah then um then i won't have to then i don't have to grab the image at all all right so yeah that was possibly a bad idea so let me see yeah i think that looks better but i do want a border bottom on the image then keep doing that uh to differentiate it so border one pixel solid i don't know maybe just a border bottom border bottom yeah i think that looks pretty good what do you think yeah don't overlap text yeah that was a bad idea and it's just because i copied it from their website so what do you think this looks okay i could make it better by you know making the images specifically a certain size for this but for right now i think this looks pretty good for projects all right so i could do education next or i could fix this section i should probably fix this section and let me go to um my profile here and see okay i don't really have a description there i can steal um let me go to about i'm a software developer i just want some more text here who works as a consultant with python and javascript and sometimes block ethereum blockchain okay and yeah that's a bit more text that's good and i feel like there should be some button um but at least i want this to be vertically centered vertical centering would be good for the text i think what are you going to do with gridsome oh you found an about me page thanks thank you i already wrote an about me page okay so that's better let me um just okay that's good now let me close that paragraph tag and verdi i should put links here so let me put links in here real quick so well let me see what it looks like oh yeah so these should probably be in paragraphs then um although maybe i'll get rid of this i'm not really looking for more opportunities right now i'm so busy okay so p and paragraph did i not close every paragraph i did close the paragraphs and what is it complaining about this one oh you can't ask paragraphs and paragraphs let me change this then to a div div okay and now youtube channel i'll get rid of that and i'll put this inside of just a regular a tag then a href equals and then i'm just going to type out the name of my youtube channel youtube.com c slash faraday academy okay and then i have to close the link here so close the link okay and then i do the same thing with my github and hopefully with vidify styling the link just looks pretty good um okay so this will be the same https colon slash slash github.com slash gwen f oh there and okay cool so that looks good that looks good and now i want to vertically center these how about uh linkedin and github icon below the description i could i also have a contact section so if i put everything up here then it's like why do i have a contact section so um i definitely want there's no link so i think i want all those icons to be in the contact section though here it might look better if i had the icons instead of the text i don't know um but first let me try to vertically center these so uh let me do d display flex now align center no uh i need a flex column a resume button there should be a resume button no that's not at all what i want okay so now i need to do justify center yeah okay this is exactly what i want um this isn't the best looking portfolio but it's okay it's better than the one i created five years ago so that's good um okay so i have the about projects now i need the education education section so what am i going to do for education let's see so first of all i'm going to delete this and add section section here and then i'll do a v container inside close that then v row youtube svg to any brand name like github or view.js i don't know what that means oh okay oh cool i didn't even know about this thank you jsdeliver i can just find any icon on there cool yeah thanks um okay so oh yeah i deleted that so let me now do row and v column inside i need to have a snippet which just like generates these things or something um i don't know let's see now inside of this i'm gonna do the same h1 with education no that has to be inside of each one so education h1 and now duplicate those and what do i want inside education should this be like a list or um hmm i don't know so on my let's see faraday inspection.com so on this website i made for my dad who um basically does home inspections for people i'll post it in the chat so this is what i did down here for education basically like a timeline thing so for education and experience on the timeline so i don't know if maybe i should do that oh let's see in view because in beautify they actually have some kind of a timeline here so what do you guys think should i do a timeline like this or i don't want to use cards again because i just use cards for the project section and a timeline i could very easily make it look like this oh i like this actually what do you think about this timeline is good okay i really like this one icon dots what's the difference oh icons inside uh reverse direction so i think it does have to be reverse and what about years do they have years or like dates yeah this is it i think this is the one avatar okay yeah because i used this for um some uh time tracking stuff that i was doing okay so i'm going to get the code from this one actually so there's a v for loop so i'll copy the timeline and the data from here v timeline let's see yeah i've been slowly collecting all that gear for i guess the last year maybe it's been about a year now there's still a couple more things i'm going to get like one more light and a few other things i really need a new laptop too that's why you can hear the fan running so hot i'm afraid it's going to die on me one of these days okay so there's the timeline oh let me copy the script tag too make the sidebar fix like the nav bar on dad's site oh on scroll oh oh that's what you were talking about fixed on that site um yeah it's not fixed on the side yeah that kind of stinks when i scroll um okay let me finish copying this and then i'll tackle that and fix the sidebar okay so add a script tag script tag and dat data return all right let me see how that looks uh nope unexpected token 66.2 let's see so return where does this come from oh oh that's what i'm doing all right so okay cool this looks nice and i like that part on the white background so it's good to have projects on a colored background all right and then i would just have to figure out what i did each of those years well not like 1960 1970. um i think i need to do reverse there too let me see reverse the direction of timeline items yeah let me go here um oh in v timeline so reverse is that no it's supposed to reverse how come it's not reversing did i put that in the right component let me see yeah v timeline has a prop called reverse defaults to false i put the prop here reverse so why isn't it reversing let me take it out again and see oops okay so it's the same thing and now if i put reverse it does the same thing oh it reverses sides i think does it it switches sides that's what it's doing let me see yeah whatever i do like reverse though or no no i'm gonna get rid of it anyway i thought it would be from the because i want the newest experience first but i guess for that i'll just change this like i can just add my own objects here okay so i'm gonna leave that for now and now like everyone's been saying this this sidebar needs to be fixed so let me look at the sidebar oh cool these have all been updated um where is the sidebar it was just here last time so i oh no that was the bootstrap sidebar that i that was new that's right so on friday we used view bootstrap and they had a new sidebar component that's why there was a new flag on it okay so for this one um let me go to the default layout okay so that's just a regular navigation draw let me go to jaws hi mark how are you welcome to the stream we're doing a vue.js application just going to quickly post which one it is it's in gritsum and i'm looking to fix my navigation draw right now um and so someone suggested that it was just the fixed prop yeah so i should just be able to let me scroll down a bit um add a fixed prop to this permanent so it stays there all the time and now if i add fixed no okay so now i have to give a margin left to all my components um basically so let's see in main i should put it on the v main yeah because i want all the components to fall just to the right of that navbar but let me see first yeah so i think the best way to fix that unless someone has a better idea because now it's covering the items on my page so now i need to figure out the width of this sidebar and set a margin left so this okay so it's in an aside it's a v navigation draw is the class [Music] and actually i'm going to copy this class v navigation draw open because i'm going to be minimizing it later so i'm guessing it won't have that open prop anymore so let's see open and then oh no no wait um i can't do it like that i need to actually take v main so i'll have to fix it later when i do mobile when i fix this for mobile but v main um let me add a margin margin left of how many pixels is this so it's 240 pixels and yeah 240 pixels exactly so 240 pixels okay good and now it pushed everything back into the place that it should be okay good so i have all of that done and now i just need the contact section so this timeline section is just something that i'm going to have to figure out i think i'm not sure if you want me to type out my experience my education experience on stream well actually projects no i mean education so i wonder if education should be experienced too yeah i think education and experience should be in the same one if it's going to be this big timeline yeah i'm going to put those together somehow let me see here education and experience yeah that fits that looks good and now contact so oh there's a bug um okay i think it's because i open my window so much so contact okay so in contact this is where i'm gonna put all of my social media links and then i could do a contact form too just quickly set one of those up so let me get out of this get out of this and now in my in my contact page i'll do the same thing so section and then v container close that close section and then v row v column um and then h1 contact information okay and then close the column close the row duplicate that okay now let me see okay so now i have a contact section at the bottom which i want the contact section to have a background too so maybe i should have the contact section no i was thinking about doing a dark light but i don't know um what if i just did the same color so for the contact section i could do um style tag and then i'll say contact section which is a class i'm gonna make and then background color is that oh wait and then i need to add that class so class equals contact section okay i think that looks pretty good this will be a nice colorful section in the middle of everything anyway why am i using light theme i switch off so i'll spend about a month on dark theme get tired of it spend a month on light theme get tired of it this is the solarized i think this is solarized light which is my favorite light theme but i also have pale night which i've really been liking which is a dark theme and then of course there's the standard was it dark plus or something that every everybody uses in vs code so yeah i change it up sometimes sorry if it's that annoying entered life 1995. are you using view x so i'm using grid sum and gridsum doesn't come with um view x i think it doesn't come with view x let me just make sure about that yeah so it comes with its own routing out of the box and then other than that the way you handle data is just through importing so you import everything and it gives you one graphql api in your whole app from all your different data sources that you pool and then you kind of query that information in different parts of your app instead of using vue x so i haven't heard of anyone using vue x in grid sum i'm not i'm not even sure if that's possible okay so contact information how should i do this should i just have a list of icons and links um yeah let me start just start putting icons so um jared suggested i use these icons js deliver then i guess i would get linkedin and what other things oh he already did youtube github oh they have everything yeah let me try these icons i've never tried them before okay so um contact uh okay so i guess it's an image tag the thing about this is though that beautify has a v icon here and i wonder if i can choose a source because usually you put like mdi icon or whatever in the middle of that tag so let me look at icon okay i already have my icon set up yep yeah using custom icons okay so it still wants you to yeah set up the icons in the beautify plug-in options okay so um i don't know let me let me compare the two so let me put um an icon here so i guess i'll just do an image tag and say source yeah maybe it's weird because after you mention about the light theme dark theme oh wait i don't need to make that dynamic now i start looking at it now it looks really bright okay this is my contact information one huge octa-cat let me give this a class equals contact like icon your eyes uh for what are you going to use graphql um that's a good question so in this app what would i use graphql for so i guess i could have data sources like local files that had you know all this information in it if i wanted to that's probably over complicating it i could pull in things from the github api to populate this information but yeah overall or if i had blog posts that i wanted to include my latest blog post here i could pull in from my graphql or something so all right let me let me um oh wait what do i do is it this one theme generate color theme preferences color theme yeah so let me look at there's quiet light i mean solarize solarized light doesn't look that bad light plus light and then here are the dark ones so abyss dark this is what everybody uses like what's the difference between dark and dark plus oh it's slight difference okay i think dark plus is what everyone uses oh that's the default and then can be dark kimmy dark is interesting never used that before monica monica dimmed pale night this is the one the plugin that i got so then there's red and a few others yeah there's red which is awful solarized dark solarize dark is nice now maybe i'll go with solarize dark for now is that enough contrast can you see it or should i do a different one why didn't i use nuxt for this so there's a lot of similarities between nuxt and gridsum gridsum is more of just a simpler it's a simpler way to build a small application basically it also has the graphql data layer which is different from next next is mostly for server-side rendering although it does have the static site generation what else is different yeah i would say this is a simpler more streamlined way of building a small app that's better for um what do you call it oh jam stack applications yeah but then i switched to this and now this site looks so much darker or so much lighter now that i'm using a dark theme over here actually i really i don't know how much i like this blue color and the contrast isn't that high i'm gonna go with pale night again because i really like that one color theme pale night what's pale night operator it looks almost the same okay i'm gonna go with pale night i really like this um yeah i can't remember what i was saying but that's okay so now i have these contact icon classes so let me uh set the height and width of these so height 50 pixels and width or the widths should just go with the height right if they're sized properly yeah because otherwise it might stretch out and look weird okay that looks fine for now let me go ahead and get the rest of the icons then and go here and just go to the end so instead of github i'll put linked in and what would be third um youtube oh twitter um twitter and then what's after twitter i don't know is there any more social media oh there's instagram i am on instagram don't want facebook there okay um that's okay so let me make this a little bit smaller actually let me do 40 pixels it still seems big um and now let me space these out so what i'm gonna do is inside this column i'm gonna do a small yeah small of six columns wide and then offset small of three myspace yeah you know like uh was it last year when they accidentally deleted all of those pictures i went back on my myspace um i found it just to check it out and i still had pictures from men so many years ago on there so you might still be on myspace if you had an account oh yeah i completely forgot about twitch i'm streaming on twitch and i forgot about twitch one second let me let me fix twitch okay cool oh wait um what was i oh yeah i was going to oh i was fixing the spacing that's what i was doing let me delete that then so small offset and then now i need to add a class here so class equals um well first i want display flex and then i want um the icons to be evenly spaced so justify around no space around justify or justify content is it content no um justify space yeah there it is okay and then i would probably want to center that title so i can just add a class here of margin on the x-axis of auto nope didn't center oh is it margin y no it's the x axis y would be vertical um why didn't it center i don't know h1 is it because it's an h1 would a div center let's see let me look at this so yeah i have margin right margin left of auto um oh text align center right text align center that's what i need so i think they have a class for that too let's see text text and typography center text alignment yeah text center so i can do text center i get confused by some of the beautify things because sometimes there's like two hyphens and sometimes there's one hyphen and i still don't know why they do that okay the icons should not be bigger than the header though so let me make these 30 pixels then okay that's better so what do you think all the icons here it's pretty good right yeah thanks i just read your message after mark um so what do you think about this let me push the code real quick so if you want to look at it you can so let's do get status i changed the readme added okay i added the components updated the pages that's all good so git add just add everything git commit dash m code from live stream on july 26th is it july 26 yeah it is ok and get push and now it's updated so let me post the link in the chat yep posting straight to master because nobody else is working on the repo right now so might as well push to master although i did make a big mistake pushing to master the other week where i force pushed and overwrote everything because i was tired and i just wanted to get it over with and yeah it overwrote my readme that i had to type out again which was annoying yeah so that's the repo um yeah how it is right now i could run this again and see i did all the sections so that's really what i wanted to get done today um i guess the other thing is that these don't link anywhere and they the sidebar also doesn't collapse and then these i'll probably have to figure out on my own what kind of timeline i would do for my own portfolio oh yeah and these don't link either so yeah there are things to do let me let me go ahead and fix this sidebar though and figure it out so uh where is that oh yeah that's in the default component in the layout yeah hi tom i am using material design it's the beautify um design framework for view and i use this in a lot of my projects sometimes i'll use bootstrap or something else but generally i use vidify because it comes with so many things out of the box although i tried to use incline the other day and it broke um and i still did i ever figure out why it broke i'm not sure i think it wasn't jiving with my sass that i had installed okay so um link so here is where i want to link to a different section of the page so i want to link to these ids about project education and contact so let's see so i guess i'll do two equals no um i need to pass something in here so i'll use backticks and then hashtag and then i'll pass in can i use this all right no i need to do the double quotes around it all right there we go and now i can pass in item dot title and then um lower lower case these yeah i'll have to lowercase them and hyphenate any spaces so item.title.2 lowercase and then dot replace replace spaces with hyphens okay um let's see okay now i just need to put the ids in there so oh let me see what this one is i hover over it okay so it's hashtag education dash oh it's not replacing all of the spaces um actually i only have one item that has spaces in it so for right now i'm gonna hard code this and do this so education dash experience yeah that's good okay and now i just need to add ids to all of these components so about i need an id of um about and then contact i need in id of contact and then education i need an id of education and then projects id equals projects okay oh yeah for this should be education dash experience so let me fix that dash experience all right cool what do you think all right thanks i think um thank you thanks for your help thanks for talking me out of light mode into dark mode um can you start a series on django only back end i've been working with node.js but really want to learn django and the rest framework i have some between my youtube channel and this channel i have some uh django rest framework streams like the hackathon i did i did the first four hour hackathon of setting up django rest framework on my youtube channel but i'll definitely be doing more django what about javascript x state machine i'm not sure what you mean like using a state machine for the project um a link if you're talking about something specific all right so that's pretty good um i guess the last thing would probably be just add links for all these things but that might be kind of boring in the stream i might actually when this is fixed up use this as a portfolio since i don't have a portfolio since if you didn't catch my last live stream this is my portfolio well this is my blog but i have a portfolio tab that just has a link to my github it's kind of a sad portfolio you can use scroll behavior smooth to animate the anchor jump yeah i probably should do that um as i scroll that would be a nice addition so in view i wonder if there's a plugin for view that would set up the scroller because a lot of those scrollers are jquery let me just see a view j s single page what is it called scroller single page scroll plugin for view [Music] view full page live demo github single page scroll and mobile might not be what i want wait and there's no demo loading so um let's see scroll to the top this is usually the scrolling that i do in vjs and in any spa is when i navigate to a new page if i'm using the hash router i need to make scroll to the top functionality so hi curious drive how are you um i don't know so should i do scroller component uh vue.js let's see oh i don't know why i'm not getting follows shown on the screen now thanks for following everyone um because so two streams ago i had a big bot attack where a bunch of robots followed me and it was really annoying so i don't know let's see browser source oh alert box here it is there's the alert box so now it should show up for follows it should be a zombie running but yeah thanks for the follow everyone rafael curious drive everyone else um okay so yeah i was wondering what happened with that i'm slowly learning about twitch streaming yeah there's one zombie hi aw z okay so um vue.js scroll component single yeah uh how to build i guess animate scroll is what i want so view js animate scroll bye basic it was good to see you have a good night a simple way to animate scrolling effects in javascript and there's anime on scroll with animate css view scroll to view scroll um and view js animations transitions so i know transitions i don't think i've ever done like an animated scroll in view js um let me see if simple way to animate scrolling effects in javascript window.scroll i don't know just use some css i don't know if i've ever done it in css i used to just use jquery plugins for it scroll by scroll yeah let me let me try css um css animate scroll scroll animation css animation.com no dot rocks css div driven on scroll animation library that's overkill that's probably animating things into the page watch all their elements and positions based on the settings you provide them then yeah this is making things animate into the page which which would also be cool let me yeah that's cool hi tom hi sir lancelot thanks for the follows um this is nice though but it's not exactly what i'm looking for but i might end up using that later let me get rid of those so animate content on scroll how do you animate the scroll itself can i not do this in css oh good old w3schools does not work on internet explorer edge of safari okay html scroll behavior smooth oh that's that's really easy let me try this so in my default um let me target the v app tag then so the application and then i'll do scroll behavior smooth is that right yeah scroll behavior smooth let me see if that works nope just going to different sections still um okay so that's not oh this isn't actually i can use html here because this is not um scoped so let me try it with the html tag yeah it works with the html tag nice thank you that's actually so easy much easier than i thought but yeah so the only other things would be like if i wanted to add in my timeline information and link these to my actual pages that's it oh and then yeah basically just updating my own information from here so i want to know what all of you think about this what do you think about the design um the colors should probably change it would be cool to have a dark and a light themed toggle on the side too that would be nice maybe i'll add some features in here well let me push the code first so git status okay git commit am and um i guess what was it oh yeah updated page links and scroll behavior rounded profile pic maybe where is it might look a bit more modern i i think that's good actually i was going to say i was going to do them all in next stream but let me try that see how it looks um so oh yeah this is a g image so let me actually the beautify images i should change them the project images i should change them to g images as well so i get the performance which might only matter if i have a lot of images let's see script um oh yes style tag let me do style uh sk scoped and then in here um the image tag and then border radius is 100 percent nope okay let me look at the classes here g image yeah let me try to target g image g image border style none so why is it oh my apps not even running right now npm run develop i need to make a portfolio too it's nice to have maybe update a selected item on the main menu when you scroll oh yeah um is that not updating that should be updating okay good i should make the image a little bit smaller than right with let's try 300 pixels looks really big oh no now it looks too small let's try 380. just a smidgen smaller okay i think that looks pretty good yeah i'm happy with that um overall it's pretty good um what did you say oh yeah this this does update the links are live there i'm not sure what you meant by that okay so one more time pushing one more time i'm not even going to check get status because i know what i changed um what was it oh yeah uh added radius to profile image okay and now on the github repo so i have a project board here and let me just go through what i finished so i added i never dragged these to in progress devs can show off their previous work experience sort of oh i never added a certification section i have a contact section with lots of icons a project section with cards yeah i have the project section um testimonials future learning i have all of or i haven't done any of those ones basically but um what was i gonna add i can't even remember now so oh yeah uh themes dark and light toggle i need to set colors okay so i have a dark and light theme that i can toggle and that's all ready to do and what else anything i should add oh what is the difference between m so so a stands for add and you always have to add before you commit but if the only thing you do is mod is modify files like oh you can't even see but um this last commit i didn't add any new files so i could just do dash am but when i add new files that haven't been tracked by git i have to add them to git and then save them and then save my changes to them so add is just letting get know about the files that i want to track so i basically need to do add yeah for any new files or folders i create but the um but if i'm only modifying existing files that git already knows about i can just use the shorthand am on commit if that makes sense um okay so um yeah i think that's it so i i really want to add a theme but i'm almost done with my two hours before i have to go and eat is there anything else i should add anyone else have any good suggestions for this for this app readme needs to be updated i should probably add that as a task here so update read me with project specs and mock-ups all right so colors theming readme update and then basically adding a few more features to the app so if i work on this again those are the things that i guess need to be fixed and worked on first all right so if uh no one has any other comments or things to fix here's the repo by the way if you want to check it out uh feel free to raise a quad or raise an issue or anything else if you have suggestions for this and then you can also check me out on discord there's a discord yeah and i'm live i check discord and try to chat pretty much every day and then what's my next uh live stream oh yeah my next live stream is wednesday so i'll work on one of my projects wednesday not sure might be django again because i've been doing a lot of vjs on these streams so we'll see or maybe i'll take a vote again on what i should work on that seemed to work pretty well yeah so thanks so much for tuning in to the stream it was nice seeing you but i have to go eat lunch what about nav bar when resolution is small oh the side nav bar yeah okay i'll have to i'll add a card for that in projects but i have to run right now so thanks for all your input and everything take care you

Channel: Faraday Academy

Views: 9,607

Rating: 4.9413919 out of 5

Keywords: gridsome tutorial, build a vue.js project, portfolio in vue.js, vue.js gridsome, gridsome

Id: laktPX9wyXY

Length: 218min 30sec (13110 seconds)

Published: Fri Sep 04 2020