ukane-philemon / portfolio-html

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

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:

• Communitypro
• Dribble Inspiration
• Franklin U.O. Ohaegbulam
• Open Peeps Illustration by Pablo Stanley

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 ✨

This portfolio uses modern HTML5 semantic tags like article, header, footer and more for better accessibility and improve SEO, you can read more about that on Jemima's article: How to improve your SEO ranking. Also learn about metatags and how to generate them for SEO optimization here.

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:[email protected]" class="btn btn-secondary">Connect With Me</a> OR
• Phone: <a href="tel:[phone]" 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:[email protected]">[email protected]</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.