3D Portfolio

A 3D portfolio application built with Next.js and deployed to GitHub Pages. This project leverages React Three Fiber to create a 3D interactive experience in the browser.

Technologies Used

• Next.js: A React framework for production.
• React: A JavaScript library for building user interfaces.
• Three.js: A cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser.
• React Three Fiber: A React renderer for Three.js.
• React Three Drei: A collection of useful helpers and abstractions for React Three Fiber.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.

Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v16 or later)
• npm

Installation

1. Clone the repo

   git clone https://github.com/jsueling/threejs-portfolio.git

2. Install NPM packages

   npm install

3. Run the development server

   npm run dev

   Open http://localhost:3000 with your browser to see the result.

Testing

This project uses two primary frameworks for testing:

• Jest: For unit and component tests.
• Cypress: For end-to-end (E2E) tests.

Running Tests Locally

To run the Jest tests in watch mode:

npm run test

To run Cypress E2E tests, first ensure your development server is running (npm run dev). Then, in a separate terminal, you can either open the interactive Test Runner or run the tests headlessly.

To open the interactive Cypress Test Runner:

npm run cy:open

To run all Cypress tests headlessly in the terminal (as done in .github/workflows/test_and_deploy_next_to_pages.yml):

npm run cy:run

Deployment

This project is set up for continuous deployment to GitHub Pages using a customised GitHub Actions workflow. The workflow is triggered on a push to the main branch. It runs all Jest and Cypress tests, builds the Next.js application, exports it as a static site, and deploys it.

Acknowledgements

• Thanks to JasperTobias for his Low Poly Earth model.