Skip to content

An open source portfolio template for anyone to use for free. Give it a star ⭐ if you find it useful.

License

Notifications You must be signed in to change notification settings

devsyedmohsin/portfolio-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Portfolio Template

An open-source, user-friendly, responsive, and accessible portfolio template for developers 🚀⚡

Give a star ⭐ if you find it useful. Visit site →

Portfolio Template Gif

Useful resources

Make sure to subscribe to our youtube channel channel where we cover creating template like this from scratch using HTML, CSS and JavaScript also don't forget to star 🌟 the css-tips-tricks that has already reached 180+ stars.

Table of Contents

  1. Features
  2. Customization
  3. Deploying the Site

Features

  • Fully Mobile responsive.
  • Supports light/dark theme.
  • Built with a11y in mind.
  • Modern design.
  • Multiple sections.
  • Sleek animations.
  • Fast loads.
  • SEO-optimized.

lighthouse report with 100% scores

Customizing the Template

Please follow these three steps to make an awe-inspiring portfolio of your own.

Cloning the Repository.

If you have Git installed on your computer, you can clone or download the portfolio template by running the following command in your terminal.

git clone https://github.com/devsyedmohsin/portfolio-template

Alternatively, click on this link to download it.

Editing the Template

After you get the template please open it in the code editor of your choice. You will find a file named index.html Open it and follow the guidance inscribed within the comments to customize the template.

For example:

<!-- Update with your name -->
<title>Syed Mohsin's Portfolio</title>
<div class="header-textbox">
  <!-- Replace with your name & job title -->
  <h1 class="h1">Hi, I'm Syed Mohsin Frontend Web Developer</h1>

  <!-- Add a small introductory paragraph about yourself -->
  <p class="header-text">A frontend software engineer and interface designer</p>
</div>

Note: While editing the template, ensure you have updated all href, img src, and alt attributes of links and images.

Deploying the Site

Watch this youtube video to learn how to deploy your version of the portfolio template to the web.

Deploy your version of the Portfolio template using Netlify

Contributions are warmly welcomed ❤️.