Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zavierand/zav.dev


https://github.com/zavierand/zav.dev

express mongodb mongoose nodejs portfolio-website reactjs tailwind three-js vite

Last synced: 2 days ago
JSON representation

Awesome Lists containing this project

README 

        
# Welcome

Welcome to my portfolio website! This is a full-stack project, where the front-end was bootstrapped with ReactJS and ThreeJS and the backend was implemented in ExpressJS and NodeJS with a MongoDB database. 



I wanted to make this website do more than just showcase my projects, but also showcase my full-stack development skills AND my personality - hence, the theme for this website being "Studio Ghibli", one of my favorite anime studios of all time! Let's see if y'all can catch all of the Ghibli references I made throughout the website!



# Overview

This project was bootstrapped with ThreeJS, ReactJS, and TailwindCSS. Again, I wanted to make this website do more than just showcase my work, but also showcase my personality! Hence, the theme of my website is "Studio Ghibli"!



I implemented the backend of the website with NodeJS and Express, while using MongoDB for data storage reasons! I wanted to take a full-stack approach with this website to demonstrate the different technologies that I know, while also managing all of the data on the website - making the code simpler to read, easier to follow, and easier to debug.



# Front-end

Again (lol), the project was bootstrapped with ThreeJS, React and TailwindCSS. I decided to go with a Ghibli-esque theme for my resume to display some of my personality! Initially, I wanted to make it car-based, but I did not want to spend too much time learning ThreeJS.



This project also contains a few dependencies - React Three Fiber, React Three Drei, React Vertical Timeline, and React Router DOM. After spending about a week and half reading ThreeJS documentation, I decided to also read some documentation on React Three Fiber and React Three Drei. As well as watch a few tutorials and build some stuff before building the front-end out! I will provide a link to the most helpful resources I used in project.



As for the 3D models, these were all free - obtained from "Sketchfab". Huge shoutout to all of the artists who posted their work for free on Sketchfab - as this project would not have been done without their help! In the source code for [each model](./ui/src/models), each ".jsx" has credits to all of the artists who's work I used. However, I will also provide credtis to all of the artists in a separate section at the bottom of the README.md file.



Again, thank you all!



# Backend

I implemented the backend of the website using NodeJS and Express, with the database being implemented using Mongoose (MongoDB). In the backend, I am currently storing my projects. In a previous version of this website, I had included all information, from the "About Me" to the "Projects" page in the backend - handling the storage of data such as my projects, bio, and experiences. 



For this project I wanted to keep it simpler and just start with keeping the projects in the database to get this done, for now. Future steps include learning how to use the buffer in mongoose to store images in a database, as well keeping all data on the backend!



# Deployment

For the front-end, I wanted to keep it simple and deploy the client-side app to [Netlify](). For the backend, I deployed the Express App to AWS EC2. It was the first true app I've deployed to an IaaS. But during the semester, I had to deploy my full-stack clone, ZZENSE, to my school server, so a lot of the same protocols revolving around SSH, TCP, and virtual machines applied to this same project.



# Credits

[Stylized Clouds](./ui/src/assets/3d/stylized_clouds.glb)



"Stylized clouds" (https://skfb.ly/ouKyu) by lavakongen is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).



[Kiki and Jiji!!!](./ui/src/assets/3d/kiki_and_jiji.glb)



"Kiki and Jiji" (https://skfb.ly/onSzC) by TonyWony is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).



[Spirited Away](./ui/src/assets/3d/spirited_away.glb)



"Spirited Away" (https://skfb.ly/6WY7v) by Nomeda Repsaite is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).



Huge thank you to these artists!!!



[Ponyo Boat](./ui/src/assets/3d/3d_daily_ghibli.glb)



"3D Daily: Ghibli" (https://skfb.ly/6TMSW) by ina_tomecek is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).



# Resources

[3D Portfolio](https://www.youtube.com/watch?v=FkowOdMjvYo&list=PL6QREj8te1P7rEwj_IzsoLzQ-FBbZ6lqP&index=2&t=5128s):



[Javascript Mastery](https://www.youtube.com/@javascriptmastery) has some of the best videos on learning Javascript! Used some of his videos to help cram for my full-stack development final lol.



[ThreeJS Documentation](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene):



Super clear and cohesive. Lots of examples as well - both in terms of projects and coding snippets with renders!



[React Three Fiber Documentation](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction):



Documentation for R3F! Really easy to get through and lots of examples.



[React Three Drei](https://www.npmjs.com/package/@react-three/drei):



Super easy to get through. Super short and straightforward.



[React Verical Timeline](https://www.npmjs.com/package/react-vertical-timeline-component):



Super simple dependency to bootstrap some clean event timeline necessary for your work!