1.0.14 • Published 3 years ago

gatsby-intro v1.0.14

Weekly downloads
2
License
MIT
Repository
github
Last release
3 years ago

Version Downloads License

Intro - Personal branding theme for developers

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

Tell your story by showing your skills, projects and career path.

Preview

Intro Theme

Live Demo

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

Features

  • Show your skills, tools, projects & career path
  • 10 predefined color versions
  • YAML files as a data source
  • Contact form integrated with Formspree
  • Responsive/adaptive images via gatsby-image
  • Uses utility-first TailwindCSS framework
  • Responsive design (desktop / mobile)

🚀 Getting Started

Install theme & dependencies

mkdir my-site
cd my-site
yarn init -y
yarn add gatsby react react-dom @wkocjan/gatsby-theme-intro

Enable theme

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

module.exports = {
  plugins: [
    {
      resolve: "@wkocjan/gatsby-theme-intro",
      options: {
        theme: "classic",
      },
    },
  ],
}

Run your site

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

gatsby develop

This process will create content/ directory within your site with a sample data.

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.

projects.yaml

For each project you can provide:

ParameterValueIs required?
nameName of the projectyes
urlURL of the projectno
descriptionProject's descriptionno
statusEither in progress or liveno
tagsList of tagsno
iconEither github or websiteno
imagePath to the imageno

work-history.yaml

For each entry you can provide:

ParameterValueIs required?
companyName of the companyyes
periodStart / End dateno
positionYour position at the companyno
urlURL of the companyno

social.yaml

List of your social media accounts. Please just fill the url parameter or leave it empty.

Do not add custom items to the list.

Enable email notifications

Contact form is integrated with Formspree. Any form submissions will be sent to your e-mail (set in profile.yaml).

You need to confirm your e-mail - to do it, please just send any message using the contact form. Shortly after doing it, you'll receive message from Formspree with an activation link.

Configuration

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

module.exports = {
  siteMetadata: {
    description: "Personal page of John Doe",
    locale: "en",
    title: "John Doe",
  },
  plugins: [
    {
      resolve: "@wkocjan/gatsby-theme-intro",
      options: {
        basePath: "/",
        contentPath: "content/",
        showThemeLogo: true,
        theme: "classic",
      },
    },
  ],
}

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.
  • Change the theme parameter to load different color variant. Please refer to the list below for available values.

Available color variants

NamePreview
blueclick here
bright-greenclick here
bright-orangeclick here
bright-redclick here
classic (default)click here
dark-blueclick here
dark-greenclick here
dark-pinkclick here
gh-inspiredclick here
warm-redclick here

Customization

Component shadowing

You can use Gatsby component shadowing technique to customize the theme.

  • All components are located in src/components directory.
  • All parameters accepted by components are defined using PropTypes. You can find types definitions in one centeral src/types location.
  • Code you want to overwrite should be placed within src/@wkocjan/gatsby-theme-intro/ directory.

Please refer to the official documentation to learn more.

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: "@wkocjan/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.

About

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

The theme has been initially launched in 2018 as a commercial project written in JavaScript. In 2020 it's been rewritten to Gatsby and open sourced.

Thank you for using it!