Developer Portfolio

A modern and visually stunning developer portfolio designed to showcase projects, technical skills, and experiences. This portfolio integrates 3D elements, animations, and responsive design to create an engaging user experience.

🌟 Features

• Hero Section: A captivating introduction with a 3D background.
• About Section: Highlights your journey, skills, and goals.
• Experience Timeline: Displays career milestones and achievements.
• Technologies: Showcases tools and technologies using interactive 3D elements.
• Projects/Works: Detailed showcase of projects with tilting.
• Feedbacks: Testimonials and feedback from peers or clients.
• Contact Section: A functional contact form powered by EmailJS.
• 3D Stars Animation: A visually appealing animated canvas background.

🚀 Tech Stack

This project utilizes modern technologies to deliver a high-quality portfolio experience:

• Frontend: React, React Router
• 3D Graphics: Three.js, @react-three/fiber, @react-three/drei
• Animations: Framer Motion
• Styling: Tailwind CSS
• Contact Form: EmailJS
• Build Tool: Vite

🛠️ Installation and Setup

To run this portfolio locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/d-code-h/3d-developer-portfolio.git
   cd 3d-developer-portfolio

2. Install dependencies: yarn install
3. Run the development server: yarn run dev
4. Build for production: yarn run build
5. Preview the build: yarn run preview

📂 Project Structure

project-folder/
  ├── public/               # Static public assets
  ├── src/                  # Source code for the application
  │   ├── assets/           # Images, icons, and other static files
  │   ├── components/       # Reusable React components for each section
  │   ├── constants/        # Shared constants across the app
  │   ├── hoc/              # Higher-order components
  │   ├── types/            # TypeScript type definitions
  │   ├── utils/            # Utility functions and helpers
  │   ├── App.tsx           # Main application component
  │   ├── main.tsx          # Entry point for the React application
  │   ├── index.css         # Global styles
  │   └── styles.ts         # Centralized styling configurations
  └── index.html        # Main HTML template
  ├── package.json          # Project metadata and dependencies
  └── vite.config.ts        # Vite configuration file

📦 Dependencies

Main Dependencies:

• React
• Three.js
• @react-three/fiber
• Framer Motion
• Tailwind CSS Dev Dependencies:
• Vite
• TypeScript
• ESLint

🎨 Customization

To personalize this portfolio:

1. Update the content in the components/ folder.
2. Replace placeholder assets in the assets/ folder with your own images/icons.
3. Modify tailwind.config.js for custom styles or themes.

🙌 Contributing

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

📄 License

This project is licensed under the MIT License. You are free to use, modify, and distribute it as per the license terms.

📬 Contact

Have feedback or questions? Reach out to me via the contact form in the portfolio or email me directly at [[email protected]].