Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/basedhound/portfolio-v1_react
1st Portfolio website built with React for reusable components, Sanity for flexible content management, Framer Motion for smooth animations, and Sass for maintainable styles.
https://github.com/basedhound/portfolio-v1_react
framer-motion portfolio react react-icons react-tooltip react18 sanity sass scss styled-components typewriter
Last synced: 10 days ago
JSON representation
1st Portfolio website built with React for reusable components, Sanity for flexible content management, Framer Motion for smooth animations, and Sass for maintainable styles.
- Host: GitHub
- URL: https://github.com/basedhound/portfolio-v1_react
- Owner: basedhound
- Created: 2022-11-28T13:36:21.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-06T14:39:42.000Z (3 months ago)
- Last Synced: 2024-08-06T17:00:06.730Z (3 months ago)
- Topics: framer-motion, portfolio, react, react-icons, react-tooltip, react18, sanity, sass, scss, styled-components, typewriter
- Language: JavaScript
- Homepage: https://portfolio-v1-fv.netlify.app
- Size: 13.5 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Portfolio v1
##
đź“‹ Table of Contents
- ✨ [Introduction](#introduction)
- ⚙️ [Tech Stack](#tech-stack)
- đź“ť [Features](#features)
- 🚀 [Quick Start](#quick-start)
**[EN]** Portfolio website built using React for dynamic UI components and Sanity as a headless CMS for flexible content management. The project also incorporates Framer Motion for smooth animations and Sass for maintainable styles. This portfolio demonstrates my skills in leveraging modern web technologies to create a dynamic and visually appealing online presence.
**[FR]** Portfolio réalisé avec React pour des composants UI dynamiques et Sanity comme CMS headless pour une gestion de contenu flexible. Le projet utilise également Framer Motion pour des animations fluides et Sass pour des styles maintenables. Ce portfolio illustre mes compétences dans l’utilisation des technologies web modernes pour créer une présence en ligne dynamique et visuellement attrayante.
- [**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.
- [**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.
- [**Sanity**](https://www.sanity.io/docs) is a headless CMS (Content Management System) that provides a flexible and powerful content platform. It offers real-time collaboration, a customizable content studio, and robust APIs for integrating content into various applications. Sanity is designed to handle structured content and supports complex data models, making it ideal for modern web and mobile applications.
- [**Sass**](https://sass-lang.com/documentation/) is a powerful CSS preprocessor that extends the capabilities of CSS with features like variables, nested rules, mixins, and functions. It helps developers write more maintainable and modular stylesheets, making complex styles easier to manage and reuse across projects. Sass files are compiled into standard CSS before deployment.
- [**SCSS**](https://sass-lang.com/guide/) is the syntax used by Sass that closely resembles traditional CSS. It supports all the features of CSS while adding the advanced capabilities of Sass, such as variables, nested rules, and mixins. SCSS files are also compiled into standard CSS, allowing for more dynamic and reusable styling.
- [**react-icons**](https://react-icons.github.io/react-icons/) is a library that provides a collection of popular icon sets as React components. It allows developers to easily incorporate scalable vector icons into their React projects, supporting various icon libraries like Font Awesome, Material Icons, and more. The icons can be customized in terms of size, color, and other styling properties directly through props.
👉 **Responsive Design**: Fully functional and visually appealing across all devices and screen sizes.
👉 **Dynamic UI Components**: Interactive and engaging user interface elements built with React.
👉 **Smooth Animations**: Engaging animations and transitions powered by Framer Motion.
👉 **Maintainable Styles**: Clean and organized styling with Sass.
👉 **Content Management**: Streamlined content updates and management using Sanity as a headless CMS.
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 {git remote URL}
```
**Installation**
Let's install the project dependencies, from your terminal, run:
```bash
# Navigate to the client directory
cd client
# Install the necessary dependencies for the client-side application
npm install
# or
yarn install
# Navigate back to the root directory
cd ..
# Navigate to the server directory
cd server
# Install the necessary dependencies for the server-side application
npm install
# or
yarn install
```
**Set Up Environment Variables**
Create a new file named `.env` in the **client folder** of your project and add the following content:
```env
REACT_APP_SANITY_PROJECT_ID=
REACT_APP_SANITY_TOKEN=
```
Replace the placeholder values with your actual respective account credentials:
- [Sanity.io](https://www.sanity.io/manage )
- [Personal desk](https://jsm-portfolio.sanity.studio/desk) (Create your own)
**Running the Project**
Installation will take a minute or two, but once that's done, you should be able to run the following command:
```bash
# Navigate to the client directory
cd client
# Start client
npm start
# or
yarn start
# Navigate back to the root directory
cd ..
# Navigate to the server directory
cd server
# Start server
npm start
# or
yarn start
```
- Client running on [`http://localhost:3000`](http://localhost:3000)
- Server running on [`http://localhost:3333`](http://localhost:3333)