Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Version Downloads License

Intro (academic variant) - Personal branding theme for academics

Intro is an open source Gatsby theme built specially for developers.

This is a variant adapted for academics.

Preview (original theme)

Intro Theme

Live Demo

Live demo is available at: https://weeby.studio/intro/preview


  • Highlight your current research topics, tools, publications, projects & career path
  • 10 predefined color versions
  • YAML files as a data source
  • Contact form integrated with Formspree
  • Uses utility-first TailwindCSS framework
  • Responsive design (desktop / mobile)

🚀 Getting Started

Install theme & dependencies

mkdir my-site
cd my-site
yarn init -2
yarn add gatsby react react-dom @arene/gatsby-theme-intro-academic

Enable theme

Then add the theme to your gatsby-config.js.

module.exports = {
  plugins: [
      resolve: "@arene/gatsby-theme-intro-academic",
      options: {
        theme: "classic",
        darktheme: "dark-blue"

Copy the contents of the demo site

(Normally the gatsby-theme-intro-academic theme would automatically create the content directory on the first run, but a bug currently causes it to do so with the contents for the base theme, rather than this -academic variant.)

Copy the folder site/contents from https://github.com/alcrene/gatsby-theme-intro-academic.git into your site, so that the directory structure now looks like this:

└── content
   ├── images
   │   ├── profile.jpg
   │   └── project.jpg
   ├── academic-history.yaml
   ├── papers.yaml
   ├── profile.yaml
   ├── projects.yaml
   └── social.yaml

Run your site

That’s it, you can now run your site using

gatsby develop

(If run on an empty site, this process will create content/ directory within your site with a sample data. However currently this uses the samples from the base theme.)

Edit content

You can change the website’s content by editing .yaml files in content/ directory:


Follow existing convention to provide your profile information, skills & tools.

Do not remove existing parameters from the file, as it may break the website.

Parameter Value Is required?
name yes
initials yes
profession yes
location yes
institution yes
research_focus yes
focus_url Adds a clickable icon below the research field no
for_hire Bool: true will display “Looking for a position” yes
relocation Bool: true will display “Available for relocation” yes
topics List of research topics that interest you no
tools List of tools/method you are experienced with no
about no

TODO: Make topics clickable by assigning per-topic URLs


Parameter Value Is required?
authors List of authors yes
title Publication title yes
journal yes
date (unrestricted format) yes
doi no
url URL for the official publication no
pdf URI for a downloadable PDF no


  • Support doi, url and pdf (currently ignored)
  • Allow organizing publications by year


Currently the tab identifies these as “Software projects”.

For each project you can provide:

Parameter Value Is required?
name Name of the project yes
url URL of the project no
description Project’s description no
status Either in progress or live no
tags List of tags no
icon Either github or website no
image Path to the image no


  • Allow to differentiate projects, perhaps based on a “kind” field ?


This replaces work-history.yaml from the base theme.

For each entry you can provide:

Parameter Value Is required?
group Name of the research group yes
group_url Research group’s website no
department no
institution no
institution_url no
period Start / End date no
position Your position at the company no


The teaching tab has a similar layout to projects.

For each entry you can provide:

Parameter Value Is required?
name yes
url no
description no
date no
kind One of class, tutorial or write-up no
image no


List of your social media accounts. Each social link shows up as an icon, but only when the url is specified.

With respect to the base theme, this variant adds support for

  • Google Scholar
  • ResearchGate
  • Loop

It is not possible to add custom items to the list.

Formspree integration

At this time, this template removes the contact form from the base template, since contact forms are atypical in academia.


Here is the list of configuration options you can set in gatsby-config.js:

module.exports = {
  siteMetadata: {
    description: "Personal page of John Doe",
    title: "John Doe",
    formspreeEndpoint: "https://formspree.io/f/{your-id}",
  plugins: [
      resolve: "@arene/gatsby-theme-intro",
      options: {
        basePath: "/",
        contentPath: "content/",
        showThemeLogo: true,
        theme: "classic",
        darktheme: "dark-blue",
        lang: null,
        tailwindConfig: null

After modyfying gatsby-config.js it may be required to restart gatsby develop process.

  • The siteMetadata section is responsible for SEO settings.
  • By modifying basePath parameter you can run the website on different URL (e.g. https://mydomain.com/profile). It may be useful when integrating with existing Gatsby site.
  • By setting showThemeLogo to false you can hide the Intro logo in the footer area.
  • If provided, the value of lang is added to the <body> element.
  • Change the theme parameter to load different color variant. Please refer to the list below for available values.
  • darktheme is an alternative theme, defined in the same way as theme. It is activited using Tailwind CSS’s dark mode machinery.
  • If provided, tailwindConfig should be an object. Any field it provides will completely overwrite the correspond field in gatsy-theme-intro’s default Tailwind configuration.

Available color variants

Name Preview
blue click here
bright-green click here
bright-orange click here
bright-red click here
classic (default) click here
dark-blue click here
dark-green click here
dark-pink click here
gh-inspired click here
warm-red click here

Dark mode

This theme supports specifying a dark variant via TailwindCSS, using its "class" mode and a toggle button.

TODO: Add a third “OS preference” mode to the toggle.


Custom color variant

As theme parameter in theme configuration (gatsby-config.js) you can pass either the name of the existing theme or an object of colors.


module.exports = {
  plugins: [
      resolve: "@arene/gatsby-theme-intro",
      options: {
        theme: {
          'back': '#edf0f3',
          'front': '#2b3137',
          'lead': '#2781ed',
          'lead-text': '#ffffff',
          'line': '#ced9e3',
          'skill-1': '#405060',
          'skill-2': '#fc8732',
          'skill-3': '#2ebc50',

Please remember, that after modyfying gatsby-config.js file it may be required to restart gatsby develop process.

Component shadowing

You can use Gatsby’s component shadowing mechanism to customize the theme. Since this requires knowing the original theme’s source layout, you will also want to clone the theme’s sources and possibly place them in a yarn workspace.

My recommendation is to clone my website project, which is already set up for this, following the instructions for a development installation and then those for updating content.

Updating dependencies

  • Running yarn upgrade-interactive will check for any out-of-data packages, and propose to update them. It automatically updates the version ranges in package.json files.



Initial version. Compared to gatsby-theme-intro:

  • Heading changes
  • Use of tabs
  • Addition of “Publications” tab
  • Addition of “Teaching” tab


Intro. is a theme created by Wojciech Kocjan from Weeby Studio.

This Academic variant was created by Alexandre René for personal use.

Thank you for using it!

© 2023 Gatsby, Inc.