Portfolio Website Documentation

This documentation provides an overview of the setup and components used in building a portfolio website using React.js, Three.js, Tailwind CSS, and Tilt.js. The combination of these technologies creates a visually appealing and interactive portfolio to showcase your work and skills.

Table of Contents

1. Introduction
2. Prerequisites
3. Installation and Setup
4. Components
5. Customization
6. Technologies Used
7. Usage and Deployment

1. Introduction

The Portfolio Website is designed to showcase my projects, skills, and background in an engaging and interactive manner. It employs various technologies to create a seamless user experience.

• React.js: A JavaScript library for building user interfaces. React organizes the website into reusable components, making it easier to manage and maintain the codebase.
• Three.js: A 3D graphics library that allows for the creation of interactive 3D content within a web browser.
• Tailwind CSS: A utility-first CSS framework that helps in designing responsive and visually appealing user interfaces.
• Tilt.js: A JavaScript library for creating a parallax tilt effect on elements as the user interacts with them.

2. Prerequisites

Before you begin, ensure that you have the following tools installed on your system:

• Node.js and npm (Node Package Manager)
• Git (for version control)

3. Installation and Setup

1. Clone the Repository:

   git clone <repository_url>
   cd portfolio-website

2. Install Dependencies:

   npm install
   npm run dev

4. Components

The portfolio website is divided into several components, each responsible for a specific section of the website.

Navbar

The Navbar component typically contains your name/logo and navigation links to different sections of the website.

About

The about section provides information about you, your background, and your skills. You can include a profile picture and a brief introduction.

Experience

This section is about my real worled work experience.

Contact

The contact section allows visitors to get in touch with you. You can include a contact form or links to your social media profiles.

Works

Following projects showcases my skills and experience through real-world examples of my work.

5. Technologies Used

The following technologies and tools are used in this project:

1. React: A JavaScript library for building user interfaces.
2. Vite: A fast build tool and development server.
3. React Router DOM: For routing within the website.
4. React Three Fiber: A React renderer for three.js, enabling 3D graphics.
5. Framer Motion: For adding animations to components.
6. EmailJS: For sending emails from the website.
7. React Tilt: A React wrapper for the Tilt.js library.
8. React Vertical Timeline Component: For creating interactive timelines.
9. Three.js: A JavaScript library for 3D graphics.

6. Usage and Deployment

To run the website locally for testing and development, use the following command:

npm run dev