Personal Portfolio Using HTML CSS and JS With Free Source Code
Introduction
Hello coders, Welcome to another new project. I hope you all are doing well. As you know our today’s project is about a portfolio. Every coder or developer or any corporate individual should must have personal portfolio. Our today’s project is about how to create this type of personal portfolio using HTML CSS and JS. A portfolio defines the skills and work of a employee or intern. A personal portfolio makes an impact on recruiters and makes you stand out different from the crowd.
We’ve developed this personal portfolio using HTML CSS and JS. HTML is used to create the basic structure of the website. Once when the structure of the website is completed then we move forward to CSS. CSS is used to style the portfolio and in the end we used JavaScript for functionality of the portfolio. Using these three frontend technologies we’ve build our personal portfolio.
let’s understand the code.
index.html
This HTML code sets up a personal portfolio website for a front-end developer. It showcases their abilities, work samples, and ways to get in touch.
The document kicks off with the <!DOCTYPE html> declaration for HTML5 then the <html> tag comes next pointing out English as the language. In the <head> part, you’ll find meta tags for character set and viewport settings, which make sure the site adapts well to different screens. It also connects to outside stylesheets for Font Awesome icons and a custom CSS file (styles.css).
The <body> part begins with a div for design components then comes the <header>, which has a navigation bar. This bar contains links to various sections such as “About,” “Projects,” and “Contact.” This setup makes it easy to move around the website.
The <main> section will greet the visitor, contain a brief biography in which it is stated that he is a front-end developer, and have social media icons that are linked to the GitHub and LinkedIn accounts. There’s an image of the developer next to the text for balance.
The “About” section, with the id of “about,” gives all the information about the author’s background and enumerates their technical skills with Font Awesome icons. That right there is a very good way to glance through and know exactly which technologies a developer is familiar with.
The “Projects” section includes a feed of project cards. Every project card is responsible for listing an overview, images of the project, and links to the source code and live demos.
Finally, the “Contact” section includes contact information of the developer himself—e-mail and a LinkedIn link. The code concludes with a link to an external JavaScript file that adds interactivity features.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Yours Developer - Personal Portfolio</title><link rel="preload" as="image" imagesrcset="https://developergoutam.com/wp-content/uploads/2024/08/post10-768x373.png 768w, https://developergoutam.com/wp-content/uploads/2024/08/post10-300x146.png 300w, https://developergoutam.com/wp-content/uploads/2024/08/post10-1024x498.png 1024w, https://developergoutam.com/wp-content/uploads/2024/08/post10-1536x746.png 1536w, https://developergoutam.com/wp-content/uploads/2024/08/post10-150x73.png 150w, https://developergoutam.com/wp-content/uploads/2024/08/post10-450x219.png 450w, https://developergoutam.com/wp-content/uploads/2024/08/post10-1200x583.png 1200w, https://developergoutam.com/wp-content/uploads/2024/08/post10.png 1811w" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergoutam.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.0" type="font/woff2" crossorigin="anonymous" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="shape"></div>
<header>
<nav>
<h1>Yours Developer</h1>
<div class="burger">
<i class="fa-solid fa-bars"></i>
</div>
<ul class="links">
<li><a href="#about">about</a></li>
<li><a href="#projects">projects</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<div class="text">
<div class="grp">
<h2>Welcome to my profile</h2>
<h1>
Hi, I'm <span>Yours Developer</span> <br />
A Front-End Developer
</h1>
<div class="icons">
<a href="https://github.com/yoursdeveloper" target="_blank" rel="noopener">
<i class="fa-brands fa-github"></i>
</a>
<div class="line"></div>
<a href="https://linkedin.com/yoursdeveloper" target="_blank" rel="noopener">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
<div class="img">
<img decoding="async" src="./images/pfp.png" alt="" />
</div>
</div>
</main>
<!-- about section -->
<div class="about" id="about">
<div class="container">
<div class="text">
<h3>About</h3>
<h1>Get to know me</h1>
<p>
I'm Yours Developer, an 19 year-old front-end developer who loves
spending the entire day learning and expermenting new stuffs and
technologies.
</p>
</div>
<div class="skills">
<h2>Skills</h2>
<div class="wrapper">
<div>
<i class="fa-brands fa-html5"></i>
</div>
<div>
<i class="fa-brands fa-css3-alt"></i>
</div>
<div>
<i class="fa-brands fa-js"></i>
</div>
<div>
<i class="fa-brands fa-react"></i>
</div>
<div>
<i class="fa-brands fa-github"></i>
</div>
<div>
<i class="fa-brands fa-git-alt"></i>
</div>
<div>
<i class="fa-brands fa-sass"></i>
</div>
<div>
<i class="fa-brands fa-bootstrap"></i>
</div>
</div>
</div>
</div>
</div>
<!-- about section -->
<!-- projects section -->
<div class="projects" id="projects">
<div class="container">
<h3>Portfolio</h3>
<h1 class="title">A selection of Word I've done</h1>
<div class="projects-wrapper">
<div class="project">
<div class="card">
<div class="overview">
<h1>Jotion (notion clone)</h1>
<div class="btns">
<a href="project url" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
<a href="project url" target="_blank">
<i class="fa-solid fa-link"></i>
</a>
</div>
</div>
<img decoding="async" src="./images/p1.png" alt="project 1" />
</div>
</div>
<div class="project">
<div class="card">
<div class="overview">
<h1>Movies4u</h1>
<div class="btns">
<a href="project url" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
<a href="project url" target="_blank">
<i class="fa-solid fa-link"></i>
</a>
</div>
</div>
<img decoding="async" src="./images/p2.png" alt="moviesProject_img" />
</div>
</div>
<div class="project">
<div class="card">
<div class="overview">
<h1>Weather App</h1>
<div class="btns">
<a href="project url" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
<a href="project url" target="_blank">
<i class="fa-solid fa-link"></i>
</a>
</div>
</div>
<img decoding="async" src="./images/p3.png" alt="weatherapp_img" />
</div>
</div>
</div>
</div>
</div>
<!-- projects section -->
<!-- contact -->
<div class="contact" id="contact">
<div class="container">
<div class="header">
<h3>Contact</h3>
<h1>Reach me out via:</h1>
</div>
<div class="wrapper">
<div class="grp">
<i class="fa-solid fa-paper-plane"></i>
<span>example@gmail.com</span>
</div>
<div class="grp">
<i class="fa-solid fa-phone"></i>
<span>+99 12 48 76 95</span>
</div>
<div class="grp">
<i class="fa-brands fa-linkedin"></i>
<span>@YoursDeveloper</span>
</div>
</div>
<div class="footer">
<p>Let's talk about a project</p>
<a href="#">
Hire Me <i class="fa-solid fa-envelope"></i>
</a>
</div>
</div>
</div>
<!-- contact -->
<a href="#" class="back-top">
<i class="fa-solid fa-arrow-up"></i>
</a>
</body>
<script src="./app.js"></script>
</html>
style.css
This is a CSS code that provides the styling and layout for a modern responsive web page. It begins by importing “Poppins” from Google Fonts, probably one of the most used fonts in clean professional typography. The :root selector defines CSS variables such as –primary to hold the primary color used across the site. Later, if there has to be a change in the color scheme, it will become easy to do so.
The universal selector (*) resets default margin and padding for all elements and enforces box-sizing: border-box for consistent element sizing. It also turns on smooth scrolling behavior. The html selector sets the font size to 62.5%, which allows the calculation of rem units to be easier for responsive typography. The body should have a minimum height of 100vh and set a dark background; it should also use the imported “Poppins” font. The color is set to white, and horizontal scrolling has been disabled for improved user experience.
Design elements, such as the triangle shape (.shape), use absolute positioning to dynamically position and thereby achieve the background. The header has been styled with a shadow effect and is made to flexibly display its content. Navigation links are styled with a hover effect, changing color and showing an underline animation that brings out interactivity.
This keeps the main content area centered horizontally and vertically for a clean layout. The .container class itself is used to set widths and center elements within sections—like “About” and “Projects”—so they stay responsive but decently spaced.
The various icon styles are defined within the .icons class, adding a hover effect that scales the icons. This provides some nice interactivity to the design in a very very subtle fashion. The @media queries at the end make sure it’s fully responsive, adjusting the layout and type for larger desktop sizes and small mobile devices.
In general, the CSS code shows modern design tendencies mixed with responsive layouts and interactive elements that catch visitors’ eyes to the website.
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--primary: #e49559;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
html {
font-size: 62.5%;
}
body {
min-height: 100vh;
background: #212121;
font-family: "Poppins", sans-serif;
color: white;
overflow-x: hidden;
}
/* triangle */
.shape {
position: absolute;
right: 0;
top: 0;
width: 40%;
height: 100vh;
z-index: -1;
border-bottom: 100vh solid #3d3d3d;
border-left: 450px solid transparent;
}
header {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
min-height: 15vh;
display: flex;
}
header nav {
width: 70%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 2rem;
}
header nav ul {
list-style: none;
display: flex;
align-items: center;
gap: 7rem;
}
header nav a {
color: white;
text-decoration: none;
font-size: 1.7rem;
transition: 0.3s ease-in-out;
position: relative;
}
header nav a:hover {
color: var(--primary);
}
header nav a::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 0%;
height: 2px;
border-radius: 5rem;
background: var(--primary);
transition: 0.3s ease-in;
}
header nav a:hover::after {
width: 100%;
}
/* main */
main {
min-height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
main .container {
width: 70%;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
main .container .text {
display: flex;
}
main .container h2 {
font-weight: 200;
margin-bottom: 1rem;
font-size: 2vw;
}
main .container h1 {
font-size: 3vw;
margin-bottom: 3rem;
font-weight: 500;
}
main .container .text h1 span {
font-weight: 700;
}
.icons {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
}
.icons a {
text-decoration: none;
font-size: 2rem;
background: var(--primary);
color: #222;
border: 1px solid var(--primary);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.2s ease-in-out;
}
.icons a:hover {
transform: scale(1.2);
}
.line {
width: 50px;
height: 2px;
border-radius: 5rem;
background: #3d3d3d;
}
main .container .img {
max-width: 400px;
max-height: 500px;
box-shadow: 10 15px 0px rgba(0, 0, 0, 0.621);
border-radius: 76% 24% 33% 67% / 77% 63% 37% 23%;
background: var(--primary);
overflow: hidden;
position: relative;
}
main .img img {
width: 100%;
}
/* about section */
.about {
position: relative;
display: flex;
font-size: 2em;
min-height: 100vh;
}
.about .container {
width: 70%;
margin: auto;
}
.about h1 {
font-size: 60px;
margin-bottom: 4rem;
text-transform: uppercase;
letter-spacing: 3px;
position: relative;
}
.about h1::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 300px;
height: 5px;
background: var(--primary);
border-radius: 1rem;
}
.about h3 {
font-size: 30px;
color: var(--primary);
font-weight: 200;
margin-bottom: -1rem;
}
.about p {
font-size: 25px;
margin-bottom: 2rem;
width: 80%;
color: #e6e6e6;
}
.about .skills {
width: 70%;
margin: 0 auto;
}
.about .wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-content: center;
gap: 3rem;
margin-top: 2rem;
}
.about .wrapper div {
font-size: 5vw;
color: white;
padding: 3rem 2rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 1rem;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.4) inset;
}
.about .skills h2 {
text-align: center;
color: var(--primary);
font-size: 50px;
}
/* about section */
/* project section */
.projects {
display: flex;
flex-direction: column;
color: white;
padding: 3rem 0;
margin: 0 auto;
}
.projects .container {
width: 70%;
margin: auto;
}
.projects h3 {
font-size: 30px;
color: var(--primary);
font-weight: 200;
margin-bottom: -1rem;
}
.projects h1.title {
font-size: 60px;
position: relative;
margin-bottom: 10rem;
text-transform: uppercase;
letter-spacing: 3px;
}
.projects h1.title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 500px;
height: 5px;
background: var(--primary);
border-radius: 1rem;
}
.projects .project {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 5rem 0;
position: relative;
}
.project h1 {
width: 100%;
font-size: 3rem;
}
.card {
width: 60%;
min-width: 600px;
overflow: hidden;
box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.5);
position: relative;
}
.card::after {
content: "";
position: absolute;
inset: 0;
background: transparent;
pointer-events: none;
z-index: 6;
border: 5px solid var(--primary);
}
.card img {
width: 100%;
height: 100%;
}
.card .overview {
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
margin: 10px;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translate(-100%);
transition: 0.3s ease-in;
}
.card:hover .overview {
transform: translate(0);
}
.overview h1 {
all: unset;
font-size: 40px;
margin-bottom: 1rem;
text-align: center;
}
.overview a {
text-decoration: none;
display: inline-block;
margin-right: 20px;
transition: 0.2s ease-out;
}
.overview i {
font-size: 3rem;
color: #222;
background: var(--primary);
border-radius: 50%;
width: 55px;
height: 55px;
display: flex;
justify-content: center;
align-items: center;
}
.overview a:hover {
transform: scale(1.1);
}
/* project section */
/* contact */
.contact {
position: relative;
display: flex;
font-size: 2em;
min-height: 100vh;
}
.contact .container {
width: 70%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.contact h3 {
font-size: 25px;
color: var(--primary);
font-weight: 200;
margin-bottom: -2rem;
}
.contact h1 {
font-size: 60px;
position: relative;
margin-bottom: 5rem;
text-transform: uppercase;
letter-spacing: 3px;
}
.contact h1::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 5px;
border-radius: 5rem;
background: var(--primary);
border-radius: 1rem;
}
.contact .wrapper {
font-size: 30px;
}
.contact .wrapper .grp {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.contact .grp:not(:last-child) {
margin-bottom: 3rem;
}
.contact .grp i {
font-size: 50px;
margin-right: 1rem;
}
.contact .footer {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 5rem;
}
.contact .footer p {
font-size: 5rem;
font-weight: 200;
color: white;
margin-bottom: 3rem;
position: relative;
}
.contact .footer p::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 330px;
height: 2px;
background: white;
border-radius: 1rem;
}
.contact .footer a {
text-decoration: none;
background: var(--primary);
color: #222;
font-weight: bold;
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
padding: 1.5rem 2rem;
transition: 0.2s ease-in;
}
.contact .footer a:hover {
transform: scale(1.05);
}
/* contact */
.back-top {
text-decoration: none;
font-size: 2rem;
color: #222;
background: var(--primary);
border-radius: 50%;
width: 5rem;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 2%;
right: 2%;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.859);
transition: 0.4s ease-out;
opacity: 0;
pointer-events: none;
}
.back-top:hover {
transform: translateY(-20px);
}
.back-top.active {
opacity: 1;
pointer-events: auto;
}
/* Responsiveness */
@media only screen and (max-width: 900px) {
main .container {
width: 80%;
}
main .img {
width: 300px;
height: 350px;
}
}
/* Navbar */
header nav .burger {
display: none;
transition: 0.3s ease-in-out;
cursor: pointer;
z-index: 999;
}
header nav .burger:hover {
color: var(--primary);
}
header nav .burger:hover i {
pointer-events: none;
}
@media only screen and (max-width: 768px) {
header nav .burger {
display: block;
}
header nav .links {
background: rgba(0, 0, 0, 0.518);
backdrop-filter: blur(10px);
position: fixed;
inset: 0;
height: 100vh;
width: 100%;
color: white;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translateX(-100%);
transition: 0.8s cubic-bezier(1, -0.06, 0.33, 0.88);
z-index: 99;
}
header nav .links.show {
transform: translateX(0);
}
header nav .links {
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding-block: 12rem;
}
header nav .links li {
text-align: center;
}
header nav li a {
color: white;
text-decoration: none;
font-size: 3rem;
transition: 0.3s ease-in-out;
}
/* Navbar */
.container,
nav {
width: 90% !important;
}
main .container {
flex-direction: column-reverse;
justify-content: center;
text-align: center;
}
main .img {
width: 200px;
height: 250px;
margin-bottom: 2rem;
}
main .container h2 {
font-size: 20px;
}
main .container h1 {
font-size: 4rem;
}
main .line {
background: #222;
}
.projects h1.title::after {
width: 70%;
}
.about h1,
.projects .container .title,
.contact h1 {
font-size: 7vw;
}
.about .skills h2 {
font-size: 8vw;
}
.about .wrapper div {
font-size: 4rem;
}
.card {
min-width: 95%;
}
.card::after {
border: 3px solid var(--primary);
}
.overview h1 {
font-size: 3rem;
}
.contact .wrapper {
font-size: 30px;
}
.contact .wrapper i {
font-size: 5vw;
}
.contact span {
font-size: 4vw;
}
.contact .footer p {
font-size: 6vw;
}
}
@media only screen and (max-width: 550px) {
main h1 {
font-size: 30px !important;
}
h3 {
font-size: 20px !important;
}
.about .wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.about .wrapper div {
width: 80px;
}
.about p {
text-align: center;
width: 100%;
}
.contact {
min-height: 80vh;
}
.contact h3 {
margin-bottom: -1rem;
}
.contact .grp {
gap: 0;
}
}
app.js
This is a JavaScript piece that enhances the interactivity of a webpage by adding functionality to a “back-to-top” button and a responsive navigation menu. It controls the visibility of the “back-to-top” button; it turns on when scrolling down the page more than 75 pixels through toggling the .active class.
The second part is responsible for handling a mobile-friendly “burger” menu. The burger icon toggles .show class visibility of the sidebar menu, which holds navigation links. Also, when a user clicks on any navigation link inside, it toggles the visibility to close the menu after selection. This set-up improves the user experience, keeping the interface responsive and clutter-free.
This was all about our JavaScript code.
const toTop= document.querySelector(".back-top")
window.addEventListener("scroll", () => {
if(pageYOffset > 75){
toTop.classList.add("active")
}else{
toTop.classList.remove("active")
}
})
const burger= document.querySelector(".burger")
const sidebar= document.querySelector(".links")
const links= document.querySelectorAll(".links li a")
burger.addEventListener("click", toggleSidebar)
links.forEach(link => {
link.addEventListener("click", toggleSidebar)
})
function toggleSidebar(){
sidebar.classList.toggle("show")
}