Experience the synergy of cutting-edge web technologies with my portfolio website built using ReactJS, ThreeJS, and TypeScript. Immerse yourself in a visually stunning and interactive showcase that seamlessly combines the power of React for dynamic content, ThreeJS for 3D graphics, and TypeScript for enhanced code quality and reliability.
- Clone the repository:
git clone https://github.com/ikramdeveloper/threejs-portfolio.git - Navigate to the project directory:
cd threejs-portfolio.git - Install dependencies:
npm install - Set up the required environment variables. Create a .env file in the root directory and add the necessary variables. You can use the .env.example file as a template.
- Run the project:
npm run dev
src/assets: Contains the icons & images files.src/components: Shared and page based files for different components.src/config: Constants and configuration variables to use in this project.src/data: Static content to serve your website.src/hooks: Custom hooks containing business logic for your pages.src/models: 3d models with all logic to represent them in required manner.src/pages: Files to serve all your app's routes.src/services: Contains the logic for api's calls.src/utils: Contains all utility functions.src/index.css: Custom classes created with tailwind css.
This project makes use of the following technologies:
- ReactJS: A JavaScript library for building web applications.
- React ThreeJS: ThreeJS react package to create 3d models.
- TypeScript: Superset of JavaScript to enhance readability.
- Tailwind CSS: Utility-first CSS framework.
- React Toastify: A package to show toasts.
- EmailJS: A JavaScript package for sending emails from web.
- Free 3D models: sketchfab.com
- Load GLB file in three.js model - gltf.pmnd.rs
Built with the help of this youtube tutorial: JS Mastery
Contributions are welcome! Feel free to open issues or submit pull requests to improve the project.
This project is licensed under the MIT License.
👋 Hello, I'm Ikram Ul Haq - Web Developer & Programmer
🚀 Follow Me: