Responsive Portfolio Website Project

Responsive Portfolio Website [5] – About Page With CSS Grid

alright guys before we start working on the about page I want to I want to create a function for our set text color because right now if we change the

primary color to let's say white any light color the text is now unreadable because we just set it we set the color of the text to white now what I want to do is create a function called set text

color now it has to be a function not a mixin because if we want to return a color from it and if you want to return anything you it has to be a function not a mixin so let's create this right below

the background mixin above the media queries and we'll say set text color okay and instead of doing at mixin we're gonna do function like that and we're gonna call it set – text – color and

it's gonna take in an initial color variable so that'll be whatever the background color is will pass in and then we want to do an if statement so we want to say if and we're going to test

the lightness so we can say if lightness of the color we pass in is greater than 40 so if the lightness is greater than 40 then we want to return so at return black as our color okay then we want to

do an else so at else then we want to return white as our color okay and we'll save that so whatever's passed in if the lightness is greater than 40 it'll return black if not it'll return white

now to implement this let's go to our main dot s CSS let's go to the body and see where we just we put white for the color instead of putting white we're gonna use our mixin so we're just going

to say here we need to include let's see actually no I'm sorry we don't need to include since it's a function we can simply say set text-color we should be able to just do

set text color and then pass in the background color which is primary color so let's save and there we go so now it's black because the primary color is a light color if I change the color to

the primary color back to what it was which is a dark color now it's white now we want to do the same for the menu icon see if I save it now the menu icon is not really visible so let's go to menu

dot s CSS go up to the button and later we put the color so it's in the button line right here wait a minute is that where we want to put this yeah so let's do instead of background because we're

not using color we're using background but we set it to white so let's change that to set text color and let's pass in here the background I mean the primary color which is the background color

technically and save and now that's that color okay so we need to do the same for the nav links so let's go down let's see where are we going to do this let's see nav lunk alright so we're

gonna do it here right now they're white so we're gonna change it to set text color pass in primary color save and there we go alright so I think that that's all the places we need to

implement this for now so I'm going to change that back to the the dark color I just don't want to do that let's change this primary back to four four four and there we go good so now let's create the

about page so I'm going to go to my dist folder and we're gonna create a new file called about dot HTML so if I go to my navigation here and I go to about it's good it's gonna give us this message

because in the menu and the index if we go down to our links I have slash about slash work we don't want that we actually want to remove this slash in order for this to work or else we'd have

to do like slash dist and we don't want to do that so let's save that and make sure we can navigate to a boat and there we go so it's completely empty obviously now each page is very similar in that it

has the the navigation at the top the over excuse me the overlay in the header the title and all that stuff so I'm gonna copy everything that's in my index.html I'm gonna grab all of it and

go to my about HTML and paste that in okay and I'm just gonna close this up close some of these files up up here and let's work on this so I'm going to change the title to just about me and

then the only thing in the menu that we need to change is the current class because right now it's on this list item of the home item but we want it on the about so we're gonna put that right

there okay and then we'll go down here let's change let's change the ID of main to about and let's change this isn't going to be a name anymore it's gonna be about

and then me will put in side of the text secondary and then for the SM heading let's just say let me tell you a few things okay and we're not going to have the icons so we're going

to completely get rid of this div right here all right so now we're gonna add our extra content and if we look at the about page and the final project we can kind of see what we're doing here so we

want basically this is going to be the grid this is going to be where you're going to use the grid system to align this we have the bio image the bio and then we have job 1 job 2 and job 3 we

also have a footer let me just quickly add in the footer under the main tag I'm gonna say footer and let's see I'm actually going to give this an ID to of main footer and we're gonna say

copyrights let's say copyright we'll put in our HTML entity for a copyright symbol and then 2018 or whatever year you're watching this so back up here under the h2 we're gonna have a div with

the class of about info ok so this is going to be the class that we add the grid to everything in this is going to be a grid item first thing is the image so let's say image I'm going to give it

a class of bio – image the source is going to be in the image folder and then portrait JPEG for the alt we'll just say John Doe so under the image we want to have a div with the class of bio and

inside here let's put let's put an h3 with the class of text secondary so that we have that yellow color and say bio like that and then we'll have a paragraph which will have some sample

text with Emmet you can do lorem and then the number of words you want so I'll say 30 and then tab and it just gives me a bunch of sample text 30 words so under the bio the bio is our second

grid item the images the first now we want the the jobs okay so each one will have a class of job so let's say dot job and let's say times three and now we have three three jobs

actually it's not do that let's do one at a time so we'll do a job this will also have a class of job – one and then inside each job we'll have an H three so the first one will say one two three

webshop and let's do a paragraph with lorem 20 okay 20 words so that's our first job now we'll copy this div and we want two more so one two SEC this one's going to be job – this one's gonna be

job three let's just change up the word the the title here we'll call this one designers designers ABC stupid names but doesn't matter well one thing I forgot was the position we want an h6 with the

position so here let's say full stack developer here we'll say h6 let's do front-end developer and then this last one we'll change it to let's do web works and then for the h6 let's

say we'll say graphic designer and you can put years and stuff if you want if you're gonna use this as your portfolio you might want to just kind of you know make it look a little better and add

some stuff but it doesn't really the content doesn't really matter here so let's save this and let's take a look at our about page which looks horrible oh the background image we don't want

that here so want to make sure we move the ID remove the ID of BG image from the body there we go okay so let's let's align all this stuff using grid CSS so we're gonna go to main dot CSS let's go

all the way down to the bottom and we're going to use grid template area is here so basically we can map out the different areas and where we want them displayed so first off let's take the

about – info and let's display that as a grid and then we want to add our grid – template areas and this is like a visual representatives a visual representation of what you want to

display so I'm gonna go on the next line here put in some quotes and I'm gonna say bio image bio bio that's gonna be the first row second row is going to be job one job – job three now if we look

at the final project here you can see you can see how this is mapped to this so bio image right here and then bio we want to stretch across – ok across – fractional x' that's going to be a three

fractional grid and then down here each fractional has job 1 job 2 and job 3 so so you have a visual representation of it so next thing we need to do is define the grid template columns and we want

basically three Fr so we could do one fr one if I wanna far like that or we can use a repeat so make it a little shorter we can say we want to repeat three times one fr like that okay now if we go back

to our site here and we save it's gonna look like this and notice that the bio isn't stretching across this job is up here it's because we haven't defined these grid tend these grid areas yet so

we're going to do that in a minute but let's add some spacing so what I'm gonna do is say grid gap and set 30 pixels and save and now I have some spacing and our next task is to create the grid areas so

first one is the bio image so it has a class of bio image and we want to say grid area is going to be bio image like that should be whatever we at whenever we put it as right here okay

and then we have the bio so class of bio and we want to give that the grid area of bio and then we have job – one is our class and we want to set the grid area of job one and I'm just going to copy

this because we have job two and job three okay so two two and three okay now there's some other styles I want to add like for the image sheva semicolon so I also want to margin Auto so you want a

margin Auto I want to set the border radius because I want it to be rounded so I'm going to do 50% and I also want a border around the image which will be the secondary color it's going to be

three pixels and solid alright and then for the bio I also want to just up the font size so I'm gonna say font size I'm going to set it to 1.5 REMS and save and there we go so now we have it aligned

properly let's see yeah so I think that looks good let's make this a little bigger see if that looks right yeah so that should look right now the jobs I want these to have like a little

background as you can see right here and a little border at the bottom so each of them have a class of jobs so we want to style that so we'll say job and let's say background and I'm gonna set the

background to just lighten which we'll take in the primary color and then the amount I want to lighten is five so if I save that it'll look like that we want to add some padding so it's not up

against the edge I'll say 0.5 REMS and then let's add a border bottom of the secondary color say 5 pixels and solid and there we go all right so it looks pretty good see what am I missing

I think that's good now for the foot are the footer looks like crap so let's do that oh and one thing that I didn't do is I didn't nest all this stuff in the about info you don't have to but I like

to use the nesting so I'm just gonna grab all of this and put it inside of the about info you don't have to though it's however you want to structure it is fine so for the footer let's see let's

go down here and let's say we gave it an ID of main footer and let's do text align to the center and let's add padding of one R M let's make the background dark so I'm gonna use darken

and I'm gonna pass in the primary color and I'm gonna darken it by ten okay make it a little darker and then color we want it to we want to use our set text color function okay and we want to pass

in the primary color as the background so it'll be based on that and then the height I'm going to set to sixty pixels all right so let's save that and take a look at it so that looks pretty good

now the issue is if our content didn't go down all the way like if it ended here this this footer would be up it's up here and I can actually give you an example of that so if we go to about and

we get rid of let's get rid of these jobs right here and save and look at the footer now so we want it to stick to the bottom we want to create a sticky footer so I'm just gonna put that back and to

create a sticky footer it's not very difficult we can actually use the calc function in CSS and we want to use that on the main okay so we want to use that

on the basically the element above it which is the main right now if we go to our main CSS and we go to the main class we have a height of a hundred percent so and that basically what that's going to

do is it's going to be a hundred percent of the content that's inside of it so if the content ends here that's where it ends and the footer moves up so instead of using a hundred percent I'm

going to comment this out and I'm gonna say min height and I'm gonna set it to calc so we want to calculate here a hundred viewport Heights okay so we want to take 100 V for tights minus the

height of the footer so 60 pixels and let's save that alright now if we go to our boat and we remove the jobs like we just did the footer should stay at the bottom hopefully so let's see these and

save and there we go so now we have a sticky footer and before calc was available it was kind of difficult to get a sticky footer to stay in place but that's all you have to do the the

element before it you just want to calculate the viewport Heights – the height of the hood and the footer okay so back to our about page now if we make this smaller it looks horrible okay and

what we need to do is add to our mobile file mobile dot s CSS and we need to basically change the orientation for medium screens and down and what I mean by orientation is or is it's this right

here the grid template areas instead of like lining them like this we want them all stacked on each other now one thing that I just realized that I did wrong is the mobile when we if we look at our

main sass file mobile we actually want to include this at the at the very bottom we want our media queries at the bottom because we want them to run after the initial CSS so we want to take that

and just move it to the bottom like that okay and then let's go to mobile s CSS let's make sure we're within the medium media query and this is where the brackets extension that I have is very

useful so we can tell that the yellow one is where it ends so we'll go right in here and let's say about info and let's see so we basically it's already displayed as a grid all

that stuff is we already did that we just want to change a couple things we want to change the grid template areas okay we want to change the a let's go on let's go on the next line put in some

quotes we want the bio image and we want everything stacked on top of each other than the bio then job 1 job 2 and job 3 ok now as we have it set we have the template column set to 3 fr-s 1 fi R 1

if R 1 F R now since they're stacked we just want one single fractional so we want to change its put a semicolon here and let's change the grid template areas lot areas columns we want to change that

to just one single fractional okay let's save and there we go so now everything is stacked okay so again visually this is exactly what we're looking at here everything is

on top of each other so grid template areas is very very powerful because you can basically just map out what you want where you want and you can get much more advanced than this as well but that's

that's pretty much the gist of it alright so once we hit a certain point we go back to our other layout awesome so I think that's it for the about page so in the next video we're going to

start on the what do we have next the my work page which will also be using the grid except we're not going to be using grid template I areas we're just going to use grid

template columns so I'll show you how to use the grid without using this I want to kind of just show you different ways of doing things on different pages we'll also use a little bit of flex box on the

contact page alright so that's it I will see you in the next video and actually before we go let's go ahead and just commit real quick again you guys don't have to do this let's get and all get

commit and what do we do here so I can't remember we just did the about page we did the set text color so let's say text color function and about page alright okay guys so that's it I'll see you in

the next video

In this video we will create our about page using CSS Grid with grid template areas to map out the layout. We will also add our Sass styling and make the page responsive

Code For This Project:
https://github.com/bradtraversy/moder…

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Website & Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia