This is my personal portfolio website built using Three.js, ReactJS, Framer Motion, and Vite. It showcases my skills, projects, and experiences in an interactive and visually appealing manner.
-
Three.js Integration: Utilizes the power of Three.js, a popular JavaScript library for creating 3D graphics, to enhance the visual experience of the portfolio website.
-
Smooth Animations: Incorporates Framer Motion, a motion library for React, to create smooth and captivating animations that bring the website to life.
-
Responsive Design: The website is designed to be responsive and compatible with different screen sizes, ensuring a seamless experience for users across various devices.
-
Interactive Components: Includes interactive elements such as a tilt effect on certain sections, providing an engaging and interactive user experience.
-
Vertical Timeline: Showcases a vertical timeline component to highlight my professional journey, education, and key achievements.
Before running the Portfolio Website locally, make sure you have the following software installed:
- Node.js (version 18 or higher)
- npm (Node Package Manager)
To install and set up the Portfolio Website, follow these steps:
-
Clone the repository:
git clone https://github.com/your-username/portfolio.git
-
Navigate to the project directory:
cd portfolio -
Install the dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your web browser and visit
http://localhost:3000to access the Portfolio Website.
The following npm packages are used in the Portfolio Website:
@emailjs/browser: A client-side SMTP client for sending emails directly from the browser.@react-three/drei: A collection of useful helpers and abstractions for building Three.js applications in React.@react-three/fiber: A React reconciler for Three.js, providing a React-like API to create and manage Three.js scenes.framer-motion: A motion library for React that enables smooth animations and transitions.maath: A JavaScript library providing utility functions for mathematical operations.react: A JavaScript library for building user interfaces.react-dom: A package providing DOM-specific methods for React.react-router-dom: A library that provides routing capabilities for React applications.react-tilt: A React component that adds a tilt effect to elements based on mouse movement.react-vertical-timeline-component: A React component to create vertical timelines.three: A JavaScript library for creating and displaying 3D computer graphics in web browsers.
The following development dependencies are used in the Portfolio Website:
@types/react: TypeScript type definitions for React.@types/react-dom: TypeScript type definitions for ReactDOM.@vitejs/plugin-react: A Vite plugin that enables React support.autoprefixer: A PostCSS plugin to parse CSS and add vendor prefixes.eslint: A JavaScript linting utility for identifying and reporting code errors and style inconsistencies.eslint-plugin-react: ESLint rules and configurations for React.eslint-plugin-react-hooks: ESLint rules for React Hooks.eslint-plugin-react-refresh: ESLint plugin for React Refresh.postcss: A tool for transforming CSS with JavaScript.tailwindcss: A utility-first CSS framework for rapidly building custom user interfaces.vite: A fast and opinionated web development build tool.
This project is licensed under the MIT License.
Contributions to the Portfolio Website are welcome! If you find any bugs, have feature requests, or would like to make improvements, please open an issue or submit a pull request on the GitHub repository.
Thank you for visiting my Portfolio Website! Enjoy exploring my work and experiences!