Hi! I recently decided to upgrade my portfolio, and so I wanted to share it with the community in case anybody is interested on using it as a template.
Live version: https://mallols.dev
I've followed a mobile-first approach, based on a modern stack that incorporates some of the most popular technologies these days. The project runs on top of Create React App, the official app bootstrapping tool offered by Facebook.
- HTML
- CSS
- Sass
- JavaScript
- React
- TypeScript
The setup is quite standard. Simply checkout the repo, install the dependencies with npm install
and start the server with npm start
.
Even though the test coverage isn't any impressive at all, at least the project incorporates most of layers testing of the testing pyramid, for reference purposes:
- Linting with ESLint (
npm run lint
). - Unit & component testing with Jest and React Testing Library (
npm run test:unit
). - End to End testing with Cypress (
npm run test:e2e:local
). - Visual Regression Testing with BackStopJS (
npm run test:visual:test
).
The project integrates with CircleCI to ensuring the tests run smoothly before deploying the changes to Vercel.
The workflow runs as follow:
- Run linting, Testing and TypeScript checks first, trying to parallelise some of the steps for performance reasons.
- If everything is OK, then deploy the changes to a UAT environment (https://portfolio.rmallols.now.sh/).
- If the changes apply to the master branch, request manual acceptance.
- Once the changes are approved, the version is dumped and they are deployed to the PRD environment (https://mallols.dev).
- ESLint doesn't run in watch mode locally.
- Visual Regression Testing runs fine locally, but it doesn't on CircleCI. That's because the official Orb runs btoh the "Generate" and "Test" tasks sequentially - but we'd only want to run the latter!
Feel free to drop me a message at [email protected]
This project is MIT licensed.