Learn how to build a remarkable portfolio website with HTML, CSS, and JavaScript. Launch your online portfolio today.
Table of Contents
Welcome to the comprehensive guide on creating your very own portfolio website using HTML, CSS, and JavaScript. In today's digital age, having a professional online portfolio is essential for showcasing your skills and work to potential clients, employers, or collaborators. In this guide, we will take you through the entire process, step by step, from the initial concept to the final launch.
Whether you are a web development novice looking to build your first portfolio or a seasoned developer seeking to enhance your online presence, this guide has something for everyone. We will cover everything you need to know, from choosing the right technologies to designing an eye-catching layout, adding interactive elements, and optimizing for peak performance.
So, let's embark on this exciting journey of creating a stunning portfolio website that will help you stand out in the digital world. Whether you're an artist, designer, developer, writer, or any other creative professional, your online portfolio is your digital business card, and we're here to help you make it impressive and effective. Let's get started!
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our portfolio website.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
I'll explain each part of the code step by step:
1. <!DOCTYPE html>: This is the document type declaration, which tells the browser that the document is an HTML5 document.
2. <html lang="en">: This is the opening tag for the HTML document. The lang attribute is set to "en," indicating that the document is written in English.
3. <head>: This is the head section of the HTML document. It contains meta-information and links to external resources that are not displayed on the web page itself.
- <meta charset="UTF-8">: This meta tag specifies the character encoding for the document, which is UTF-8, a widely used character encoding that supports various languages and special characters.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport properties, ensuring that the web page is displayed correctly on various devices and screen sizes.
- <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">: This is a link to an external CSS file that is used to style the page. It appears to be importing a library of icons called UNICONS.
- <link rel="stylesheet" href="styles.css">: Another link to an external CSS file named "styles.css" for styling the page.
- <link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon">: This line specifies the favicon for the website, which is the small icon displayed in the browser's tab or title bar.
- <title>Portfolio Website</title>: This sets the title of the web page, which is displayed in the browser's title bar or tab.
4. <body>: This is the main content of the web page that users see and interact with.
- Inside the <body>, there is a <div class="container"> that wraps the entire content of the page. This is a common practice for creating a central container for the page's content.
- The page is divided into sections using <section> elements with different IDs (home, about, projects, contact). These IDs are used for creating anchor links that allow users to navigate to specific sections of the page.
- The content of each section includes headings, paragraphs, buttons, and icons, providing information about the portfolio owner, their skills, projects, and contact details.
- The page also includes links to social media profiles and a footer section with navigation links and copyright information.
5. At the end of the HTML document, there are script tags (<script>) that include references to external JavaScript files (typed.js, scrollreveal, and script.js) used for adding dynamic behavior to the web page, such as typewritten text and scroll animations.
This is the basic structure of our portfolio website using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the portfolio website is in place, the next step is to add styling to the website using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our portfolio website.
Let me break down what each part of the code is doing:
1. Font Import: This code imports the "Poppins" font from Google Fonts with specific font weights (400, 500, 600, 700) and specifies that it should be used as a fallback font for elements with the font-family: 'Poppins', sans-serif; property.
2. CSS Variables: It defines CSS variables using the :root pseudo-class. These variables are used to store color values and can be reused throughout the stylesheet for consistent theming.
3. Base Styles: These are base styles that are applied to all elements on the webpage. They include setting margin and padding to 0, using the Poppins font, and specifying box-sizing: border-box to ensure that padding and border sizes do not affect the element's overall size.
4. Smooth Scrolling: It applies smooth scrolling behavior to the HTML element, so when you click on anchor links within the page, it scrolls smoothly to the target.
5. Scrollbar Styling: This section styles the scrollbars in webkit browsers (like Chrome and Safari) by specifying their width, background color, thumb color, and hover effect.
6. Reusable CSS Rules: These are CSS rules that define styles for elements that will be used repeatedly throughout the website, like buttons and icons. It defines button styles, icon sizes, and hover effects.
7. Base Styles for Body and Container: It sets the background color for the body and styles a container that will be used to wrap content. It also hides horizontal overflow.
8. Navigation Bar Styles: This section styles the website's navigation bar. It fixes it to the top of the page, sets its background color, and styles various elements within the navigation bar, including the logo, menu items, and buttons. It also includes responsive styles for smaller screens.
9. Wrapper Styles: This styles a wrapper for content on the page, adding padding to the left and right.
10. Featured Box Styles: This section styles a featured section on the webpage, with text on one side and an image on the other. It defines the appearance of text, buttons, and social icons within this section.
11. Featured Image Styles: This styles the image within the featured section, applying a floating animation to it.
12. Scroll Button Styles: This styles a button used for scrolling within the featured section.
13. Main Box Styles: These styles define the layout for the main content section of the webpage, including rows and columns.
14. Responsive Styles: This section contains media queries that adjust the layout and styles of various elements for different screen sizes (e.g., tablets and mobile devices). It changes the layout of the navigation menu, featured section, and project boxes to ensure a responsive design.
15. Footer Styles: This section styles the footer of the webpage, including footer text, links, and social icons.
This will give our portfolio website an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
/* ----- POPPINS FONT Link ----- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* ----- VARIABLES ----- */
:root{
--body-color: rgb(250, 250, 250);
--color-white: rgb(255, 255, 255);
--text-color-second: rgb(68, 68, 68);
--text-color-third: rgb(30, 159, 171);
--first-color: rgb(110, 87, 224);
--first-color-hover: rgb(40, 91, 212);
--second-color: rgb(110, 87, 224);
--third-color: rgb(192, 166, 49);
--first-shadow-color: rgba(0, 0, 0, 0.1);
}
/* ----- BASE ----- */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* ----- SMOOTH SCROLL ----- */
html{
scroll-behavior: smooth;
}
/* ----- CHANGE THE SCROLL BAR DESIGN ----- */
::-webkit-scrollbar{
width: 10px;
border-radius: 25px;
}
::-webkit-scrollbar-track{
background: #f1f1f1;
}
::-webkit-scrollbar-thumb{
background: #ccc;
border-radius: 30px;
}
::-webkit-scrollbar-thumb:hover{
background: #bbb;
}
/* ---##-- REUSABLE CSS --##--- */
/* ----- GLOBAL BUTTON DESIGN ----- */
.btn{
font-weight: 500;
padding: 12px 20px;
background: #efefef;
border: none;
border-radius: 10px;
cursor: pointer;
transition: .4s;
}
.btn>i{
margin-left: 10px;
}
.btn:hover{
background: var(--second-color);
color: var(--color-white);
}
/* ----- GLOBAL ICONS DESIGN ----- */
i{
font-size: 16px;
}
/* ------- BASE -------- */
body{
background: var(--body-color);
}
.container{
width: 100%;
position: relative;
overflow-x: hidden; /* not mandatory */
}
/* ----- NAVIGATION BAR ----- */
nav{
position: fixed;
display: flex;
justify-content: space-between;
width: 100%;
height: 90px;
line-height: 90px;
background: var(--body-color);
padding-inline: 9vw;
transition: .3s;
z-index: 100;
}
.nav-logo{
position: relative;
}
.nav-name{
font-size: 30px;
font-weight: 600;
color: var(--text-color-third);
}
.nav-logo span{
position: absolute;
top: -15px;
right: -20px;
font-size: 5em;
color: var(--text-color-second);
}
.nav-menu, .nav_menu_list{
display: flex;
}
.nav-menu .nav_list{
list-style: none;
position: relative;
}
.nav-link{
text-decoration: none;
color: var(--text-color-second);
font-weight: 500;
padding-inline: 15px;
margin-inline: 20px;
}
.nav-menu-btn{
display: none;
}
.nav-menu-btn i{
font-size: 28px;
cursor: pointer;
}
.active-link{
position: relative;
color: var(--first-color);
transition: .3;
}
.active-link::after{
content: '';
position: absolute;
left: 50%;
bottom: -15px;
transform: translate(-50%, -50%);
width: 5px;
height: 5px;
background: var(--first-color);
border-radius: 50%;
}
/* ----- WRAPPER DESIGN ----- */
.wrapper{
padding-inline: 10vw;
}
/* ----- FEATURED BOX ----- */
.featured-box{
position: relative;
display: flex;
height: 100vh;
min-height: 700px;
}
/* ----- FEATURED TEXT BOX ----- */
.featured-text{
position: relative;
display: flex;
justify-content: center;
align-content: center;
min-height: 80vh;
flex-direction: column;
width: 50%;
padding-left: 20px;
}
.featured-text-card span{
background: var(--third-color);
color: var(--color-white);
padding: 3px 8px;
font-size: 12px;
border-radius: 5px;
}
.featured-name{
font-size: 50px;
font-weight: 600;
color: var(--text-color-second);
margin-block: 20px;
}
.typedText{
text-transform: capitalize;
color: var(--text-color-third);
}
.featured-text-info{
font-size: 15px;
margin-bottom: 30px;
color: var(--text-color-second);
}
.featured-text-btn{
display: flex;
gap: 20px;
}
.featured-text-btn>.blue-btn{
background: var(--first-color);
color: var(--color-white);
}
.featured-text-btn>.blue-btn:hover{
background: var(--first-color-hover);
}
.social_icons{
display: flex;
margin-top: 5em;
gap: 30px;
}
.icon{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
.icon:hover{
color: var(--first-color);
}
/* ----- FEATURED IMAGE BOX ----- */
.featured-image{
display: flex;
justify-content: right;
align-content: center;
min-height: 80vh;
width: 50%;
}
.image{
margin: auto 0;
width: 380px;
height: 380px;
animation: imgFloat 7s ease-in-out infinite;
}
.image img{
width: 380px;
height: 380px;
object-fit: contain;
}
@keyframes imgFloat {
50%{
transform: translateY(10px);
}
}
.scroll-btn{
position: absolute;
bottom: 0;
left: 50%;
translate: -50%;
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 50px;
gap: 5px;
text-decoration: none;
color: var(--text-color-second);
background: var(--color-white);
border-radius: 30px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
.scroll-btn i{
font-size: 20px;
}
/* ----- MAIN BOX ----- */
.section{
padding-block: 5em;
}
.row{
display: flex;
justify-content: space-between;
width: 100%;
gap: 50px;
}
.col{
display: flex;
width: 50%;
}
/* -- ## --- RESUABLE CSS -- ## -- */
.top-header{
text-align: center;
margin-bottom: 5em;
}
.top-header h1{
font-weight: 600;
color: var(--text-color-second);
margin-bottom: 10px;
}
.top-header span{
color: #999;
}
h3{
font-size: 20px;
font-weight: 600;
color: var(--text-color-second);
margin-bottom: 15px;
}
/* ----- ABOUT INFO ----- */
.about-info{
position: relative;
display: flex;
align-items: center;
flex-direction: column;
padding-block: 30px 70px;
padding-inline: 20px;
width: 100%;
background: var(--color-white);
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
border-radius: 20px;
}
.about-info p{
text-align: center;
font-size: 15px;
color: #777;
}
.about-btn button{
position: absolute;
right: 20px;
bottom: 20px;
background: var(--first-color);
color: var(--color-white);
border-radius: 30px;
}
.about-btn button:hover{
background: var(--first-color-hover);
}
/* ----- ABOUT / SKILLS BOX ----- */
.skills-box{
margin: 10px;
}
.skills-header{
margin-bottom: 30px;
}
.skills-list{
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.skills-list span{
font-size: 14px;
background: var(--first-color);
color: var(--color-white);
padding: 2px 10px;
border-radius: 5px;
}
/* ----- PROJECTS BOX ----- */
.project-container{
display: flex;
width: 100%;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.project-box{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 30%;
height: 250px;
background: var(--color-white);
border-radius: 20px;
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
overflow: hidden;
}
.project-box>i{
font-size: 50px;
color: #00B5E7;
margin-bottom: 25px;
}
.project-box label{
font-size: 15px;
color: #777;
}
.project-box::after, .contact-info::after{
content: "";
position: absolute;
bottom: -100%;
background: var(--second-color);
width: 100%;
height: 100%;
transition: .4s;
z-index: 1;
}
.project-box:hover.project-box::after,
.contact-info:hover.contact-info::after{
bottom: 0;
}
.project-box:hover.project-box i,
.project-box:hover.project-box>h3,
.project-box:hover.project-box>label{
color: var(--color-white);
z-index: 2;
}
/* ----- CONTACT BOX ----- */
.contact-info{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 30px;
width: 100%;
height: 315px;
background: var(--second-color);
border-radius: 10px;
box-shadow: 1px 8px 10px 2px var(--first-shadow-color);
overflow: hidden;
}
.contact-info>h2{
color: var(--color-white);
margin-bottom: 20px;
}
.contact-info>p{
display: flex;
align-items: center;
gap: 10px;
color: var(--color-white);
margin-block: 5px;
}
.contact-info p>i{
font-size: 18px;
}
.contact-info::after{
background: var(--color-white);
}
.contact-info:hover.contact-info h2,
.contact-info:hover.contact-info p,
.contact-info:hover.contact-info i{
color: #777;
z-index: 2;
}
/* ----- CONTACT FORM ----- */
.form-control{
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.form-inputs{
display: flex;
gap: 10px;
width: 100%;
}
.input-field{
width: 50%;
height: 55px;
background: transparent;
border: 2px solid #AAA;
border-radius: 10px;
padding-inline: 20px;
outline: none;
}
textarea{
width: 100%;
height: 250px;
background: transparent;
border: 2px solid #AAA;
border-radius: 10px;
padding: 15px 20px;
outline: none;
resize: none;
}
.form-button>.btn{
display: flex;
align-items: center;
justify-content: center;
background: var(--second-color);
color: var(--color-white);
}
.form-button>.btn:hover{
background: #00B5E7;
}
.form-button i{
font-size: 18px;
rotate: -45deg;
}
/* ----- FOOTER BOX ----- */
footer{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
row-gap: 30px;
background: #F8F8F8;
padding-block: 40px 60px;
}
.top-footer p{
font-size: 25px;
font-weight: 600;
}
.middle-footer .footer-menu{
display: flex;
}
.footer_menu_list{
list-style: none;
}
.footer_menu_list a{
text-decoration: none;
color: var(--text-color-second);
font-weight: 500;
margin-inline: 20px;
}
.footer-social-icons{
display: flex;
gap: 30px;
}
.bottom-footer{
font-size: 14px;
margin-top: 10px;
}
/* ----- MEDIA QUERY == 1024px / RESPONSIVE ----- */
@media only screen and (max-width: 1024px){
.featured-text{
padding: 0;
}
.image, .image img{
width: 320px;
height: 320px;
}
}
/* ----- MEDIA QUERY == 900px / RESPONSIVE ----- */
@media only screen and (max-width: 900px) {
.nav-button{
display: none;
}
.nav-menu.responsive{
left: 0;
}
.nav-menu{
position: fixed;
top: 80px;
left: -100%;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
width: 100%;
min-height: 450px;
height: 90vh;
transition: .3s;
}
.nav_menu_list{
flex-direction: column;
}
.nav-menu-btn{
display: flex;
align-items: center;
justify-content: center;
}
.featured-box{
flex-direction: column;
justify-content: center;
height: 100vh;
}
.featured-text{
width: 100%;
order: 2;
justify-content: center;
align-content: flex-start;
min-height: 60vh;
}
.social_icons{
margin-top: 2em;
}
.featured-image{
order: 1;
justify-content: center;
min-height: 150px;
width: 100%;
margin-top: 65px;
}
.image, .image img{
width: 150px;
height: 150px;
}
.row{
display: flex;
flex-direction: column;
justify-content: center;
gap: 50px;
}
.col{
display: flex;
justify-content: center;
width: 100%;
}
.about-info, .contact-info{
width: 100%;
}
.project-container{
justify-content: center;
}
.project-box{
width: 80%;
}
}
/* ----- MEDIA QUERY == 540px / RESPONSIVE ----- */
@media only screen and (max-width: 540px){
.featured-name{
font-size: 40px;
}
.project-box{
width: 100%;
}
.form-inputs{
flex-direction: column;
}
.input-field{
width: 100%;
}
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript.
Let's break down each part of the code and explain its purpose:
1. Navigation Bar Function (myMenuFunction):
- This function is responsible for toggling a responsive class on an element with the ID "myNavMenu."
- It checks if the current class of the element is "nav-menu." If it is, it adds the "responsive" class; otherwise, it removes it.
2. Adding Shadow on Navigation Bar While Scrolling (headerShadow):
- This function is triggered when the user scrolls the page.
- It gets an element with the ID "header" and checks the scroll position (both document.body.scrollTop and document.documentElement.scrollTop).
- If the scroll position is greater than 50 pixels, it adds a box shadow to the "header" element, reduces its height and line height to 70 pixels.
- If the scroll position is less than or equal to 50 pixels, it removes the box shadow and restores the height and line height to 90 pixels.
3. Typing Effect (Typed library):
- This code initializes a typing effect on elements with the class "typedText."
- It sets up an array of strings to type ("Designer," "Youtuber," "Developer") and configures typing speed, backspace speed, and delay between typing cycles.
4. Scroll Reveal Animation (ScrollReveal library):
- It initializes the ScrollReveal library with specific settings (e.g., origin, distance, duration, reset).
- Several elements are revealed with animations as they come into the viewport:
- Elements with classes like "featured-text-card," "featured-name," etc., are revealed with specific delays.
- Project boxes, headings, and other sections also have reveal animations with intervals and delays.
- Some elements are revealed from the left (srLeft) and some from the right (srRight).
5. Change Active Link on Scroll (scrollActive):
- This function is executed when the user scrolls.
- It calculates the current scroll position (scrollY) and checks which section is currently in view.
- Based on the active section, it adds the class "active-link" to the corresponding navigation link, making it visually active.
- When the section is no longer in view, it removes the "active-link" class from the navigation link.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
/* ----- NAVIGATION BAR FUNCTION ----- */
function myMenuFunction(){
let menuBtn = document.getElementById("myNavMenu");
if(menuBtn.className === "nav-menu"){
menuBtn.className += " responsive";
} else {
menuBtn.className = "nav-menu";
}
}
/* ----- ADD SHADOW ON NAVIGATION BAR WHILE SCROLLING ----- */
window.onscroll = function() {headerShadow()};
function headerShadow() {
const navHeader =document.getElementById("header");
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
navHeader.style.boxShadow = "0 1px 6px rgba(0, 0, 0, 0.1)";
navHeader.style.height = "70px";
navHeader.style.lineHeight = "70px";
} else {
navHeader.style.boxShadow = "none";
navHeader.style.height = "90px";
navHeader.style.lineHeight = "90px";
}
}
/* ----- TYPING EFFECT ----- */
let typingEffect = new Typed(".typedText",{
strings : ["Designer","Youtuber","Developer"],
loop : true,
typeSpeed : 100,
backSpeed : 80,
backDelay : 2000
})
/* ----- ## -- SCROLL REVEAL ANIMATION -- ## ----- */
const sr = ScrollReveal({
origin: 'top',
distance: '80px',
duration: 2000,
reset: true
})
/* -- HOME -- */
sr.reveal('.featured-text-card',{})
sr.reveal('.featured-name',{delay: 100})
sr.reveal('.featured-text-info',{delay: 200})
sr.reveal('.featured-text-btn',{delay: 200})
sr.reveal('.social_icons',{delay: 200})
sr.reveal('.featured-image',{delay: 300})
/* -- PROJECT BOX -- */
sr.reveal('.project-box',{interval: 200})
/* -- HEADINGS -- */
sr.reveal('.top-header',{})
/* ----- ## -- SCROLL REVEAL LEFT_RIGHT ANIMATION -- ## ----- */
/* -- ABOUT INFO & CONTACT INFO -- */
const srLeft = ScrollReveal({
origin: 'left',
distance: '80px',
duration: 2000,
reset: true
})
srLeft.reveal('.about-info',{delay: 100})
srLeft.reveal('.contact-info',{delay: 100})
/* -- ABOUT SKILLS & FORM BOX -- */
const srRight = ScrollReveal({
origin: 'right',
distance: '80px',
duration: 2000,
reset: true
})
srRight.reveal('.skills-box',{delay: 100})
srRight.reveal('.form-control',{delay: 100})
/* ----- CHANGE ACTIVE LINK ----- */
const sections = document.querySelectorAll('section[id]')
function scrollActive() {
const scrollY = window.scrollY;
sections.forEach(current =>{
const sectionHeight = current.offsetHeight,
sectionTop = current.offsetTop - 50,
sectionId = current.getAttribute('id')
if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.add('active-link')
} else {
document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.remove('active-link')
}
})
}
window.addEventListener('scroll', scrollActive)Final Output:
Conclusion:
Welcome to the comprehensive guide on creating your very own portfolio website using HTML, CSS, and JavaScript. In today's digital age, having a professional online portfolio is essential for showcasing your skills and work to potential clients, employers, or collaborators. In this guide, we will take you through the entire process, step by step, from the initial concept to the final launch.
Whether you are a web development novice looking to build your first portfolio or a seasoned developer seeking to enhance your online presence, this guide has something for everyone. We will cover everything you need to know, from choosing the right technologies to designing an eye-catching layout, adding interactive elements, and optimizing for peak performance.
So, let's embark on this exciting journey of creating a stunning portfolio website that will help you stand out in the digital world. Whether you're an artist, designer, developer, writer, or any other creative professional, your online portfolio is your digital business card, and we're here to help you make it impressive and effective. Let's get started!
Credit: Tilak Jain
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
