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.