Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

ikramdeveloper/threejs-portfolio

Repository files navigation

Project Intro

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.

Getting Started:

  1. Clone the repository: git clone https://github.com/ikramdeveloper/threejs-portfolio.git
  2. Navigate to the project directory: cd threejs-portfolio.git
  3. Install dependencies: npm install
  4. 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.
  5. Run the project: npm run dev

Project Structure:

  • 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.

Technologies Used

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.

Resources:

Acknowledgement:

Built with the help of this youtube tutorial: JS Mastery

Contributing:

Contributions are welcome! Feel free to open issues or submit pull requests to improve the project.

License:

This project is licensed under the MIT License.

Author Links

πŸ‘‹ Hello, I'm Ikram Ul Haq - Web Developer & Programmer

β˜• Buy Me A Coffee

πŸš€ Follow Me:

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /