A Portfolio Website built using React and Vite, showcasing my work and skills in a visually appealing manner. This project features interactive 3D models using Three.js and smooth animations powered by GSAP.
You can view the live demo of the project here.
- Responsive design that looks great on various devices.
- Home, About, Projects, and Contact sections for easy navigation.
- 3D models integrated using Three.js for an engaging user experience.
- Animations implemented using GSAP to enhance visual appeal.
- Contact form powered by EmailJS for easy communication.
- React.js: Front-end JavaScript library for building user interfaces.
- Tailwind CSS: Utility-first CSS framework for styling.
- Three.js: JavaScript library for creating 3D graphics.
- GSAP: Animation library for creating high-performance animations.
- EmailJS: Service for sending emails directly from the client-side.
To get a local copy up and running, follow these steps:
-
Clone the repository:
git clone https://github.com/your-username/your-portfolio.git
-
Navigate to the project directory:
cd your-portfolio
-
Install dependencies:
npm install
-
Set up environment variables:
- Create a
.env
file in the root of your project. - Add your EmailJS details like so:
REACT_APP_EMAILJS_SERVICE_ID=your-service-id REACT_APP_EMAILJS_TEMPLATE_ID=your-template-id REACT_APP_EMAILJS_USER_ID=your-user-id [email protected] REACT_APP_TO_NAME=YourName
- Create a
-
Start the development server:
npm run dev
The app will be running on
http://localhost:5173/
.
This project uses EmailJS to send emails from the contact form. To integrate EmailJS, follow these steps:
-
Sign up at EmailJS and create a new service.
-
Obtain your user ID from the EmailJS dashboard.
-
In your code, use the following snippet to send emails:
import emailjs from 'emailjs-com'; const sendEmail = (e) => { e.preventDefault(); emailjs.sendForm(process.env.REACT_APP_EMAILJS_SERVICE_ID, process.env.REACT_APP_EMAILJS_TEMPLATE_ID, e.target, process.env.REACT_APP_EMAILJS_USER_ID) .then((result) => { console.log(result.text); }, (error) => { console.log(error.text); }); };
-
Replace
'your-service-id'
,'your-template-id'
, and'your-user-id'
with the corresponding values from your EmailJS account.
- Thank you to Three.js for the amazing library that made 3D modeling easy and fun!
- Special thanks to GSAP for providing powerful animation capabilities!
- And to EmailJS for their easy-to-use email sending service!
Feel free to explore the project and reach out for any questions or collaborations!