Complete Responsive PERSONAL PORTFOLIO Website Design Using HTML – CSS – JAVASCRIPT From Scratch



how to make a complete responsive animated personal portfolio website design using html css and vanilla javascript step by step.
created an animated complete responsive personal portfolio website design template using html css and vaniila javascript from scratch.

the main feature of this website are:
✔ responsive vertical side header / navbar with toggle menu bar effect.
✔ responsive home section with particles.js effects.
✔ responsive about section with vanilla tilt.js effects using flexbox.
✔ responsive service section with vanilla tilt.js effects using flexbox.
✔ responsive portfolio images gallery section with vanilla tilt.js effects using flexbox.
✔ responsive blogs section with vanilla tilt.js effects using flexbox.
✔ responsive contact form section with vanilla tilt.js effects using flexbox.
✔ responsive footer section section.

* SOURCE CODES *
DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):

particles.js link:

vanilla-tilt.js link:

typed.js link:

font awesome cdn link:

google fonts:

New To My Channel Subscribe Now And See More Stuff Like This:

timestamps:
0:00 demo
4:21 file structure
4:55 header section
11:24 home section
14:11 typed.js
15:20 particles.js
17:45 tilt.js
18:58 about section
24:10 service section
27:11 portfolio section
29:49 blogs section
32:16 contact section
36:10 footer section
36:56 final demo

#FrontEnd
#PersonalPortfolio
#PortfolioWebsite

24 comments

  1. Hi, window.onscroll = function() {

    /* when screen increases in size the both burger

    and responsive menu disappears */

    menu.classList.remove('fa-times');

    header.classList.remove('active');

    }

    …… is not working on chrome/brave , when I try to resize the responsive window it still shows the hamburger

Leave a comment

Your email address will not be published.