{"id":19092781,"url":"https://github.com/basedhound/portfolio-v2_react","last_synced_at":"2026-05-06T19:02:57.801Z","repository":{"id":210930397,"uuid":"727791568","full_name":"basedhound/portfolio-v2_react","owner":"basedhound","description":"Modern and minimalist portfolio website crafted using React. Features smooth animations with Framer Motion, a responsive carousel, a typewriter effect, and dynamic filtering and sorting.","archived":false,"fork":false,"pushed_at":"2024-08-06T14:52:02.000Z","size":2227,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-22T07:44:52.686Z","etag":null,"topics":["email-js","emailjs","framer-motion","portfolio","react","react-confetti","react-simple-typewriter","react-use","react18","swiper","typewriter","vite"],"latest_commit_sha":null,"homepage":"https://portfolio-v2-fv.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/basedhound.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-12-05T15:26:53.000Z","updated_at":"2024-08-06T14:52:05.000Z","dependencies_parsed_at":"2024-08-06T17:10:40.037Z","dependency_job_id":null,"html_url":"https://github.com/basedhound/portfolio-v2_react","commit_stats":null,"previous_names":["basedhound/portfolio-2023_react","basedhound/portfolio-v2_react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/basedhound/portfolio-v2_react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2Fportfolio-v2_react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2Fportfolio-v2_react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2Fportfolio-v2_react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2Fportfolio-v2_react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basedhound","download_url":"https://codeload.github.com/basedhound/portfolio-v2_react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2Fportfolio-v2_react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263711146,"owners_count":23499829,"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":["email-js","emailjs","framer-motion","portfolio","react","react-confetti","react-simple-typewriter","react-use","react18","swiper","typewriter","vite"],"created_at":"2024-11-09T03:21:56.902Z","updated_at":"2026-05-06T19:02:52.751Z","avatar_url":"https://github.com/basedhound.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://portfolio-v2-fv.netlify.app\" target=\"_blank\"\u003e\n      \u003cimg src=\"/public/design/preview.png\" alt=\"Project Banner\"\u003e\n    \u003c/a\u003e\n  \u003ch3 align=\"center\"\u003ePortfolio v2\u003c/h3\u003e\n\u003c/div\u003e\n\n## \u003cbr /\u003e 📋 \u003ca name=\"table\"\u003eTable of Contents\u003c/a\u003e\n\n- ✨ [Introduction](#introduction)\n- ⚙️ [Tech Stack](#tech-stack)\n- 📝 [Features](#features)\n- 🚀 [Quick Start](#quick-start)\n\n## \u003cbr /\u003e \u003ca name=\"introduction\"\u003e✨ Introduction\u003c/a\u003e\n\n**[EN]** A modern and minimalist portfolio website crafted using React and Vite. The site features smooth animations powered by Framer Motion, a responsive carousel implemented with the Swiper library, and also typewriter effect which adds a dynamic touch to the text elements. Additionally, dynamic filtering and sorting enhance the usability of the portfolio. For communication, EmailJS is integrated to enable direct contact using the form.\n\n**[FR]** Un portfolio moderne et minimaliste réalisé avec React et Vite. Le site intègre des animations fluides grâce à Framer Motion, un carrousel réactif implémenté avec la bibliothèque Swiper, ainsi qu'un effet de machine à écrire qui ajoute une touche dynamique aux éléments textuels. Le filtrage ainsi que le tri dynamiques améliorent l'utilisation du portfolio. Pour la communication, EmailJS est intégré pour permettre un contact direct via le formulaire.\n\n## \u003cbr /\u003e \u003ca name=\"tech-stack\"\u003e⚙️ Tech Stack\u003c/a\u003e\n\n- [**React**](https://react.dev/reference/react) is a popular JavaScript library for building user interfaces, particularly single-page applications where data changes over time. React's component-based architecture allows developers to create reusable UI components, making development more efficient and the codebase easier to maintain.\n\n- [**Framer Motion**](https://www.framer.com/motion/) is a React animation library designed for creating smooth, interactive animations and transitions. It simplifies complex animations with a straightforward API, supports gesture-based interactions, and offers physics-based animations for realistic motion effects.\n\n- [**Typewriter Effect**](https://www.npmjs.com/package/react-simple-typewriter) is a common animation technique used to create a typing animation, where text appears on the screen as if it is being typed in real time. In React, this can be achieved using various libraries or custom code to enhance the user experience by adding dynamic and engaging text elements.\n\n- [**EmailJS**](https://www.emailjs.com/docs/examples/reactjs/) is a service that enables developers to send emails directly from JavaScript applications without requiring server-side code. It supports various email service providers and allows integration with forms to send emails directly from the web application, making it ideal for contact forms and user feedback.\n\n- [**Swiper**](https://swiperjs.com/react) is a modern touch slider library that provides a highly customizable and responsive carousel for web applications. It supports touch gestures, mouse interactions, and a wide range of features like lazy loading, parallax effects, and multiple slide layouts, making it a versatile choice for implementing carousels and sliders.\n\n- [**Vite**](https://vitejs.dev/guide/) is a next-generation front-end build tool that focuses on speed and performance. It provides a fast development environment with instant hot module replacement (HMR) and optimized production builds. Vite's native support for modern JavaScript and its plugin ecosystem make it a powerful choice for developing modern web applications.\n\n## \u003cbr/\u003e \u003ca name=\"features\"\u003e📝 Features\u003c/a\u003e\n👉 **Responsive Design**: Fully functional and visually appealing across all devices and screen sizes.\n\n👉 **Dynamic UI Components**: Interactive and engaging user interface elements built with React.\n\n👉 **Smooth Animations**: Powered by Framer Motion for an engaging user experience.\n\n👉 **Responsive Carousel**: Implemented with the Swiper library for seamless navigation.\n\n👉 **Typewriter Effect**: Adds a dynamic touch to text elements, enhancing interactivity.\n\n👉 **Dynamic Filtering and Sorting**: Enhances usability by allowing easy portfolio management.\n\n👉 **Direct Contact Form**: Integrated with EmailJS to enable direct communication through the form.\n\n👉 **Fast Development**: Built with Vite for a speedy and efficient development process.\n\n## \u003cbr /\u003e \u003ca name=\"quick-start\"\u003e🚀 Quick Start\u003c/a\u003e\n\nFollow these steps to set up the project locally on your machine.\n\n\u003cbr/\u003e**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\u003cbr/\u003e**Cloning the Repository**\n\n```bash\ngit clone {git remote URL}\n```\n\n\u003cbr/\u003e**Installation**\n\nLet's install the project dependencies, from your terminal, run:\n\n```bash\nnpm install\n# or\nyarn install\n```\n\n\u003cbr/\u003e**Set Up Environment Variables**\n\nCreate a new file named `.env` in the client folder of your project and add the following content:\n\n```env\nVITE_EJS_KEY=\n```\n\nReplace the placeholder values with your actual respective account credentials:\n\n- [EmailJs](https://www.emailjs.com/)\n\n\u003cbr/\u003e**Running the Project**\n\nInstallation will take a minute or two, but once that's done, you should be able to run the following command:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [`http://localhost:5173`](http://localhost:5173) in your browser to view the project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasedhound%2Fportfolio-v2_react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasedhound%2Fportfolio-v2_react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasedhound%2Fportfolio-v2_react/lists"}