Portfolio

Personal portfolio website created to showcase my projects and technical skills. Initially created as a static HTML website, the website has experienced multiple upgrades over the years including migration to PHP, Create React App, and most recently Next.js.

Tech Stack

• Language: TypeScript
• Frameworks: Next.js, React
• CSS Framework: TailwindCSS
• Formatting: Prettier, EditorConfig
• Linting: ESLint
• Testing: Testing Library, Jest, Cypress
• Deployment: Vercel
• CI/CD: GitHub Actions
• Analytics: SplitBee, Cloudflare
• Other: Cloudflare

Scripts

Dev Server

The project is built upon the Next.js framework. The development server can be run with the following command allowing hot-code reloading, error reporting, and more. By default the website will run at http://localhost:3000.

npm run dev

Linting

Linting of the project is achieved using ESLint.

npm run lint

Build

To create the production-ready build of the website run the following command. The build files will be optimised, compressed. Furthermore the file size of each route and how each route will be rendered is logged.

npm run build

Unit Tests

The portfolio uses Jest as the test runner for unit tests. Each component has a corresponding unit tests including snapshots saved in the format *.test.tsx or *.test.ts. To run all unit tests, run the following command:

npm run test:ci

To run all unit tests whilst updating unit test snapshots:

npm run test:ci -- -u

e2e Tests

Cypress is used to run end-to-end tests of the website in a browser. Such tests include the navigation, footer, and contact form. For Cypress to work, the dev server must be running on port 3000 with npm run dev. To run Cypress in a browser run the following command:

npm run e2e

To run Cypress on the command line run:

npm run e2e:headless

Screenshots