In this video, I'm going to show you how to install the portfolio website in your own Webflow account. 1
So, you can make it your own, change things, edit content, even customize style and publish as your personal 2
website. 3
I've created a showcase of this project right here. 4
This is a place where Webflow designers can share their projects with others. 5
Go to this link, to access the page. The link is in the resources of this video. 6
Once you're on that page, you'll see this purple clone button, that lets you clone the entire project 7
into your own account. 8
Click on that. If you are already signed in, you'll get to this page. 9
There is a warning message, saying that we can't create a new project in our account, because we hit the 10
limit. Under the free plan, 11
you can only have 2 unhosted sites in Webflow. So, since you have already built two projects, the Chat App 12
and Team App websites, then you'll face this issue. 13
You have three options: upgrade to a paid plan, create a separate account or delete one of the existing 14
projects. 15
Alright. 16
Once you solve that limit issue, then you'll be able to create a new project. 17
Name your project and create. 18
And that's it. 19
Now you have your version of this website. 20
You already know how to do everything you need to do here. 21
But let me show you things that you should edit. 22
First the name. The logo is just the tag, 23
so just put your name in there. As you wish, 24
if you want first and last name, or just first, or just last name, whatever you prefer. 25
There's also the name in the headline. 26
Don't forget to change that. 27
There is the name in the footer, as well. In the copyright text. 28
Put your first and last name there. 29
Lastly, there are names in the SEO fields. Two places, home page and the project template. 30
Then there are email links in 2 places. 31
There is 1 in the navbar and 1 in the footer. Both navbar and footer are symbols, as you'd expect. 32
So it's synced on the project page too. 33
These are emailing links, 34
so you need to put your email address inside the link. 35
So, when people click on it, 36
new email is pre-filled with your address. 37
Don't forget to change both text and a link setting. 38
That's it for the personal info. 39
The rest is content, which you can update as you wish. Or don't. Feel free to keep it as is. But giving 40
it more personal twist, would be a better idea. 41
You can give this website your own personal colours, if you like. 42
Updating is very easy. 43
All colours are global. 44
That means you can update the global colour and all the instances of that colour will be updated instantly. 45
Click on edit. And just choose a different colour on the map. Or paste the color code. 46
Same thing you can do on the highlight colour. 47
Don't forget to click the pencil icon, otherwise, you won't be editing the global colour. 48
Whatever color you use for the background, 49
don't forget to update project thumbnails accordingly. 50
They are independent images, so they don't automatically update with a global color. 51
I've prepared Figma file for these thumbnails, so you can easily update and export new ones. Later on that. 52
Let me show you how I made this highlight effect. So you know how to reuse it, if you decide to. The highlighted 53
text inside a div block. Which has heading element inside, and a regular div blog as a highlight. Highlight 54
has absolute positioning, that's why it's stacked behind the text. 55
If you feel like highlighting some other text element, just copy this entire highlight box and edit the 56
text inside. 57
Because of these highlights, 58
this headline isn't one fluid text. It's bunch of independent inline elements, sitting next to each other. 59
So, to move the order you need to drag elements around or change the order in the Navigator. 60
Keep in mind, highlighted text can't span on two lines. 61
So try highlighting maximum of 2 consecutive words. Like Web Designer. Or have multiple highlight boxes 62
next to each other. 63
If you really need longer highlight. 64
The link highlights work a little different. 65
Actually much simpler than headlines. It's just a box shadow. 66
And if you need to apply that style anywhere else, just select a class name 67
yellow link. 68
And the highlighted text will be added with its hover effect. 69
As you probably noticed, the page has really cool interactions. Like those highlights on page load. And 70
that scroll line moving like a snake up and down. 71
Let me show you where these things are. 72
If you go to interactions panel, you'll see there are three interactions on page load. 73
They are quite simple interactions. 74
First one controls those highlights. 75
Second one is for the content sliding. 76
And third is for the scroll line in the loop. 77
You probably won't need to edit any of this, except one - highlight. Because if you add any highlight elements, 78
you'll need to add it to the interaction too. 79
For example, this new highlighted box doesn't animate. The best thing is to just add a text inside the 80
existing highlight boxes. 81
But if you really must add new ones, then here is what you need to do, so the new text animates as well. 82
The highlight animation is very simple. 83
The box just scales from 0% to 100%. 84
That's all. The initial state is set to 0 vertical scale. 85
And then it changes to 1. Which means 100%. 86
So it just grows from 0 to 100% in its original size. 87
And the same thing is done for each highlight independently. 88
That's why the first one runs, and then the second one. 89
So to animate the third one, select it on the canvas and under initial states, when this plus icon appears 90
click on it. And select Scale and put 0 under X value. 91
But before you do that, disable this lock. Because this is preserving aspect ratio. 92
And we don't want that. 93
We want it to shrink and grow horizontally only. 94
Now we need to add a final state. Which is to grow it back to 1. 95
And we're going to add that at the end. 96
Why? 97
Because we want it to animate one after another, not at the same time. 98
Again disable the lock and put 1 under X value. 99
Play the animation, to see how it's working. 100
Working good. We just need to match the easing to others. 101
I'm using OutQuad 0.6 seconds. 102
So check the preview. 103
And perfect. 104
As for other interactions, probably you won't be needing to change anything. But if you do, all the settings 105
are visible for you to see how they are set up and what needs to be changed. To find these interactions, 106
you need to select a correct element. 107
So, the interaction appears in the panel. Interactions that are triggered by page load, appear all the 108
time, no matter what element you have selected. But those that have an element trigger, you have to select 109
the exact trigger element. To find these interactions, 110
you can see them in the navigator. All the trigger elements have this lightning icon next to it. 111
That means, there is an interaction on that element. 112
For example, button wrapper. 113
That's where that hover interaction for the button is set up. 114
All right, the last important thing you'll need to know is how to manage projects. 115
There are CMS items, so you can easily manage them inside CMS. 116
I'll add a new project, so you can see what's what. 117
Name, Description pretty straightforward. 118
There are two images you'll need to generate for new projects. 119
A thumbnail, for the home page. And the full screen of the project. 120
The full screen is simple, in Figma go to the design of your page and export the entire frame. 121
Then just upload it to the corresponding field. But make sure to compress the image first. Or it's going 122
to be a very large file. 123
As for the thumbnail, go to this Figma file that I have shared with you. 124
Link in the resources. 125
There is a page called assets. And that's where you can create your thumbnails. 126
By the way, you'll see here there is a favicon and a Webclip. 127
Use this, so you can generate your own and update them in the settings of your project. 128
And drag the image inside. 129
The same thing for the back group. 130
And position it as you like. 131
Then export the thumbnail, compress it and upload it in CMS. 132
Then you have a live site URL. 133
If you leave this empty, link won't appear. So you can leave it empty without a problem. 134
Make sure to enable this toggle. 135
This is for the project to show up on the home page. 136
I've added this, so you have an option to disable or enable any project on the home page. 137
If you're wondering how I've done this, it's filters. 138
So, I created this toggle. And on the home page, then I created the filter for the collection list saying 139
that "display those that have toggle enabled", pretty easy. 140
Then you have these 3 tags that show up under the title. 141
And that's it. 142
Once you save, go to the home page. You can see the new project is going to appear on top of the others. 143
And in links to the project page. Which is ready as well. 144
That's all you need to do to add more projects. 145
By the way, these projects on the home page, are a collection list. 146
Remember those? Content is linked to the CMS fields. 147
You won't be able to edit individual items right on the canvas. 148
You can only edit them inside CMS. 149
Also the collection list has 150
a Sort Order applied to it. 151
I've set it to the Newest to Oldest, 152
based on last time the CMS item was updated. 153
If you want to change this Sort Order to something else, you can do so here. 154
Like Oldest to Newest maybe. 155
Well, that's all the important things you need to know about this site. 156
If you get stuck, let me know and I'll help you out.