This portfolio showcases a spacecraft navigating through a dynamic 3D environment, highlighting a collection of diverse projects. Users can seamlessly navigate between projects using next and previous arrow buttons, with the spacecraft performing captivating manoeuvers during each transition. Upon page load, a randomized sequence of manoeuvers adds an element of surprise. The background features a starfield that responds to the user's cursor or finger on mobile devices, gracefully moving aside to provide an immersive viewing experience.
Here are some visual representations of our interactive 3D portfolio project, including GIFs and images that highlight its features and functionality.
GIF: Navigating Between Projects
Description: This GIF demonstrates the spacecraft's smooth maneuvers as users navigate between different projects using the arrow buttons. To view some of my other projects just tap "Click me!" on mobile, or click the GitHub icon on larger devices.
GIF: Interactive Background Stars
Description: A GIF showcasing the dynamic background with interactive stars that respond to the user's cursor or touch on mobile devices, providing an immersive experience.
These screenshots and GIFs offer a glimpse into the various aspects of our interactive 3D portfolio. Feel free to explore the project further to experience it in action.
Vite is used for our project, and our testing suite is located in the tests
directory at the root of the project. The testing framework used is Vitest.
All tests are run automatically before code is committed with pre-commit hooks. See husky for details.
To run the tests, follow these steps:
-
Open a Terminal: Open a terminal window in your project directory.
-
Execute Tests: Use the following command to run your tests using Yarn:
yarn test
- Add a comet
- Add a planet/moon that rotates in the background
- Support for localisation
- Create the scene using ThreeJS
- De-prioritise the ThreeJS relative to the background canvas (
pointer-events: none;
)
- De-prioritise the ThreeJS relative to the background canvas (
- Craft
- Hover
- Perform turns
- Perform manoeuvres
- Dock
- Should move around the scene a little
- Background
- Add stars that follow the mouse
- Stars move faster when the craft is performing a manoeuvre and slow down when the manoeuvre is coming to an end
- Stars stop following the mouse when the mouse leaves the background canvas
- Misc
- Handle resize events for all elements
- Make the previous/next buttons smaller on mobile
- Fix the icons for the previous/next buttons
- Create a details card CSS element for these projects
- Add the details of at least 3 projects
- Choose a custom font to fit the theme (Poppins)
- Change favicon
- Add
touchstart
andtouchend
event listeners
The Poppins font is used.
- Jet by jeremy CC-BY via Poly Pizza
- International Space Station by Poly by Google CC-BY via Poly Pizza
- Comet by Poly by Google CC-BY via Poly Pizza
- Planet by Quaternius
- Moon by Poly by Google CC-BY via Poly Pizza