🌎 Portfolio using React
Summary
I upgraded my portfolio site because I have learned a lot of new React skills during my time at Suncorp thanks to Pluralsight. I’ve also come to love the idea of minimal configuration wherever possible. Using React, Travis and Github pages I eliminated many of the maintenance overheads of the previous implementation including:
- Upload of artifacts to S3 buckets (now artifacts are built and deployed from source using Travis)
- Minimal configuration web hosting using Github Pages
- Inconsistency between development and production environments using React
A big thanks to Mike Villis for providing a very easy to follow process. Take a look at his article on how to set up your own Simple React Site for free!
View the full README and source for lachlanmckay.com on Github
Hosting Tech
| Technology | Use |
|---|---|
| Github | Source code hosting |
| Github Pages | Free static file hosting |
| Google Cloud Storage | Media file hosting (images/video/pdfs etc.) |
Development Tech
| Technology | Use |
|---|---|
| React | Facebook favoured frontend js library |
| Redux | State management that works well with React |
| Bootstrap | Responsive styling |
| Travis | Free automated ci/cd to github pages |
| Three.js | Javascript 3D library - used for the 3D eye on homepage |
| Font Awesome | Social media buttons without having to host the images |
| Masonry | Layout beautifier. Used with image galleries |
| Real Favicon Generator | Creating favicon files for many platforms |
| Parallax | Moving background images |
| ESLint | Cleans your source code |
| Prettier | Makes your source code pretty |
Retrospective
What went well?
- React & javascript more flexible than previous Hugo and Jekyll implementation - I could achieve what I was trying to do without thinking as hard
- React development experience much nicer than Hugo (automatic hot reloading with no config required, quick project setup etc.)
- Continuous integration / delivery with Travis means no uploading files to AWS buckets
- Github pages automatically handles web hosting configuration
What could be improved?
- Migration of post data and content from previous implementation to current was tedious and took a while. This could be separated out into a 3rd party such as Medium
- Post media (images / videos) are still somewhat manually managed using Google Cloud Storage. I am considering moving to a CMS such as Sanity.io
What still puzzles me?
- Would like to learn about the benefits of React server side rendering and when it should be used. I assumed client side rendering would be sufficient for this project