Gatsby Starter CV

Gatsby Starter CV is a free, open-source GatsbyJS starter for building a responsive online résumé from a single configuration file.

What is Gatsby Starter CV?

Gatsby Starter CV is a GatsbyJS starter template that outputs a fully static, mobile-friendly resume site for developers and professionals. It takes as input a JavaScript configuration file, data/siteConfig.js, where you define your name, bio, skills with percentage levels, job history, portfolio items, social links, and site metadata, and produces a site with five sections: About, Skills, Job experiences, GitHub repositories, and Portfolio. The template was created by Francisco Santos and is maintained in the santosfrancisco/gatsby-starter-cv repository on GitHub, which currently has over 120 stars.

Key Features

This starter bundles several features that are uncommon in simple resume templates: responsive layout, analytics, SEO, PWA support, and theming.

• Responsive design optimized for mobile — the layout adapts to phone and tablet screens, so recruiters can view your resume comfortably on any device.
• Google Analytics integration — set your googleAnalyticsId in the config and the site automatically tracks page views for your resume.
• SEO built in — meta tags, Open Graph, and configurable site keywords improve the site's search engine ranking.
• PWA support — the generated site is installable as a progressive web app with a manifest and service worker, allowing offline access after first visit.
• Dark mode toggle — when enableDarkmode is set to true, visitors can switch between light and dark themes, controlled through the config.
• Animations — subtle entrance animations on sections, powered by styled-components, give the page a polished, modern feel.
• GitHub repositories section — automatically pulls in your public repositories based on the githubUsername in the config, showcasing your open-source work.
• One-file configuration — all personal data and site options live in data/siteConfig.js, so you change the whole site's content by editing this single module.

Who should use Gatsby Starter CV?

This starter suits anyone who needs a professional web presence quickly without building from scratch.

• Developers and software engineers who want a clean, code-centric resume site that they can maintain in a Git repository and deploy to GitHub Pages with a single command.
• Students and recent graduates who need a presentation page for their projects and skills that is faster to set up than building a custom portfolio from scratch.
• Freelancers and remote workers who want a lightweight personal website that doubles as a resume and portfolio, complete with SEO and analytics.

What can you do with Gatsby Starter CV?

With the provided scripts and config, you can take a resume from a blank repo to a published site in under an hour.

• Build a resume in a few minutes: scaffold a new site with npx gatsby new using the starter URL, then replace the example data in data/siteConfig.js with your own.
• Preview changes live: run npm run develop to start a development server at http://localhost:8000 with hot reload; a GraphQL dashboard is available at http://localhost:8000/___graphql.
• Deploy to GitHub Pages: run npm run build to generate a production build in the public folder, then npm run deploy to push it to the gh-pages branch, after checking the pathPrefix setting in the config.

How does Gatsby Starter CV work?

The workflow is built around Gatsby's CLI and the included npm scripts.

1. Bootstrap a new Gatsby project with the CLI command npx gatsby new my-resume https://github.com/santosfrancisco/gatsby-starter-cv.
2. Open src/pages/index.js to see the React component that renders the homepage, and edit data/siteConfig.js to fill in your personal information, skills, jobs, and portfolio items.
3. Run npm run develop for local development or npm run build to create a static public folder ready for hosting anywhere.

FAQ

Is Gatsby Starter CV free?

Yes, the starter is open source and available on GitHub under the santosfrancisco/gatsby-starter-cv repository. There are no paid tiers or hidden costs.

How do I change the content of my resume?

Edit the data/siteConfig.js file. It contains a JavaScript object with fields for site title, author bio, skills, jobs, portfolio, and social links. Once you save the file, the site regenerates with the new data.

What do I need to deploy to GitHub Pages?

The starter includes an npm run deploy script that publishes the production build to the gh-pages branch. Before deploying, update the pathPrefix in the config to match your repository name, for example /gatsby-starter-cv.

Does the template include a portfolio section?

Yes, the Portfolio section is one of the five built-in sections. The portifolio (sic) field in the config takes an array of items with an image path, description, and URL, which are rendered as a grid on the site.