- Project Summary
- Updates Summary
- Learning Resources
- Using Gatsby
- File and Directory Organization
- Site Features
JessicaGAbejar.com is my personal website, built using Gatsby.js with React.js, GraphQL, and Sass/SCSS. It highlights all my major interests across various disciplines including dance, wellness, events, writing, and tech.
Features include fast site performance, reusable components and design elements, optimized images, content from multiple data sources, SEO, and offline support.
To see how I built this website in detail from design to development and takeaways, take a look at the process write-up for JessicaGAbejar.com.
This project is hosted on Netlify.
This is a summary of major site updates:
- 6/17/2019: Tech write-ups all added. Images fixed by uploading directly to Netlify instead of using the build command.
- 6/6/2019: First deployment. Site includes all main pages (home, dance, wellness, events, writing, tech, and about) and page templates for tech spotlight & project created.
I used this project as an opportunity to learn Gatsby, React, and GraphQL. I used the following tutorials and documentation to help build this site:
- Gatsby official tutorial
- Gatsby official docs
- Gatsby Plugins official docs
- Andrew Mead's The Great Gatsby Bootcamp Tutorial
This site was created using Gatsby.js's gatsby-starter-hello-world, which is the most basic of Gatsby boilerplates or starters. I also used the following starters as a reference in constructing pages and installing dependencies and plugins:
Dependencies and Plugins
The following is a list of dependencies and plugins for this site. For more info on Gatsby plugins, check out the Gatsby Plugins official docs.
File and Directory Organization
Included are the following top-level files and directories. For more information on these files, please take a look at gatsby-starter-hello-world.
. ├── node_modules ├── src ├── static ├── .gitignore ├── .prettierrc ├── gatsby-config.js ├── gatsby-node.js ├── LICENSE ├── package-lock.json ├── package.json └── README.md
src directory is further broken down into the following directories:
. ├── src │ ├── components │ ├── content │ ├── images │ ├── pages │ ├── styles │ └── templates
- Components: Reusable React components.
- Content: Markdown and JSON content files and related images.
- Images: Icon and favicon.
- Pages: Main pages:
- Styles: Global sass files including variables.
- Templates: Page templates for dynamically rendered blogposts and project pages.