{"id":15064934,"url":"https://github.com/atechguide/gatsby-theme-portfolio-starter","last_synced_at":"2025-04-10T13:10:35.492Z","repository":{"id":57245138,"uuid":"209924553","full_name":"aTechGuide/gatsby-theme-portfolio-starter","owner":"aTechGuide","description":"Portfolio Theme powered by Gatsby Material UI and Netlify","archived":false,"fork":false,"pushed_at":"2023-04-16T07:49:02.000Z","size":2178,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T03:52:14.992Z","etag":null,"topics":["gatsby","material-ui","netlify-deployment","open-source"],"latest_commit_sha":null,"homepage":"https://gatsby-theme-portfolio-starter.netlify.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aTechGuide.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-21T04:27:57.000Z","updated_at":"2023-04-16T07:58:14.000Z","dependencies_parsed_at":"2024-09-25T00:28:25.056Z","dependency_job_id":"6ec6acff-0f7d-4b11-a2ec-09f396b736ff","html_url":"https://github.com/aTechGuide/gatsby-theme-portfolio-starter","commit_stats":{"total_commits":22,"total_committers":1,"mean_commits":22.0,"dds":0.0,"last_synced_commit":"0c082d900e963b2f2bfe4cf2b6283aaf36c156cd"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aTechGuide%2Fgatsby-theme-portfolio-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aTechGuide%2Fgatsby-theme-portfolio-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aTechGuide%2Fgatsby-theme-portfolio-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aTechGuide%2Fgatsby-theme-portfolio-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aTechGuide","download_url":"https://codeload.github.com/aTechGuide/gatsby-theme-portfolio-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248225313,"owners_count":21068076,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby","material-ui","netlify-deployment","open-source"],"created_at":"2024-09-25T00:28:09.185Z","updated_at":"2025-04-10T13:10:35.473Z","avatar_url":"https://github.com/aTechGuide.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gatsby Theme Portfolio Starter\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/aTechGuide/gatsby-theme-portfolio-starter/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"gatsby-theme-portfolio-starter is released under the MIT license.\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/gatsby-theme-portfolio-starter\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/gatsby-theme-portfolio-starter.svg\" alt=\"Current npm package version.\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmcharts.com/compare/gatsby-theme-portfolio-starter?minimal=true\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/gatsby-theme-portfolio-starter.svg?color=blue\" alt=\"Downloads per month on npm.\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmcharts.com/compare/gatsby-theme-portfolio-starter?minimal=true\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/gatsby-theme-portfolio-starter.svg?color=blue\" alt=\"Total downloads on npm.\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs welcome!\" /\u003e\n  \u003ca href=\"https://twitter.com/intent/follow?screen_name=atechguide\"\u003e\n      \u003cimg src=\"https://img.shields.io/twitter/follow/atechguide.svg?label=Follow%20@atechguide\" alt=\"Follow @atechguide\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nA Gatsby theme for creating Superfast, SEO optimized Portfolio powered by `Material UI` and `MDX`\n- [Live demo](https://gatsby-theme-portfolio-starter.netlify.com/)\n- [My Portfolio Site](https://kamranali.in/)\n\n## Performance\n### Desktop\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://atech.guide\"\u003e\n    \u003cimg alt=\"Gatsby Theme\" src=\"https://gatsby-theme-portfolio-starter.netlify.com/desktop-100.png\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### Mobile\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://atech.guide\"\u003e\n    \u003cimg alt=\"Gatsby Theme\" src=\"https://gatsby-theme-portfolio-starter.netlify.com/mobile-100.png\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n## ✨Features\n\nIt provides following functionality out of box\n\n- Fully optimized for Lighthouse audit\n- Responsive\n- Pagination for projects\n- Tags for browsing the projects\n- Google Structured Data\n- Google Analytics\n- Sitemap\n\n## Usage\n### Install\nManually add to you site\n\n`npm install --save gatsby-theme-portfolio-starter`\n\n### Theme options\n\n| Key              | Default value    | Description                                                                                               |\n| ---------------- | ---------------- | --------------------------------------------------------------------------------------------------------- |\n| `trackingId`     | `UA-27634418-4`  | Google Analytics Tracking ID                                                                               |\n| `projectsPath`   | `projects`       | Location of Projects                                                                                    |\n| `imagesPath`     | `images`         | Location of cover image and icon                                                                                        |\n| `projectsPerPage`| `12`             | Number of Projects to be displayed on a single page |\n\n#### Example usage\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n        {\n      resolve: \"gatsby-theme-portfolio-starter\",\n      options: {\n        trackingId: \"UA-27634418-4\",\n        projectsPath: \"projects\",\n        imagesPath: \"images\",\n        projectsPerPage: \"12\"\n      },\n    },\n  ],\n}\n```\n\n### Additional configuration\nIn 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\n```\n// gatsby-config.js\nmodule.exports = {\n  siteMetadata: {\n    title: `My Portfolio Title`,\n    description: `My Portfolio Description`,\n    author: `Author Name`,\n    headline: `My Introduction`, // One liner Introduction\n    focusArea: `Tech focus Area`, // Technologies currently working on / Knowledge of Tools, expertise etc\n    twitterId: `@twitterHandle`,\n    linkedInId: `linkedInID`,\n    siteUrl: `site domain name`,\n    keywords: [`Technology Blog`], // Used for SEO and Google Structured Data\n    email: `admin@blog.com`, // Contact email Used for Google Structured Data\n    social: [\n      'https://www.facebook.com/aTechGuide/'  // Social link used in site schema for Google Structured Data\n    ],\n    contactSupport: 'https://www.site.com/support/', // Contact link used in site schema for Google Structured Data\n    bingId: '', // Support for Bing \n    menuLinks: [{name: 'Projects', link: '/page/1'}], // Adding Menu bar links\n  },\n}\n```\n\n## 🚀Getting Started\n\n- Create `projects` directory and add projects into it as Markdown files\n- Create `images` directory and add images into it to be used by queries directly\n  - Add icon under `images` by the name `icon.png`\n  - 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\n\n## Shadowing\nPlease 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.\n\n### Editing the theme\n- Shadow `src/styles/themeColors.js` to override the primary, secondary colors\n\n**themeColors.js**\n```\nimport {blueGrey, cyan} from '@material-ui/core/colors/';\n\nconst primary = blueGrey\nconst secondary = cyan\n\nexport {primary, secondary} //\u003c- Exporting an object\n```\n\n- Shadow `src/styles/theme.js` to override rest of the defaults\n\n**theme.js**\n```\nimport {primary, secondary} from './themeColors'; //\u003c- Destructuring the imported object\n\nconst theme = {\n  palette: {\n    primary: primary,\n    secondary: secondary\n  },\n  typography: {\n    fontSize: 16,\n    h1 : {\n      fontSize: \"3rem\",\n      fontWeight: 500,\n      color: primary[500]\n    },\n    h5 : {\n      color: secondary[900]\n    }\n  },\n  button: {\n    color: \"primary\",\n    variant: \"contained\"\n  }\n}\n\nexport default theme\n```\n\n### Projects\nProject cards are created from MDX. Its content is picked from the frontmatter as follows\n\n```\n---\ndataType: project // \u003c- This is added to filter markdown files for projects\ntitle: Project Title\ndescription: Project Description\ndate: '2019-05-28'\ntags:\n  - Node // Tech stack\nprojectLink: https://github.com/aTechGuide/\npublished: true\n---\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatechguide%2Fgatsby-theme-portfolio-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatechguide%2Fgatsby-theme-portfolio-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatechguide%2Fgatsby-theme-portfolio-starter/lists"}