SartHak-0-Sach / 3D_airplane_portfolio_website

An interactive 3D portfolio site with an airplane flying around an island, showcasing professional info in a gamified manner. Built with Three.js, React, Tailwind CSS, TypeScript, and Vite. Works on both desktop and mobile.

3D Airplane Portfolio Website

Welcome! 👋

Table of contents

• Overview
  • The challenge
  • How to setup the project
  • Screenshot
  • Links
• How to run
• How to build
• How to preview the build
• How to host
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Explore a gamified portfolio website with an airplane flying around an island
• View checkpoints with information about me
• Experience an interactive layout where they can control the plane using arrow keys
• Access separate pages showcasing the about section and past projects
• Enjoy a responsive design for both PC and mobile devices

How to setup the project

To set up the project locally, follow these steps:

1. Clone the repository using GitHub Desktop or Git Bash:

   git clone https://github.com/SartHak-0-Sach/3D_airplane_portfolio_website.git

2. Navigate to the project directory:

   cd 3D_airplane_portfolio_website

Screenshot

Links

• Solution URL: Link to this repo
• Live Site URL: Live site URL

How to run

Note: You need Node.js and npm installed on your machine.

npm install
npm run dev

How to build

npm run build

A dist folder should be created.

How to preview the build

npm run preview

How to host

Here is how to deploy your project: How to deploy the project

My process

Built with

• Three.js
• React
• Tailwind CSS
• TypeScript
• Vite

What I learned

Working on this project allowed me to explore advanced 3D rendering techniques with Three.js and deepen my understanding of React and TypeScript.

Continued development

I aim to enhance my skills in 3D graphics and animation, and further integrate advanced interactivity features in web projects to create engaging user experiences.

Useful resources

• Three.js Documentation - Essential for learning about 3D graphics and rendering.
• React Documentation - Comprehensive guide to React.
• Tailwind CSS Documentation - Great resource for utility-first CSS framework.
• TypeScript Documentation - Documentation for TypeScript programming language.
• Vite Documentation - Guide to Vite, a build tool.

Author

Sarthak Sachdev

• Website - Sarthak Sachdev
• LeetCode - @sarthak_sachdev
• Twitter - @sarthak_sach69

Acknowledgments

Special thanks to the vast knowledge base available on YouTube and Stack Overflow, where I learned many of the concepts and got my doubts cleared.

Got feedback for me?

I love receiving feedback! I am always looking to improve my code and take up new innovative ideas to work upon. So if you have anything you'd like to mention, please email 'hi' at saarsaach30[at]gmail[dot]com.

If you liked this project, make sure to spread the word and share it with all your friends.

Happy coding! ☺️🚀