Want a Free Hosted Portfolio Website on Your Resume?

Most people spend weeks trying to figure out how to build a portfolio website. In one workshop, we skipped all of that and went live in 30 minutes for free! Here’s the exact process we followed so you can do the same.

Recruiters go through hundreds — sometimes thousands — of resumes every week. Many of them look remarkably similar, with the same sections, layouts, and project descriptions. Unless you have something that helps you stand out, something that tells your story and sparks curiosity, your chances of getting noticed become much smaller.

A portfolio website can help solve that problem.

Unlike a resume, a portfolio gives you the freedom to showcase your projects, achievements, skills, and personality in a way that feels uniquely yours. It becomes a place where recruiters can learn more about you beyond a single page of bullet points.

At this point, you might be thinking:

Creating and hosting a website sounds expensive, time-consuming, and complicated.

The good news is that it doesn’t have to be.

You don’t need to learn a web framework, pay for hosting, or spend days designing a website from scratch. In a recent workshop I conducted, students were able to customize and deploy their own portfolio websites in about 30 minutes — completely free.

Here’s one of the portfolio websites created using the template we’ll be using:

In this article, I’ll walk you through the exact process we followed, so you can create and publish your own portfolio website and add it to your resume today.

Prerequisites

Before we begin, make sure you have the following:

• A GitHub account
• Git installed on your computer
• A text editor (such as VS Code)
• A profile photo (optional but recommended)
• Basic information about yourself, such as your skills, projects, education, and social media links

Don’t worry if you’re completely new to GitHub. We’ll only be using a few simple Git commands throughout this guide.

Tools We’ll Be Using

1. GitHub

We’ll use GitHub to store our portfolio code and host the website using GitHub Pages.

If you don’t already have a GitHub account, create one here:

GitHub

2. Git

Git helps us download the portfolio template, track changes, and upload our customized website back to GitHub.

If Git is not installed on your computer, follow the official installation guide:

Git Installation Guide

After installation, verify it by running:

git --version

What You’ll Have at the End

By the end of this guide, you’ll have:

✅ A personalized portfolio website

✅ A public URL you can share with recruiters

✅ Free hosting through GitHub Pages

✅ A portfolio that can be continuously updated as your career grows

So Lets start…

Step 1: Fork the Repository

The portfolio template is hosted on GitHub. To customize it without affecting the original project, you’ll first need your own copy.

Go to https://github.com/MerinRose123/portfolio

Click the Fork button in the top-right corner of the repository page.

This creates a copy of the project under your GitHub account, giving you complete control over your version of the website.

Step 2: Clone the Repository

Now that you have your own copy, download it to your computer.

Open a terminal and run:

git clone https://github.com/YOUR_USERNAME/portfolio.git
cd portfolio

Replace YOUR_USERNAME with your actual GitHub username.

This will create a local copy of the project that you can customize.

Step 3: Customize Your Portfolio

This is where the magic happens.

Unlike many website templates that require editing multiple files, this portfolio only requires changes in a single file:

config.js

Open the file in Visual Studio Code or any text editor.

You’ll find a configuration object that looks something like this:

const CONFIG = {
  name: "Your Name",
  title: "Your Job Title",
  summary: "A short professional summary about yourself..."
};

Replace the sample values with your own information.

You can customize:

• Name
• Professional title
• Summary
• Skills
• Projects
• Education
• Work experience
• Certifications
• Achievements
• Hobbies
• Social media links

One feature I particularly like is that optional sections are automatically hidden.

For example, if you don’t have certifications yet, simply leave the certifications array empty. The website will automatically remove that section from both the page and navigation menu.

This keeps the portfolio clean without requiring any coding.

Step 4: Add Your Profile Picture

A portfolio feels much more personal when it includes a professional photo.

Replace:

profile.png

with your own image.

For best results:

• Use a square image
• Ensure your face is clearly visible
• Choose a professional-looking photo

If you use a different filename, remember to update the profileImage field inside config.js.

Step 5: Preview Your Changes

Before publishing, let’s make sure everything looks correct.

Simply open:

index.html

in your browser.

Because this project uses plain HTML, CSS, and JavaScript, you don’t need to start a server or run any build commands.

Review your information, test your links, and make any final changes.

Step 6: Push Your Changes to GitHub

Once you’re satisfied with the content, save your work and upload it back to GitHub.

Run:

git add .
git commit -m "Customized portfolio website"
git push origin main

This updates the repository with your personalized portfolio.

Step 7: Publish Using GitHub Pages

Now it’s time to make your portfolio accessible to the world.

Navigate to your repository on GitHub and open:

Settings → Pages

Then configure:

• Source: Deploy from a branch
• Branch: main
• Folder: / (root)

Click Save.

GitHub will automatically build and deploy your website.

Within a couple of minutes, your portfolio will be available at:

https://YOUR_USERNAME.github.io/portfolio/

Congratulations! 🎉

You now have a live portfolio website that can be shared with recruiters, hiring managers, and potential collaborators.

Final Thoughts

A portfolio website won’t get you a job on its own, but it can help you stand out and give recruiters a better understanding of your work and achievements.

If you’re targeting software engineering roles, remember that a strong portfolio should be complemented by:

• Data Structures & Algorithms (DSA)
• LeetCode and coding practice
• Solid projects
• Computer Science fundamentals
• Interview preparation

Think of your portfolio as the place where you showcase the results of all that hard work.

Now it’s your turn — launch your portfolio, keep it updated, and continue building the skills that will help you succeed in your career. 🚀