Portfolio Website V2

Here is my second attempt at a portfolio website, which uses React, Vite, TailwindCSS, ThreeJS, Framer Motion, React Three Fiber, & EmailJS.

Table of Contents

• Sample Images
  • Home Page
  • About Section
  • Experience Section
  • Skills Section
  • Projects Section
  • Certifications
  • Contact Page
• Features
• Project Structure
• Steps to Run the Code/Website
• Learn More
• Acknowledgement and Thank You

Sample Images

Home Page

Home Page without 3D Model:

About Section

Experience Section

Skills Section

Projects Section

Certifications

Contact Page

Features

• 3D Hero Section:3D desktop model (CURRENTLY REMOVED).

• Experience and Work Sections: Animations powered by Framer Motion.

• Skills Section: Shows skills Using 3D geometries with Three.js and React Three Fiber.

• Projects and Certifications: Animated sections for projects and certifications using Framer Motion.

• Contact Section: Includes a earth model with email functionality using EmailJS.

• Stars Background: Generates moving stars at random positions using Three.js.

• Scroll Animations: Scrolling animations implemented using Framer Motion.

Project Structure

The project is organized as follows:

• src/assets: Contains static assets like images and icons.

• src/components: Reusable UI components, including interactive and animated elements.

  • canvas: Contains 3D models and Three.js components.
    • Ball.jsx, Computers.jsx, Earth.jsx, Stars.jsx: 3D elements used across various sections.
    • index.js: Main entry point for canvas-related components.
  • About.jsx, Contact.jsx, Experience.jsx, Feedbacks.jsx, Hero.jsx, Loader.jsx, Navbar.jsx, Tech.jsx, Works.jsx: Core UI components for each section of the website.
  • index.js: Central entry point for importing components.

• src/constants: Contains the data and information.

  • index.js: Main entry point for all data.

• src/hoc: Higher Order Components for wrapping and enhancing existing components.

  • index.js, SectionWrapper.jsx: HOC components to structure and manage sections.

• src/utils: Utility functions and helpers used throughout the project.

  • App.jsx, index.css, main.jsx, styles.js: Utility files managing application logic and styling.

• src/App.jsx: Main application file.

• src/index.jsx: application file.

Steps to Run the Code/Website

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone project.git
cd project

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

REACT_APP_EMAILJS_USERID=your_emailjs_user_id
REACT_APP_EMAILJS_TEMPLATEID=your_emailjs_template_id
REACT_APP_EMAILJS_RECEIVERID=your_emailjs_receiver_id

Replace the placeholder values with your actual EmailJS credentials. You can obtain these credentials by signing up on the EmailJS website.

Running the Project

npm run dev

Open http://localhost:5173 in your browser to view the project.

Learn More

For further reading and advanced topics:

• Create React App Documentation - Comprehensive guide on using Create React App.
• React Documentation - Official React documentation for learning more about React and its ecosystem.