Gatsby Minimal Portfolio by brianruizy
by Brian Ruiz
This theme is a mobile-first designed starter kit that works perfectly for a minimal portfolio website.
- 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
- SEO ready, option to Add meta description
Create new site using
gastby newcommand. This command will also install the project dependencies.gatsby new gatsby-minimal-portfolio https://github.com/BrianRuizy/gatsby-minimal-portfolio
Navigate into your new site’s directory and start it up using
gatsby developcommand.gatsby developDONE - Compiled successfulYou can now view Brian-Ruiz-Portfolio in the browser.http://localhost:8000/
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
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 for more detail.
Login to Netlify.com and you will see a
New site from gitbutton 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.
website repositoryand 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.
Click on the
Deploy sitebutton and Netlify will start the build and deploy process you have specified. You can go to the
Deploystab 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.
This site's Web design was made possible thanks to these awesome packages / plugins!
| Function | Package + Link | | ------------- | ---------- | | UI Library | react-bootstrap | | Dark Mode | gatsby-plugin-dark-mode | | Syntax Highlighting | gatsby-remark-prismjs | | UI element(s) | react-bottom-drawer | | Icons | react-icons | | Fonts | google-fonts, rfs |