Welcome to our guide on how to build a stunning 3D portfolio utilizing the power of React and Three.js, all while harnessing TypeScript for better development practices. This modern approach is perfect for showcasing your projects in a visually compelling way.

Table of Contents

• Folder Structure
• Getting Started
• Screenshots
• Tech Stack
• Stats
• Contribute
• Acknowledgements
• Learn More
• Deploy on Netlify

Folder Structure

The folder structure for this application is organized to maximize efficiency and ease of navigation:

3d-portfolio
  - public
    -- desktop_pc
    -- planet
    -- apple-touch-icon.png
    -- favicon.ico
    -- favicon16.png
    -- favicon32.png
  - src
    -- assets
        --- company
        --- projects
        --- socials
        --- tech
        --- testimonials
        --- index.ts
    -- components
        --- canvas
        --- about.tsx
        --- banner.tsx
        --- contact.tsx
        --- experience.tsx
        --- feedbacks.tsx
        --- footer.tsx
        --- hero.tsx
        --- index.ts
        --- loader.tsx
        --- navbar.tsx
        --- tech.tsx
        --- works.tsx
    -- constants
        --- index.ts
    -- hoc
        --- index.ts
        --- section-wrapper.tsx
    -- utils
        --- lib.ts
        --- motion.ts
    -- app.tsx
    -- env.d.ts
    -- index.css
    -- main.tsx
    -- styles.ts
  - .env
  - .env.example
  - .gitignore
  - index.html
  - package-lock.json
  - package.json
  - postcss.config.cjs
  - tailwind.config.ts
  - tsconfig.json
  - vite.config.ts

Getting Started

Follow these straightforward steps to get your portfolio up and running:

1. Ensure **Git** and **NodeJS** are installed on your computer.
2. Clone this repository to your local machine.
3. Create a .env file in the **root** directory.
4. Include your EmailJS configuration in the .env file:

VITE_APP_SERVICE_ID=XXXXXXXXXXXXXXXX
VITE_APP_TEMPLATE_ID=XXXXXXXXXXXXXXXX
VITE_APP_EMAILJS_KEY=XXXXXXXXXXXXXXXX
VITE_APP_EMAILJS_RECIEVER=your@email.com

5. Locate your EmailJS Service ID, Template ID, and Public Key by visiting EmailJS and logging into your account.
6. Open the terminal in the root directory and run npm install --legacy-peer-deps or yarn install --legacy-peer-deps.
7. After installation, run either npm run dev or yarn dev to start your application.

Screenshots

Here is a glimpse of what your 3D portfolio could look like:

Tech Stack

• React JS
• Vite JS
• TypeScript
• Tailwind CSS
• Netlify

Stats

You can check the performance metrics of your 3D portfolio by visiting this link.

Contribute

If you encounter any bugs or have ideas for features, feel free to contribute to the project through pull requests. Remember to follow the community guidelines!

Acknowledgements

Here are some useful resources utilized in the development of this portfolio:

• @emailjs/browser: ^3.11.0
• @react-three/drei: ^9.96.1
• react: ^18.2.0
• three: ^0.160.1
• tailwindcss: ^3.3.3

Learn More

To expand your knowledge about React and TypeScript, visit the Create React App documentation and React documentation.

Deploy on Netlify

The easiest way to deploy your Vite.js application is using the Netlify Platform. More details can be found in the Vite.js deployment documentation.

Troubleshooting

If you run into issues during setup, consider the following troubleshooting tips:

• Ensure your `.env` file is properly configured.
• Double-check that all necessary packages are installed with npm install or yarn install.
• If you encounter issues related to ports or the server, verify your local firewall settings.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.