Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ryanbritodev/portfolio-react

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/ryanbritodev/portfolio-react
Owner: ryanbritodev
License: mit
Created: 2024-09-17T16:32:02.000Z (3 months ago)
Default Branch: main
Last Pushed: 2024-09-17T20:38:49.000Z (3 months ago)
Last Synced: 2024-09-19T00:12:06.887Z (3 months ago)
Language: JavaScript
Size: 49.8 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Portfólio com ⚛️ React JS e 🌀 Tailwind CSS

![Home](https://github.com/ryanbritodev/portfolio-react/blob/main/src/assets/img/projects/Portfolio.png?raw=true)

## Visão Geral
Esse Portfólio foi desenvolvido como parte da entrega para o **Checkpoint 2** para disciplina **Web Development** na **[FIAP](https://www.fiap.com.br/)**, conforme detalhado na [documentação de requisitos](https://cherry-client-b8f.notion.site/CP2-Portf-lio-8bc1b15e60de4f4fb756614c1be9ed14) fornecida para esse projeto.

## 🧑🏻‍💻 Tecnologias Utilizadas
- **React JS + Vite**
- **Tailwind CSS**
- **DaisyUI**
- **React Router Dom**
- **React Icons**
- **React GitHub Calendar**
- **Ts Particles**
- **Typewriter Effect**
- **Framer Motion**
- **React Bootstrap**

### Package JSON do Projeto
```bash
{
"name": "portfolio",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@material-tailwind/react": "^2.1.10",
"framer-motion": "^11.7.0",
"react": "^18.3.1",
"react-bootstrap": "^2.10.4",
"react-dom": "^18.3.1",
"react-github-calendar": "^4.3.1",
"react-icons": "^5.3.0",
"react-router-dom": "^6.26.2",
"react-tsparticles": "^2.12.2",
"tailwind-scrollbar": "^3.1.0",
"tsparticles": "^2.0.6",
"typewriter-effect": "^2.21.0"
},
"devDependencies": {
"@eslint/js": "^9.9.0",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.20",
"daisyui": "^4.12.10",
"eslint": "^9.9.0",
"eslint-plugin-react": "^7.35.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.9",
"globals": "^15.9.0",
"postcss": "^8.4.47",
"tailwindcss": "^3.4.13",
"vite": "^5.4.1"
}
}
````

## Demo

Acesse a **Demo do Portfólio** publicado na Vercel 👉️ [https://portfolio-ryanbrito.vercel.app/](https://portfolio-ryanbrito.vercel.app/)

## Vercel

[![Open Pro](https://github.com/ryanbritodev/portfolio-react/blob/main/src/assets/img/projects/Portfolio_2.png?raw=true)](https://portfolio-ryanbrito.vercel.app/)

## Uso

Esse projeto foi elaborado com base no template do [Vite](https://vitejs.dev/) e estilizado com o Biblioteca CSS [Tailwind](https://tailwindcss.com/docs/guides/vite)

### Primeiros passos

Antes de qualquer coisa, certifique-se de que o Node.js está instalado na sua máquina, utilzando o comando:

```bash
node --version
```

Caso não, siga o passo a passo de instalação do Node.js da Alura 👇

[https://www.alura.com.br/artigos/como-instalar-node-js-windows-linux-macos?srsltid=AfmBOopiIOrcWh6MtVgVvTWHUGHKmGL1DnZjAEYSebeYkIFMtvPmeXeM](https://www.alura.com.br/artigos/como-instalar-node-js-windows-linux-macos?srsltid=AfmBOopiIOrcWh6MtVgVvTWHUGHKmGL1DnZjAEYSebeYkIFMtvPmeXeM)

Primeiro, utilize o comando `npm install` na raiz do projeto para inicializar a instalação do pacote `node_modules` baseado no `package.json`:

```bash
npm install
```

Logo em seguida, utilize o comando para inicializar o servidor local:

```bash
npm run dev
# ou
yarn dev
```

Abra o seu [http://localhost:](http://localhost:) no navegador de preferência e veja o resultado!

Você pode começar a editar os componetes localizados no diretório `..\src\components\Home\Home.jsx` e poderá ver os elementos sendo alterados em tempo real. A página irá atualizar automaticamente e mostrar os novos dados.

As [rotas](https://github.com/remix-run/react-router) para todas as seções do Portfólio podem ser acessadas no diretório `..\src\main.jsx`

### Saiba mais

Para aprender um pouco mais sobre o React JS, leia a documentação oficial:

- [Site Oficial do React](https://react.dev/)

## Créditos e Agradecimentos

Gostaria de agradecer ao meu professor Caio Vinícius pela ótima didática em sala de aula e aos colegas que me apoiaram na realização desse projeto. Muito obrigado!

## Participantes
- Ryan Brito Pereira Ramos, RM554497
- Caio Vinícius Gonçalves de Oliveira, PC0486