As the title says, this is my personal website which acts as my portfolio and CV / Resumé;
My motivation in creating this was to gain a deeper understanding of modern web development practices.
-
dependency management with webpack, including code splitting and bundling.
-
TypeScript, which is a superset of JavaScript and includes strict type-checking.
-
Progressive Web Apps which allows for caching and offline viewing.
-
React Testing Library which is what I use to unit tests components.
-
Static site generation. I wrote a script to generate static HTML for all pages so they can be served statically alongside assets. A bundles JS file rehydrates everything on load.
-
Docker / Compose is used to test builds locally before I upload them. I have a self signed SSL cert so I can use HTTPS locally, which I created with the help of this excellent guide.
-
I implemented a content rendering engine that reads in a tree of items from JSON files, then chooses the correct component to render as the JSON is fetched.
-
For state management, I use Redux/Saga. This makes managing complex async functionality much easier and readable.
To get this running, you should have an up to date stable version of NodeJS. I am using 18.17.0. You should also have the most up to date version of Yarn installed globally.
$ git@github.com:matfin/personal-website.gitto clone this to your local machine$ cd personal-website/$ yarnwill install dependencies$ yarn devwill build the server and client and watch for changes$ yarn deploywill generate the site as a static bundle, which is output to the/outdirectory.
On all modern web browsers both mobile and desktop even with offline capability (with service workers). Internet Explorer is not supported.
For CI (continuous integration), a very popular and well documented tool called CircleCI is used.
I have a script that generates all content and assets, then a CircleCI config that deploys this to a remote server.
I have documented these in the Tech Roadmap and will keep working on them.