Creating a custom portfolio

In this full project build, we'll create a custom, CMS-driven portfolio website that professionally showcases client projects.

Creating a custom portfolio

In this full project build, we'll create a custom, CMS-driven portfolio website that professionally showcases client projects.

8
 Video Lessons
Intermediate
1hour

About this course

In this course, we'll build a fully-responsive, CMS-driven portfolio website in the Webflow Designer. This includes designing the homepage hero section, creating the database for client projects, designing the client project index and detail pages, adding social proof with client logos, creating a contact section, and animating the fixed navigation menu.

Requirements

  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser
  • A deep love of animated menus

Course outline

Creating a custom portfolio

New

Part 1: Intro — What you’ll learn in this course

New

1:12

Part 2: Designing the homepage hero section

New

8:59

Part 3: Creating the database for client projects

New

3:45

Part 4: Designing the client project section

New

12:16

Part 5: Designing the client project detail pages

New

7:36

Part 6: Adding social proof with client logos

New

4:19

Part 7: Building the contact form

New

9:12

Part 8: Animating the fixed navigation menu & outro

New

12:02

8
 video lessons
Intermediate
1hour

Requirements

  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser
  • A deep love of animated menus

Get started

1:12
1:12
Portfolio Website Part 1

All the way from start to finish, this course doesn't skip a single step. In this particular course lesson, we'll introduce each of the steps involved in building a fully-responsive, CMS-driven portfolio in the Webflow Designer.

8:59
8:59
Portfolio Website Part 2

In this video, we'll cover designing the homepage hero section using both flexbox and absolute positioning to achieve a two-card, overlapping layout.

3:45
3:45
Portfolio Website Part 3

Instead of creating static pages that have to be managed and updated one-by-one, we'll use the Webflow CMS to create a database holding all our client projects. We'll later use this database in our design.

Lottie features

Portfolio Website Part 4

This video covers designing a full project section which uses the client project database we created in the Webflow CMS.

Learn how to build this
Download assets
Open in Webflow

Portfolio Website Part 5

In this video, we'll build one collection page which will automatically create project pages for each client project — all using the custom database we created in the Webflow CMS.

Learn how to build this
Download assets
Open in Webflow

Portfolio Website Part 6

Adding logos of past and current clients can help add credibility to your portfolio. In this video, we'll cover layout and database options for displaying and managing client logos.

Learn how to build this
Download assets
Open in Webflow

Portfolio Website Part 7

Give your potential clients a clear way to get in touch with you. In this course lesson, we'll cover adding and designing a contact form website visitors can use to reach out and engage your services.

Learn how to build this
Download assets
Open in Webflow

Portfolio Website Part 8

In this final course lesson, we'll animate a fixed navigation menu, then wrap everything up to ensure our portfolio website is ready to go live.

Learn how to build this
Download assets
Open in Webflow