Photography Portfolio

A website for my photography portfolio, utilizing HTML, CSS, GastbyJS, React, GraphQL, JavaScript, and Node.js, which I showcased to obtain media passes to shoot at Seasons Festival and UBC Block Party, which are music festivals with tens of thousands and thousands in guest attendances, respectively.

Have an event, product, or something you want to capture? Send me a message if you would like to work together.

🚀 Usage

1. Open the Photography Portfolio site.

   Link: https://renchris.github.io/photography/

2. Have a look at my photoshoots.

   Click a featured photo to view the complete photo set.

3. Reach out to work together!

   Check the contact page for how to reach out. Send me a message and let's work together!

🧐 What's inside?

A quick look at the top-level files and directories you'll see in this Gatsby project.

src
├── components
|     ├── footer.js
|     ├── fooder.module.scss
|     ├── head.js
|     ├── header.js
|     ├── header.module.scss
|     ├── layout.js
|     └── layout.module.scss
├── fonts
|     ├── BebasNeue-Regular.eot
|     ├── BebasNeue-Regular.ttf
|     ├── BebasNeue-Regular.woff
|     └── BebasNeue-Regular.woff2
├── logo
|     └── camera.svg
├── pages
|     ├── 404.js
|     ├── contact.js
|     ├── index.js
|     ├── work.js
|     └── work.module.scss
├── posts
|     ├── dv-exotic
|     ├── lost-royalty
|     └── venue
├── styles
|     └── index.scss
└── templates
      └── work.js

1. /src: This directory will contain all of the code related to what you will see on the front-end of the site (what you see in the browser) such as the site header or a page template. src is a convention for “source code”.

2. /components: This directory contains the component files that together make up the webpage. It contains both .js files that uses GraphQL to query data to be used in the JSX and .scss files for formatting and styling, for each component.

3. camera.svg: This file is the project logo: the aperture of a camera lens. This is used for the favicon and README.

4. /pages: This directory contains the project JavaScript files for each of pages of the website.

5. /posts: This directory contains the directories for each post of the Work page. Within each post directory is the respective Markdown file and the photos it uses.

6. index.scss: This file contains the general styling of the website and the font selected to be used for the website: Bebas Neue Regular.

7. /templates/work.js: This file is the project Javascript file for each of the blog posts with it's complete set of photos (once you've clicked into them). This is not to be confused with /pages/work.js which is the JavaScript file for list blog posts with it's featured image and title.