Skip to content


Switch branches/tags

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?

Gatsby Simplefolio ⚡️ GitHub GitHub stars GitHub forks

A clean, beautiful and responsive portfolio template for Developers

Gatsby Simplefolio


⚡️ Modern UI Design + Reveal Animations
⚡️ One Page Layout built with React
⚡️ Styled with Bootstrap v4.3 + Custom SCSS
⚡️ Fully Responsive
⚡️ Configurable color scheme
⚡️ Image optimization with Gatsby
⚡️ Easy site customization
⚡️ Well organized documentation

To view a demo example, click here
To view a live example, click here

Getting Started 🚀

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites 📋

You'll need Git and Node.js (which comes with NPM) installed on your computer.
Also you need to have installed Gatsby CLI

node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher
gatsby-cli@2.8.22 or higher

Also, you can use Yarn instead of NPM ☝️

yarn@v1.21.1 or higher

How To Use 🔧

From your command line, first clone Simplefolio:

# Clone this repository
$ git clone

# Go into the repository
$ cd gatsby-simplefolio

# Remove current origin repository
$ git remote remove origin

Then you can install the dependencies either using NPM or Yarn:

Using NPM:

# Install dependencies
$ npm install

# Start development server
$ npm run develop

Using Yarn:

# Install dependencies
$ yarn

# Start development server
$ yarn develop

NOTE: If your run into issues installing the dependencies with NPM, use this command:

# Install dependencies with all permissions
$ sudo npm install --unsafe-perm=true --allow-root

Once your server has started, go to this url http://localhost:8000/ and you will see the website running on a Development Server:

Gatsby Simplefolio



Go to /src/mock/data.js and fill your information, they are 5 objects:

Hero Section

export const heroData = {
  title: '', // Hello, my name is
  name: '', // John
  subtitle: '', // I'm the Unknown Developer.
  cta: '', // Know more

About Section

Important Note: All the images must live inside the src/images/ folder in order for Gatsby to show the images correctly.

export const aboutData = {
  img: 'profile.jpg', // put your profile image (recommended aspect radio: square)
  paragraphOne: '',
  paragraphTwo: '',
  paragraphThree: '',
  resume: '', // if no resume, the button will not show up

Projects Section

Important Note: All the images must live inside the src/images/ folder in order for Gatsby to show the images correctly.

Put as many projects object you want inside the array.

export const projectsData = [
    id: nanoid(),
    img: 'project.jpg',
    title: '',
    info: '',
    info2: '',
    url: '',
    repo: '', // if no repo, the button will not show up
    id: nanoid(),
    img: 'project.jpg',
    title: '',
    info: '',
    info2: '',
    url: '',
    repo: '', // if no repo, the button will not show up

Contact Section

export const contactData = {
  cta: '', // call to action text for the contact section
  btn: '', // text inside the button
  email: '',

Footer Section

You can remove or add as many you social-media icons you want.
Just put an object with the corresponding values inside the networks array or remove it from there.

export const footerData = {
  networks: [
      id: nanoid(),
      name: 'twitter',
      url: '', // your twitter url
      id: nanoid(),
      name: 'codepen',
      url: '', // your codepen url
      id: nanoid(),
      name: 'linkedin',
      url: '', // your linkedin url
      id: nanoid(),
      name: 'github',
      url: '', // your github url

Required - Disable GitHub buttons

Set isEnabled to false once you finish setup your portfolio.
By setting to false it will hide the GitHub stars/fork buttons

export const githubButtons = {
  isEnabled: true, // true is the default value

Step 2 - STYLES

Change the color theme of the website ( choose 2 colors to create a gradient ):

Go to src/styles/abstracts/_variables.scss and only change the values on this classes $main-color and $secondary-color to your prefered HEX color

// Default values
$main-color: #02aab0;
$secondary-color: #00cdac;

Note: I highly recommend to checkout gradients variations on UI Gradient

Deployment 📦

Once you have done with your setup. You need to put your website online!

I highly recommend to use Netlify to achieve this on the EASIEST WAY

Others versions 👥

Simplefolio by Jacobo Martinez
Ember.js Simplefolio by Michael Serna

Technologies used 🛠️

  • Gatsby - Static Site Generator
  • GraphQL - Query language for APIs
  • React - Front-End JavaScript library
  • Bootstrap 4 - Front-End UI library
  • Sass - CSS extension language



Netlify Status

License 📄

This project is licensed under the MIT License - see the file for details

Acknowledgments 🎁

I was motivated to create this project because I wanted to contribute on something useful for the dev community, thanks to ZTM Community and Andrei