Skip to content

🌍 Open source portfolio template built with plain Html, CSS and JavaScript for developers to create their portfolio website

License

Notifications You must be signed in to change notification settings

CommunityPro/portfolio-html

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

96 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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

β”œβ”€β”€ template
β”‚   β”œβ”€β”€ 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 /template/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 preffered link source.

  • The Last navigation link is the highlightd yellow button on the template. Which is styled with the btn & btn-primary classes.

Styling

We are using plain CSS for this project and you can find that in the template/css/ folder

  • Style.css is the main file
  • utilities.css is where reusable styling will be.

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.