Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/tassio-med/portfolio

Last synced: about 5 hours ago
JSON representation

Host: GitHub
URL: https://github.com/tassio-med/portfolio
Owner: Tassio-Med
Created: 2023-10-18T14:52:21.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2023-10-31T15:15:10.000Z (about 1 year ago)
Last Synced: 2023-10-31T16:29:38.586Z (about 1 year ago)
Language: JavaScript
Homepage: https://portfolio-ten-phi-72.vercel.app
Size: 3.87 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        

# Bem-vindo ao Meu Portfólio!

Este projeto foi desenvolvido com o intuito de dar destaque a outros projetos que desenvolvi ao longo dos meus estudos na área de Desenvolvimento Web.

Aqui é possível conhecer um pouco sobre mim e minhas hard skills. É um site voltado principalmente para o meu perfil no mercado.

As principais habilidades colocadas em prática foram:

* **ReactJS**.

* **Javascript**;

* **TailwindCSS**;

* **Deploy com Vercel**;

![javascript](https://img.shields.io/badge/javascript-yellow.svg?style=for-the-badge&logo=javascript&logoColor=white)  ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white)  ![NPM](https://img.shields.io/badge/NPM-%23000000.svg?style=for-the-badge&logo=npm&logoColor=) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)   ![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white) 

## Projetos inclusos

***

Os projetos que optei por dar visibilidade de acordo com a área que estou me especializando foram: 

* **[Star Wars News](https://github.com/Tassio-Med/starwars-news)**

* **[Attendance News](https://github.com/Tassio-Med/attendance-system)**

* **[Task Board](https://github.com/Tassio-Med/task-board)**

* **[React Testing Library](https://github.com/Tassio-Med/react-testing-library-project)**

* **[JS Unit Tests](https://github.com/Tassio-Med/js-unit-tests-project)**

* **[To Do List](https://github.com/Tassio-Med/react-todo-list)**.

* **[Movies Library](https://github.com/Tassio-Med/movies-library)**;

* **[Finance System](https://github.com/Tassio-Med/finance-system)**;

* **[SQL - One For All](https://github.com/Tassio-Med/sql-one-for-all-project)**;

* **[Docker](https://github.com/Tassio-Med/docker-to-do-list-project)**

## Usabilidade

***

Todo o projeto se concentra em apenas uma página, no topo da página há um header fixo em que o usuário pode ser direcionado para os componentes **Meus projetos**, **Quem sou eu?** e **Fale comigo**. Além disso também há a logo que ao ser clicada leva o usuário para o topo da página.

Os projetos se encontram em um slide no componente **Meus projetos**, é possível clicar no título e ser redirecionado para o endereço web de cada projeto, além disso, clicando no botão `VER REPOSITÓRIO` o usuário é levado para o resitório do projeto no Github.

No final da página é possível entrar em contato comigo preenchendo os dados requeridos e enviando uma mensagem. Para encontrar o componente basta clicar em **Fale comigo** no header.

## Libraries Extras 

***

Algumas libraries extras que foram essenciais para a construção da experiência do usuário: 

* **[React Icons](https://react-icons.github.io/react-icons/)**;

* **[React Scroll](https://www.npmjs.com/package/react-scroll)**;

* **[React Toastify](https://fkhadra.github.io/react-toastify/introduction/)**;

* **[Tailwind Scrollbar Hide](https://www.npmjs.com/package/tailwind-scrollbar-hide)**;

## Instalação

***

Para testar o projeto na sua máquina pessoal siga os seguintes passos:

1. Clone o repositório:

```sh

[email protected]:Tassio-Med/my-portfolio.git

```

2. Instale os pacotes npm:

```bash

npm install

```

## Design

***

Para a construção visual do projeto foi utilizado TailwindCSS e a biblioteca React-icons para adicionar ícones SVG. É importante ressaltar que as cores determinadas são todas padrão do TailwindCSS e encontram-se na [documentação oficial](https://tailwindcss.com/docs/customizing-colors#default-color-palette).

No projeto foi utilizada a seguinte paleta de cores:



  

  |    HEX     | RGB         |Cor          |

  | ---         |---            | ---                                                        |

  | `#f8fafc`   |`248, 250, 252`| ![#f8fafc](https://placehold.co/300x50/f8fafc/f8fafc.png)  |

  | `##f1f5f9`  |`241, 245, 249`| ![#f1f5f9](https://placehold.co/300x50/f1f5f9/f1f5f9.png)  |

  | `#1c87f3`   |`28, 135, 243` | ![#1c87f3](https://placehold.co/300x50/1c87f3/1c87f3.png)  |

  | `##3b82f6`  |`59, 130, 246` | ![##3b82f6](https://placehold.co/300x50/3b82f6/3b82f6.png) |

  | `##1d4ed8`  |`29, 78, 216`  | ![##1d4ed8](https://placehold.co/300x50/1d4ed8/1d4ed8.png) |

  | `#001021`   |`79, 70, 229`  | ![#001021](https://placehold.co/300x50/001021/001021.png)  |



## Autor

- [@tassio medeiros](https://github.com/Tassio-Med)

[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/in/tassiomed98) 

[![Instagram](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://instagram.com/tassio.med?igshid=ZDdkNTZiNTM=) 

## EsLint

Neste projeto foi utilizado o [ESLint](https://eslint.org/) para fazer a análise estática do código. Ajudando a garantir a qualidade do código de forma a tê-lo mais legível, de mais fácil manutenção e seguindo as boas práticas de desenvolvimento.




[🔼 Voltar topo](#bem-vindo-ao-meu-portfólio)