Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/08mfp/portfolio-website-v2
My New and Improved Personal Portfolio Website!
https://github.com/08mfp/portfolio-website-v2
emailjs framer-motion react reactthreefiber tailwindcss threejs vite
Last synced: about 1 month ago
JSON representation
My New and Improved Personal Portfolio Website!
- Host: GitHub
- URL: https://github.com/08mfp/portfolio-website-v2
- Owner: 08mfp
- License: unlicense
- Created: 2024-08-27T09:26:02.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-09-09T09:36:59.000Z (2 months ago)
- Last Synced: 2024-09-24T12:38:52.847Z (about 2 months ago)
- Topics: emailjs, framer-motion, react, reactthreefiber, tailwindcss, threejs, vite
- Language: JavaScript
- Homepage: https://www.mohfarid.com
- Size: 63.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](#sample-images)
- [Home Page](#home-page)
- [About Section](#about-section)
- [Experience Section](#experience-section)
- [Skills Section](#skills-section)
- [Projects Section](#projects-section)
- [Certifications](#certifications)
- [Contact Page](#contact-page)
- [Features](#features)
- [Project Structure](#project-structure)
- [Steps to Run the Code/Website](#steps-to-run-the-codewebsite)
- [Learn More](#learn-more)
- [Acknowledgement and Thank You](#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](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone project.git
cd project
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Set Up Environment Variables**
Create a new file named `.env` in the root of your project and add the following content:
```env
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](https://www.emailjs.com/).
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser to view the project.
## Learn More
For further reading and advanced topics:
- [Create React App Documentation](https://facebook.github.io/create-react-app/docs/getting-started) - Comprehensive guide on using Create React App.
- [React Documentation](https://reactjs.org/) - Official React documentation for learning more about React and its ecosystem.