Personal Portfolio Website
Project Goals
The goal of this project is to create a personal portfolio website that uses 3D models and animations to make it more visually appealing. I would like to have at least one hand animated model on the website and a few static models which react to user movements (scrolling or moving a mouse). I will use following tutorials as inspiration and guidance:
- Build a Mindblowing 3D Portfolio Website - FireShip (https://www.youtube.com/watch?v=Q7AOvWpIVHU)
- Create a Room Portfolio with Three.js and Blender - Andrew Woan] (https://www.youtube.com/watch?v=rxTb9ys834w)
Technologies
- SvelteKit (https://kit.svelte.dev/): a framework for building a website.
- Three.js (https://threejs.org/): library for rendering 3D models in browser.
- Blender (https://www.blender.org/): 3D modeling software for modeling, animation and texturing.
Foreseen difficulties
There will definitely be a lot of difficulties, but it is hard for me to foresee them. I will spend a lot of time figuring how to write code for frontend and how to style a page using CSS since I don't have that much experience with it. I am pretty confident in my ability to make low poly models and texture them, but animation could pose a problem.
Milestones
Milestone 1 (27.02)
- Create a rough outline of a website without styling. Initiate SvelteKit project. (3 hours)
- Render a simple 3D object with texture on it to learn how to use Blender and Threejs. (5 hours)
Milestone 2 (13.03)
- Model a 3D animated scene with robot reading a book. This will be used in Interests section of the personal website, where one of the interests will be machine learning. (7 hours)
Milestone 3 (27.03)
- Create navigation bar with buttons that scroll the page to different sections. (3 hours)
- Create Interests, Experiences and Contact sections of the page. Setting up the styling without final content. (2 hours)
- Figure out how to resize scene on window resize. (2 hours)
- Bonus: Add shadow catcher to robot scene to display shadows on the ground.
I added a shadow catcher and add the second animation when robot model is clicked. I also added navigation bar with buttons that lead to different section. I added Experiences and Contact section. CSS does not react well on different screen sizes and will need to be fixed in the future.
Milestone 4 (10.04)
- Create 3D model for Computer Graphics interest. Not really sure what will I model. Suggestions welcomed. (7 hours)
- Deploy website. (3 hours)
I modeled a stone giant attacking ancient greek city. Even though I made everything low poly, I still used more than 5.000 triangles which is about thousand more than for the robot. I have also deployed website on GitHub pages and it is available here. Please make sure to resize window to half screen since the CSS does not adapt to screen size yet.
Milestone 5 (24.04)
- Write CSS for different screen sizes. I want to have collapsable navigation bar and 3D scenes above text on mobile devices. (12 hours)
Milestone 6 (08.05)
- Add DRACO compressed models for faster loading on web. (3h)
- Correctly resizing of the canvas on window resize. (4h)
- Rotate scene a little when moving a mouse. (5h)
- Bonus: Add dark mode. (3h)
- Other bugs.
At the end I didn't use DRACO compression, because it took more time to load the models, since I have no textures on my models and the .gltf asset files were relatively small. I added another interest "Molecular Biology" with 3D model of bacteria getting attacked by bacteriophages. I added another section called "Projects" where I displayed projects I have done with links to source code.
The final version of the website is available here: https://jurevito.github.io/website-portfolio/.