Guide · Open source

How to use simplefolio: clone, edit and run a portfolio template

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Simplefolio is a free, one-page portfolio website template for developers, built with Bootstrap v4.3, custom SCSS and the Parcel bundler. This guide shows you how to clone it, run it on your own machine and replace the sample content with your name, photo, projects, resume and contact links. You will need comfort with HTML and a few terminal commands.

Simplefoliocobiwave/simplefolio · ★ 14.2k · MIT Install options & downloads

Quick start

1Check prerequisites. Install Git and Node.js. The README asks for Node.js 16.4.2 or higher and npm 7.18.1 or higher, or Yarn 1.22.10 or higher.
2Clone the repository. Run git clone https://github.com/cobiwave/simplefolio, then cd into the simplefolio folder.
3Install dependencies. Run npm install (after the README's npm audit fix and transformer-sass steps), or use yarn with package-lock.json removed.
4Start the development server. Run npm start, then open http://localhost:1234/ in your browser.
5Edit src/index.html. Replace the hero title, about text, projects, contact and footer links with your own content.
6Add your files. Place your profile picture, resume PDF and project images in /src/assets/ and reference them by path.

What you need before you start

Simplefolio is set up by cloning a Git repository and building it with Node.js. The README lists the versions it expects.

Yarn can be used instead of NPM if you prefer it.

Git (the README points to git-scm.com; it lists git 2.30.1 or higher)
Node.js 16.4.2 or higher, which comes with NPM
npm 7.18.1 or higher, or Yarn 1.22.10 or higher

node@v16.4.2 or higher
npm@7.18.1 or higher
git@2.30.1 or higher

How do you install simplefolio locally?

Open a terminal, clone the repository, move into the folder and remove the original origin so the copy is no longer linked to the upstream repository. The README includes this last step.

Then install the dependencies. The README gives an NPM route and a Yarn route. With Yarn, delete the package-lock.json file before running the Yarn commands.

Run the clone and cd commands, then remove the origin remote
With NPM, run npm audit fix, install the @parcel/transformer-sass package, then run npm install
With Yarn, delete package-lock.json and run yarn
If NPM install fails, the README suggests sudo npm install --unsafe-perm=true --allow-root

# Clone the repository
$ git clone https://github.com/cobiwave/simplefolio

# Move into the repository
$ cd simplefolio

# Remove the current origin repository
$ git remote remove origin

# 2022 Update - Fix Dependencies
$ npm audit fix
$ npm i @parcel/transformer-sass

# Install dependencies
$ npm install

# Start the development server
$ npm start

How do you preview the portfolio on your computer?

After the development server starts, open http://localhost:1234/ in your browser. The README says the page should look like its example screenshot. Keep the terminal running while you edit files so you can see changes.

Local preview address: http://localhost:1234/
Yarn users start the server with yarn start

# Start the development server
$ npm start

# or, with Yarn
$ yarn start

How do you add your name and hero text?

Your main content lives in /src/index.html. The file is divided into five sections: Hero, About, Projects, Contact and Footer. Start with the hero section.

In the hero section, replace the text in the element with class hero-title with your own title, and change the label in the element with class hero-cta to your button text.

Edit .hero-title for your portfolio title
Edit .hero-cta for your button label

<h1 class="hero-title load-hidden">
  Hi, my name is <span class="text-color-main">Your Name</span>
  <br />
  I'm the Unknown Developer.
</h1>
<p class="hero-cta load-hidden">
  <a rel="noreferrer" class="cta-btn cta-btn--hero" href="#about">
    Know more
  </a>
</p>

How do you add a photo, resume and about text?

In the About section, set the src of the img tag to your profile picture path. The README says the picture must be inside /src/assets/. Fill the paragraphs with class about-wrapper__info-text. The README recommends two paragraphs and allows a maximum of three.

For the resume, set the href of the last link to your CV PDF. The file must also be in /src/assets/.

Profile image: src="assets/profile.jpg" in the example, stored in /src/assets/
Resume: href="assets/resume.pdf" in the example, stored in /src/assets/
Use two paragraphs for about text, three at most

<img
  alt="Profile Image"
  class="img-fluid rounded shadow-lg"
  src="assets/profile.jpg"
/>
<p class="about-wrapper__info-text">
  This is where you can describe about yourself.
</p>
<a class="cta-btn cta-btn--resume" href="assets/resume.pdf">View Resume</a>

How do you add projects and contact links?

Each project is a row in the Projects section. Put the project title in the h3 with class project-wrapper__text-title and the description in the paragraph. The first link is the live project URL and the second is the source code URL. The project image should be in /src/assets/, and the README recommends a size of 1366 x 767 pixels.

In the Contact section, set the mailto href on the link to your email address and write your call to action in the paragraph with class contact-wrapper__text. In the footer, put your social media URLs in the href of each link. The README says you can add or delete links, and it links to Font Awesome 4.7.0 icons for other networks.

Project title: h3.project-wrapper__text-title
Project links: first a tag for the live site, second for the repository
Project image: 1366 x 767 recommended, stored in /src/assets/
Contact: href="mailto:your@email" on the contact link
Footer: one a tag per social account

Can you restyle simplefolio?

The README describes Simplefolio as styled with Bootstrap v4.3 plus custom SCSS, and lists it as a good starting point for restyling with SCSS. It does not document the stylesheet file layout, so check the repository's source folders for the exact SCSS files before changing colours or spacing.

Styling uses Bootstrap v4.3 and custom SCSS
The README does not document a theming system; edit the SCSS directly

What people use it for

Building a one-page developer portfolio to share with employers
Giving a student or job seeker a simple personal site with a resume download
Starting from a clean template and restyling it with custom SCSS

Frequently asked questions

Is simplefolio free to use?

The repository is licensed under MIT, as shown on its GitHub license badge in the README. Check the LICENSE.md file in the repository for the full terms.

What do I need to install simplefolio?

You need Git, Node.js 16.4.2 or higher with NPM 7.18.1 or higher, or Yarn 1.22.10 or higher. The setup runs from the command line.

How do I run simplefolio locally?

Clone the repository, run npm install, then npm start. Open http://localhost:1234/ to see the portfolio.

Why does npm install fail with simplefolio?

The README suggests running npm audit fix and installing @parcel/transformer-sass first. If installation still fails, it offers sudo npm install --unsafe-perm=true --allow-root as a fallback.

Can I make a multi-page site with simplefolio?

Not from the README. It describes a one-page layout, so multi-page sites or a built-in blog are not covered by this template.

Is there a non-coding alternative to simplefolio?

The README does not compare simplefolio with other tools. If you want a drag-and-drop builder with no terminal use, this template is not designed for that, since setup requires Git, Node.js and the command line.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Simplefolio suits developers and students who are comfortable editing HTML and running a few terminal commands, and who want a simple one-page portfolio to restyle with SCSS. It is a poor fit for non-technical users who want a visual builder, for multi-page sites or blogs, and for teams that need versioned releases, since the repository has no published releases.

Install options & downloads