Portfolio Web App - Tino Kaartovuori

This project is in "Work in Progess" state

Link for the site will be provided when the project is ready to share

Welcome to my personal portfolio project!

This project is built using the following technologies:

• Nuxt.js 3: A framework for creating server-rendered Vue.js applications
• TypeScript: A typed superset of JavaScript that adds optional static typing to the language
• TailwindCSS: A utility-first CSS framework
• Three.js: A JavaScript library for creating 3D animations and visualizations
• Docker: A platform for developing, shipping, and running applications

Commands

• npm run build: Builds the project for production
• npm run dev: Runs the project in development mode with hot-reloading enabled
• npm run generate: Generates a static version of the site for deployment
• npm run preview: Runs the project in development mode and opens it in a browser
• npm run postinstall: Runs automatically after installation to prepare the project for development
• npm run format: Runs Prettier and formats all project files to correct style

Docker Development Setup

To set up this project with Docker, first, make sure you have Docker installed on your machine. Then, you can build the Docker image with the following command:

docker-compose up

With this setup, any changes you make to your project files on your local machine will be immediately reflected inside the Docker container, and your application will automatically reload with the new changes.

Usage Without Docker

To run this project locally, clone the repository and install the dependencies by running: npm install

Then you can use the commands listed above to run the project in development mode or build it for production.

Progress so far

26.1.2023

Added some nice sticky UI elements. Three.js scene will be added as background later and on top of that there will be scrollable HTML content. The scroll will be synced between the Three.js scene and HTML content and it will make a very cool effect.

Z-layer: Sticky UI Elements <- ( HTML Content <- Three.js Scene ) < These will have synced scroll behaivour

1.2.2023

• Implemented dark and light mode (TailwindCSS and @nuxtjs/color-mode)
• Added test canvas
• Used smooth-scrollbar and gsap ticker to make custom scrolling behaviour
• fix: Reimplemented animated texts with gsap

4.2.2023

• Replaced the previous canvas with Three.js version and made a prototype rounded rectangle in the scene that moves with the scroll
• Made a fun custom scrollbar track
• More responsive design
• fix: Reimplemented toggle switch with gsap

7.2.2023

• Replaced orthographic camera with a perspective one
• Refactored Three.js scene, camera and renderer to one scenario object
• Made prototype components that enable mapping Three.js object positions to the HTML element positions
• ^ Mapped some test images and objects to HTML elements
• Tested some shaders to make images react to scrolling
• Added some a few new colors

28.5.2023

• Dockerization of the application

Other

License

This project is licensed under the MIT license. Please see the LICENSE file for more information.

Author

This project was created by Tino Kaartovuori

Enjoy!