Meu_Portfolio

Projeto guiado elaborado no final do módulo de React.js do curso de Front End da , cujo objetivo era criar um site - portfólio pessoal.

Índice:

• APRESENTAÇÃO

• DESCRIÇÃO DO PROJETO

• TECNOLOGIAS UTILIZADAS

• PASSO A PASSO UTILIZADO

• FUNCIONALIDADES IMPLEMENTADAS

• IMPLEMENTAÇÕES FUTURAS

• COMO RODAR O PROJETO

• CONFIRA O RESULTADO

APRESENTAÇÃO

Quem é Flaviana?

Flaviana Ferraz é uma sertaneja de Pernambuco morando no sertão da Paraiba, formada em Gestão Ambiental e Mestre em Recursos Hídricos, após mais de 10 anos de formada, aos 34 anos, decidiu fazer transição de carreira. Hoje, empreendedora e aluna {reprograma} trilhando os caminhos do Desenvolvimento FrontEnd.

Contatos

• E-mail
• LinkedIn
• GitHub

DESCRIÇÃO DO PROJETO

Contexto

O objetivo desse projeto era elaborar um Portfólio pessoal utilizando o React.js.

O site contem 4 páginas:

• Home

• Sobre

  

• Portfólio

• Contato

Foi utilizada ainda a estrutura de componentes para compor partes das páginas com maior facilidade.

Estrutura do projeto

TECNOLOGIAS UTILIZADAS

Ferramenta	Descrição
ReactJS	framework web
Vite	gerador de projeto de front-end
npm	gerenciador de pacotes
Firebase	Ferramenta realtime database para gravar as mensagens de contato
Module CSS	Ferramenta para ter mais produtividade ao estilizar a aplicação
react-icons	Dependência com icones no reactjs
React router dom	Dependência para criar rotas no reactjs
Git	Gerenciador de vercionamento
Github	Hospedagem do código fonte integrado com gerenciador de versionamento
Vercel	Hospedagem para a aplicação, fiz o deploy integrado com o github

PASSO A PASSO UTILIZADO

1️⃣ Criação de repositorio no github e clone na maquina em que trabalhei no projeto através do Git Bash 2️⃣ Start do projeto na maquina utilizando o VS Code e seu terminal, atraves dos comandos de iniciação vite e node

npm create vite@latest nome-projeto -- --template react

cd nome-projeto

  npm i

   npm run dev

3️⃣ Exclusão de arquivos do projeto que não faremos uso e inserção de algum elemento em App.jsx para ver se o projeto está funcionando 4️⃣Instalação do react-router-dom para criação do arquivo Router e possibilitar a navegação do Menu e para outras páginas componentes do site

npm i react-router-dom@6

5️⃣ Criação do Router para o menu de navegação. 6️⃣ Criação dos componentes que se repetem 7️⃣ Criação de componentes e de conteúdo de cada página principal, assim como suas estilizações. Nessa fase, foi utilizado o react-icons, o qual foi instalado pelo terminal utilizando o comando:

npm i react-icons

8️⃣ Criação e integração do firebase com variaveis de ambiente na página Contato

npm i firebase

9️⃣ Adicionar todas as modificações a cada etapa e subir no GitHub

git add .

git commit -m "comentario"

git push

1️⃣ 0️⃣ Deploy do projeto no Vercel

FUNCIONALIDADES IMPLEMENTADAS

✔️ Utilização do Router para navegação entre páginas

✔️ Integração com o firebase para criação de banco de dados para o recebimento das mensagens enviadas via página Contato

✔️ Componentização para desenvolvimento mais rápido das páginas e elementos das páginas

✔️ Estilização com o CSS modulado

✔️ Responsividade

IMPLEMENTAÇÕES FUTURAS

• Acessibilidade

COMO RODAR O PROJETO

Para rodar esse projeto em sua máquina, siga os passos a seguir:

1️⃣ Realize o fork desse repositorio

2️⃣ Clone na sua máquina

3️⃣ Entre no diretório do repositorio clonado e as dependências do projeto, com o comando:

                                           npm install ou npm i

4️⃣ Por fim rode o projeto:

                           npm run dev

O navegador será aberto automaticamente usando a porta localhost:3000

CONFIRA O RESULTADO: https://meu-portfolio-lvu6upayj-flavianafxt.vercel.app/