All right everybody.
We have a really exciting video here because we're gonna build our own portfolio page.
That's right.
We're going to build this so you can showcase your projects to your future employers.
And just have a place to put your projects that we're going to work on throughout the course.
Again to impress that special someone or your future employer.
Now this is actually very cool because this page was built by a fellow student.
This student actually finished the course and went on to create this project as a way to say thank you
to the developer community that he received so much help from.
And it's called simple folio.
And we're going to use this project as our base for our portfolio.
Now I'll link to this repository so you can follow along and you can customize your own portfolio.
And as we go through the course you can actually add the projects as I'm about to show you.
Now one thing I do want to say is that this project is M.I.T. licensed which means that you can use
it freely for yourself and customize it to your liking.
I'll show you how to do that but I do want to acknowledge the fact that this student put in a lot of
effort to this and it's actually quite a nice project.
So I do recommend if you have just point five seconds going to his project and clicking on the star
to show some appreciation.
All right enough talk.
Let's actually build our portfolio.
I'm going to clone this project.
I'm going to use SS H but you might have to use HDP s depending on your GitHub setup so let's clone
this repository I'll say get clone and clone these simple folio project all C.D. into simple folio and
I'll open this and sublime.
Now don't get intimidated by all these files.
There may be things here that you haven't seen before.
Again we'll cover most of these throughout the course.
But luckily for you this project actually has a really nice getting started guy.
So let's go step by step.
We've cloned the repo.
We've seeded into the repository.
We can run this command if we want to remove the origin repository.
That means if we had fought the project which by the way if you want.
You probably might want to fork this project.
In my case I just cloned it because while this is just for demonstration purposes but you can actually
run this command to remove this original project so that you only have your own copy your own forked
copy to worry about because most likely you won't do any pull requests to this original project.
You can just have your own version.
Next we run npm install.
So let's do that.
Let's say npm install.
And while that's being installed Let's go next.
And it says we just have to run NPM start and it gives us a couple of commands.
If we have any issues but hopefully things go well we can just run NPM start.
Let's clear this and say NPM start
Hey look at that.
There's the portfolio.
Very very cool.
Just like that we have our template for our portfolio.
Now if we go back we'll see that we have template instructions here.
So it actually tells us exactly what to add.
And we have enough knowledge now to be able to understand this.
Right.
So it looks like we can change things in the template thought a [REMOVED] and change the hero section
which is the main section with our hero title and hero CTA which means call to action.
So let's do that let's go to the source folder into the templates that a [REMOVED] and then well we can
change the title here to my name
and then in the hero section right over here we'll change.
Hi my name is to your own name.
I'm the unknown developer let's call this the I'm the developer.
You need an end the hero call to action instead of no more.
We'll just say hire me.
Sounds kind of desperate but it's fine.
All right.
So just by saving this it's going to detect the changes.
And if I go to our project.
Hey look at that.
I have my name here.
I'm the developer you need.
And it says hire me.
Awesome next stop is probably the About Me section.
Let's go here in the About section.
Once again there's a nice roomy so we can just replace our p tags with whatever descriptions we want
and we can also change the image so that we have our image in here.
Now in order to do that all we need to do is to change the profile picture in our assets folder so if
I go to the assets folder I see that there is a profile PMG here that we just need to replace.
Now if I open up the project here if I go to source the assets folder I actually already have my picture
so I'm just going to paste this picture in I'm going to replace it with my own profile.
So that now if we go back we have my giant face here and check that out.
There you go.
I have the About Me page.
I can even attach my resumé if I want.
And now let's go to the projects section.
When the project section is quite nice so we can attach source code.
We can see live so we can maybe attach a github page link here.
Our own Web site.
So let's say throughout the course we build projects and you want to showcase your projects.
So we have the background generator project that we've created already.
But let's say in an upcoming section in the react section we're building a project called robo friends.
So let's say we just created the robo friends project which is right over here and this is something
that I'll link to when we finish that section and we'll have this exact setup and let's say we want
to showcase this project on our portfolio.
Well if we go to the instructions once again we have a great step by step guide of what to change.
So we just need to go to the project wrapper section.
So once again go to our template.
Scroll down past the about section into the project section and here.
Each row is a project.
So let's make this a little bit bigger.
We have the project title which will replace this with robo friends.
We don't have to change the scripture right now and then we can link to the live version which in my
case it's right over here.
Again I'll show you how to do this.
During the react section of the course.
But I can just change this to a trip like this.
And the source code will just be this repository so once again copy and paste like that now.
The last thing we need is to have an image of our project.
Now I want to show you a really cool resource which is this logo maker and I'll link to this resource.
It's called Hatfill and we can actually create logos for free.
So let's just click get started.
We'll build a tech logo but you can pick whatever you want and let's say we want an innovative logo.
All right.
Let's click next.
And I've done this before so we can call our project robo friends.
Let's do a capital are actually no let's leave it like that.
And the slogan that I chose is the only friends you need.
So if I click Next year let's say what the logo before it'll be for an online store or a Web site click.
Next hand check this out.
It's going to generate some logos for us and they all look pretty cool right.
Let's see which one I like best we can pick whichever one I like this one so let's do robo friends over
here I can include that slogan if I want but let's just click through next and you can download the
logo.
Now in order to download and get the logo for different things like Facebook profile image Instagram
profile image you'll have to create an account.
But again it's free so you can still use it.
In my case I already create an account and I have this image downloaded.
So all I'm going to do is replace again in this same assets folder as before.
Replace the banner with my own banner which is the logo that we downloaded.
So again if I go back to the project everything should be working.
Let's go to our portfolio.
Hey.
Look at that.
That is awesome.
There is my project.
If I go to see live there's my robo friends project.
Again something that will build together so I can search all my friends and I can even go to the source
code of my getup profile page and notice here that the projects all have the same image now.
That's because in the code all the images point to banner dot PMG.
But as you can imagine by just changing the name to different logos you'll be able to have multiple
projects on your profile.
How cool is that.
And you can have different things like call to action.
Again we've looked at getting an e-mail subscribed form if you want it you can link to your get high
profile your Twitter account
and we have a pretty nice project just in a couple of minutes.
How cool is that.
Now if we go to the documentation you'll have different things like the contact section.
They can update the photo section that you can update but the last thing I want to do is this stylus
that is you can adjust the styles of this project by going to these styles abstract and variable dot
SC as s.
This is actually a file format for what we call SAS.
It's kind of like C Ss but it gives you extra features so let me show you what I mean.
You see here that I can change the default colors so if I click on this link that this document provides
it gives us couple of UI gradients that we can use so I can actually just copy this and you might see
that this is quite familiar to what we had before with our background project.
But if I copy this go back to the documentation and change the default values.
So that is if we go to the styles the abstract and then the variables we can change the primary color
and the secondary color of the gradient.
So let's just copy what we just copied from that gradient Web site and this is where the SAS files come
in handy.
You see with SAS files so you can do something called variables like this using the dollar sign notation.
And now any time in the SAS file when you use the word primary color it's going to be replaced with
the actual color.
So it's just extra little boost that you get with CSX.
Again something that we don't need to worry about.
All you need to know is that you can change the colors over here.
If I now save and go back to my portfolio a look at that and the colors are all different.
I get that blue color still get that nice gradient and I've made this portfolio even more personal to
me now I'll leave the rest up to you.
This is just a way for you to get started and keep track of your projects as you go through the course.
And on top of that there is also a step by step tutorial for deployment so you can actually deploy this
project to production using something called net Fi and make it really really easy to share your project
outside of just on your local host again.
That is something for you to explore and do on your own.
But for now if you have a nice starter template of your project pretty awesome right now the last thing
you should do is once again thank the student for the work that they've put in with simple folio by
giving it a star for the repository.
And once you're done.
Go to our Dischord channel and if we go to look what I made channel you can share your portfolio with
others or you can think the student that actually created this which has this handle.
So let's just say thanks for the simple folio.
We're recording right now and using your project pretty
area your own little portfolio project to get you started.
I'll see in the next one by.