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)

Live Demo

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

Features

• 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:

my-site
└── 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:

profile.yaml

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

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

TODO: Make topics clickable by assigning per-topic URLs

papers.yaml

TODO:

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

projects.yaml

Currently the tab identifies these as “Software projects”.

For each project you can provide:

TODO:

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

academic-history.yaml

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

For each entry you can provide:

teaching.yaml

The teaching tab has a similar layout to projects.

For each entry you can provide:

social.yaml

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

• ORCID
• 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.

Configuration

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

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.

Customization

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.

Example:

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.

Changelog

1.0.0

Initial version. Compared to gatsby-theme-intro:

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

About

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!