gatsby-theme-portfolio-starter

    1.0.2 • Public • Published

    Gatsby Theme Portfolio Starter

    gatsby-theme-portfolio-starter is released under the MIT license. Current npm package version. Downloads per month on npm. Total downloads on npm. PRs welcome! Follow @atechguide

    A Gatsby theme for creating Superfast, SEO optimized Portfolio powered by Material UI and MDX

    Performance

    Desktop

    Gatsby Theme

    Mobile

    Gatsby Theme

    Features

    It provides following functionality out of box

    • Fully optimized for Lighthouse audit
    • Responsive
    • Pagination for projects
    • Tags for browsing the projects
    • Google Structured Data
    • Google Analytics
    • Sitemap

    Usage

    Install

    Manually add to you site

    npm install --save gatsby-theme-portfolio-starter

    Theme options

    Key Default value Description
    trackingId UA-27634418-4 Google Analytics Tracking ID
    projectsPath projects Location of Projects
    imagesPath images Location of cover image and icon
    projectsPerPage 12 Number of Projects to be displayed on a single page

    Example usage

    // gatsby-config.js
    module.exports = {
      plugins: [
            {
          resolve: "gatsby-theme-portfolio-starter",
          options: {
            trackingId: "UA-27634418-4",
            projectsPath: "projects",
            imagesPath: "images",
            projectsPerPage: "12"
          },
        },
      ],
    }

    Additional configuration

    In addition to the theme options, there are a handful of items you can customize via the siteMetadata object in your site's gatsby-config.js

    // gatsby-config.js
    module.exports = {
      siteMetadata: {
        title: `My Portfolio Title`,
        description: `My Portfolio Description`,
        author: `Author Name`,
        headline: `My Introduction`, // One liner Introduction
        focusArea: `Tech focus Area`, // Technologies currently working on / Knowledge of Tools, expertise etc
        twitterId: `@twitterHandle`,
        linkedInId: `linkedInID`,
        siteUrl: `site domain name`,
        keywords: [`Technology Blog`], // Used for SEO and Google Structured Data
        email: `admin@blog.com`, // Contact email Used for Google Structured Data
        social: [
          'https://www.facebook.com/aTechGuide/'  // Social link used in site schema for Google Structured Data
        ],
        contactSupport: 'https://www.site.com/support/', // Contact link used in site schema for Google Structured Data
        bingId: '', // Support for Bing 
        menuLinks: [{name: 'Projects', link: '/page/1'}], // Adding Menu bar links
      },
    }
    

    🚀Getting Started

    • Create projects directory and add projects into it as Markdown files
    • Create images directory and add images into it to be used by queries directly
      • Add icon under images by the name icon.png
      • Add cover image under images by the name cover.svg You may download your SVG from undraw.co as per theme color

    Shadowing

    Please read the guide Shadowing in Gatsby Themes to understand how to customize the theme. Basically you should place your files into src/gatsby-theme-portfolio-starter/ to shadow/override files.

    Editing the theme

    • Shadow src/styles/themeColors.js to override the primary, secondary colors

    themeColors.js

    import {blueGrey, cyan} from '@material-ui/core/colors/';
    
    const primary = blueGrey
    const secondary = cyan
    
    export {primary, secondary} //<- Exporting an object
    
    • Shadow src/styles/theme.js to override rest of the defaults

    theme.js

    import {primary, secondary} from './themeColors'; //<- Destructuring the imported object
    
    const theme = {
      palette: {
        primary: primary,
        secondary: secondary
      },
      typography: {
        fontSize: 16,
        h1 : {
          fontSize: "3rem",
          fontWeight: 500,
          color: primary[500]
        },
        h5 : {
          color: secondary[900]
        }
      },
      button: {
        color: "primary",
        variant: "contained"
      }
    }
    
    export default theme
    

    Projects

    Project cards are created from MDX. Its content is picked from the frontmatter as follows

    ---
    dataType: project // <- This is added to filter markdown files for projects
    title: Project Title
    description: Project Description
    date: '2019-05-28'
    tags:
      - Node // Tech stack
    projectLink: https://github.com/aTechGuide/
    published: true
    ---
    

    Install

    npm i gatsby-theme-portfolio-starter

    DownloadsWeekly Downloads

    34

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    54.1 kB

    Total Files

    34

    Last publish

    Collaborators

    • kamranalinitb