Skip to content

PRO TIP Block youtube.com at the DNS level — Pi-hole, NextDNS or your hosts file — but allow youtube-nocookie.com and i.ytimg.com. These tutorials keep playing; the rabbit hole does not.

Learning without distractions

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

35.3K views on YouTube

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 *
https://www.buymeacoffee.com/mrwebdesigner/e/190891

particles.js link:
https://vincentgarreau.com/particles.js/

vanilla-tilt.js link:
https://micku7zu.github.io/vanilla-tilt.js/

typed.js link:
https://cdnjs.com/libraries/typed.js

font awesome cdn link:
https://cdnjs.com/libraries/font-awesome

google fonts:
https://fonts.google.com/specimen/Nunito?query=nunito

New To My Channel Subscribe Now And See More Stuff Like This:
https://youtube.com/channel/UCKwgH3vASrD2brd1l2m6NHw

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