dibb.ca

dibb.ca is my personal porfolio website. Built with React. Background animation created with Blender.

Getting Started

Fork and clone the repository

Change to directory

cd dibbca

Install dependencies

npm install

Run the app in development mode

npm start

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

This project was deployed using Netlify

create account
connect to git provider - authorize netlify to access your github, then select the repository to deploy - Netlify will build and deploy the site each time you push to the repository/specified branch in question
add environment variables - .env file is ignored when pushing to github, so environment variables need to be declared in Netflify
from Netlify dashboard
- Settings > Build & deploy > Environment > Environment variables
- add key: GENERATE_SOURCEMAP and value: false
- more info on adding environment variables in Netlify available here

React
React Spring - used for creating cool parallax effect
React Router - used to be able to show different pages and be able to link to them, e.g. can link directly to dibb.ca/resume
React-pdf - for showing a pdf of resume
- resume pdf has links in it - why I used a pdf and not an image
React Media - used for showing a different version of the site to mobile/desktop users
React Icons