RG-Portfolio
Kick-off your Portfolio website with RG-Portfolio gatsby starter. We have used Gatsby + Contenful.
Live Demo:
https://rg-portfolio.netlify.com/
Feature:
- Blogs listing with each blog post.
- Contact form with Email notification using formspree.io.
- Photos and Blogs page listing.
- Different types of sections like About, Service, Blogs, Work, Testimonials, Photos, and contact.
- All settings manage from contentful for example Header Menu, Homepage sections, blogs, and photos, etc.
- Social share in blog details pages with comment ( Disqus ).
- PWA
🚀 Quick start
-
Setup this site.
Use the Gatsby CLI to Clone this site.
# Clone this Repositories gatsby new rg-portfolio https://github.com/Rohitguptab/rg-portfolio.git
-
Setup Contentful Models
Use contentful-cli to import the models from contentful-data.json
contentful space --space-id <CONTENTFUL_SPACE_ID> import --content-file contentful-data.json
Checkout my below blog how to Import and Export data from ContentFul
https://rohitgupta.design/import-and-export-data-with-contentful-cli
-
Start developing.
Navigate into your new site’s directory and start it up.
cd rg-portfolio npm install gatsby develop
-
Setup your Own Configure Projects.
Enter your own key
- spaceId = Key
- accessToken = Key
-
Open the source code and start editing!
Your site is now running at
http://localhost:8000
!Note: You'll also see a second link:
http://localhost:8000/___graphql
. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.Open the
rg-portfolio
directory in your code editor of choice and editsrc/pages/index.js
. Save your changes and the browser will update in real time!
🎓 Learning Gatsby
Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:
-
For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
-
To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.