My web developer portfolio

Live website: https://www.vnascimento.com
This is where I share my favourite personal projects, built using:

• Gatsby.js (React.js & graphQL)
• CSS3 (Flexbox)

Goal:

• To create a responsive and clean website that is fast and easy navigate, where I can showcase my web dev projects.
• To make it very easy for me to alter and update content, to achieve this I used React components to reduce code repetition, and Gatsby's content mesh in order to query project details from markdown files - this way I only have to create and edit the markdown files whenever there's a change to my projects, instead of having to make an individual page for every project.

Why Gatsby.js:

• Less repetition and easy to update content by using React components
• Provides quick load times and better SEO than just React.js, due to static site generation at build time.
• Gatsby combines all our data sources into a unified graphQL layer, making it much easier to access. for this project my data comes from individual markdown files for each project.

Development:

• Started with Gatsby's barebones hello-world starter template, in order to generate all essential files for a Gatsby project.
• Every individual page is wrapped by a custom Layout component, this component contains elements which remain consistent in every page, including: some styles, content borders, navigation bar and footer.
• Styling: used global.css for the elements in the Layout component, and used CSS modules to style pages individually. Flexbox and media queries were used to achieve a responsive design.
• Added gatsby-source-filesystem plugin so that Gatsby can access the file system, where it will find the data we want to query (markdown files for project data, and image folder for project images)
• Used a graphQL query in the index.js page inside Projects, to get all Markdown files containing project data, it sorts them by the priority property and then displays the relevant information for each project. project-details.js inside Templates folder also makes use of the graphQL layer.
• gatsby-node.js: runs at build time inside a Node environment. This is where we fetch data (project slugs) with graphQL and generate our project details pages with that data, by passing it on to the project-details.js template file as a query variable. project-details.js can then use that query variable inside a graphQL query to get details such as content and title from each project markdown file.