Hello, Readers today in thsi blog I'm going to build a complete Responsive portfolio website with Html Css and JavaScript step by step. I have created a Responsive Header section, Navigation bar, About section, Skills section, projects section, Contact us and other. Now lates get start,
What is Portfolio Website?
A portfolio website is a website that displays a collection of work or achievements by an individual, organization, or company. It is typically used to showcase the skills and talents of the person or organization and to demonstrate their experience and expertise in a particular field or industry. Portfolio websites are often used by artists, designers, writers, photographers, and other creative professionals to display their work and attract potential clients or employers. They may also be used by companies to showcase the products or services they offer, or by individuals to share their personal or professional achievements and experiences.
As you can see on the given image of the portfolio website on the page, Basically, this is the header section or home section of our portfolio website, When you scroll you can see different pages of this website like about me section, my skill section, projects section and So on.
Why you should Make a portfolio website?
Portfolio website allows you to showcase your work and talents in one place, making it easy for potential clients or employers to see what you have to offer. Portfolio Website can help you stand out from the competition by demonstrating your unique skills and experiences. Portfolio Website can help you build credibility and establish yourself as an expert in your field. Portfolio Website can help you attract new business or job opportunities. Portfolio Website can serve as a professional online presence and can be used to communicate your personal brand. Portfolio Website can be a great way to share your work and accomplishments with others, and can be a source of inspiration for others in your field.
Portfolio Website in Html Css & JavaScript | Source Code
I have provided all the source code of this portfolio and all the images that i have used in this project. You can directly download all source code files from the given Download Button.
To create this website ( personal website) you need to create three files Html Css and JavaScript file. After create these files just copied and pasted the following source code.
Source code of Portfolio Website HTML
After creating an HTML file with the name of index.html and copy and paste the given codes in your HTML file. Remember, you’ve to create a file with the .html extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Portfolio Website</title>
<!-- Link To CSS -->
<link rel="stylesheet" href="./css/style.css">
<!-- Box Icons -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
</head>
<body>
<!-- Navbar -->
<header>
<a href="#" class="logo">CodewithZan</a>
<div class="bx bx-menu" id="menu-icon"></div>
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
<div class="bx bx-moon" id="darkmode"></div>
</ul>
</header>
<!-- Home -->
<section class="home" id="home">
<div class="social">
<a href="#"><i class='bx bxl-github'></i></a>
<a href="#"><i class='bx bxl-twitter' ></i></a>
<a href="#"><i class='bx bxl-instagram' ></i></a>
</div>
<div class="home-img">
<img src="img/hero.jpg" alt="">
</div>
<div class="home-text">
<span>Hello, I'm</span>
<h1>Johon Doe</h1>
<h2>Frontend Developer</h2>
<p>Lorem ipsum dolor sit amet cons <br> adipisicing elit. Minima, consectetur <br> ullam?</p>
<a href="#contact" class="btn">Contact Me</a>
</div>
</section>
<!-- About -->
<section class="about" id="about">
<div class="heading">
<h2>About Me</h2>
<span>Introduction</span>
</div>
<!-- About Content -->
<div class="about-container">
<div class="about-img">
<img src="img/about.jpg" alt="">
</div>
<div class="about-text">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis beatae eius quae ab consequatur est perferendis dicta. Ad repellendus perferendis minus sunt error eos dicta enim accusantium ipsum veniam debitis quasi sint cum fugiat porro quam, blanditiis a ratione quod!</p>
<div class="information">
<!-- Box 1 -->
<div class="info-box">
<i class='bx bxs-user' ></i>
<span>Johon Doe</span>
</div>
<!-- Box 2 -->
<div class="info-box">
<i class='bx bxs-phone' ></i>
<span>+1 444 444 000</span>
</div>
<!-- Box 3 -->
<div class="info-box">
<i class='bx bxs-envelope' ></i>
<span>contact@info.com</span>
</div>
</div>
<a href="#" class="btn">Download Cv</a>
</div>
</div>
</section>
<!-- Skills -->
<section class="skills" id="skills">
<div class="heading">
<h2>Skills</h2>
<span>My Skills</span>
</div>
<!-- Skills Content -->
<div class="skills-container">
<div class="bars">
<!-- Box 1 -->
<div class="bars-box">
<h3>HTML</h3>
<span>95%</span>
<div class="light-bar"></div>
<div class="percent-bar html-bar"></div>
</div>
<!-- Box 2 -->
<div class="bars-box">
<h3>CSS</h3>
<span>80%</span>
<div class="light-bar"></div>
<div class="percent-bar css-bar"></div>
</div>
<!-- Box 3 -->
<div class="bars-box">
<h3>JavaScript</h3>
<span>70%</span>
<div class="light-bar"></div>
<div class="percent-bar js-bar"></div>
</div>
<!-- Box 4 -->
<div class="bars-box">
<h3>React</h3>
<span>90%</span>
<div class="light-bar"></div>
<div class="percent-bar react-bar"></div>
</div>
</div>
<div class="skills-img">
<img src="img/skill.png" alt="">
</div>
</div>
</section>
<!-- Services -->
<section class="services" id="services">
<div class="heading">
<h2>Services</h2>
<span>Our Services</span>
</div>
<div class="services-content">
<!-- Box 1 -->
<div class="services-box">
<i class='bx bx-code-alt' ></i>
<h3>Web Development</h3>
<a href="#">Learn More</a>
</div>
<!-- Box 2 -->
<div class="services-box">
<i class='bx bx-server' ></i>
<h3>Backend Development</h3>
<a href="#">Learn More</a>
</div>
<!-- Box 3 -->
<div class="services-box">
<i class='bx bx-brush' ></i>
<h3>UI/UX Design</h3>
<a href="#">Learn More</a>
</div>
<div class="services-box">
<i class='bx bxl-wordpress' ></i>
<h3>Wordpress Developer</h3>
<a href="#">Learn More</a>
</div>
</div>
</section>
<!-- Portfolio -->
<section class="portfolio" id="portfolio">
<div class="heading">
<h2>Portfolio</h2>
<span>Our Recent Work</span>
</div>
<div class="portfolio-content">
<div class="portfolio-img">
<img src="img/blog-1.png" alt="">
</div>
<div class="portfolio-img">
<img src="img/blog-2.jpg" alt="">
</div>
<div class="portfolio-img">
<img src="img/blog-3.png" alt="">
</div>
<div class="portfolio-img">
<img src="img/blog-4.webp" alt="">
</div>
</div>
</section>
<!-- Contact -->
<section class="contact" id="contact">
<div class="heading">
<h2>Contact</h2>
<span>Connect With Us</span>
</div>
<div class="contact-form">
<form action="">
<input type="text" placeholder="Your Name">
<input type="email" name="" id="" placeholder="Your Email">
<textarea name="" id="" cols="30" rows="10" placeholder="Write Message Here..."></textarea>
<input type="button" value="Send" class="contact-button">
</form>
</div>
</section>
<!-- Copyright -->
<div class="copyright">
<p>Create By <a href="https://www.bijanrai.com.np/">CodewithZan</a> | All Right Reserved.</p>
</div>
<!-- Link To JS -->
<script src="./js/script.js"></script>
</body>
</html>
Source code of Portfolio Website CSS
Aftet that Create a Css file with the name of style.css and copy and paste in your css file. Remember, you’ve to create a file with the .css extension.
/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
scroll-behavior: smooth;
scroll-padding-top: 2rem;
font-family: "Poppins", sans-serif;
}
:root {
--main-color: #033a80;
--bg-color: #fff;
--text-color: #0a041d;
--hover: hsl(260, 100%, 51%);
--big-font: 3.2rem;
--medium-font: 1.8rem;
--p-font: 0.941rem;
}
section {
padding: 50px 10%;
}
body.active {
--text-color: #fff;
--bg-color: #000;
}
body {
background: var(--bg-color);
color: var(--text-color);
}
*::selection {
color: var(--bg-color);
background: var(--main-color);
}
.heading {
text-align: center;
}
.heading h2 {
font-size: 30px;
}
.heading span {
font-size: var(--p-font);
color: rgb(2, 166, 70);
}
header {
position: fixed;
width: 100%;
top: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
padding: 13px 10%;
transition: 0.2s;
box-shadow: -3px -3px 7px #ffffff73,
2px 2px 5px rgba(94, 104, 121, 0.288);
}
header.shadow {
box-shadow: 0 0 4px rgb(14 55 54 / 15%);
}
.logo {
font-size: 1.61rem;
font-weight: 600;
color: var(--text-color);
}
.navbar {
display: flex;
}
.navbar a {
font-size: 1rem;
padding: 10px 20px;
color: var(--text-color);
font-weight: 500;
}
.navbar a:hover {
color: var(--hover);
}
#menu-icon {
font-size: 24px;
cursor: pointer;
z-index: 10001;
display: none;
}
#darkmode {
font-size: 22px;
cursor: pointer;
}
.home {
position: relative;
width: 100%;
min-height: 100vh;
display: grid;
grid-template-columns: 0.2fr 1fr 1fr;
align-items: center;
gap: 1rem;
}
.home-img {
order: 3;
}
.home-img img {
width: 100%;
}
.home-text span {
font-size: var(--medium-font);
font-weight: 500;
}
.home-text h1 {
font-size: var(--big-font);
}
.home-text h2 {
font-size: 1.1rem;
font-weight: 400;
}
.home-text p {
font-size: var(--p-font);
font-weight: 400;
margin: 0.7rem 0 1rem;
}
.social {
display: flex;
flex-direction: column;
}
.social a {
margin-bottom: 1rem;
font-size: 22px;
color: var(--text-color);
}
.social a:hover {
color: var(--hover);
}
.btn {
display: inline-block;
background: var(--main-color);
color: #fff;
padding: 0.7rem 1.3rem;
border-radius: 0.5rem;
}
.btn:hover {
background: var(--hover);
}
.about-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-top: 2rem;
}
.about-img img {
width: 80%;
border-radius: 0.5rem;
}
.about-text p {
font-size: var(--p-font);
font-weight: 400;
text-align: justify;
}
.information {
margin: 1rem 0 1.4rem;
}
.information .info-box {
display: flex;
align-items: center;
margin-bottom: 1.4rem;
}
.information .info-box .bx {
font-size: 22px;
}
.information .info-box span {
font-weight: 400;
margin-left: 1rem;
}
.skills-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 2rem;
margin-top: 4rem;
}
.skills-img img {
width: 80%;
padding-left: 4rem;
object-position: center;
}
.bars-box {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
margin-bottom: 1rem;
}
.bars-box h3,
span {
font-size: 1.1rem;
font-weight: 500;
}
.light-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.5rem;
background: hsla(260, 100%, 44%, 0.4);
border-radius: 0.5rem;
}
.percent-bar {
position: absolute;
bottom: 0;
left: 0;
height: 0.5rem;
background: var(--main-color);
border-radius: 0.5rem;
}
.html-bar {
width: 95%;
}
.css-bar {
width: 80%;
}
.js-bar {
width: 70%;
}
.react-bar {
width: 90%;
}
.services-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
justify-content: center;
gap: 1rem;
margin-top: 2rem;
}
.services-box {
padding: 20px;
width: 260px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border-radius: 0.5rem;
border-bottom: 2px solid var(--main-color);
box-shadow: 0 2px 7px rgb(14 55 54 / 15%);
}
.services-box:hover{
background-color: #02225a;
}
.services-box h3 {
font-size: 1rem;
font-weight: 600;
margin: 0.7rem 0 0.4rem;
}
.services-box:hover h3{
color: #fff;
}
.services-box .bx {
padding-top: 2rem;
font-size: 54px;
color: var(--main-color);
}
.services-box:hover .bx{
color: #22cf91;
}
.services-box a {
color: var(--main-color);
font-size: var(--p-font);
font-weight: 500;
}
.services-box:hover a{
color: #8b8a8f;
}
.portfolio-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, auto));
gap: 1rem;
margin-top: 2rem;
}
.portfolio-img {
overflow: hidden;
border-radius: 0.5rem;
}
.portfolio-img img {
width: 100%;
display: block;
}
.portfolio-img img:hover {
transform: scale(1.1);
transition: 1s;
}
.contact-form {
display: grid;
place-items: center;
margin-top: 2rem;
}
.contact-form form {
display: flex;
flex-direction: column;
width: 650px;
}
form input,
textarea {
padding: 15px;
border-radius: 0.5rem;
width: 100%;
border: none;
outline: none;
background: rgb(151,142,184);
margin-bottom: 1rem;
color: var(--text-color);
}
form input::placeholder,
textarea::placeholder {
color: var(--text-color);
}
form textarea {
resize: none;
height: 200px;
}
.contact-button {
width: 160px;
cursor: pointer;
background: #2768d9;
color: #fff;
justify-content: center;
text-transform: uppercase;
letter-spacing: 1px;
margin-left: 35%;
}
.contact-button:hover {
background: var(--hover);
}
.footer {
display: grid;
place-items: center;
padding: 20px;
background: #ebebeb;
color: #000;
}
.footer h2 {
font-size: 1.5rem;
margin-bottom: 1.6rem;
}
.footer-social a i{
color: rgb(10, 26, 208);
font-size: 25px;
margin-left: 10px;
text-align: center;
line-height: 40px;
background-color: #fff;
border-radius: 50%;
width: 40px;
height: 40px;
}
.copyright {
padding: 20px;
background: var(--main-color);
text-align: center;
color: #fff;
}
.copyright a{
color: #22cf91;
}
/* Making Responsive */
@media (max-width: 991px) {
header {
padding: 18px 4%;
}
section {
padding: 50px 4%;
}
}
@media (max-width: 881px) {
:root {
--big-font: 2.7rem;
--medium-font: 1.4rem;
}
}
@media (max-width: 788px) {
:root {
--big-font: 2.4rem;
--medium-font: 1.2rem;
}
header {
padding: 11px 4%;
}
#menu-icon {
display: initial;
color: var(--text-color);
}
header .navbar {
position: absolute;
top: -500px;
left: 0;
right: 0;
display: flex;
flex-direction: column;
background: var(--bg-color);
box-shadow: 0 4px 4px rgb(0 0 0 / 10%);
transition: 0.2s ease;
text-align: center;
}
.navbar.active {
top: 100%;
}
.navbar a {
padding: 1.5rem;
display: block;
background: var(--bg-color);
}
#darkmode {
position: absolute;
top: 1.4rem;
right: 2rem;
}
.scroll-down {
display: none;
}
.home {
grid-template-columns: 0.5fr 3fr;
}
.home-text {
grid-column: 1/3;
padding-left: 1.4rem;
}
.home-img {
order: initial;
}
.about-container {
grid-template-columns: 1fr;
}
.about-img {
display: flex;
justify-content: center;
}
.skills-container {
grid-template-columns: 1fr;
}
.skills-img img {
padding-left: 0;
}
.skills-img {
padding-top: 2rem;
display: flex;
justify-content: center;
}
.contact-form form{
width: 300px;
}
.contact-button{
margin-left: 25%;
}
}
@media (max-width: 340px) {
:root {
--big-font: 1.7rem;
--medium-font: 1.1rem;
}
.home-text span {
font-size: 1rem;
}
.home-text h2 {
font-size: 0.9rem;
font-weight: 500;
}
.information .info-box span {
font-size: 1rem;
}
.portfolio-content {
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}
.contact-form form{
width: 300px;
}
.contact-button{
margin-left: 25%;
}
}
Source code of Portfolio Website JavaScript
Finally at the last Create Js file with the name of script.js and copy and paste in your Js file. Remember, you've to create a file with the.js extension.
// Sticky Navbar
let header = document.querySelector('header');
let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
header.classList.toggle('shadow', window.scrollY > 0);
});
menu.onclick = () => {
navbar.classList.toggle('active');
}
window.onscroll = () => {
navbar.classList.remove('active');
}
// Dark Mode
let darkmode = document.querySelector('#darkmode');
darkmode.onclick = () => {
if(darkmode.classList.contains('bx-moon')){
darkmode.classList.replace('bx-moon','bx-sun');
document.body.classList.add('active');
}else{
darkmode.classList.replace('bx-sun','bx-moon');
document.body.classList.remove('active');
}
}
You can also download the source code Directly to click on download button below. Click here download button it take some few seconds and automatic redirect GitHub and you can easily download code here.
Thank you! nice to meet you from captekno.com
ReplyDelete