Personal Portfolio Website Template Design

Hello and welcome to today's blog post. Portfolio websites are a great way to share your work and let others know about your personal information. You should always have a portfolio website. Whether you need one for yourself or to showcase your work, having a portfolio website will help you to be more visible. We are going to use HTML, CSS, and Javascript to create a personal portfolio website template for our own personal projects. We have got many snippets available on our website. Please click the Load More button below our homepage to visit those. Before you get the source code of this project, please watch the video demo below.

I hope you have watched the video demo. It's important to have a portfolio website for some who is a creative person. A portfolio website is needed to show off your work. Regardless of whether you're an individual, a large company of seven people, or a small team of two, it's critical that you have a unique presence online. If you want to stand out from the crowd, you need to build a personal portfolio website template.

In this portfolio website template, we have four different sections. They are the banner section, work section, services section, and testimonial section. This responsive website design also has a header and footer section. The footer is used both as a contact and footer section. All the elements in the section are beautifully aligned and they also have nice hover effects. We have used CSS media queries to make this template responsive. We have made the header sticky, which means when we scroll down the website the header will stick to the top of the website. The website also includes a scroll top button that takes the user to the top of the page smoothly.

You May Also Like:

Personal Portfolio Website Template Design [ Source Code ]:

First, create the necessary files like HTML, CSS, and js files and link them properly. Then copy the code from the below code boxes and paste them into your project. Save it and test it in your browser. Add your own text and pictures to this template. Edit it to your liking.

ADD HTML:

<!DOCTYPE html>
<!-- codingflick.com -->
<html lang="en">
<head>
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title>Portfolio Responsive Website Design</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">	
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	
	 <button id="scroll-top"><i class="fa fa-arrow-up"></i></button> 
	<header>
		<nav>
			<a href="#home" id="logo">Jack<span>Doe</span></a> <i class="fa fa-bars" id="ham-menu"></i>
			<ul id="nav-bar">
				<li>
					<a href="#home">Home</a>
				</li>
				<li>
					<a href="#work">About</a>
				</li>
				<li>
					<a href="#services">Services</a>
				</li>
				<li>
					<a href="#testimonial">Testimonial</a>
				</li>
				<li>
					<a href="#contact">Contact</a>
				</li>
			</ul>
		</nav>
	</header>

	<section class="banner" id="home">		
		<div class="content-area">
			<h1>Hi, I am jack <br>From NewYork</h1>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi nihil eum culpa, quisquam dolores porro voluptate expedita illo doloribus nulla. Corporis fugiat sed excepturi odio, odit nam officia sequi at.</p>
			<div class="btn-container">
				<button class="primary-btn btn">Learn More</button> 
        <button class="secondary-btn btn">Contact Me</button>
			</div>
		</div>
      
    </section>

	<section class="work" id="work">
		<h2>My Expertise</h2>
		<p class="section-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur accusantium commodi pariatur.</p>
		<div class="row">
			<div class="column">
				<i class="fa fa-area-chart"></i>
				<h3>Web Design</h3>
				<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel veniam voluptatibus nobis id perspiciatis ratione reiciendis quisquam assumenda minima. Facere.</p>
			</div>
			<div class="column">
				<i class="fa fa-laptop"></i>
				<h3>Web Development</h3>
				<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque nesciunt harum ducimus eum esse dolore debitis! Officiis autem est dolor.</p>
			</div>
			<div class="column">
				<i class="fa fa-camera"></i>
				<h3>Photography</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio eveniet quasi aut quibusdam incidunt debitis voluptas qui enim modi rem!</p>
			</div>
		</div>
	</section>

	<section class="services" id="services">
		<h2>My Services</h2>
		<p class="section-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi, illum cum! Quasi..</p>
		<div class="row">
			<div class="column">
				<img src="https://images.pexels.com/photos/8346914/pexels-photo-8346914.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
				<h3>PSD to HTML</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos facere voluptatibus natus. Amet, cupiditate illo?</p>
				<div class="services-btn">
					<button class="btn secondary-btn">Order Now</button>
				</div>
			</div>
			<div class="column">
				<img src="https://images.pexels.com/photos/8346914/pexels-photo-8346914.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
				<h3>HTML to WP</h3>
				<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit nulla dolor nostrum animi veniam rem.</p>
				<div class="services-btn">
					<button class="btn secondary-btn">Order Now</button>
				</div>
			</div>
			<div class="column">
				<img src="https://images.pexels.com/photos/8346914/pexels-photo-8346914.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
				<h3>HTML to Joomla</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores voluptatibus temporibus dolorem sit ipsam adipisci?</p>
				<div class="services-btn">
					<button class="btn secondary-btn">Order Now</button>
				</div>
			</div>
		</div>
	</section>

	<section class="testimonial" id="testimonial">
		<h2>Client's Says</h2>
		<p class="section-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur dicta beatae ratione!.</p>
		<div class="row">
			<div class="column">
				<div class="testimonial-image"><img src="https://images.pexels.com/photos/1270076/pexels-photo-1270076.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"></div>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, dignissimos recusandae? Incidunt optio porro possimus qui dolore. Fugiat corporis reprehenderit corrupti fuga, delectus obcaecati excepturi.</p>
				<h3>Jason Doe <span>Manager, Oppo</span></h3>
			</div>
			<div class="column">
				<div class="testimonial-image"><img src="https://images.pexels.com/photos/804009/pexels-photo-804009.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"></div>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, dignissimos recusandae? Incidunt optio porro possimus qui dolore. Fugiat corporis reprehenderit corrupti fuga, delectus obcaecati excepturi.</p>
				<h3>Dave Wood <span>CEO, Google</span></h3>
			</div>
			<div class="column">
				<div class="testimonial-image"><img src="https://images.pexels.com/photos/1270076/pexels-photo-1270076.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"></div>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, dignissimos recusandae? Incidunt optio porro possimus qui dolore. Fugiat corporis reprehenderit corrupti fuga, delectus obcaecati excepturi.</p>
				<h3>Jason Walker <span>Manager, Microsoft</span></h3>
			</div>
		</div>
	</section>

	
	<footer id="contact">
		<div class="row footer-about">
			<h3>Jack <span>Doe</span></h3>
			<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus sunt reprehenderit quaerat esse unde, fuga quisquam quibusdam, in distinctio necessitatibus nam, quae non tempore illo perferendis facere inventore. Blanditiis, reiciendis.</p>
			<div class="social-links">
				<a href="#"><i class="fa fa-instagram"></i></a> 
        <a href="#"><i class="fa fa-twitter"></i></a> 
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-youtube"></i></a>
        <a href="#"><i class="fa fa-linkedin"></i></a>
			</div>
		</div>
		<div class="row footer-contact">
			<div class="column">
				<h4>Phone No</h4>
				<p>000 000 0000</p>
			</div>
			<div class="column">
				<h4>Email</h4>
				<p>YourEmail@mail.com</p>
			</div>
			<div class="column">
				<h4>Address</h4>
				<p>61,East London, United Kingdom</p>
			</div>
			<div class="column">
				<h4>Website</h4>
				<p>www.yourwebsite.com</p>
			</div>
		</div>
		<p class="footer-copyright">Copyright © All rights reserved by your website</p>
	</footer>

	<script>
    let hamMenuIcon = document.getElementById("ham-menu");
let navBar = document.getElementById("nav-bar");
let navLinks = navBar.querySelectorAll("li");
let scrollTopBtn = document.getElementById("scroll-top");


hamMenuIcon.addEventListener("click", () => {
  navBar.classList.toggle("active");
  hamMenuIcon.classList.toggle("fa-times");
});
navLinks.forEach((navLinks) => {
  navLinks.addEventListener("click", () => {
    navBar.classList.remove("active");
    hamMenuIcon.classList.toggle("fa-times");
  });
});

let header = document.querySelector("header");
window.onscroll = () => {
  
  let pos = document.documentElement.scrollTop;
  if (pos > 0) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
  
  if (pos > 300) {
    scrollTopBtn.style.display = "grid";
  } else {
    scrollTopBtn.style.display = "none";
  }

  scrollTopBtn.addEventListener("click", () => {
    document.documentElement.scrollTop = 0;
  });
};

  </script>
</body>
</html>

ADD CSS:

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;  
}
body{
  font-family: "Poppins", sans-serif;
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}


section,
footer {
  padding: 9rem 5rem;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5rem;
}
.column {
  width: 100%;
  text-align: center;
}
.section-desc {
  text-align: center;
  margin: 2rem 0 6rem 0;
}
h1 {
	font-size: 38px;
	color: #fff;
	margin-bottom: 2rem;
	word-spacing: 1rem;
	line-height: 1.6;
}
h2 {
	font-size: 3.2rem;
	color: #ffffff;
	font-weight: 700;
	text-align: center;
}
h3 {
	font-size: 2.5rem;
	color: #fff;
	font-weight: 700;
	text-align: center;
}
h4 {
  font-size: 1.8rem;
  margin: 1.5rem 0;
}
p, button {
	font-size: 1.6rem;
	color: #fff;
	line-height: 1.8;
	font-weight: 400;
}
.btn {
  background-color: transparent;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  border: none;
  margin: 2rem 0;
}
.primary-btn {
	background-color: #ff044f;
	color: #fff;
}
.secondary-btn {
	border: 0.3rem solid #ff044f;
	color: #fff;
}


header {
  position: fixed;
  width: 100%;
  padding: 3rem 5rem;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}
nav a {
  font-size: 1.8rem;
  text-decoration: none;
}
nav a#logo {
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
}
nav a#logo span{
	color: #ff044f;
}
nav ul a {
  color: #fff;
}
nav ul a span{
  color: #ff044f;
}


#ham-menu {
  display: none;
}
nav ul.active {
  left: 0;
}

.sticky {
  background-color: #ffffff;
}
.sticky nav ul a,
.sticky nav a#logo,
.sticky #ham-menu {
  color: #000;
}

nav ul a:hover {
  color: #ff044f;
}
.sticky nav ul a:hover {
	color: #ff044f;
}

.banner{
  background-image: url(https://images.pexels.com/photos/22147/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
  background-size: cover;
  background-position: center center;
  height: 100vh;
}
section.banner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
}
.content-area p {
  text-align: justify;
}
.btn-container {
  display: flex;
  gap: 3rem;
}

#work {
	background: #080808;
}
.work .row {
  align-items: stretch;
}
.work .column {
  padding: 6rem 2rem;
  border-radius: 1rem;
}
.work .column p {
  text-align: center;
}
.work h3 {
  margin: 3rem 0;
}
.work i {
  text-align: center;
  font-size: 5rem;
  color: #ffffff;
}
.work .column:hover {
	background-color: #ff044f;
}
.work .column:hover h3 {
  color: #ffffff;
}
.work .column:hover p {
  color: #d7e1f3;
}


#services {
	background: #000;
}
.services .row {
  align-items: stretch;
}
.services .column {
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
}
#services h3 {
	margin-top: 30px;
}
.services .column > *:not(img) {
  padding: 0 2rem;
}
.services .column img {
  border-radius: 1rem 1rem 0 0;
  width: 100%;
}
.services .column p {
  text-align: center;
  flex-grow: 1;
}
.services-btn {
  display: flex;
  justify-content: center;
}
.services-btn .btn:hover {
	color: #ffffff;
	background-color: #ff044f;
}

.testimonial {
	background: #080808;
}
.testimonial h2,
.testimonial .section-desc {
  color: #ffffff;
}
#testimonial h3 span {
	display: block;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 2px;
}
.testimonial .row {
  align-items: stretch;
}
.testimonial .column {
	background-color: #ff044f;
	padding: 4rem 3rem;
	text-align: center;
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
}
.testimonial-image {
	height: 14rem;
	width: 14rem;
	margin: auto;
	padding: 0.9rem;
	border-radius: 50%;
	border: 5px solid #fff;
}
.testimonial-image img {
  width: 100%;
  border-radius: 50%;
}
.testimonial .column p {
  margin: 4rem 0;
  flex-grow: 1;
}


footer {
  background-color: #080800;
}
footer h3 {
  margin: 0;
}
#contact h3 span {
	color: #ff044f;
}
footer h3,
footer h4 {
  color: #ffffff;
  text-align: center;
}
footer .row {
  margin-bottom: 6rem;
}
.footer-about {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-bottom: 3rem;
}
.social-links {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 5rem;
}
.social-links a {
  font-size: 3rem;
  text-decoration: none;
  color: #ffffff;
}
footer p {
  text-align: center;
}


#scroll-top {
  position: fixed;
  display: none;
  place-items: center;
  height: 5rem;
  width: 5rem;
  right: 3rem;
  bottom: 3rem;
  background-color: #ff044f;
  color: #ffffff;
  border: none;
  outline: none;
  font-size: 2rem;
  border-radius: 3.2rem;
}




@media only screen and (max-width: 991px) {
  html {
    font-size: 56.25%;
  }
  .row {
    flex-direction: column;
  }
  section,
  footer {
    padding: 7.5rem 5rem;
  }
  header {
    padding: 2.2rem 5rem;
  }
  section.banner {
    grid-template-columns: 1fr;
    background: #ff044f;
  }
  #header-shape {
    display: none;
  }
  .banner-img {
    grid-row: 1;
  }
  nav ul a,
  nav a#logo {
    color: #ffffff;
  }
  .content-area h1,
  .content-area p {
    text-align: center;
  }
  .content-area h1 {
    color: #ffffff;
  }
  .content-area p {
    color: #d7e1f3;
  }
  .content-area .primary-btn {
    background-color: #ffffff;
    color: #ff044f;
  }
  .content-area .secondary-btn {
    color: #ffffff;
    border-color: #ffffff;
  }
  .btn-container {
    justify-content: center;
  }
  
  
  
}

@media only screen and (max-width: 767px) {
  html {
    font-size: 50%;
  }
  header {
    padding: 2rem 4rem;
  }
  .content-area h1 {
    font-size: 28px;
  }
  #ham-menu {
    display: block;
    color: #ffffff;
  }
  nav a#logo,
  #ham-menu {
    font-size: 3.2rem;
  }
  nav ul {
    background-color: #080808;
    position: fixed;
    left: -100vw;
    top: 70.4px;
    height: calc(100vh - 70.4px);
    width: 100vw;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    transition: 1s;
    gap: 0;
  }
  nav ul a {
    font-size: 2rem;
  }
  .sticky nav ul a {
    color: #ffffff;
  }
  nav ul a:hover {
    color: #ff044f;
  }
  #scroll-top {
    height: 6rem;
    width: 6rem;
  }
}
@media only screen and (max-width: 575px) {
  html {
    font-size: 46.87%;
  }
  header {
    padding: 2rem 3rem;
  }
  section,
  footer {
    padding: 7.5rem 3rem;
  }
  .work .column {
    padding: 4rem 2rem;
  }
  nav ul {
    top: 65.18px;
    height: calc(100vh - 65.18px);
  }
}

We hope that the code is working for you. Your feedback is extremely valuable to us. If you like our website's content, then please share it with your friends. Please cooperate with us. We are not able to proceed without your cooperation. Thanks for your time and interest in the information on our site.

Follow Us:

Personal Portfolio Website Template Design

Personal Portfolio Website Template Design [ Source Code ]:

Post a Comment

Contact Form