Welcome to an exciting journey of creating your own responsive personal portfolio website using the power of Bootstrap! In this comprehensive tutorial, we will delve into the art of designing and coding a visually stunning online portfolio that showcases your skills, experiences, and services in an impressive manner.
With my extensive experience in web design, I have carefully crafted a fully responsive personal portfolio website using Bootstrap 5 code. Alongside, I have utilized essential HTML and CSS programming codes to ensure a seamless and captivating user experience.
Your personal portfolio website serves as a gateway for potential clients to explore your work, gain insights into your expertise, and get a glimpse of your unique abilities. It not only offers an elegant and convenient platform for displaying your projects but also enables you to highlight your skills and services effectively.
Within this site, you'll discover five carefully curated sections that form the foundation of your personal brand. The Home section provides a captivating introduction, drawing visitors into your world. The About section offers an opportunity to delve deeper into your background, passions, and unique story. The Skills section showcases your proficiency in various areas, leaving a lasting impression on visitors. The Projects section serves as a visual gallery, presenting your best works and accomplishments. Finally, the Contact section provides a seamless way for potential clients or collaborators to reach out to you.
Throughout this tutorial, we will guide you step by step, ensuring you grasp the concepts behind responsive web design, Bootstrap's powerful features, and the intricacies of structuring an engaging personal portfolio website. By the end, you'll have a stunning online presence that captures your personality, skills, and creativity, leaving a lasting impression on anyone who visits.
So, are you ready to embark on this exciting journey of crafting your own personal portfolio website? Let's dive in and create something truly extraordinary together!
Video Tutorial:
Step by Step tutorial
Navbar Section:
<!-- Navbar Start -->
<nav class="navbar navbar-dark bg-dark py-3 fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Personal Portfolio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Portfolio</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
<div class="d-flex gap-3 fs-4 position-absolute bottom-0 m-3">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-linkedin"></i>
</div>
</div>
</div>
</div>
</nav>
<!-- Navbar End -->
Home Section :
<!-- Home Section Start-->
<section id="home" class="bg-dark text-light">
<div class="container">
<div class="row">
<div class="col-lg-6">
<img src="/images/man.png" class="img-fluid">
</div>
<div class="col-lg-6 d-flex flex-column align-items-center justify-content-center align-items-lg-start">
<h1 class="display-5 fw-bold">Hello I'm John</h1>
<p class="fs-5">I am a Web Developer</p>
<div class="d-flex gap-2">
<button class="btn btn-info">My Resume</button>
<button class="btn btn-outline-info">Hire Me</button>
</div>
</div>
</div>
</div>
</section>
<!-- Home Section End -->
About Section:
<section id="about">
<div class="container text-center">
<h1>ABOUT ME</h1>
<hr>
<p class="fs-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto at magni culpa error odit
dolore voluptatem nemo perspiciatis eum quisquam possimus, tenetur nihil vero dicta ipsum aliquid ipsa
voluptate, cumque molestiae fugiat repellat rerum, consequuntur aperiam? Velit corporis sed saepe vel laborum
quis optio unde minima nemo temporibus, praesentium odit dolorem officia ipsum ex rem minus. Aut veniam atque,
rem dolor saepe suscipit voluptatibus labore ducimus pariatur similique perferendis amet corrupti corporis quod,
voluptatem illo nemo. Inventore voluptates at, laborum, magnam praesentium libero aliquam quidem, ab dolore
porro atque tenetur. Amet, illum similique? Mollitia possimus officiis rem minima et? Molestiae.</p>
<div class="d-flex gap-2 align-items-center justify-content-center">
<button class="btn btn-dark">Read More</button>
<button class="btn btn-outline-dark">Contact Me</button>
</div>
</div>
</section>
Skiils Section:
<!-- Skills Section Start-->
<section id="skills" class="bg-dark text-light">
<div class="container">
<div class="row text-center">
<div class="col-lg-4 col-md-6">
<i class="fa-solid fa-code fs-2 border p-3 rounded-circle mb-3"></i>
<h2 class="fs-2">Web Developement</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae quam quos cupiditate asperiores qui
deserunt, adipisci dignissimos tempore laborum voluptates!</p>
<a href="#">Learn More</a>
</div>
<div class="col-lg-4 col-md-6">
<i class="fa-solid fa-database fs-2 border p-3 rounded-circle mb-3"></i>
<h2 class="fs-2">Database Management</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae quam quos cupiditate asperiores qui
deserunt, adipisci dignissimos tempore laborum voluptates!</p>
<a href="#">Learn More</a>
</div>
<div class="col-lg-4 col-md-6">
<i class="fa-solid fa-laptop fs-2 border p-3 rounded-circle mb-3"></i>
<h2 class="fs-2">Graphics Design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae quam quos cupiditate asperiores qui
deserunt, adipisci dignissimos tempore laborum voluptates!</p>
<a href="#">Learn More</a>
</div>
</div>
</div>
</section>
<!-- Skills Section End-->
Projects Section:
<!-- Projects Section Start-->
<section id="projects">
<div class="container">
<h1 class="text-center mb-3">MY PROJECTS</h1>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card">
<img src="/images/project-1.jpg" alt="" class="img-card-top">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo dolorum nam quas error maxime aperiam
quibusdam blanditiis ratione quia dignissimos!</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card">
<img src="/images/project-2.jpg" alt="" class="img-card-top">
<div class="card-body">
<h5 class="card-title">Project 2</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo dolorum nam quas error maxime aperiam
quibusdam blanditiis ratione quia dignissimos!</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card">
<img src="/images/project-3.jpg" alt="" class="img-card-top">
<div class="card-body">
<h5 class="card-title">Project 3</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo dolorum nam quas error maxime aperiam
quibusdam blanditiis ratione quia dignissimos!</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section End-->
Contact Section:
<!-- Contact Section Start-->
<section id="contact" class="bg-dark text-light">
<div class="container">
<div class="row">
<div class="col-lg-6 d-flex align-items-center justify-content-center">
<img src="/images/hacker.webp" class="img-fluid rounded" width="400">
</div>
<div class="col-lg-6">
<div class="mb-3">
<label for="name" class="form-label fs-5">Name</label>
<input type="text" class="form-control" placeholder="Enter Your Name">
</div>
<div class="mb-3">
<label for="email" class="form-label fs-5">Email</label>
<input type="email" class="form-control" placeholder="Enter Your Email">
</div>
<div class="mb-3">
<label for="message" class="form-label fs-5">Message</label>
<textarea name="message" cols="30" rows="5" class="form-control"
placeholder="Enter Your Message"></textarea>
</div>
<button class="btn btn-light">Submit</button>
</div>
</div>
</div>
</section>
<!-- Contact Section End-->
Css Code:
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
border: none;
box-shadow: none;
}
::-webkit-scrollbar{
display: none;
}
body{
font-family: 'Open Sans', sans-serif;
}
.nav-link{
font-size: 20px;
color: white;
margin: 5px;
padding: 5px;
border-radius: 3px;
}
.nav-link:hover{
background-color: white;
color: black;
}
section{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.img-card-top{
height: 250px;
object-fit: cover;
}
@media (max-width:990px) {
section{
height: fit-content;
padding: 30px 0px;
}
.col-lg-4,.col-lg-6{
margin: 20px 0px;
}
}
If you found the video and source code helpful and valuable for your learning journey, I would greatly appreciate it if you could show your support by liking the video and subscribing to my channel. Your positive feedback and engagement motivate me to create more informative and innovative content in the future.
Top comments (0)