{"id":14961133,"url":"https://github.com/08mfp/portfolio-website-v2","last_synced_at":"2026-01-04T13:49:31.962Z","repository":{"id":254990887,"uuid":"848177731","full_name":"08mfp/portfolio-website-V2","owner":"08mfp","description":"My New and Improved Personal Portfolio Website!","archived":false,"fork":false,"pushed_at":"2024-09-09T09:36:59.000Z","size":66149,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-08T09:52:27.438Z","etag":null,"topics":["emailjs","framer-motion","react","reactthreefiber","tailwindcss","threejs","vite"],"latest_commit_sha":null,"homepage":"https://www.mohfarid.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/08mfp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-27T09:26:02.000Z","updated_at":"2024-09-09T09:37:03.000Z","dependencies_parsed_at":"2024-08-27T11:26:40.988Z","dependency_job_id":"9239c484-937b-4ed2-bb77-b4e55e020ac8","html_url":"https://github.com/08mfp/portfolio-website-V2","commit_stats":{"total_commits":39,"total_committers":2,"mean_commits":19.5,"dds":0.1282051282051282,"last_synced_commit":"162c4034b3b9965b711ef4558212a1223e309733"},"previous_names":["08mfp/portfolio-website-v2"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/08mfp%2Fportfolio-website-V2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/08mfp%2Fportfolio-website-V2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/08mfp%2Fportfolio-website-V2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/08mfp%2Fportfolio-website-V2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/08mfp","download_url":"https://codeload.github.com/08mfp/portfolio-website-V2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238030288,"owners_count":19404859,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["emailjs","framer-motion","react","reactthreefiber","tailwindcss","threejs","vite"],"created_at":"2024-09-24T13:23:57.534Z","updated_at":"2025-10-24T20:31:09.298Z","avatar_url":"https://github.com/08mfp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Portfolio Website V2\n\nHere is my second attempt at a portfolio website, which uses React, Vite, TailwindCSS, ThreeJS, Framer Motion, React Three Fiber, \u0026 EmailJS.\n\n## Table of Contents\n\n\n- [Sample Images](#sample-images)\n  - [Home Page](#home-page)\n  - [About Section](#about-section)\n  - [Experience Section](#experience-section)\n  - [Skills Section](#skills-section)\n  - [Projects Section](#projects-section)\n  - [Certifications](#certifications)\n  - [Contact Page](#contact-page)\n- [Features](#features)\n- [Project Structure](#project-structure)\n- [Steps to Run the Code/Website](#steps-to-run-the-codewebsite)\n- [Learn More](#learn-more)\n- [Acknowledgement and Thank You](#acknowledgement-and-thank-you)\n\n## Sample Images\n\n### Home Page\n\u003cimg width=\"2055\" alt=\"HomePage 1\" src=\"https://github.com/user-attachments/assets/fe8b06f6-f650-418f-93cf-e1ebccc91b27\"\u003e\n\nHome Page without 3D Model:\n\u003cimg width=\"2056\" alt=\"HomePage 2\" src=\"https://github.com/user-attachments/assets/b7b7180e-a3fe-42e0-9e45-712e3d3ffdb4\"\u003e\n\n### About Section\n\u003cimg width=\"2056\" alt=\"About Page\" src=\"https://github.com/user-attachments/assets/28feff48-73f7-4d3b-990e-9ac5fa174276\"\u003e\n\n### Experience Section\n\u003cimg width=\"2050\" alt=\"Experience Page\" src=\"https://github.com/user-attachments/assets/0e0bb9be-ed4a-4f75-908b-c7669788af3e\"\u003e\n\n### Skills Section\n\u003cimg width=\"2056\" alt=\"Skills Page\" src=\"https://github.com/user-attachments/assets/77cae1d9-3e2c-48c2-9698-7b274eb0fa68\"\u003e\n\n### Projects Section\n\u003cimg width=\"2056\" alt=\"Projects Page\" src=\"https://github.com/user-attachments/assets/3d7be3b9-71ca-4fe0-b043-7178db3164da\"\u003e\n\n### Certifications\n\u003cimg width=\"2056\" alt=\"Certifications Page\" src=\"https://github.com/user-attachments/assets/871bde17-7eb4-4528-a64a-28db4bc9beab\"\u003e\n\n### Contact Page\n\u003cimg width=\"2056\" alt=\"Contact Page\" src=\"https://github.com/user-attachments/assets/bab1ece8-cc34-420c-8a88-10442350616c\"\u003e\n\n\n## Features\n\n- **3D Hero Section**:3D desktop model (CURRENTLY REMOVED).\n  \n- **Experience and Work Sections**: Animations powered by Framer Motion.\n\n- **Skills Section**: Shows skills Using 3D geometries with Three.js and React Three Fiber.\n\n- **Projects and Certifications**: Animated sections for projects and certifications using Framer Motion.\n\n- **Contact Section**: Includes a earth model with email functionality using EmailJS.\n\n- **Stars Background**: Generates moving stars at random positions using Three.js.\n\n- **Scroll Animations**: Scrolling animations implemented using Framer Motion.\n\n## Project Structure\n\nThe project is organized as follows:\n\n- **src/assets**: Contains static assets like images and icons.\n- **src/components**: Reusable UI components, including interactive and animated elements.\n  - **canvas**: Contains 3D models and Three.js components.\n    - `Ball.jsx`, `Computers.jsx`, `Earth.jsx`, `Stars.jsx`: 3D elements used across various sections.\n    - `index.js`: Main entry point for canvas-related components.\n  - **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.\n  - **index.js**: Central entry point for importing components.\n\n- **src/constants**: Contains the data and information.\n  - `index.js`: Main entry point for all data.\n\n- **src/hoc**: Higher Order Components for wrapping and enhancing existing components.\n  - `index.js`, `SectionWrapper.jsx`: HOC components to structure and manage sections.\n\n- **src/utils**: Utility functions and helpers used throughout the project.\n  - `App.jsx`, `index.css`, `main.jsx`, `styles.js`: Utility files managing application logic and styling.\n\n- **src/App.jsx**: Main application file.\n- **src/index.jsx**: application file.\n\n## Steps to Run the Code/Website\n\n\nFollow these steps to set up the project locally on your machine.\n\n**Prerequisites**\n\nMake sure you have the following installed on your machine:\n\n- [Git](https://git-scm.com/)\n- [Node.js](https://nodejs.org/en)\n- [npm](https://www.npmjs.com/) (Node Package Manager)\n\n**Cloning the Repository**\n\n```bash\ngit clone project.git\ncd project\n```\n\n**Installation**\n\nInstall the project dependencies using npm:\n\n```bash\nnpm install\n```\n\n**Set Up Environment Variables**\n\nCreate a new file named `.env` in the root of your project and add the following content:\n\n```env\nREACT_APP_EMAILJS_USERID=your_emailjs_user_id\nREACT_APP_EMAILJS_TEMPLATEID=your_emailjs_template_id\nREACT_APP_EMAILJS_RECEIVERID=your_emailjs_receiver_id\n```\n\nReplace the placeholder values with your actual EmailJS credentials. You can obtain these credentials by signing up on the [EmailJS website](https://www.emailjs.com/).\n\n**Running the Project**\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173) in your browser to view the project.\n\n## Learn More\n\nFor further reading and advanced topics:\n\n- [Create React App Documentation](https://facebook.github.io/create-react-app/docs/getting-started) - Comprehensive guide on using Create React App.\n- [React Documentation](https://reactjs.org/) - Official React documentation for learning more about React and its ecosystem.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F08mfp%2Fportfolio-website-v2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F08mfp%2Fportfolio-website-v2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F08mfp%2Fportfolio-website-v2/lists"}