Discover the best 21dayportfolio websites created by professional designers. Get inspired and start planning your perfect 21dayportfolio web design today!

Webflow University

This is my portfolio for my UX design work.

Full course: wfl.io/2021-portfolio

Megan Garcia Portfolio

Hey — I’m Jack, a Melbourne (Naarm) based motion designer. To house all my creations and creative ventures, I've created my own portfolio site! It's filled to the brim with custom animations, hovers, lotties, my personality and fun easter eggs. Take a squiz! 🥰

Jack Jaeschke — Motion Designer

Jack Jaeschke — Motion Design Portfolio

Sara Lundberg runs design for Webflow University, and today, she’ll be walking through dozens of design notes on Megan’s portfolio site.

Full course: wfl.io/2021-portfolio

Full site design review — Portfolio course (part 17)

Portfolio course - Design review

In this lesson, we’ll visually animate our elements directly on our page and create interactions that are triggered by mouse hover, page scroll and page load.

Full course: wfl.io/2021-portfolio

Custom 2D & 3D interactions — Portfolio course (part 13)

Portfolio course - Custom 2D & 3D interactions

Protect your pages with a password page that is both secure and engaging. In this lesson, we’ll visually build our ROYGBIV grid in 3D space directly on our page and animate it to follow mouse position.

Full course: wfl.io/2021-portfolio

Password-protected page — Portfolio course (part 15)

Portfolio course - 3D parallax password page

In this lesson, we'll create a custom 404 page for when your visitors encounter an unavailable page on your portfolio. Keep your visitors engaged with a mouse follow interaction to keep them on your portfolio.

Custom code for frosted glass effect: https://frosted-glass-code.webflow.io/

Full course: wfl.io/2021-portfolio

Custom 404 page — Portfolio course (part 14)

Portfolio course - Mouse follow interaction on custom 404 page

Wrap up your homepage with a designed footer that will be a dazzling finish to your homepage's content.

Full course: wfl.io/2021-portfolio

Portfolio course - Homepage: footer — Portfolio course (part 5)

Portfolio course — Homepage: footer

With your portfolio's homepage complete, it's time to make it responsive. Learn how to make your homepage responsive on tablet, mobile devices and even larger displays, like the screens at Regal Cinema.

Full course: wfl.io/2021-portfolio

Homepage: responsiveness — Portfolio course (part 6)

Portfolio course — Homepage: responsiveness

This lesson covers setting static and dynamic SEO titles and meta descriptions, as well as configuring Open Graph settings which will show up in embedded links in services like Twitter.

Full course: wfl.io/2021-portfolio

SEO & open graph settings — Portfolio course (part 11)

Portfolio course - SEO & Open graph settings

Make your project pages responsive on tablet, mobile devices and even larger displays. You don't have to do that multiple times, you can just make your page responsive on one page and it will apply to all of your project pages.

Full course: wfl.io/2021-portfolio

Project pages: responsiveness — Portfolio course (part 8)

Portfolio course — Project pages: responsiveness

In this lesson, we'll update our projects CMS Collection by adding a new client project and we'll filter our CMS layouts for a more advanced and curated showcase.

Full course: wfl.io/2021-portfolio

Advanced CMS filtering — Portfolio course (part 20)

Portfolio course - Advanced CMS filtering

Whether it’s for clients, design rebuilds, or things that rhyme with Manhattan, we want to see your CMS-driven project pages!

Full course: wfl.io/2021-portfolio

Project pages: main page — Portfolio course (part 7)

Portfolio course — Project pages: main page

Generate leads with a contact form front and center on your portfolio's homepage.

Full course: wfl.io/2021-portfolio

Homepage: contact form — Portfolio course (part 4)

Portfolio course — Homepage: contact form

The last main page in our portfolio will be the contact page, a static page with a sticky footer. And we'll ensure that footer stays on the bottom of the page.

Full course: wfl.io/2021-portfolio

Contact page: main page — Portfolio course (part 9)

Portfolio course — Contact page: main page

This is my first project built with Webflow, my portfolio website. What began as a tinker fest going through the Webflow University 21 Day Portfolio Challenge turned into a complete creation of my website and a new love for visual development. Lots of class structure cleanup needs to happen but I'm in love with Webflow!

Kalee's Portfolio Site 2021

kalees-portfolio-site-2021

In this lesson, we’ll visually edit our CSS to redesign the portfolio to take it from dark to light. As we do this, we’ll explore cascading and inheritance as they relate to our homepage, our project pages, and our contact page.

Full course: wfl.io/2021-portfolio

Full site redesign into light mode — Portfolio course (part 12)

Portfolio course - Dark to light redesign

This site has been made by using Webflow's 21-day portfolio course.

21-day design portfolio course

21-day-design-portfolio-course-18a48b

In this lesson, we'll add Google's reCAPTCHA validation to reduce the amount of spam received in Megan's contact form. In addition, we'll check responsiveness and fluidity on Desktop, Tablet, Mobile landscape, Mobile portrait, and the larger 1920px breakpoint.

Full course: wfl.io/2021-portfolio

Discover 21dayportfolio websites built by the Webflow community

Discover 21dayportfolio websites built by the Webflow community