Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/atechguide/gatsby-theme-portfolio-starter
Portfolio Theme powered by Gatsby Material UI and Netlify
https://github.com/atechguide/gatsby-theme-portfolio-starter
gatsby material-ui netlify-deployment open-source
Last synced: 3 months ago
JSON representation
Portfolio Theme powered by Gatsby Material UI and Netlify
- Host: GitHub
- URL: https://github.com/atechguide/gatsby-theme-portfolio-starter
- Owner: aTechGuide
- License: mit
- Created: 2019-09-21T04:27:57.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-16T07:49:02.000Z (over 1 year ago)
- Last Synced: 2024-09-25T00:28:21.658Z (3 months ago)
- Topics: gatsby, material-ui, netlify-deployment, open-source
- Language: JavaScript
- Homepage: https://gatsby-theme-portfolio-starter.netlify.com
- Size: 2.08 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Gatsby Theme Portfolio Starter
A Gatsby theme for creating Superfast, SEO optimized Portfolio powered by `Material UI` and `MDX`
- [Live demo](https://gatsby-theme-portfolio-starter.netlify.com/)
- [My Portfolio Site](https://kamranali.in/)
## Performance
### Desktop
### Mobile
## ✨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
```js
// 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: `[email protected]`, // 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](https://undraw.co/) as per theme color
## Shadowing
Please read the guide [Shadowing in Gatsby Themes](https://www.gatsbyjs.org/docs/themes/shadowing/) 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
---
```