Portfolio Template

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

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

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.

Customizing the Template

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

• Cloning the repository
• Editing the Template
• Deploying the Site

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.

Contributions are warmly welcomed ❤️.