Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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

📚 Projeto desenvolvido com o intuito de dar destaque a outros projetos que desenvolvi ao longo dos meus estudos na área de Desenvolvimento Web.
https://github.com/tassio-med/my-portfolio

eslint javascript npm react-icons reactjs tailwindcss vercel-deployment

Last synced: about 5 hours ago
JSON representation

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

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)