DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Portfolio Website Design with HTML & JavaScript
Aniket
Aniket

Posted on

Portfolio Website Design with HTML & JavaScript

Portfolio Landing Page by Code Savvy

Hello Dear Developers, In this post we'll create a Portfolio Page design using HTML, CSS & Some of the Powerful JavaScript Animations from GSAP Library.

Please Watch Below Full Video Tutorial

If you want to skip the tutorial and want to grab the source code, follow below given Repo link :
Repository Link

⏱ Outline

  • 0:00 - Intro
  • 0:34 - Structure
  • 4:21 - Setting CSS
  • 4:48 - Wrapper
  • 5:05 - Left Menu
  • 5:20 - Logo
  • 6:04 - Social Icons
  • 7:34 - Nav
  • 8:58 - Large Text
  • 9:36 - Red Box
  • 10:27 - See Photos
  • 11:01 - Desc Content
  • 13:08 - Slide
  • 13:30 - Overlay
  • 14:26 - Navbar Links JS
  • 15:11 - TweenMax (GSAP) Animations

πŸ‘ Thanks for watching!

Happy Coding :)

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await