Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
🌍 Open source portfolio template built with plain Html, CSS and JavaScript for developers to create their portfolio website
License
CommunityPro/portfolio-html
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
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. 🙏🏽
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.
├── 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:
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
h1 id pl-s">logo"> a href pl-s">#">img src pl-s">./assets/logo.png" alt pl-s">Your Logo">a> h1>
ul class pl-s">nav-menu"> li>a class pl-s">nav-link" href pl-s">#">PROJECTSa>li> li>a class pl-s">nav-link" href pl-s">#">CONTACTa>li> li>a class pl-s">nav-link" href pl-s">#">BlOGa>li> li>a class pl-s">nav-link btn btn-primary" href pl-s">#">RESUME i class pl-s">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.
Replace the icon or user profile with your profile image. Image can be found in the /assets/profile-image.png .
img class pl-s">profile-image" src pl-s">./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.
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.
Summarize what you do in five words and add it into the line. Add the first two in the first element and add the remaining four on the next
h2>Building digitalh2> h2>products, brands, and experience.h2> 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> 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 pl-s">#" class pl-s">btn btn-secondary">Connect With Mea>
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 pl-s">card"> div class pl-s">project-info"> div class pl-s">project-bio"> h3>Project Oneh3> p>React, Redux, SASSp> div> div class pl-s">project-link"> a href pl-s">#">i class pl-s">fab fa-github">i>a> a href pl-s">#">i class pl-s">fas fa-globe">i>a> div> div> div>
To customize the cards, here are a few things you can change:
This is controlled by the element. Edit the text and add your preferred project name.
This is where you display the tools/technologies used in building the project. Edit the element with the specific tools or delete the line completely.
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 pl-s">#">i class pl-s">fab fa-github">i>a> a href pl-s">#">i class pl-s">fas fa-globe">i>a>
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; >
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 pl-s">mailto:communitypro47@gmail.com">communitypro47@gmail.coma> div class pl-s">social"> a href pl-s">#">img src pl-s">./assets/facebook-icon.svg" alt pl-s">Facebook">a> a href pl-s">#">img src pl-s">./assets/twitter-icon.svg" alt pl-s">Twitter">a> a href pl-s">#">img src pl-s">./assets/linkedin-icon.svg" alt pl-s">Linkedin">a> a href pl-s">#">img src pl-s">./assets/github-icon.svg" alt pl-s">GitHub">a> a href pl-s">#">img src pl-s">./assets/hashnode-icon.svg" alt pl-s">Hashnode">a> div>
Use Metatags.io to generate meta tags for sharing your portfolio and for SEO benefits.
We are using plain CSS for this project and you can find that in the docs/css/ folder
Here are examples of portfolios customized using this template, you can draw inspiration from this list or add yours.
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.
About
🌍 Open source portfolio template built with plain Html, CSS and JavaScript for developers to create their portfolio website