Framer Beginner Tutorial: Portfolio Website ( free files)

Hey guys what's up how you doing in this video we are going to make a portfolio in frer yep I know we've done for before in the past now let's talk about you can see in the video showing you see the going to make sticky scroll um animation some St St to stuff that you will find very helpful to learn about and also the remix file for the frma is going to be below so you can duplicate it and TW it to your liking fig going be low too so You can also get that for

yourself let me if you find this helpful I some time starts Rel l so you won't waste your time scrolling through check and checking things with all that said um yeah let's get into it yo what's up how you doing in this video like show the title we're going to be creating a portfolio template in frma so there'll be a remix link there be figma file for you to check it out tweak it to your liking and use it as a portfolio if you Want to I just want to show you how I did it

for myself so you can learn from it and use it in yours as well so how did how did this project come about I did HG last month I finished L last week and all my friends we we asked to build a portfolio and I build mine and all my friends were asking me how do you do this how do you do this so I thought I not I not make a video about it but before I thought about this we had a call and we spent almost an hour on the Call explaining for my

stuff and it's the audio wasn't recording so I told them I'm going to record a new one and this is the one I'm recording enough with talking and let's get into it I set the timer it's going to be 1 hour long hopefully and I'm setting the timer and start now so I'm going to cover everything from designing the sticky sidebar so this is what I'm going to cover where is it so this is my portfolio here you see has the Scrolls This place scks this place navigating in one page I'm going to cover that

I'm going to cover um I'm not going to cover CMS that's dealing with um content using um using the CMS for Content I'm not going to cover that in this one CU it's very complex and it will take a lot more but asides that yeah I'm going to cover the rest of things adding links linking Pages um using multiple pages so the example now this is how I got my inspiration this guy my this is own I Know mine is not as funny as it is but yeah you can see how only looks like looks

very neat so that's the same idea I trying to take from and with all that said let's get to it um first things first I'm going to open frer my frer yeah this is my FR here we can just um delete everything because for a fresh delete yeah delete it yeah so this is what a blank P look like um the the color if you for the first time not to Worry I will try to explain everything I'm doing so you understand first thing first I like to do is to understand what was done in

figma so in figma now we have this side by here mean that it should be sticky and I just scroll on desktop it stays there and over here there's a textt it from the side this one there's a take elements showing that the showing that the element the images portfolio projects will be moving around there be moving so and there's a Selected works and yeah and on the other one other page there is so in fact this I should fix this here so this about should be active and this one should be default so if

you don't know about um variant variable and in figma it's going to be quite difficult for you to learn how to use them in frma but not to I'll explain everything I'm doing and there's going to be this F is going to be shared you can see I've titled it this so you guys I'll sh the link with you guys and You get it no email required we start with the H page first so this homepage what do we need we need this AR section here we need this here so let's start with the AR

section so what's the background color of the H page 24424 2 2 42 44 let's go to F I might need to be let make this one big screen so and yeah so let's call this the background so we can add this color sty here call this The background yeah and um sorry this is the figma file and this one is what's the background color this one so weting this one now so this is background color and yeah I'm just going to give it f so call make a frame you do rectangles everything is a

frame here and in that frame we're going to what give it 2C 2C 2C I call this the Light BG color I don't know I'm thinking of names on the spot but now you're wondering why is why is it coming back to the side the problem it's not a problem it's actually that this desktop is a stack so if you come over here you see that is a stack if I remove it now this can move anywhere you want it to move but if you give it a stack layouts stack or grid when it's a

stack you can see num any you cannot Adjust it that's how F works so it's important that you know what you're doing on that end so um we have this here we can call this the sidebar Side Bar sorry spell this wrongly sidebar by the way you want to rename things fast control R to rename fast and asides that what else um we have the sidebar then we have this main container here so this sidebar like we see the design is going to have a stroke to on the side there but Luckily I have so

you know I need to stop switching up so luckily see this is the border to add a stroke you go to border you know is you see anything you can see the B is changing so now go to B you can change you see I already added a stroke look like I added a light background and background style add a stroke previously in the first color my friends and yeah um but this top T is top right bottom and Left we want to add the border the border line to the right that's this side here

so we're going to give light right one and give the top zero bottom zero and light zero and you can see only the side has the Border I hope that makes sense to you it's about it's like figma you know um Let me show that works in figma so you understand so this is it in fig you see here all top bottom left right so just the right so that's what I just did now what next um so we go in The sidebar now let's do the main bar sidebar frame yeah F frame and call

this one what um main container now why I'm doing this this way because previous when I did it that way people are confused first so I've already had an idea okay this is the better way to explain it why I'm doing it this way is that this is way the sideb content is going to be this where the main color the website is going to Be so we taking from the broad eye view to each of the sections don't worry you understand what I'm doing in the bits for now you don't need any background for

this main one everything is going to use the background of the desktop so main container you can give it few this head container too what are we using if you check check figma what's the what's the size 232 I'm not even sure what are we using here 282 let's do 28 first doesn't Matter now we can always adjust it later for now let's leave it that way then this one here the main container give it f the height is this we can always the heer but for the then this is what we need after giving

it f we need to give it mean or Max height we're going to give you mean or Max Max mean for WID and height we're going to give you Max WID like it's must not go beyond a specific WID and that's going to be um we're going to just a small laptop For now if a bigger laptop now this this my break this is design my break because if you think a bigger laptop 1920 1980 4K laptops 260 that's that's B getting bigger but for the regular MacBook or Windows laptop yeah this one sorry give

it fixed give it one to0 0 has a max it cannot go beyond that so now um this the main container and this is a side bar the main container we're going to start giving it each of them sections so There's going to be ER section there's going to be about section or whichever section we're going to add there so frame again I'm going to add this here give it hero section so this hero section now we're going to give it can we give it few no not few so let's this thing here and this

you know what let's not worry too much about it yet we can just stretch it all the way around it don't worry I know this is not The way to make responsive because to make responsive we have to use f or and or right now let show you something I use this plugin in figma called f frame to figma so if you come to your plugin section here and you see figma so type frma figma to HL with frma so now what that plugin does is that you select whatever you want to select so I

want to copy this text like you design the F already you don't design it a FR From scratch again you get me so um what will help us better is if we come over here firstly let's say the type typography scale so H1 is what 48 pixels um paragraph body text is what body text is 16 pixes how am I getting it this is the design I just 16 is here so I'm using that um not too rigid with that you can always change it to fit your style what's the button text the button Text

should it be bolder you know what I don't even know um but we can use the same button styling then this is H2 H2 is 32 H2 pixels um okay what else what else sorry so um what else can I point out that we can use this is like the split text 48 like like H1 call Button okay yeah this is okay for now we don't to worry about any that yet so now we're Going to copy this from here sorry I'm going to copy this should we copy like this you know what no I

have an idea let's copy like this so come over here search okay come over here fig HTML plugin select here to copy I forgot select it you have to select something before it can copy so select it just copied it now you go to frar and you paste it and you can see it's pasted it sorry so you can enter And you it you can seeed it why can't I select one selecting with anyways you can see they selected now so we now come over here to content Styles this you press each text text yeah

text Styles text it each one so now this H one I give 56 here when it designed was 48 so let's change it to 48 the line height we can give it like 1.3 that's okay body text let's come over here um body text this 16 yeah And color is subtext you know it's okay we can always change it when we want um if H2 so the problem is that I did start it previously like when I had a call I forgot that I start it previously so for that but you select the H2 you

come over here see have I done H2 not done H2 yet so I'm going to create a new style and then two edit I'm going to call it um yeah the stting the starting applies you see it applies directly from figma so didn't To think about it so if you start everything in FMA previously just bring everything back to FMA and you're good to go now we have our you check here your asset you see we have sorry something happen so 81 82 body n link so that's it we're done with that so now go

back to figma again and now let's copy this text you can see now is auto layout the auto layout that you apply figma is going to apply to frma as well so come Over here FMA to FMA copied it come over here paste it apply and now it's giving it 100% we can give it F this yeah it's okay we're not worried about that yeah um we can give it fix contents okay um the spacing is sustain okay this is fixed give it F this is fixed give it few because it's important to have few

like right now I just start designing already for this a section now too go to your layer so you can see what I'm pressing layers your section I'm going To give it what fit content no I'm going to give it yeah fit content okay I'm going to give it fit content here too fit this the main content okay section fit um yeah the problem if you understand the lay you know that you cannot give something feel if what is inside is not aut the layout so right now this main container is what is um see

if it's see Max we sorry um fit you can see it's all the way here now we Canot give it um what am I saying you cannot give it f anymore okay F okay it's going give F why okay because the desktop is stacked yeah if this desktop is not stacked let's see something you see that this cannot be F anymore there's no F working here so the parent container has to be stacked let come here stack this way around take it up I'm just breaking my design to explain this better to you I hope

I'm exping well please let me know so this main Container now you can see is there you can let's just adjust this fix for now so it be all the way down so we can actually see our for the section and it's take it all the way up align to left take it to start this start takes all the way up now our AR section is at the top now we can give it f you see it takes the whole screen the whole length there and fit is okay so now let's start taking alignment from

figma this is um 80 pixels from the Left and 62 from the top so we can just say like maybe it is the padding is like top is like 64 right is 80 bottom is let's say 64 left is what 80 and now with this we can now um at the center we can take back to the start and you can see it's not coming to the edge it's okay way it is and um what else this the AR section um we need to add the buttons this buttons now so now I don't know Should

I add this AR there I wasn't sure remove it it doesn't look that fine anymore it's just me so give it medium so now this button we're going to take it so frer so as well I'm going to make it a component as well so that's copy copied it already so you just select your e layout and you can press paste there and this button as you can see looks okay we can give this the text what can give a text create a new style paragraph This You can rename it um rename you can call

it button so this from figma already this are the button is going to be looking like now and yes now to make a component in frame you're going to select whatever you s the button you want to to component it create component it actually to name it create now if you the components now you can call this one the primary something is wrong okay primary you can create a variant this VAR is going to be what the Secondary secondary secondary we can change the color and the likes so this color we're going to come over

here we're going to give it like be subtext I don't know what color what color they use here 444 so come back here and we're going to make it 44 this T are going to give it what give it white I don't know the col give white and it does it now now you can give it over effect to so on over we Can make it we can make it darker so we can give it um sub text it's okay and for this one on over we can make it even darker on over we can

make this one the call the background this so if you test it you see play it that's an over for that one and this one on over see it's not so hard is it so now this text gu resume is going to be the content variable C Text Buton text so what does this mean this means that wherever we are now we can use this we can change the text and so this get resume now we're going to duplicate it contr D and now want to what you want to call next on view view work

so I'm going to come over to button text and change it to view work it changes and you can change the variant to to secondary it changes you see so right now you can duplicate it and just Change keep changing to whatever you want to change it to now this two buttons this not the way we want it like got like this so we want it the other way around so we're going to give it um add stack that's control option control shift enter I guess and you change direction give it to start and spacing

is 16 and make it f I think f is okay so yeah that's It and is that it so this is 20 16 what's the space in here 16 so we're going to select this two again give it that's stock I'm going to give it 16 I'm going to give this one you know few so let call this on hero text it's good to name a say it's going to beier to navigate this is the button you can call this on button group So from there you have the head over here and the head is

is fixed which is not bad let's give it 24 so give more space in there um there something I'm going to do for now I'm going to leave the way it is it's a mistake I've made so far but you cannot notice it yet until you trying to test responsiveness so I'm going to leave it the way it is only test responsiveness we know so we already talking for almost 20 minutes now me section yeah let's go Let's go let's go let's go so next thing is um send an email we can always copy this

one sorry [Music] copy okay good man that hard past my God are you kidding me oh yeah so this how you paste it in frame and so text so F container and that's it there so we have that Already have the real section already so now what next we have this section here which is the um the works so this works now we're going to copy it to frer as well so come over here you can see I did I entered this is the work frame press enter s the images only the images copy to

frer copied so now what am I going to do oh it's already I did it last time but let me see if I paste it see there the same thing again over Here so I just delete it so you can know I forgotten I did that already on this section you can see we have the her Section already now we're going to now create for the work showcase section so press frame again you see inside inside the same main container we're going to do that see you can see this main container what's the spacing you

can change it to zero and you see that now we're going to you soon geta what I'm doing now so let's call it the work Showcase cancel this give it f and um yeah that's the frame for the work show case but now we want it to be interactive the way this one is over here so you go to home the way it's like this here this what we're going to do um sorry back to frma where's my frame I forgot okay yeah it's the next page so I'm going to come over here to interactive

ticker so you have different options you can use ticker you Can use cook you can use car I use ticker because it moves on his own if you use S you can drag it problem is that you can't adjust the size of each element you put there like it will give everything a default size and that's annoying I don't know why they do it that way so TI is the best option if you don't want any problem with frer it may be a code override I don't know that yet I'm not a FR expert yet

but um just sh what I know So you guys can use it for your project so fixed F so that's that so what we going do now just drag this this cool three looking dots drag here one drag the second one two drag the third one three drag the fourth one four drag the fifth one five now that's it and now if you play it playing already you see but now this is not looking as good as we want it to look Like so I'm going to come over here again and we're going to select

a TI and we're going to change some things for examp firstly we're going to change clipping see no clipping see that that F disappears padding we're going to make the padding zero so it's directly close to the hedge of the thing and we're going to what else should we do yeah this okay for now it's okay yeah we can also do some effects like on over we want it to slow Down by 0.5 so this looks like so you can see it's moving fast when you over slows down when so that's something you can do

yeah that's cool that's it you can also um adjust two5 items Direction ping clipping something that was there forgotten what it was you can just like sping between elements I'm forgetting something I foret something I just Direction when I remember I will show you let's not D on That so we have the um hero section now and the work section done um you can see this one if I give it fix the fit content the this sticker is what going to determine the size of this thing on but yeah on mobile you should just compress

and the WID just so just keep going yeah I don't need to explain much on that one where sometimes you might need to create a new tier if you want a different effect on mobile so on desktop this is what this sticker works like one Going to create a new one well for this one I don't think we need to worry about that if you want me to make a more inp tutorial on FMA like something different than this let me know but for now if you're enjoying this let me know as well so let's

keep going we've done that now what section do we need to do we need to do the selected work section like I said I'm going to cover CMS and CMS means that um how this portfolio works so for example you see that in my portfolio Here if you click social media this you see the image up say interaction protype and like that I don't cover that because it's quite complex it takes a lot of time before I figure that out to so if you would like to see on that you can let me know I'll

make a video that or Link videos that it's been same as well for you guys so but just show you to do some cool interactions with these things here so for now we're just going to go to select The work and click on one of the work cards so this is the work card and this also the seed work this so just click on the work card we're going to that and go to F so yeah that's it f and then we go to main container back frame and call this on selected work selected works

and um canate this give it f always check this thing see the Gap is None so can it be minus okay so this something to know because yeah I'm just just check next time if the Gap there's Gap so you know where where the spaces are coming from so there's no Gap so no need to worry now work um I I can p this one here so this card goes inside already we can give it fit content you can see it's aing this well and this work card you can call this work card work card

um it's not Perfectly designed there some I could have done better to make it better but for now let's just make it the template project name and um yeah this could be better too honestly I'm not sure what I'm doing anymore we give it like maybe 24 I'm not sure I'll give you back this for go sake I don't know what I'm doing anymore let's just kick back to 16 or 12 or whatever I used before and this Now this work work out now it's going to we need a border firstly this border is going

to be stroke so it's going to be see color should be the same this I think Str for that one so sometime you may make mistake in frame in figma and just realizing so now this suppos to look the same so this is what look I wanted so it be looking the same on all edges give it the same B and um now as you can see this work out there's no layout on if I give the Layout it's going to break you see this you see this one is yeah it's going to have a

it's like it it just looks weird you know what's the space down here I can the space things like that so I'm going to fix it with you so you can see what I'm going to do um Gap we're going to it's not Gap good pading no Center we're going space between this space between can see take one of these things up and the other thing down so this is work Card now this what I'm going to fix I'm going to give this rectangle inside here I'm going to give it um let's call the cover

item I'm going to now give it a frame inside add a frame this FR I'm going to give it f content few content is taking the w space I'm going to cover it cover now this cover you know it's given it there's a background there's no background for This one but this this one inside it is also H something is wrong um okay if it's fixed that we can just adjust everything you can make it smaller again you can see this is it here so this is the cover item this is the cover I give

the cover fi container and I give the cover item is fixed so we can always adjust that to what we want for now we can leave it this way um can give it like This you can imagine this a full more up just chilling waiting for you to do something to it and um this is the cover work item if it's fixed you can give it fit later FR why fit so now give it fit so now this is both fit the cover inside is fixed okay okay you know what let give f f and

um PR is to fixed understand I see why they did that now and this one at the bottom too let's check it what is the sizing okay we give it few and um yeah so now let's see what Card fixed fixed it's okay and for each break point we can always adjust it so now this is what we're going to do this work card you're going to now give it a component what card yes you can call it project card whatever you to call it and now this now for each say for desktop now this

looks okay desktop or mobile it's not going to be okay you can create a mobile version of it right now I don't know it's look like a mobile so I'm not going to worry about that once to show You interaction you can do so you can make an over interaction over and over you can make this um stuff come like this ibe get bigger and maybe get a um Shadow let's cre the shadow for it and the Shad is like um see that's that's a cool shadow that's a cool shadow and you can give the

blow cool blood too and spread Of yeah so this it plus so now if you now PLS so these are some of the little tiny you can do in Fr and it's not so hard so um that's there and what else what else so now you can just duplicate it but this is not to do CMS I'm telling you ah of time this is not to do CMS CMS um requires a lot more annoyance I'll be honest with you so I make a video on that I'll just share resources that they found helpful So wrap

yes make it wrap and this SE works it is fit something is wrong why is it cuton okay this main container it's not it's not so this maintainer we're going to stretch it more this desktop too going to St it [Music] more Yeah so basically I just told you how to do that in and now you can duplicate it and use as many times as you want in frer um so that is the selected box now We're going to do something funny I'm going to give Works add a stack and this St is going to

be called Works section or something like that and why I'm doing this because I forgot to add the title I'm so we're going to like just do it so start space between you know what center it's not so bad you can give like 24 pixels or 32 pixels not so bad and this one here now we're going to look for a text go to Work section and paste it you can see is aligned to the this so this work is align like this we're going to align like this and we're going to take this email

back and take it to the top this is just a random random text I just took I'm going to now change it to what um selected work selected project project project and I project now remember we saved the text T previously so you come over here Tex Stes Ed two voila you've done that already and what else so I can give it LIF a line give it start yeah now this is not moving because this project what do we do this seed Works in that frame what do we do we made it start We Made

It Center so if we make it start now you can see everything is going to align to the left well and now make everything align to the left this work section we can now give give it a padding of what 8 all Around which is not looking good right now but now we can now change it to like okay 80 on the top 64 or 48 on the right so be 4 on the right let's say 4 on the Left 4 on the left okay it's not following our guideline anymore you can see 80 on

the left that's okay 0 on the left okay um top is what 64 um or 48 is 48 to and bottom is what 48 and now this Gap was the Gap Gap can be like 48 so so now you can see now you play how does it look like you see this is not sticky yet but on over all these things look amazing they look so lovely I don't know and the funny thing is I didn't use CMS you can take all this to separate pages so you click on this one a new page a

new page a new page so customize interaction further but most I recommend CS because That way you work smarter not harder but you know sometimes you got to do what you got to do so now you've done that already so seed work what other thing do we need to do before we go to the next P okay the footer section and how does foter section look like this how looks like um is it let's go together over CL down so like TI we're going to do the same thing so we're going to come over here

so we need to go to figma First we're going to like copy this One copy cool and from there we're going to take it to FR I keep forget on that screen so before we create a new before we add those this one there we're going to create a new frame and this Frame is going to be for what the footer the footer footer baby sorry for singing I'm looking there so um that's the footer and that's the F so I'm I'm going to fix the ID soon but for now just use Fu and um

the fot side is there you can paste This inside it and it stay there but no that's not we're going to do SP it so we're going to bring it out again this how we brought this ones out here we're going to bring it out here we're going to bring this thing out again here so this Frame we're going to delete the frame other the they going to be on their own because I'm going to choose them separately and on the fot T are going to now come over to you know what I have an

Idea we can make the f a component because the f is going to appear on almost all pages too so the about going to appear there so component so I'm going to copy this X this footer put on it footer yeah going to paste this here now I know you're confused what's up I'm doing give me a second so now come insert interactive no sorry yeah interactive TI put in the footer so I'm going to put this TI in the footer I'm Going to give it like this footer is so confused it doesn't know what

what the sizes yet so we'll fix that soon for now now we can out take this each of this one oh I remember okay so now this scker can work on any ordinary text it only works on frame so if you notice if I take it to this one doesn't work too okay cuz it's so text is it text let me see is that text it's not text SVG doesn't SP on Anything has to be a frame so this we're going to have to like change each of this things to the frame I just realized

that I didn't I I did that last minute I forgot so going to go this the let's work LW I'm just messing things up so this one you can also give the frame um add the frame frame the background color give it like star and for the rest we're going to delete it so that's one two three okay and now we cannot Duplicate it so sorry so alt or option and you drag duplicate just I can fig drag duplicate and this one so one more time you drag duplicate that's one three but there's more so

it's going to be one two one two one two that's the idea I want give so now with this now you can see select it one goes there goes there goes there so I forgot something if you're making mistake with the children with the second stuff you can just come over here so you see it Star lq lq so we choose star come here see it's just messed up now but don't worry it's okay and so now we can come one two three something is not selected is not SED something is not selected okay so

to this St now you can see if you please now it's not perfect but say something see let's go together together like that so We're going to fix that now and if you want fix that you just come over to the variant stuff again to the tier stuff St lq St lq change it so you can even adjust it to this so start start start that's one you can slow it because as you saw it was moving very fast so you can make it move like maybe 50% and over maybe it moves slow but I

think on over let's not do anything for over here so let's test it Now looks better now the spacing looks very bad so we can change the spacing too we going make like 24 or 32 that's cool um from there what else I think that's okay we don't need to do much there so now we can now adjust it and make it smaller since yeah right now everything we're doing is fix we add values fig and stuff that we soon change that because to make things responsive we need to use sub values like f container

Ram viewport things Like that but don't worry I'll cover that soon for now let's finish the foot schedule call or this so I'm going to try to add text link to a text what again so know what let's copy this some oh my painting me badly some so this this here and you're going to come over here to insert what am I doing sorry you can go to asset if you want to add something that made a component before bring it Back here so you go to button just bring it here and now you have

it there so that's how to use on the asset panel you can also see Tex can you drag that see you can Dr this you can only drag component I tried it before I'm just trying for the first time so schle the call yeah I thought I use the first time right oh I remember that this was the first button I used the first time so we can delete this Button let's let's confirm get to me okay so just delete this button this is the button I used in the first call my friends Del it

now this one is what Okay cool so now we can go back here to layers or Pages [Music] home and now go back to assets this button you drag here so get resume cuz I was like did I use that text so get resume Tex is okay or like Text or sample youle and this one now we can see if they click on this email want them to send me a message so um what should we do first need to get it styling right what's the stying of this email body text yeah cool that's the

body text and for the email we're going to give it link click on this thing link audien is link to a new page you can say you can write your email again there [Music] Salam gmail.com so if you want to work with me that's my email um edits you can change the color now when you add the link to something the color changes so you can edit that and change white like see I see default over this current color but the current color is this you can always take it back from there you can make

default the same I Don't understand why it hases three states sorry this current color is usually suppos should I SP it I SP one don't worry I SP one for now um this over is yeah you can give the over less opacity give the over more opacity and give the default less opacity so 40 50 50 so that's that and you can now you can now select this to control alt for some reason my screen stop recording I'm sorry about that I don't know what happened so I'm back here cont you know what I'm just

going to use the stuck and we're going to give it fit give it 16 I'm going give it there so to test it you can just press it see this what Happens so then if you like that if you don't like that you can always change the styling of your you can come to asset over here and you see Link and Link you see what sty so on over you can say you don't you want it to be cancel cancel the element if you come back here to over now cancels it I your choice you

see what you want to do anyways what else should we talk about Auto done the Section okay for Section copy this One so text put a text there past it I I copied nothing okay I should stop saying paste and now we're going to give it my back painful body yep and yeah you can also adjust see body to line 2.0 you can change can be line 1.6 1.5 and now you have the layers you have called pH so desktop desktop now let's give it um fit container you can see everything now Combines there 24

spacing give 32 spacing give like a padding of top bottom or only bottom alone since that's with this one need to be at the top my bottom let's say 24 and bottom is 24 the top going be like you know let's say 32 just just doing random right now cuz what I use in figma what is 41 56 you see I'm never using close but for now That's okay and we have that there so now let's look at this thing now any issues yeah we've not got we've not done the background for the footer so

go back to figma and you see the backround color is 53 53 53 that's a light BG and that's a stroke so the light BG and a stroke go to FR copy it just double click it to enter the component States f is going to be what light BG color and the stroke which is the Border You press over here going to what um stroke it's going to do all over but now don't it's going to adjust where you want the stroke to be prominent so once at the top once at the only at the

left so only at the top that's what we needed so so yeah and when you do that complete you see cool um what else what are missing now this one now this now we have the how many Minutes we have left 14 minutes we have 14 minutes okay we can finish the we can finish the side by that time so this side now what are we going to do we want make it sticky hey go my so um we're going to make make the Side Bar sticky um let's go to the first one here so

what do we need we need this um yeah this like like the logo the brand logo or something and the links so to do this you know What let's copy this brand logo stuff let's copy to frma I'm going copy to FMA the goal I'm trying to do is to paste it over here number one you can see there already we don't need to do much and the Tex is going to be what so texti 14 so it's so we can create a new Tex St paragraph and like let's change it rename it what rename

it Like Side Bar 14 pixels I guess and this one too those 14 pixels um say pixs you can change the color to subtext or stroke background sub text know so many colors has to go from and yeah that's there and the image is there so C this the user The Styling from figma apply there 16 pixels top 24 left right and 16 pix bottom yeah that's pretty cool you know that's what I like about the using Feature like it's copyright from um frer and it's really good so now this sideb now oh my back

out again okay I think I'm okay I think I'm okay wow my back so this now you notice this at the middle so what I just do I pressed the Side Bar give it a layout took to the m don't be so I'm going to take start bring it back up here I'm going to give it left line so next time it doesn't do that and this user is there now we're going to create a a Under um of stock for all the links that we're going to have there like homage about page and the

likes so this is what I recommend you do to one second before we do that let's start creating the states for the N bar button so if you come over here to the frame um how should I explain it so now you can see that this is something we have here you can see we have this here like a variant in figma Home default over active that's going to do there so let's just copy this home since styled no list not that list that the if you copy an SVG from figma it's very hard to

Stell it change the codor and everything that's why we have to use the frma um SVG that it gives us or else it's going to give you problem I realize I don't I've not seen a solution that help with that so for now I just don't try myself you spend hours trying to something that just a color sorry excuse Me and now we have link that's home okay and insert now you insert an icon you look for icons any of these things I normally use force4 and take gives you home always make sure you look

the WID and height together to make it skill together as possible together and then you can change it to like um 24 with 24 we is always okay yeah 24 is okay or 24 height I don't know I just use it need to worry about that and now you can like stack Add a stack and this stack we're going to moove the background color again I'm going to call it what nink linkink I'm going to give it fit container fit okay fit I'm going to give it like 16 um what's the St I use the

first time 12 and 8 no looking that good so you canbe like eight um and the Bottom sorry so the right the right will still 16 with the top that will get it I don't know this not look so good we can always Tri it later for now let's just Style Style it style so now this link this how like before let change the color of this thing so be yeah so now we're going to give it what create a component because we want to give it multiple States but why is in component form before

we do that we're going to give it this we select the icon Here and change name create a variable call it icon type because we're going to change it based on the icon we're looking for and this home so we're going to select it create create variable C text and going to call it nav link text why this important so you can easily adjust what am I saying so you can EAS adjust it good I can my mind right now bro so this is the default let's call this the Default now we're going to need

over State Sor we over state is going to be down here so over and over over so where's the okay [Music] F this like this okay that's true if you realize this now you see that this is sharp edges we have to change the edges from the default you can overate but you see it cve which is not fine so you change the edges here and give it going Be 8+ 6 see is okay and I give some active stat and this active St is going to be like um f the heart so dear [Music]

you see now that's that and now we also change the style of the icon regular du yeah looks better than du and Um yeah now we're back to the homepage for some reason is telling me that my network is bad which is surprising how to be bad this wasting my time we have 7 minutes left come on frea come on okay it's working now it's working now I don't know what I did they just press control R and it's refresh I guess it's very rird so now you can duplicate this thing the way down here

you can change the name To about and you continue to use a just step you and use scroll down you see something about user user yeah cool and you come all the way again like using the component figma um what should call this one project icon type icon user icon user icon type I can nothing okay project and this project we're going to give it work Um website I don't know project I know to use something I can't even think any wa for I don't know to think of honestly I'm so sorry so now we're

going to give it um control you know what let just do St last time I did control o something so it's command option command option it oh my God so now this is going to be the Container like nav container so 7 minutes can we finish 7 minutes like this so give it start make sure you give it start make sure give it fit and give it fit as well so that's there and when you give it when you press enter make sure you give it your them few and each of this ones now you

can see there an issue they all going to Center and that will affect it when it's Ski to the B so you're going to change like press just press this and come over here you find it and you see Tak a start when you come back you see it moves to the edge so that's important as well and then we bring it over here and yeah so now from being over there give it f and you can give it um zero Gap we canot give it his own top 24 and bottom 24 I guess doesn't

matter at this point but now for this side bar so why Make this side sticky because right now if you look at it it's screw with it you know so how do make it sticky I'm going to give it like um height of viewport 100 V it that's even good we wanted that and now that's not all we're going to get position to Sticky this is zero zero already and now you see the the I again changes now so I'm 100 VH and um if you no something oh it works already it works surprised it's

not Supposed to work something supposed to give this um board overflow style overflow visible cuz if it's hidden it don't work anymore so yeah I think I've already done that previously the first call I had my friend so that's why like it's supposed to work so it's working well you can see all of this works well on over you can see this thing does oh now you can see the edges are not it's touching the edges we don't want that so We can go back um sorry go home and in this in this one here

we're going to give it padding right and left to of maybe 24 you know at this point everything can be 24 24 I'm I'm not sure how bad that will look but let's 24 let's see 24 24 look yeah space is too much so write you can give like 12 12 not bad not bad not bad so now we can see we're clicking on nothing is Happening so we need to set some Styles so click on this thing now we come over to link create a varable for each of the link that's what we going

to do new tab yeah Smo that we're going to do and you this new tab again let's get varable for that for that yeah let I explain why because this project now this is on the same page but this about is going to Be a different page so this about now um we have enough time after I about page normally on the pages you see you see plus if I delete this page deletes you see a plus here new page about and that's cre a new page it's not that hard it's very simple and okay

now let's go back home so this home now we want this to be so now let's we're going to create a component for this side bar say about Create components and this components we're going to we going to make um this thing on home so layers home so this homeage I hope it's and so this home we're going to give it like um default variant two that's supposed to be active so on home it me to be active that's what we're Doing there if it's not on home if it's on about so we come to

about now I to make it think yeah conver assets sidebar drag here you know what we can do is interesting can delete that and you can come back to your pages home you can just copy the whole page again like the whole desktop contr C go X on about and place it in there yeah some not be the same but it To help you in working faster so now we don't need all these things we don't need the footer what we need a footer anyways That's goes and you can give it fixed fit yeah fit

and give you like um few and we can change this basic section here but right now we see the M container is f Max with is there and this is also now on the about page about for the about we don't want This on to be active click on it variant default now and the about is going to be the active variant two so you can see that and now if you go back now we can even um so outside so this sorry this leads to this on click Direction you do just like in female

click you can do this to and I think it's about um what I'll just do is I'll just copy one of my figma frames because this About I don't think we have enough time to you know what so I'm going to give us 10 minutes extra cuz up by delaying me with the time so 10 minutes okay 20 minutes extra start 20 minutes so um where are we um can call this Frame just to copy this area alone so we're going to come over here select the area to frame I don't think I'll make this

about responsive but make the first one Responsive so come over here and just past it here see it's there frame is there call like hero this like text oh my God so this is not good you can see this is some looking terrible we can make it like wrap yes okay cool and so some part are fixed make it feel make it feel and make it 100% [Music] F make it few and yeah that's it so what else what else what and space between 100 three we can change that so it3 is okay for that

and you know what funny is we can give this height viewport of 100 V and we can make everything inside to the center it's not fine though but that's possible and you can like that I don't have time to make a for it or do we have Time sorry F can look for the let's check this thing what the visible I visible um asss where the yeah that's there and this one is 100 H that's okay and um what am I missing yeah so now let's work on the own page back so that's make a

new page and um so now remember when we did this thing I remember you added I added a Link so the link will be useful so sorry over here on the home page you you the link have link link to where home new tab no we never need a new type stuff but about link to where about new tab no we need new tab for that and project we have a project yet we have a project but how do we do that so now come over here this the mistake it's not really a mistake but

just something I didn't do Al over here too we might need To give this user section here A Link and Link to home that's just new t no so when we click my face it's or your face whereever is the portfolio what am I saying me it's ni to talk for long honestly I'm losing my mind and so that's there this is there so now how you want to say you want to make if you want to press Pro and want you to come all the way down here what you do you come over to

say Project and you come over to scroll section give the name and call it um project give some can call it like scoll section give this is actually a good thing for2 footer but with interactions that's a good part call this one hero of Home hero and yeah so now if you look at this project now come over here and now look for the link um link to home in home section Because it's section now it's showing section options now to project and you see when we go back home andl it this works over effect

works and about get a new page and the project it takes here isn't that fine so I've Tau you almost everything in I think like right now with this you can do most anything you can create a page you can do you can do stuff now I want to show you how to make It responsive so that's why we not focused on yet and there going to be a problem I'm going to show you I'm not going to do that layout just going to go straight to phone what should we let's go stra to phone

there's no pressure first this me container here is it fixed oh that's terrible few okay this so looking terrible yeah but Don't worry we'll fix it yeah so for let's fix the Side Bar so now Side Bar let's call this on mobile let's call this mobile this mobile we're going to give it fit and this F going to this container you can see there's a top part oh remember remember remember okay so this top part we're going come back Here I something that I forgot to do so we need a naar icon and we're going

to create from scratch so create a frame give it 32 or 40 40 a 40 is the best one for touch bar I'm going to give it it na bar icon have bra got a B so I'm sorry what was I saying so line so not the line um get on that frame Draw Something [Music] horizontal so horizontal white radius and give it height of three that's there and um you know what so this it I'm missing something honestly I'm forgetting something this two should be yeah I'm forgetting something but no When it's time for

now let's exit so why I use exit bro you know what we're going to give it a create components yeah nav bar exactly we can change the name n Bar and this points about this points I don't know I'm not s this well right why can I s well this is very weird in Fr you know what you see so this will go up a bit this will come down a bit and I think is this Okay um two should look okay yeah two looks okay going stretch the edges four yeah so [Music] now um

yeah on click want it to Del this 45 this one to 45 and give it this and give this on to give it this and that's it so now click give it un Click yeah and click again return return now go back to side I'm going to put this I'm going to give it here problem starts because I didn't plan this previously so I'm going to give it option command ENT so apparently op option command enter is to stop my recording I didn't know it's in my life so it keeps cutting off and let have

this again so something is wrong so now this is we're going to give us a Frame a frame and this it stuck and this this here this one yeah good feel and um so yeah that's the it f it's not looking good right now I know feel we have two options we can reduce the name so it accommodate it or wejust the whole side well so this is 28 what should we Side so have 300 is okay so we can hide this thing now let's it on um on desktop so we're going to hide visible

no say okay here then the mobile we have a mobile we're going to come back here to mobile it's going to be there VIs yes and this and this thing should be closed so this is going to be mobile mobile um open so this mobile collapsed Close this here should be visible where is it now come on visible no good and yes that's there and they now create a new one you can press here you can ping the way down you can adjust it any you want actually there's no low that it must be over

by the side and the mobile should be mobile open and now when mobile open what you going to do you're going to change this Thing to variant two that and you're going to conver another container I'm going to give it um sh where it where it okay yes and um I think you can this any you can leave this you don't need to change any of this so now you're going to click this thing click and click yeah so now you go home you're going to change this thing To home close meant give fit content

I give you few so I made a mistake with back this mistake is going to show now so this the the hero section here we have 471 but mobile it's not 471 I can show has to be smaller than that so mistake number one is that it should be F when it's F you see this is going to enter well good it's not looking nice here so desktop we have to give it a Max WID of what 100 % I fixed ma be 450 maybe take it up a bit 500 so that it's going look

nice desktop and nice mobile but now mobile now we didn't give it a new really I give it a then okay I think it's looks okay now something so eding you if you press edit you see okay 48 48 36 okay so this like 36 pixel now on mobile like you can adjust the break points T size what else this 54 on the top is Going be 48 um the 80 at the right can be 16 or 24 this is 16 and the one at the left can be 16 and the one the B be

48 you can see that's looking better now so if you look at this now you'll see plate if you press it I like this impes down but you know that some point it works well just go all the way down here why does it take all the I don't Know why I don't know um so that's there this is also like this you can adjust the ticker if you want if you don't like the way it looks like on you can distance to so 48 um top say 40 this is 14 now um right 16

bottom 40 and left 16 what again and now you can see this one need to be fix Fix so what's is something is wrong so you come over here something see it's not something is covering it's not covering so you come over here again you come over to the main container was an isue it meant to be F and Max with yeah oh I should be fit actually and this F and this one should be what 280 or 380 should be like 300 because of that there and I changed it Before I don't know right

now it's looking okay so there's complain and um variant now this mobile on desktop mobile what can it look like so mobile what card I didn't plan this in my head so I don't know what card mobile I should mobile I think it's just going to smaller it's going to be smaller it's going to be less than 300 so mile need to give it an effect like this is okay and Maybe copy copy style you can paste the style here so you can paste the shadow effect that we did down and that's it for mobile

so now mobile we can change this to mobile see so we can we just change we just change the orientation mobile and from there we just need to select Works press enter and give all them F container see now I see the Issue so come back to the Mobile card I'm going to give it a minimum so minimum width of 300 pixels 300 and this one over right but the minimum is 20 piels so now I didn't apply yeah so let's the minimum with do again 300 so I'm going for every single thing minimum weight

of what 300 so now and what else what else are we missing so the name Remains the Same the Same you can TW that if you want so 48 you can make can be 32 something else is missing okay yeah over here so we can make a full for mobile you can make this one so you can make it what's the we for mobile 390 so what's the issues here this need to be F and when it's F we need to wrap it so it can work well you can make it 24 or 32 yeah

yeah you see and Um yeah it's okay it's not it's going be perfect so to to mhm give it fit now that's the G give it fit fit like what you do on the desktop the mobile too and um is anything we missing I thought add links too I thought so you just play now let's see okay over effects work H why is this one not looking good on desktop Anymore see what's the on desktop I think on desktop size for now I'm really surprised that it's looking like this on desktop why this a small

trick and changing there see you see this one it's responsive that's the point you can always adjust this you can keep increasing or decreasing the minimum we based on what you see or you don't like or you like here so now if you click on this it's going to open an email my mail To my sorry to my email so that's to email me so what else um you can do the same for here so for projects SC the way down about thday can VI on mobile we didn't do for for down let's go back

home wait about why is this okay something is wrong so about where the about page home should noted should be about selected yeah about view Okay this mob view this thing is going to look like this it's like this here and yeah let's work together this is works this is works this is this all the way up I'm not sure why I'll look for solution to this right now I don't know what why is say that and that's it so I hope this was helpful just some time so just in time and that is it

creating a portfolio website in fra to create a New page in this video we learn how to create a new page we Lear out so a lot of things honestly I everything we learned so far and I hope you got value from this let me know reply leave me message Twitter Instagram WhatsApp if you have my number yeah and I'll see you the next one have a good one bye hey guys what's up so before the design is ready already I've made to tutorial I want to show you some final touches I would normally do

from working On a client project you come over to a defa language you can do that's localization just put English there confirm that's one add local language English where you B you can use Nigeria B United Kingdom um name English add yeah it can always um that's one so what's the word it can always adjust based on whoever is VI it you know secondly this settings here you come to your own page or about page you Give it a name I'm going to go to General instead I'm going to change it to um portfolio simplate

very important like or just give the name can put like abam so that's the English language name English Med I am a detail oriented designer with a background in front and Development yeah so that's that's cool so um accessibility mission yeah sure is important to worry about that one if you want I don't think it's important and now Imes five icon image this link that appear when you share so you use 1,200 by and2 so something figma first let me show you so F this to of is 32 so rame five icon2 and the second

one is the um EUR Section which is f again which is what 1,200 120 by what 630 and name is social share and what I do now is for the I just use my image you can come over here the one use as a logo your business logo comp what is it here so you just bring this inside here you can make it like this you can the background so like you don't need backg this alone works like this for the five ion for the social share image we Just talking about how to do the

five ion and the social shame this what I designed sorry if you didn't get to see the recording stopped the game very annoying but Yep this is it I just design this you can use pencil for this simple designs for to it's going to be 32 pix by pixs social share is 1,200 6 630 and with that said this why you upload it to your site so upload five icon um yeah and this one you you up it yeah that's it and you're done so What you press save so I've not t you how to

publish a site in web frame I know this is just the button you just press publish but there's more to e than that to publish the S to publish you'll see that unique state so yeah it's not the most perfect name so you can do now you can just come over your name like WR Poopsy portfolio portfolio website you to photos media Wiki a and you press Enter and then this can be aort [Music] now you see it so this name is way better than using Wiki something something with numbers and leges so I know

some I know some my friends made that mistake so that I'm mentioning it here so they would if they watch this video they will know this there this works back to home back to home too anyways that's everything I want to say thank you so much for watching and I'll See you the next one bye also I also want to mention this project was for my at internship I did Internship like started two months ago and we're done now we work with teams developers PR likes and we ask to be portfolio sh our work so

far so I be a portfolio which not be the best in the world but of my friends asked me how did I do some things we had a call Google call and I show them things apparently it was not the Recording didn't record the audio which sucks so I decided to record again sh a more in depth look on how I built it so I'm sharing it here on YouTube too so if you guys find it helpful please let me know I really appreciate your feedback um with that said that's all I have to say

right now I'll see you next one please don't leave a like And subscribe and do all this cool stuff comment Ms I will sub your feedback you know thank you so much for the support so Far bye