Portfolio Template - HTML
Build your portfolio using this super easy template. Free to use if you are a member of the community or a contributor to this project. If not, read our requirements if you plan on using this template for your portfolio.
This project is made from the tireless efforts of the community, so feel free to support our work by contributing, staring ✨ the project or sponsoring us. 🙏🏽
Design credit:
How to Contribute
Are you contributing to this project, please ensure all pull requests and contributions comply with our guidelines.
Before making any changes, ensure you have raised an issue here, unless it is a minimal change like Typo error then you can go right ahead.
Folder Structure
├── src
│ ├── index.html
│ ├── css
│ │ ├── style.css
│ │ ├── utilities.css
│ ├── assets
│ │ ├── favicon
│ │ │ ├── android-chrome-192x192
│ │ │ ├── android-chrome-512x512
│ │ │ ├── apple-touch-icon
│ │ │ ├── favicon-16x16
│ │ │ ├── favicon-32x32
│ │ │ ├── favicon.ico
│ │ │ ├── site.webmanifest
│ │ ├── profile-image
│ │ ├── logo
│ ├── js
│ │ ├── script.js
├── .github
│ ├── ISSUE_TEMPLATE
│ │ ├── bug.md
│ │ ├── feature.md
│ ├── Pull_request_template.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── REQUIREMENTS.md
├── package.json
└── .gitignore
✨ How to Customize this Template ✨
The root page of this project is located at /docs/index.html
This is the default page you see when you visit the site.
Want to customize this template to suit your style, here are a few things you can change:
1. Logo
The logo of this template is controlled by this line in the index.html
markup, replace the ./assets/logo.png
with your logo link or replace the current logo image without yours and rename it to logo.png
<!-- Logo -->
<h1 id="logo">
<a href="#"><img src="./assets/logo.png" alt="Your Logo"></a>
</h1>
2. Navigation Links
<ul class="nav-menu">
<li><a class="nav-link" href="#">PROJECTS</a></li>
<li><a class="nav-link" href="#">CONTACT</a></li>
<li><a class="nav-link" href="#">BlOG</a></li>
<li><a class="nav-link btn btn-primary" href="#">RESUME <i class="fas fa-arrow-right"></i></a>
</li>
</ul>
Replace the #
symbol with your respective link. Delete any nav-link
that is not being used or edit the name with your own preferred link source.
- The last navigation link is the highlighted yellow button on the template. Which is styled with the
btn
&btn-primary
classes.
3. Profile Image
Replace the icon or user profile with your profile image. Image can be found in the /assets/profile-image.png
.
<img class="profile-image" src="./assets/profile-image.png" alt="" />
You can add the image locally by replacing it with the /assets/profile-image.png
.
Or replace the src
link in the HTML file with your preferred image. I recommmend you copy your GitHub profile image link, so the image changes anytime you update it on GitHub.
4. Name
Edit the name on the welcome message with your own name. This line of text can be found in the /docs/index.html
file.
Replace Franklin
with your own name.
<h1>Hi I'm Franklin</h1>
5. Job Title
Summarize what you do in five words and add it into the <h2></h2>
line. Add the first two in the first <h2>
element and add the remaining four on the next <h2>
<h2>Building digital</h2>
<h2>products, brands, and experience.</h2>
6. Job Description
Update the job description with your information. 20 words recommended.
<p>
A Frontend Developer and Visual Designer with experience in web
design, brand identity and product design.
</p>
7. Connect With Me
Replace the #
on the connect with me button with a link. You can choose what link you want your visitors to go when they click this button. Social links, email address or phone number, it's completely up to you.
<a href="#" class="btn btn-secondary">Connect With Me</a>
- Email:
<a href="mailto:user@gmail.com" class="btn btn-secondary">Connect With Me</a>
OR - Phone:
<a href="tel:+23400000000" class="btn btn-secondary">Connect With Me</a>
8. Project
This section showcases your projects using screenshots. It has 3 columns and 2 rows by default but you can add more columns according to your use case.
The .project
controls the number of columns and rows of the project cards.
<div href="" class="card">
<div class="project-info">
<div class="project-bio">
<h3>Project One</h3>
<p>React, Redux, SASS</p>
</div>
<div class="project-link">
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fas fa-globe"></i></a>
</div>
</div>
</div>
To customize the cards, here are a few things you can change:
Project Title
<h3>Project One</h3>
This is controlled by the <h3></h3>
element. Edit the text and add your preferred project name.
Project Stack
This is where you display the tools/technologies used in building the project. Edit the <p></p>
element with the specific tools or delete the line completely.
<p>React, Redux, SASS</p>
Project Link
The project links are the icons on the top right of the project cards. One is the github link and the othe is the live link. You can paste the respective links into the empty href
attributes. The icons are added using an icon library called fontawesome so changing this icon is super easy.
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fas fa-globe"></i></a>
Project Styling
The layout of the project cards is controlled by the .project
in the style.css
file. By using CSS grid-template-columns
, the cards are outlined on three columns on desktop mode, two columns on tablet mode and one column on mobile view.
.project {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(250px, auto);
grid-gap: 0.9rem;
}
Social Links
The footer links contain social icons that you can link to your specific social channels. By default the icons available are: Facebook
, Twitter
, LinkedIn
, GitHub
, Hashnode
and the icons image are added locally to the assets folder, so you can add your own custom icon and link it.
<a href="mailto:communitypro47@gmail.com">communitypro47@gmail.com</a>
<div class="social">
<a href="#"><img src="./assets/facebook-icon.svg" alt="Facebook"></a>
<a href="#"><img src="./assets/twitter-icon.svg" alt="Twitter"></a>
<a href="#"><img src="./assets/linkedin-icon.svg" alt="Linkedin"></a>
<a href="#"><img src="./assets/github-icon.svg" alt="GitHub"></a>
<a href="#"><img src="./assets/hashnode-icon.svg" alt="Hashnode"></a>
</div>
META Tags
Use Metatags.io to generate meta tags for sharing your portfolio and for SEO benefits.
Styling
We are using plain CSS
for this project and you can find that in the docs/css/
folder
- style.css is the main file
- utilities.css is where reusable styling will be.
Examples
Here are examples of portfolios customized using this template, you can draw inspiration from this list or add yours.
Example 1 |
Example 2 |
Sponsor
If you like this project, kindly star ⭐ and share this project. It means the world to us. You can also offer support by donating to keep this project going.