40 | {
41 | data.minimalistConfig.socialList.map((social, index) => (
42 |
43 | {renderIcon(social.icon)}
44 |
45 | ))
46 | }
47 |
48 | )
49 | }
50 |
--------------------------------------------------------------------------------
/theme/gatsby-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | siteMetadata: {
3 | siteUrl: "https://..." // only set to enable the generation of a sitemap with 'gatsby-plugin-sitemap'
4 | },
5 | plugins: [
6 | {
7 | resolve: `gatsby-plugin-prefetch-google-fonts`,
8 | options: {
9 | fonts: [
10 | {
11 | family: `Open Sans`,
12 | variants: [`300`, `600`]
13 | },
14 | ],
15 | },
16 | },
17 | {
18 | resolve: "gatsby-plugin-react-svg",
19 | options: {
20 | rule: {
21 | include: /assets/
22 | }
23 | }
24 | },
25 | {
26 | resolve: `gatsby-plugin-sitemap`,
27 | options: {
28 | output: `/sitemap.xml`,
29 | query: `
30 | {
31 | site {
32 | siteMetadata {
33 | siteUrl
34 | }
35 | }
36 |
37 | minimalistConfig(id: {eq: "gatsby-theme-minimalist-config"}) {
38 | title,
39 | description,
40 | siteUrl,
41 | appName
42 | }
43 |
44 | allSitePage {
45 | edges {
46 | node {
47 | path
48 | }
49 | }
50 | }
51 | }`,
52 | serialize: ({ site, minimalistConfig, allSitePage }) =>
53 | allSitePage.edges.map(edge => {
54 | return {
55 | url: minimalistConfig.siteUrl + edge.node.path,
56 | changefreq: `daily`,
57 | priority: 0.7,
58 | }
59 | })
60 | }
61 | },
62 | `gatsby-plugin-react-helmet`,
63 | `gatsby-plugin-offline`
64 | ]
65 | }
66 |
--------------------------------------------------------------------------------
/theme/src/pages/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Particles from 'react-particles-js';
3 | import { graphql, useStaticQuery } from 'gatsby'
4 | import { Helmet } from 'react-helmet';
5 |
6 | import styles from './index.module.css';
7 | import About from '../components/about';
8 | import Links from '../components/links';
9 | import particleOptions from '../../assets/particles.json';
10 |
11 | export default () => {
12 | const data = useStaticQuery(graphql`
13 | query {
14 | minimalistConfig(id: {eq: "gatsby-theme-minimalist-config"}) {
15 | title,
16 | description,
17 | siteUrl,
18 | appName
19 | }
20 | }
21 | `)
22 |
23 | return (
24 | <>
25 |
46 |
51 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/theme/README.md:
--------------------------------------------------------------------------------
1 | ## 👀 Gatsby Minimalist Theme
2 |
3 | Welcome to my _Minimalist Gatsby Theme_ repository! A live demo of the theme can be found [here](https://filipesantoscorrea.com).
4 |
5 |
47 |
50 | 6 | 7 | ## 💻 Installation 8 | 9 | To use the Gatsby Minimalist Theme in your site, follow this instruction: 10 | 11 | 1. Install Theme: 12 | ```sh 13 | yarn add gatsby-theme-minimalist 14 | ``` 15 | 16 | 2. Add this theme to your ```gatsby-config.js``` file and adjust the options to fit your needs.
17 | You can find a detailed explanation about the options object further below. 18 | 19 | ```js 20 | module.exports = { 21 | plugins: [{ 22 | resolve: "gatsby-theme-minimalist", 23 | 24 | options: { 25 | // SEO 26 | title: "Your site title", 27 | description: "Your site description", 28 | siteUrl: "https://your-future-site.com", 29 | appName: "Your pwa app name", 30 | 31 | // Content 32 | headline: "Your headline", 33 | subHeadline: "Your meaningful message.
", 34 | socialList: [{ 35 | icon: 'FaGithub', // a detailed explanation can be found in the options section 36 | url: 'https://github.com/your-profile', 37 | ariaLabel: 'Link to my GitHub profile', 38 | }] 39 | } 40 | }] 41 | } 42 | ``` 43 | 44 | 3. Start developing: 45 | ```sh 46 | yarn develop 47 | ``` 48 | 49 | 4. Build production: 50 | ```sh 51 | yarn build 52 | ``` 53 | 54 |
55 | 56 | ## ⚙️ Options 57 | 58 | In order to provide a big selection of icons, this theme makes use of the fabulous _React Icons_ library. The _React Icons_ library comes with 9 different icon sets (_FontAwesome_, _Ionic_, _Material Design_, _Typicons_, _Github Octicons_, _Feather_, _Game_, _Weather_, and _Dev_). Just browse through the vast list of icons [https://react-icons.netlify.com](https://react-icons.netlify.com/#/icons/fa) and copy the icon name (e.g. `FaTwitter`) and paste it to your options in the `socialList[{icon: 'FaTwitter'}]` option section. 59 | 60 |
61 | 62 | ## 👩💻 Contributing 63 | 64 | Just submit an issue, be it a bug report or a feature request. I'm always happy to accept new pull requests. 65 | 66 |
67 | 68 | ## 🙌 Credits 69 | 70 | Special thanks to [@JCofman](https://github.com/JCofman) for the idea and recommendation to use _React Icons_ in this theme! 71 | -------------------------------------------------------------------------------- /theme/gatsby-node.js: -------------------------------------------------------------------------------- 1 | const crypto = require(`crypto`) 2 | 3 | 4 | exports.createPages = ({ actions, reporter }) => { 5 | actions.createPage({ 6 | path: "/", 7 | component: require.resolve("./src/pages/index.js") 8 | }) 9 | } 10 | 11 | 12 | exports.sourceNodes = ({ actions: { createTypes, createNode } }, { 13 | // SEO 14 | title = "Minimalist Portfolio Gatsby Theme", 15 | description = "Hi, my name is Filipe Santos Correa. I\'m a Front-End Engineer from Karlsruhe - Germany.", 16 | siteUrl = "https://filipesantoscorrea.com", 17 | appName = "Filipe Santos Correa", // Progressive Web App Name 18 | 19 | // Content 20 | headline = "Filipe Santos Correa", 21 | subHeadline = "I'm a Front-End Engineer.
I love to create new things everyday.", 22 | socialList = [ 23 | { 24 | icon: 'FaGithub', 25 | url: 'https://github.com/Safi1012', 26 | ariaLabel: 'Link to my GitHub profile', 27 | }, 28 | { 29 | icon: 'FaTwitter', 30 | url: 'https://twitter.com/safi1012', 31 | ariaLabel: 'Link to my Twitter profile', 32 | }, 33 | { 34 | icon: 'FaLinkedin', 35 | url: 'https://www.linkedin.com/in/filipe-santoscorrea', 36 | ariaLabel: 'Link to my LinkedIn profile', 37 | }, 38 | { 39 | icon: 'FaDribbble', 40 | url: 'https://dribbble.com/safi1012', 41 | ariaLabel: 'Link to my Dribbble profile', 42 | } 43 | ] 44 | }) => { 45 | createTypes(` 46 | type MinimalistConfig implements Node { 47 | title: String! 48 | description: String! 49 | siteUrl: String! 50 | appName: String! 51 | headline: String! 52 | subHeadline: String! 53 | socialList: [Social!]! 54 | } 55 | 56 | type Social { 57 | icon: String 58 | iconSet: String 59 | url: String 60 | ariaLabel: String 61 | } 62 | `) 63 | 64 | const minimalistConfig = { 65 | title, 66 | description, 67 | siteUrl, 68 | appName, 69 | headline, 70 | subHeadline, 71 | socialList 72 | } 73 | 74 | createNode({ 75 | ...minimalistConfig, 76 | id: `gatsby-theme-minimalist-config`, 77 | parent: null, 78 | children: [], 79 | internal: { 80 | type: `MinimalistConfig`, 81 | contentDigest: crypto 82 | .createHash(`md5`) 83 | .update(JSON.stringify(minimalistConfig)) 84 | .digest(`hex`), 85 | content: JSON.stringify(minimalistConfig), 86 | description: `Minimalist Theme Config`, 87 | }, 88 | }) 89 | } 90 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |
3 | 
4 |
5 |
6 |
7 | ## 👀 Gatsby Minimalist Theme
8 |
9 | Welcome to my _Minimalist Gatsby Theme_ repository! A live demo of the theme can be found [here](https://filipesantoscorrea.com).
10 |
11 |
4 |
5 | 12 | 13 | ## 💻 Installation 14 | 15 | To use the Gatsby Minimalist Theme in your site, follow this instruction: 16 | 17 | 1. Install Theme: 18 | ```sh 19 | yarn add gatsby-theme-minimalist 20 | ``` 21 | 22 | 2. Add this theme to your ```gatsby-config.js``` file and adjust the options to fit your needs.
23 | You can find a detailed explanation about the options object further below. 24 | 25 | ```js 26 | module.exports = { 27 | plugins: [{ 28 | resolve: "gatsby-theme-minimalist", 29 | 30 | options: { 31 | // SEO 32 | title: "Your site title", 33 | description: "Your site description", 34 | siteUrl: "https://your-future-site.com", 35 | appName: "Your pwa app name", 36 | 37 | // Content 38 | headline: "Your headline", 39 | subHeadline: "Your meaningful message.
", 40 | socialList: [{ 41 | icon: 'FaGithub', // a detailed explanation can be found in the options section 42 | url: 'https://github.com/your-profile', 43 | ariaLabel: 'Link to my GitHub profile', 44 | }] 45 | } 46 | }] 47 | } 48 | ``` 49 | 50 | 3. Start developing: 51 | ```sh 52 | yarn develop 53 | ``` 54 | 55 | 4. Build production: 56 | ```sh 57 | yarn build 58 | ``` 59 | 60 |
61 | 62 | ## ⚙️ Options 63 | 64 | In order to provide a big selection of icons, this theme makes use of the fabulous _React Icons_ library. The _React Icons_ library comes with 9 different icon sets (_FontAwesome_, _Ionic_, _Material Design_, _Typicons_, _Github Octicons_, _Feather_, _Game_, _Weather_, and _Dev_). Just browse through the vast list of icons [https://react-icons.netlify.com](https://react-icons.netlify.com/#/icons/fa) and copy the icon name (e.g. `FaTwitter`) and paste it to your options in the `socialList[{icon: 'FaTwitter'}]` option section. 65 | 66 |
67 | 68 | ## 👩💻 Contributing 69 | 70 | Just submit an issue, be it a bug report or a feature request. I'm always happy to accept new pull requests. 71 | 72 |
73 | 74 | ## 🙌 Credits 75 | 76 | Special thanks to [@JCofman](https://github.com/JCofman) for the idea and recommendation to use _React Icons_ in this theme! 77 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 
5 |
6 |