Complete Responsive Personal Portfolio Website Tutorial For Beginners Using HTML/CSS /JS/BOOTSTRAP

how to make complete responsive personal portfolio website design using html, css ( sass ), javascript / jquery step by step.
complete responsive personal portfolio tutorial for beginners.
create a complete responsive personal portfolio website using html/css/jquery/javascript/sass/scss.
mobile first website design with source code.

the main feature of this website are:
✔ responsive navbar / header with toggle and scroll effect.
✔ responsive home section with text typing effect.
✔ responsive about section with progress bars.
✔ responsive service section with hover effects.
✔ responsive experience section.
✔ responsive portfolio section with filter effect
✔ responsive contact section.

all section are made using bootstrap 5 framework.
✌ few lines of media queries are used.

* SOURCE CODE *

download the source code from google drive:
https://drive.google.com/drive/folders/1IZ_vyzNa3ZvY1-xkJMXQTH9WGUxbzNH6?usp=sharing

typed.js website link:
https://github.com/mattboldt/typed.js/

typed.js cdn link:
https://cdn.jsdelivr.net/npm/typed.js@2.0.11

bootstrap 5 website link:
https://v5.getbootstrap.com/docs/5.0/getting-started/download/

jquery link:

Download jQuery

font-awesome link:
https://fontawesome.com/

download the main background image (home) from here:
https://www.freepik.com/free-photo/young-handsome-smiling-happy-man-holding-vintage-photo-camera-isolated-white-studio-background-wearing-denim-shirt-hat-sunglasses-photographer-traveling-taking-pictures_9654168.htm#page=2&query=man+with+hat+and+suite&position=1

download the about image from here:
https://www.freepik.com/free-photo/young-handsome-hipster-man-isolated-white-studio-background-stylish-outfit-denim-shirt-trousers-hat-sunglasses-sitting-chair-hands-together-pose-smiling-happy-positive_9654078.htm#page=2&query=man+with+hat+and+suite&position=40

download the font link from here:
( Exo 2 / Google fonts ) – https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,200;0,300;0,400;0,500;0,600;1,300&display=swap” rel=”stylesheet

images are from pexels:
https://www.pexels.com/

icons are from flaticons:
https://www.flaticon.com/

TIMESTAMPS:
0:00 demo
4:25 folder structure
4:52 header section
13:20 home section
14:30 typed.js
15:52 home section design
18:14 about section
24:37 service section
28:24 experience section
32:52 counter section
35:35 portfolio section
42:05 contact section
50:28 footer section
52:04 mobile first

watch the full playlist of how to create responsive websites:

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

#PersonalPortfolio
#ResponsiveWebsite
#WebDesign
#CompleteWesbite
#ResponsiveDesigns
#animatedWebsite
#HTML5
#CSS3
#SASS
#SCSS
#BOOTSTRAP
#JQUERY
#Javascript
#PortfolioWebsite
#WebDevelopment