The portfolio website of Javier Páez.
Inspired by Brittany's portfolio website.
Feel free to fork this repository, but please give proper credit by linking back to both my work and Brittany's. I introduced a lot of changes and improvements that require attribution. Thanks!
Please also note that I did not build this site with the intention of it being a starter theme, so if you have questions about implementation, please refer to the Gatsby docs.
-
Run the docker-compose file
docker-compose up
-
Install the Gatsby CLI
npm install -g gatsby-cli
-
Install and use the correct version of Node using NVM
nvm install
-
Install dependencies
yarn
-
Start the development server
npm start
-
Generate a full static production build
npm run build
-
Preview the site as it will appear once deployed
npm run serve
The color variables are all defined in src/styles/variables.js.
| Color | Hex |
|---|---|
| Navy | #0a192f |
| Light Navy | #112240 |
| Lightest Navy | #233554 |
| Slate | #8892b0 |
| Light Slate | #a8b2d1 |
| Lightest Slate | #ccd6f6 |
| White | #e6f1ff |
| Red | #e85a4f |
| Red tint | #f6bdb9 |
The website has been optimized for performance, accessibility, best practices, and SEO. The scores are as follows:
Some notes about the markdown files:
-
If you want to use iframe elements (e.g., YouTube videos), it is recommended to load them lazily (as they can drain a lot of internet data) and provide the height and width (so that Gatsby can scale them responsively). For example:
<iframe title="Lebron James ends Jason Terry's life with an alley oop dunk." class="lazyload" type="text/html" width="640" height="360" data-src="https://www.youtube.com/watch?v=V-QTiByTKaI" frameborder="0" allowfullscreen> </iframe>