← Back to blog

Free Gatsby Resume Starter with Netlify CMS

Posted on January 04, 2020

resume-template

Gatsby starter resume CMS is a free starter template with Netlify CMS as headless CMS. It is easy to customize the design with thanks to tailwind theming capabilities. It uses git as a backend and can be deployed to any static hosting service like Netlify, firebase hosting or Github pages.

Demo | Source

Features

  • One-page resume/CV
  • PWA
  • Multiple Netlify CMS widgets
  • Netlify CMS as Headless CMS
  • Tailwind for styling with theming
  • Basic SEO, site metadata
  • Optimized build process
  • Prettier
  • Social media links

Quick Start

Create a Gatsby site

Use the Gatsby CLI to create a new site, specifying the resume starter.

# create a new Gatsby site using the blog starter
gatsby new my-resume https://github.com/barancezayirli/gatsby-starter-resume-cms

Start developing

Navigate into your new site’s directory and start it up.

cd my-resume/
gatsby develop

Updating Content

The resume content is generated from data/profile.json file. You can manually edit this file or setup Netlify CMS for online editing.

Netlify CMS as Headless CMS

To use Netlify CMS you’ll need to deploy to Netlify through GitHub, Gitlab or Bitbucket, set up continuous deployment, and do a few configuration. For Github:

Open static/admin/config.yml. Replace barancezayirli/gatsby-resume-tailwind with your GitHub username and project name. This step is important for managing and deploying the Netlify CMS interface.

backend:
  name: github
  repo: barancezayirli/gatsby-starter-resume-cms #TODO replace this with your own repo

Publish your repo to Github, then, open Netlify and add a “New site from Git”. Choose your newly created repo and click on “Deploy site” with the default deployment settings.

Finally need to set up an OAuth application on GitHub. Start development build with gatsby develop and visit http://localhost:8000/admin and authorize Netlify to make commits for you.

If it doesn’t work, the instructions for setting up OAuth can be found here: Netlify’s Using an Authorization Provider.

Customization

Theming

Project built on with Tailwind CSS used primary and secondary colors as main color palette. You can quickly change the color palette, type scale, font stacks, breakpoints, border radius values, and more. For more information on tailwind you can check here.

For individual components you can check /src/layout/main.css file or individual components if you want to modify the design further.

Resume Components

All components that make up the starter can be found under src/components directory.

Header => src/components/header.js

{
  "fullname": "Your Name",
  "role": "position",
  "contact": {
    "phone": "...",
    "email": "...",
    "website": "...",
    "location": "..."
  }
}

For contact fields are hardcoded. It is not possible to add more fields via JSON.

Summary Section => src/components/summary.js

{
  "summary": "Your introduction text here"
}

The profile picture is under static/profile.jpg.

Experience Section => src/components/experience.js

{
  "experience": [
    {
      "role": "Your position",
      "company": "Company you worked",
      "description": "What you did there",
      "start": "Start date with MM/YYYY format",
      "end": "End date with MM/YYYY format"
    }
  ]
}

Experience is array of objects. If you omit the end date, ‘PRESENT’ will be rendered. In Netlify CMS, this section uses `list’ widget.

Projects Section => src/components/projects.js

{
  "projects": [
    {
      "name": "Project name",
      "company": "Who was the client",
      "description": "Information about the project",
      "link": "Optional, it is link to the project"
    }
  ]
}

Skills => src/components/skills.js

Skills section structured as 2 level lists.

{
  "skills": [
    {
      "title": "Title of the skill",
      "type": "This can be percent, tag, list",
      "subskills": [
        {
          "name": "name of the skill",
          "percent": "It is only necessary for percent type list"
        }
      ]
    }
  ]
}
  • percent lists the skills with a progress bar
  • tag lists the skills in tag cloud fashion
  • list lists the skills in a list view, I used a bolt icon for the bullets

You can combine multiple type of skills to present your expertise.

Education => src/components/education.js

{
  "education": [
    {
      "institution": "Where you studied",
      "degree": "What was the study about",
      "start": "YYYY format date",
      "end": "YYYY format date"
    }
  ]
}
{
  "sidebar": [
    {
      "title": "Title of the list (i.e. interets)",
      "items": ["Lego", "Gaming"]
    }
  ]
}

It is also possible to add list of strings to sidebar. I haven’t used it in demo but it renders same as skills list type. The component for the list item can be found in src/components/list_item.js.

{
  "social": [
    {
      "service": "Must be one of the services listed below (case senstitive)",
      "url": "Link to your profile"
    }
  ]
}

Footer contains a list of social networks as icon buttons. Resume template supports following social networks:

  • linkedin
  • twitter
  • facebook
  • youtube
  • instagram
  • behance
  • github
  • dribbble
  • angellist

Netlify CMS configured to use select widget for adding social links. If you want to add another network that is not supported, you can either create an issue in github repo or update src/components/social_icon.js and static/admin/config.yml files.

I hope you enjoy the resume template, if you do please follow me on twitter and send me your results. I would love to see it!


baran cezayirli

Baran Cezayirli

Technologist

Ukraine, Kyiv

Services

It is not easy to find and onboard talents. It is especially for startups, where the resources are scarce. I can help you to overcome the obstacles between your idea and success.

Develop a Product Concept

I analyze market, competitors and create a product concept that addresses the market needs. With my wast experience in business communications, I find the most effective approach to present information to all stakeholders.

Requirement Analysis

I help you to clarify, prioritize and disambiguate business goals and turn them into clear to understand and actionable pieces. I use lean methodologies to minimize development time and maximize the impact.

Solution Architecture

From the first days of your concept to the time when you need to scale, I assist you in choosing the appropriate technology, optimal design and migrating an outdated solution. I deliver clear application architecture that is performant, flexible and scalable.

Blockchain Solutions

I build full-stack blockchain applications that power real business transformations. I create new business tools based on revolutionary decentralized networks that change your industry forever.

App Development

I build responsive, high performing and highly attractive experiences while keeping in mind best practices and latest technological platforms.

Management

I use my experience working with startups to give a powerful boost to your project flow and let you enjoy wise resource coordination, clear formulation of objectives and tasks, on-time delivery with maximum quality.