Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brianruizy/gatsby-minimal-portfolio
👔 JAMstack (Gatsby JS) content-focused portfolio blog starter. Features include dark-mode, installable PWA, SEO, code highlighting, form, CI/CD.
https://github.com/brianruizy/gatsby-minimal-portfolio
dark-mode gatsby gatsby-starter graphql jamstack markdown netlify portfolio pwa react react-bootstrap theme-ui
Last synced: about 2 months ago
JSON representation
👔 JAMstack (Gatsby JS) content-focused portfolio blog starter. Features include dark-mode, installable PWA, SEO, code highlighting, form, CI/CD.
- Host: GitHub
- URL: https://github.com/brianruizy/gatsby-minimal-portfolio
- Owner: BrianRuizy
- License: mit
- Created: 2019-04-09T01:11:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T19:43:37.000Z (almost 2 years ago)
- Last Synced: 2024-10-11T10:53:16.204Z (2 months ago)
- Topics: dark-mode, gatsby, gatsby-starter, graphql, jamstack, markdown, netlify, portfolio, pwa, react, react-bootstrap, theme-ui
- Language: JavaScript
- Homepage: https://gatsby-minimal-portfolio.netlify.app/
- Size: 163 MB
- Stars: 44
- Watchers: 3
- Forks: 9
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Gatsby JS Minimal Portfolio
Blog style portfolio website,
created with Gatsby and hosted on Netlify.
Carefully designed to be minimal and content focused. Don't forget to leave a star ⭐!
## Features
- PWA ready, installable on Android and iOS
- Blog ready, easily add own blog posts
- Toggable dark mode
- Mobile friendly nav-dock, and bottom drawer
- Netlify contact form with seamless [setup](https://docs.netlify.com/forms/setup/)
- SEO ready, option to Add meta description
## Quick Start
Prerequisites include [Node.JS v13](https://www.gatsbyjs.com/docs/tutorial/part-zero/#install-nodejs-for-your-appropriate-operating-system) and [Gatsby CLI](https://www.gatsbyjs.com/docs/tutorial/part-zero/#install-nodejs-for-your-appropriate-operating-system). See Gatsby's [Development Environment Setup](https://www.gatsbyjs.com/docs/tutorial/part-zero/) documentation for more details or issues with initial project installation.
```bash
nvm install 13
nvm use 13
npm install -g gatsby-cli
```
1. **Install Project**
Create new site using `gastby new` command, doing it this way will also install the project dependencies.
```bash
gatsby new gatsby-minimal-portfolio https://github.com/BrianRuizy/gatsby-minimal-portfolio
```
Alternatively, you can manually clone the repository and install dependencies by running ```npm install```.
2. **Start Developing**
Navigate into your new site’s directory and start it up using `gatsby develop` command.
```bash
gatsby develop
DONE - Compiled successful
You can now view Brian-Ruiz-Portfolio in the browser.
http://localhost:8000/
```
## Usage
Using this portfolio website and adding your own content is super simple! Add your respective project markdown-file to the `_data` folder, and Gatsby + GraphQL + Remark does the rest of the work rendering the markdown file to html. Same applies for site metadata, add your own content to `site-meta-data.json`.
See [_data/readme.md](https://github.com/BrianRuizy/gatsby-minimal-portfolio/blob/master/_data/readme.md) for examples on .md syntax, or [brianruizy.com/markdown-help/](https://brianruizy/markdown-help).
## Deployment
[](https://app.netlify.com/start)
Netlify currently has built in support for GitHub. You gain the ability to redeploy the site by pushing the code to the respective repository, with no need to manually rebuild and upload every time you make changes. See Gatsby's [docs](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-netlify/) for more detail.
1. Login to Netlify.com and you will see a `New site from git` button at the top right corner of the screen. Click on it and connect with the same git provider that you used to host your website and authorize Netlify to use your account.
2. Choose your `website repository` and it will take you to deploy settings with the below options.
- Branch to deploy: You can specify a branch to monitor. When you push to that particular branch, only then will Netlify build and deploy the site. The default is master.
- Build Command: You can specify the command you want Netlify to run when you push to the above branch. The default is npm run build.
3. Click on the `Deploy site` button and Netlify will start the build and deploy process you have specified. You can go to the `Deploys` tab and see the process unfold in the Deploy log. After a few moments, it will give you the live site URL, e.g., random-name.netlify.com.
## Credits
This site's Web design was made possible thanks to these awesome packages / plugins!
| Function | Package + Link |
| ------------- | ---------- |
| UI Library | [react-bootstrap](https://react-bootstrap.github.io/) / MaterialUI|
| Dark Mode | [gatsby-plugin-dark-mode](https://www.gatsbyjs.com/plugins/gatsby-plugin-dark-mode/) |
| Syntax Highlighting | [gatsby-remark-prismjs](https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/?=prismjs) |
| UI element(s) | [react-bottom-drawer](https://www.npmjs.com/package/react-bottom-drawer) |
| Icons | [react-icons](https://react-icons.github.io/react-icons/) |
| Fonts | [google-fonts](https://fonts.google.com/), [rfs](https://github.com/twbs/rfs) |