Personal Portfolio Using HTML CSS With Free Source Code
Introduction
Hello coders, hope you all are doing something unique and creative. In this blog we’ve made a personal portfolio website using HTML and CSS. This Personal Portfolio Using HTML CSS.
As a coder or freelancer you should definitely have a personal portfolio where you can showcase your work and skills to other. Every coder and developer should definitely have their own personal portfolio. The portfolio which we’ve made in our today’s project is very unique and user interactive.
In this personal portfolio we’ve made a one page portfolio website which contains all the necessary information about the service provider. To build this we’ve used HTML and CSS. HTML is used to create the basic structure of the website and CSS is used for styling of our portfolio website. If you have some good knowledge of HTML and CSS then you can also create this type of portfolio.
Let’s dive into our code.
index.html
This article will take you through a step-by-step guide to creating a simple portfolio website. The website is basically to showcase one’s skills and experience, along with his contact information in an organized manner.
It contains a navigation menu on top of the page, having a header that includes a logo and other links such as Home, Services, Skills, Education, Experience, and Contact. The main section contains an introductory message welcoming viewers in a friendly way, introducing briefly, supported with an image and links of social networking profiles. The design is worked out by using an external CSS for making it look modern and attractive.
In the top bar, it contains the clear logo of the website, and a navigation bar was given to switch easily between sections. In the content section, the person comes in view, showing his name and job; then, there is a small biography and social media icons leading to the sites like LinkedIn, GitHub, and Instagram.
There is also a call button on the website inviting possible clients or employers to get in touch. Overall, this portfolio website provides a clear and useful means of showing oneself professionally online.
This was all about our HTML Code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Portfolio Website</title><link rel="preload" as="image" imagesrcset="https://developergoutam.com/wp-content/uploads/2024/09/post14-768x371.png 768w, https://developergoutam.com/wp-content/uploads/2024/09/post14-300x145.png 300w, https://developergoutam.com/wp-content/uploads/2024/09/post14-1024x495.png 1024w, https://developergoutam.com/wp-content/uploads/2024/09/post14-1536x743.png 1536w, https://developergoutam.com/wp-content/uploads/2024/09/post14-150x73.png 150w, https://developergoutam.com/wp-content/uploads/2024/09/post14-450x218.png 450w, https://developergoutam.com/wp-content/uploads/2024/09/post14-1200x580.png 1200w, https://developergoutam.com/wp-content/uploads/2024/09/post14.png 1853w" 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" />
</head>
<body>
<header>
<a href="#" class="logo">Alex</a>
<nav>
<a href="#" class="active"> Home</a>
<a href="#" >Services</a>
<a href="#" >Skills</a>
<a href="#" >Education</a>
<a href="#" >Experience</a>
<a href="#" >Contact</a>
</nav>
</header>
<section class="home">
<div class="home-img">
<img decoding="async" src="main.jpg" alt="">
</div>
<div class="home-content">
<h1>Hi, It's <span>Alex</span></h1>
<h3 class="typing-text">I'm a <span></span></h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus labore dolores esse. Odit similique doloribus tenetur doloremque, sunt commodi in ipsa repudiandae debitis deleniti blanditiis quibusdam quaerat neque asperiores ea.</p>
<div class="social-icons">
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-github"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
</div>
<a href="#" class="btn">Hire me</a>
</div>
</section>
</body>
</html>
styles.css
First, it adds a custom font so that all the texts on the website appear nice and consistent. It does a global reset, taking away default margins, paddings, and borders, which makes the layout more understandable.
The webpage automatically fits from big computers down to small mobile devices. Its layout changes automatically to provide the best, easy-to-read, and easy-to-use content. Such fitting to the screens is enabled through media queries, which let the design change at the certain width of the screen.
The header is pinned to the top of the page, meaning that it stays there at all times when users scroll. This contains a logo and a navigation menu, both made to be striking yet easy on the user. The logo itself is very large and reacts to hovering over it with a slight morphing, adding some playfulness to the page. Also, the color of the navigation links changes and an underline effect is added for hover and active states to provide clear feedback to the users.
The page content is separated into sections, where each section covers the full screen. The big friendly heading identifying the person or business is on the home section, along with a big picture. This picture is rounded and has a shadow; it looks very nice.
Social icons that link to various sites are provided with styling to match the theme of the website. In addition, hover effects have been added, such that the color changes and they grow slightly, inviting users to click on them.
Finally, there is the call-to-action button, such as ‘Hire’ or ‘Contact’, which invites visitors to take action. Bright colors and subtle animations make this button catch the eye, hence a likely target for users’ clicks.
This design aims to provide a step-by-step guide in the development of a professional portfolio website that would look good on any device. It combines modern design methods with responsive web practices to ensure the user has a smooth experience.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
border: none;
outline: none;
font-family: 'Poppins', sans-serif;
}
html{
font-size: 62.5%;
}
body{
width: 100%;
height: 100vh;
overflow-x: hidden;
background-color: black;
color: white;
}
header{
margin-top: 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1rem 9%;
background-color: transparent;
filter: drop-shadow(10px);
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.logo{
font-size: 3rem;
color: #b74b4b;
font-weight: 800;
cursor: pointer;
transition: 0.5s ease;
}
.logo:hover{
transform: scale(1.1);
}
nav a{
font-size: 1.8rem;
color: white;
margin-left: 4rem;
font-weight: 500;
transition: 0.3s ease;
border-bottom: 3px solid transparent;
}
nav a:hover,
nav a.active{
color: #b74b4b;
border-bottom: 3px solid #b74b4b;
}
@media(max-width:995px){
nav{
position: absolute;
display: none;
top: 0;
right: 0;
width: 40%;
border-left: 3px solid #b74b4b;
border-bottom: 3px solid #b74b4b;
border-bottom-left-radius: 2rem;
padding: 1rem solid;
background-color: #161616;
border-top: 0.1rem solid rgba(0,0,0,0.1);
}
nav.active{
display: block;
}
nav a{
display: block;
font-size: 2rem;
margin: 3rem 0;
}
nav a:hover,
nav a.active{
padding: 1rem;
border-radius: 0.5rem;
border-bottom: 0.5rem solid #b74b4b;
}
}
section{
min-height: 100vh;
padding: 5rem 9% 5rem;
}
.home{
display: flex;
justify-content: center;
align-items: center;
gap: 8rem;
background-color: black;
}
.home .home-content h1{
font-size: 6rem;
font-weight: 700;
line-height: 1.3;
}
span{
color: #b74b4b;
}
.home-content h3{
font-size: 4rem;
margin-bottom: 1rem;
font-weight: 700;
}
.home-content p{
font-size: 1.6rem;
}
.home-img{
border-radius: 50%;
}
.home-img img{
position: relative;
width: 32vw;
border-radius: 50%;
box-shadow: 0 0 25px solid #b74b4b;
cursor: pointer;
transition: 0.2s linear;
}
.home-img img:hover{
font-size: 1.8rem;
font-weight: 500;
}
.social-icons a{
display: inline-flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
background-color: transparent;
border: 0.2rem solid #b74b4b;
font-size: 2rem;
border-radius: 50%;
margin: 3rem 1.5rem 3rem 0;
transition: 0.3s ease;
color: #b74b4b;
}
.social-icons a:hover{
color: black;
transform: scale(1.3) translateY(-5px);
background-color: #b74b4b;
box-shadow: 0 0 25px #b74b4b;
}
.btn{
display: inline-block;
padding: 1rem 2.8rem;
background-color: black;
border-radius: 4rem;
font-size: 1.6rem;
color: #b74b4b;
letter-spacing: 0.3rem;
font-weight: 600;
border: 2px solid #b74b4b;
transition: 0.3s ease;
cursor: pointer;
}
.btn:hover{
transform: scale3d(1.03);
background-color: #b74b4b;
color: black;
box-shadow: 0 0 25px #b74b4b;
}
.typing-text{
font-size: 34px;
font-weight: 600;
min-width: 280px;
}
.typing-text span{
position: relative;
}
.typing-text span::before{
content: "software Developer";
color: #b74b4b;
animation: words 20s infinite;
}
.typing-text span::after{
content: "";
background-color: black;
position: absolute;
width: calc(100% + 8px);
height: 100%;
border-left: 3px solid black;
right: -8;
animation: cursor 0.6s infinite;
}
@keyframes cursor{
to{
border-left: 3px solid #b74b4b;
}
}
@keyframes words{
0%, 20%{
content: "Web Developer";
}
21%, 40%{
content: "Developer";
}
41%, 60%{
content: "Web Designer";
}
61%, 80%{
content: "Youtuber";
}
81%, 100%{
content: "Script Writer";
}
}
@media (max-width: 1000px){
.home{
gap: 4rem;
}
}
@media(max-width:995px){
.home{
flex-direction: column;
margin: 5rem 4rem;
}
.home .home-content h3{
font-size: 2.5rem;
}
.home-content h1{
font-size: 5rem;
}
.home-img img{
width: 70vw;
margin-top: 4rem;
}
}