How to Build Portfolio Website And Host It on GitHub Pages?
Having an online portfolio is important for showcasing your skills and accomplishments. GitHub Pages provides a convenient and free platform for hosting your portfolio website. In this article, we will see how to build a Portfolio Website And Host It on GitHub Pages.
Table of Content
- Creating a Portfolio Website
- Uploading into a GitHub Repository
Creating a Portfolio Website
We will be using Simple HTML, CSS and JavaScript to create a beautiful portfolio website.
Portfolio Preview
How to Build Portfolio Website And Host It on GitHub Pages?
Approach
The below defined steps can be utilised to build and design a portfolio website:
- In the first step, we will create a folder with the project name and create the HTML, CSS, JavaScript files, Images folder and a separate file for the responsive CSS if required.
- Now, use the different HTML tags like section, header, nav, meta, title, head, div, input, img etc to structure the web page.
- Style the different components and the elements of HTML responsively to make the page attractive for every device using CSS.
- Make use of the media queries to define the responsive styles and to adjust the width of the containers.
- Use JavaScript to toggle the on click to the hamburger menu for small width devices to navigate through the page.
Example: The below example will explain you how to design and build a portfolio website using HTML, CSS, and JavaScript responsively for every device:
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity=
"sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<!-- Navbar header section -->
<header class="header">
<nav class="navbar">
<div class="logo">
<h2 class="logo-heading">Emrit Diyal</h2>
</div>
<div class="hamburger" id="hamburger">
<i class="fas fa-bars hamburger-icon"></i>
<i class="fas fa-times cross-icon"></i>
</div>
<div class="menu">
<ul class="menu-list">
<li class="menu-list-items">
<a class="links" href="#home">
Home
</a>
</li>
<li class="menu-list-items">
<a class="links" href="#portfolio">
Portfolio
</a>
</li>
<li class="menu-list-items">
<a class="links" href="#about">
About
</a>
</li>
<li class="menu-list-items">
<a class="links" href="#services">
Services
</a>
</li>
<li class="menu-list-items">
<a class="links" href="#contact">
Contact Me
</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Main hero banner -->
<section id="home" class="hero">
<div class="intro">
<div class="headings">
<h3 class="greet-heading">Hello, I'm</h3>
<h1 class="my-heading">Emrit Diyal</h1>
<h4 class="sub-heading">
A Software Engineer with 3 years of Experience.
</h4>
</div>
<div class="intro-buttons">
<button class="btn common-btn">Hire Me</button>
<button class="btn ghost-btn">Get Resume</button>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section class="portfolio" id="portfolio">
<div class="portfolio-heading">
<h1 class="my-heading text-center">Featured Portfolio</h1>
</div>
<div class="portfolio-content">
<div class="my-row">
<div class="my-col">
<div class="my-card port-card">
<div class="image">
<img src="./Images/designImage2.avif"
alt="Web Design Image">
</div>
<h3 class="greet-heading blue-text">Web Design</h3>
<p class="small-para blue-text">Designing</p>
</div>
</div>
<div class="my-col">
<div class="my-card port-card">
<div class="image">
<img src="./Images/webDevelopment2.avif"
alt="Web Development Image">
</div>
<h3 class="greet-heading blue-text">
Web Development
</h3>
<p class="small-para blue-text">Development</p>
</div>
</div>
<div class="my-col">
<div class="my-card port-card">
<div class="image">
<img src="./Images/SEOImage2.avif" alt="SEO Image">
</div>
<h3 class="greet-heading blue-text">SEO</h3>
<p class="small-para blue-text">Optimization</p>
</div>
</div>
</div>
<div class="my-row">
<div class="my-col">
<div class="my-card port-card">
<div class="image">
<img src="./Images/contentImage2.avif"
alt="Content Writting Image">
</div>
<h3 class="greet-heading blue-text">
Content Writing
</h3>
<p class="small-para blue-text">Writing</p>
</div>
</div>
<div class="my-col">
<div class="my-card port-card">
<div class="image">
<img src="./Images/wordpressImage2.avif"
alt="Wordpress Image">
</div>
<h3 class="greet-heading blue-text">
WordPress Dev
</h3>
<p class="small-para blue-text">
Content Management System
</p>
</div>
</div>
<div class="my-col">
<div class="my-card port-card">
<div class="image">
<img src="./Images/videoEditing2.avif"
alt="Video Editing Image">
</div>
<h3 class="greet-heading blue-text">
Video Editing
</h3>
<p class="small-para blue-text">Editing</p>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about">
<div class="about-text">
<h1 class="my-heading">About Me</h1>
<p class="lead-para">
w3wiki is a leading platform
that provides computer science
resources and coding challenges for
programmers and technology
enthusiasts, along with interview
and exam preparations for upcoming
aspirants. With a strong emphasis on
enhancing coding skills and knowledge,
it has become a trusted destination
for over 12 million plus registered
users worldwide. The platform offers
a vast collection of tutorials, practice
problems, interview tutorials, articles,
and courses, covering various domains
of computer science.
</p>
<p>
Our exceptional mentors hailing from top
colleges & organizations have the
ability to guide you on a journey from
the humble beginnings of coding to
the pinnacle of expertise. Under their
guidance watch your skills flourish
as we lay the foundation and help you
conquer the world of coding.
</p>
</div>
<div class="about-image">
<img src="./Images/heroImg2.avif" alt="About Image">
</div>
</section>
<!-- Services Section -->
<section class="services" id="services">
<div class="services-heading">
<h1 class="my-heading text-center">My Services</h1>
</div>
<div class="services-content">
<div class="my-row">
<div class="my-col">
<div class="my-card">
<div class="icon">
<i class="fas fa-paint-brush"></i>
</div>
<h3 class="greet-heading blue-text">Web Design</h3>
<p class="small-para">
Web development refers to the creating,
building, and maintaining
of websites. It includes aspects such as
web design, web publishing,
web programming, and database management.
It is the creation of an
application that works over the internet
i.e. websites.
</p>
<p class="small-para">
Web development refers to the creating,
building, and maintaining
of websites. It includes aspects such as
web design, web publishing,
web programming, and database management.
It is the creation of an
application that works over the internet
i.e. websites.
</p>
</div>
</div>
<div class="my-col">
<div class="my-card">
<div class="icon">
<i class="fa-solid fa-code"></i>
</div>
<h3 class="greet-heading blue-text">
Web Development
</h3>
<p class="small-para">
Web development refers to the creating,
building, and maintaining
of websites. It includes aspects such as
web design, web publishing,
web programming, and database management.
It is the creation of an
application that works over the internet
i.e. websites.
</p>
<p class="small-para">
Web development refers to the creating,
building, and maintaining
of websites. It includes aspects such as
web design, web publishing,
web programming, and database management.
It is the creation of an
application that works over the internet
i.e. websites.
</p>
</div>
</div>
<div class="my-col">
<div class="my-card">
<div class="icon">
<i class="fas fa-chart-line"></i>
</div>
<h3 class="greet-heading blue-text">SEO</h3>
<p class="small-para">
Web development refers to the creating,
building, and maintaining
of websites. It includes aspects such as
web design, web publishing,
web programming, and database management.
It is the creation of an
application that works over the internet
i.e. websites.
</p>
<p class="small-para">
Web development refers to the creating,
building, and maintaining
of websites. It includes aspects such as
web design, web publishing,
web programming, and database management.
It is the creation of an
application that works over the internet
i.e. websites.
</p>
</div>
</div>
</div>
<div class="my-row">
<div class="my-col">
<div class="my-card">
<div class="icon">
<i class="fas fa-quote-left"></i>
</div>
<h3 class="greet-heading blue-text">
Content Writting
</h3>
<p class="small-para">
Web development refers to the creating,
building, and maintaining of websites.
It includes aspects such as web design,
web publishing, web programming, and
database management. It is the creation
of an application that works over the
internet i.e. websites.
</p>
<p class="small-para">
Web development refers to the creating,
building, and maintaining of websites.
It includes aspects such as web design,
web publishing, web programming, and
database management. It is the creation of an
application that works over the internet i.e.
websites.
</p>
</div>
</div>
<div class="my-col">
<div class="my-card">
<div class="icon">
<i class="fab fa-wordpress-simple"></i>
</div>
<h3 class="greet-heading blue-text">
WordPress Dev
</h3>
<p class="small-para">
Web development refers to the creating,
building, and maintaining of websites.
It includes aspects such as web design,
web publishing, web programming, and
database management. It is the creation
of an application that works over the
internet i.e. websites.
</p>
<p class="small-para">
Web development refers to the creating,
building, and maintaining
of websites. It includes aspects such as
web design, web publishing,
web programming, and database management.
It is the creation of an
application that works over the internet
i.e. websites.
</p>
</div>
</div>
<div class="my-col">
<div class="my-card">
<div class="icon">
<i class="fas fa-video"></i>
</div>
<h3 class="greet-heading blue-text">
Video Editing
</h3>
<p class="small-para">
Web development refers to the creating,
building, and maintaining
of websites. It includes aspects such as
web design, web publishing,
web programming, and database management.
It is the creation of an
application that works over the internet
i.e. websites.
</p>
<p class="small-para">
Web development refers to the creating,
building, and maintaining
of websites. It includes aspects such as
web design, web publishing,
web programming, and database management.
It is the creation of an
application that works over the internet
i.e. websites.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Contact me section -->
<section class="contact" id="contact">
<div class="contact-heading">
<h1 class="my-heading text-center">Contact Me</h1>
</div>
<div class="contact-content">
<div class="contact-form-container">
<h1 class="greet-heading">Get In Touch</h1>
<form class="contact-form">
<input class="form-controls" type="text"
placeholder="Your Name">
<input class="form-controls" type="text"
placeholder="Your Email">
<input class="form-controls" type="text"
placeholder="Your Phone">
<textarea class="form-controls"
placeholder="Write your message"
name="message" id="" cols="30"
rows="10">
</textarea>
<input class="form-btn btn common-btn"
type="submit" value="Send Message">
</form>
</div>
<div class="contact-details">
<h1 class="greet-heading">My Contact Details</h1>
<div class="details">
<h5 class="contact-heading">EMAIL</h5>
<p class="contact-text">example@gmail.com</p>
</div>
<div class="details">
<h5 class="contact-heading">PHONE</h5>
<p class="contact-text">+91 0123456789</p>
</div>
<div class="details">
<h5 class="contact-heading">FAX</h5>
<p class="contact-text">+91 0123456789</p>
</div>
<div class="details">
<h5 class="contact-heading">ADDRESS</h5>
<p class="contact-text">San Francisco, CA</p>
<p>4th Floor8 Lower</p>
<p>San Francisco street, M1 50F</p>
</div>
</div>
</div>
</section>
<!-- Footer section -->
<footer class="footer">
<div class="footer-content text-center">
<h4>
Copyright © 2023 All rights reserved |
This portfolio website template is created
by w3wiki.
</h4>
<div class="social-links">
<div class="footer-menu">
<ul class="footer-menu-list">
<li class="footer-list-items">
<a class="footer-links" href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="footer-list-items">
<a class="footer-links" href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="footer-list-items">
<a class="footer-links" href="#">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="footer-list-items">
<a class="footer-links" href="#">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js"
integrity=
"sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script src="script.js"></script>
</body>
</html>
/*index.css*/
/* Styles defined for the desktop or the bigger screen devices*/
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* Header Navbar Styles */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
width: 100%;
background-image: linear-gradient(90deg, #74D7BB, #53C8B6, #35A99C);
background-color: transparent;
}
.logo {
padding: 0 5rem;
}
.logo .logo-heading {
color: #fff;
}
.menu {
padding: 0 5rem;
}
.hamburger {
display: none;
color: #fff;
font-size: 25px;
}
.cross-icon {
display: none;
}
.menu .menu-list {
display: flex;
list-style: none;
}
.menu-list .menu-list-items {
padding: 0.5rem 1rem;
}
@media screen and (min-width: 856px) and (max-width: 1024px) {
.menu-list .menu-list-items {
padding: 0.5rem 0.3rem;
}
}
/* Main Hero Section Styles */
.hero {
background-image: url('./Images/heroImg3.avif');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: start;
margin: 4.8rem 0;
}
.hero .intro {
text-align: center;
margin: 0 5rem;
}
.hero .intro-buttons {
margin: 2rem 0;
display: flex;
align-items: center;
justify-content: space-evenly;
}
/* About section styles */
.about {
display: flex;
align-items: center;
background-image: linear-gradient(45deg, #363D73, #2794B3);
justify-content: space-between;
width: 100%;
}
.about .about-text {
width: 450px;
color: #fff;
padding: 5rem 1rem 5rem 5rem;
}
.about .about-image img {
height: 400px;
width: 450px;
padding: 5rem 5rem 5rem 1rem;
}
/* Portfolio section styles */
.portfolio {
margin: 4.8rem 0;
padding: 0 5rem;
}
.port-card {
padding: 0 !important;
background: none !important;
border: 2px solid #000;
}
.port-card .image {
width: 100%;
}
.port-card .image img {
height: 200px;
width: 100%;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
/* Services section styles */
.services {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 4.8rem 0;
padding: 0 5rem;
}
.my-row {
display: flex;
align-items: center;
justify-content: space-between;
margin: 2rem 0;
}
.my-row .my-col {
text-align: center;
width: 30%;
}
.my-card {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 20px;
background-image: linear-gradient(#74D7BB, #53C8B6, #35A99C);
padding: 1rem;
}
.icon {
height: 100px;
width: 100px;
border-radius: 50%;
background-color: #363D73;
display: flex;
align-items: center;
justify-content: center;
}
.icon svg {
font-size: 30px;
color: #fff;
}
/* Contact section styles */
.contact {
padding: 0 5rem;
}
.contact-content {
display: flex;
margin: 3rem 0;
justify-content: space-between;
}
.contact-form-container {
width: 50%;
}
.contact-form {
display: flex;
flex-direction: column;
}
.contact-form .form-controls {
width: 80%;
padding: 10px 0;
margin: 1.67rem 0;
}
.contact-form .form-btn {
width: 83%;
}
.contact-details {
width: 50%;
}
/* Footer Styles */
.footer {
background-color: #000;
color: #fff;
padding: 2rem;
}
.footer-list-items {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
margin: 1rem 1rem 0 1rem;
border-radius: 50%;
background-color: #53C8B6;
}
.footer-links {
font-size: 24px;
color: #fff;
text-decoration: none;
}
.social-links {
display: flex;
align-items: center;
justify-content: center;
}
.footer-menu {
padding: 0 5rem;
}
.footer-menu .footer-menu-list {
display: flex;
list-style: none;
}
/* utility classes */
.greet-heading {
font-size: 1.3rem;
font-weight: lighter;
margin: 0;
letter-spacing: 1px;
}
.my-heading {
font-size: 2.5rem;
margin: 0;
}
.sub-heading {
margin: 0;
font-size: 0.8rem;
color: #ccc;
font-weight: lighter;
}
.links:hover {
border-bottom: 2px solid #fff;
}
.links {
border-bottom: 2px solid transparent;
transition: all 0.25s;
padding: 5px;
text-decoration: none;
color: #fff;
}
.btn {
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
letter-spacing: 1px;
border: none;
}
.common-btn {
background-color: #35A99C;
color: #fff;
border: 2px solid #35A99C;
transition: all 0.25s;
}
.common-btn:hover {
background-color: #fff;
color: #35A99C;
border: 2px solid #35A99C;
outline: none;
}
.ghost-btn {
background-color: #fff;
color: #35A99C;
border: 2px solid #35A99C;
outline: none;
}
.ghost-btn:hover {
background-color: #35A99C;
color: #fff;
transition: all 0.25s;
border: 2px solid #35A99C;
}
.heading-span {
font-weight: bolder;
}
.text-center {
text-align: center;
}
.small-para {
font-size: 14px;
color: #fff;
}
.white-text {
color: #fff;
}
.blue-text {
color: #363D73;
}
/*index.css*/
/* Responsive CSS file styles defined for smaller width devices */
/* CSS for tablet devices */
@media screen and (min-width: 576px) and (max-width: 820px) {
.logo {
padding: 0 3rem;
}
.hamburger {
display: block;
padding: 0 3rem;
}
.menu {
position: absolute;
right: 0;
padding: 0 3rem;
top: 75px;
background-image: linear-gradient(180deg, #74D7BB, #53C8B6, #35A99C);
display: none;
transition: all 0.25s;
}
.menu .menu-list {
flex-direction: column;
}
.portfolio {
padding: 0;
}
.about {
flex-direction: column;
}
.about .about-text {
padding: 2rem;
}
.about .about-image img {
padding: 2rem;
}
.services {
padding: 0;
}
.my-row {
gap: 10px;
}
.my-row .my-col {
text-align: center;
width: 35%;
}
}
/* CSS for mobile devices */
@media screen and (min-width: 280px) and (max-width: 576px) {
.hero {
justify-content: center;
color: #fff;
background-image: radial-gradient(circle, rgb(15 14 14 / 30%),
rgb(102 96 96 / 40%), rgb(163 160 160 / 16%)), url('./Images/heroImg3.avif')
}
.sub-heading {
color: #fff9f9cc;
}
.hero .intro-buttons {
gap: 20px;
}
.btn {
padding: 10px 30px;
}
.logo {
padding: 0 2rem;
}
.menu {
position: absolute;
right: 0;
padding: 0 2rem;
top: 75px;
background-image: linear-gradient(180deg, #35A99C, #53C8B6, #74D7BB);
display: none;
transition: all 0.25s;
}
.menu .menu-list {
flex-direction: column;
}
.hamburger {
display: block;
padding: 0 2rem;
}
.portfolio {
padding: 0;
}
.about {
flex-direction: column;
}
.about .about-text {
width: 90%;
padding: 1rem;
}
.about .about-image img {
width: 90%;
padding: 1rem;
}
.services {
padding: 0;
}
.my-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
margin: 2rem 0;
gap: 1rem;
}
.my-row .my-col {
text-align: center;
width: 100%;
}
.contact {
padding: 0;
}
.contact-content {
flex-direction: column;
align-items: center;
gap: 2rem;
}
.contact-form-container {
width: 80%;
}
.contact-form .form-controls {
width: 100%;
}
.contact-form .form-btn {
width: 100%;
}
.contact-details {
width: 80%;
}
.footer-menu {
padding: 0 2rem;
}
.footer-list-items {
margin: 0;
}
}
//index.js
const hamburger = document.getElementById('hamburger');
const menu = document.querySelector('.menu');
hamburger.addEventListener('click', function () {
const hamIcon = this.querySelector('.hamburger-icon');
const crossIcon = this.querySelector('.cross-icon');
if (hamIcon.style.display === "none") {
hamIcon.style.display = "inline-block"
menu.style.display = "none"
crossIcon.style.display = "none"
}
else {
crossIcon.style.display = "inline-block"
hamIcon.style.display = "none"
menu.style.display = "block"
}
});
Output
Simple Portfolio website
Uploading into a GitHub Repository
Finally your files now needs to be pushed into a new GitHub repository and has to be hosted using GitHub Pages. To push your portfolio website’s necessary files in GitHub follow the given steps:
- Login on https://github.com/ and click on New option in left side pane right next to repositories.
Click on New option
- Name the repository as ‘your-username.github.io’. (For example, if your username is chandrikadeb7 then name the repository as chandrikadeb7.github.io).
- Click on Create Repository.
Enter the necessary details and click on Create Repository
You can upload all the necessary files from your computer in two ways:
1. Using in-browser GitHub Website Drag/Upload Option
- Click on Upload Files option from your newly created repository.
- Select the option Choose your files to upload them from your local computer.
- Or just Drag and Drop the folders on this screen.
Upload the necessary files and click Commit Changes
2. Using Git Version Control
- You can push the files to your repository using Git Version Control System.
- See this guide to install Git https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
- Change the current working directory to your local project.
- Initialize the local directory as a Git repository.
$ git init
- Add the files in your new local repository. This stages them for the first commit.
$ git add .
Adds the files in the local repository and stages them for commit. To unstage a file, use ‘git reset HEAD YOUR-FILE’.
- Commit the files that you’ve staged in your local repository.
$ git commit -m "First commit"
Commits the tracked changes and prepares them to be pushed to a remote repository. To remove this commit and modify the file, use ‘git reset –soft HEAD~1’ and commit and add the file again.
- At the top of your GitHub repository’s Quick Setup page, click Clipboard icon to copy the remote repository URL.
Click the Clipboard icon to copy the URL
- In Terminal, add the URL for the remote repository where your local repository will be pushed.
$ git remote add origin remote <repository URL>
# Sets the new remote
$ git remote -v
# Verifies the new remote URL
- Push the changes in your local repository to GitHub.
$ git push -u origin master
# Pushes the changes in your local repository up to the remote repository you specified as the origin
Hosting Using GitHub Pages
- Now go to Settings tab which is present right above and scroll down to look for GitHub Pages option.
- Now select master-branch in Source drop-down and a notification will be visible stating that you are ready to publish your site in a minute or two.
- Click on that notification hyperlink and there you go.. Your portfolio is hosted on GitHub pages for free!
Your personal portfolio website is published at https://<your-github-username>.github.io
Contact Us