Projeto de portfolio desenvolvido com React Native e TypeScript. Utiliza o pacote de bottom-tabs para implementação da navegação. O design e escolha das cores foi inspirado na temática do jogo Half-Life com um tom em modo dark por padrão. Aprendi muito sobre navegação entre diferentes páginas e reforcei bastante sobre os conceitos de TypeScript e a importância da tipagem de variáveis e funções para desenvolver um código mais manutenível.
- Clone este repositório:
git clone https://github.com/GracilianoOG/dio-native-portfolio.git- Abra o projeto em sua IDE preferida, exemplo no VSCode:
cd dio-native-portfolio/- Após navegar para dentro do diretório, inicie o VSCode:
code .- Instale as dependências:
npm install- Rode o projeto com o script (padrão):
npm start| Script | Comando | Descrição |
|---|---|---|
start |
expo start |
Inicia o projeto no modo padrão |
android |
expo start --android |
Inicia o projeto no emulador Android |
ios |
expo start --ios |
Inicia o projeto no simulador iOS |
web |
expo start --web |
Inicia o projeto no navegador web |
📁 assets/ -> assets (imagens) do projeto.
📁 src/
📁 components/ -> componentes separados em pastas.
📁 screens/ -> telas que serão compostas com os componentes.
📁 utils/ -> arquivos utilitários do projeto.
📄 app.json -> configurações do app.
📄 App.tsx -> entry point do app (componente principal).
Os componentes foram organizados em subpastas, de acordo com seu respectivo nome. A estrutura funciona da seguinte maneira:
📁 components/
📁 SkillCard/
📄 SkillCard.tsx -> componente principal
📄 style.ts -> arquivo de estilos do componente local
📄 index.ts -> entry point ao carregar a pasta do componente
Essa tela inicial contém a foto do desenvolvedor (eu 🤓), uma frase de efeito (uau 🎉) e algumas tags das tecnologias que eu conheço.
Aqui eu demonstro o nível de cada skill descrita através de estrelas (0 a 5 estrelas para cada habilidade). Eu consegui mostrar as estrelas de acordo com o fornecido, mostrando as estrelas cheias, vazias, e pela metade caso seja uma "meia estrela". Além disso, pratiquei um pouco mais com ScrollView e também experimentei (mas não mantive) com FlatList para ver a diferença.
Nessa seção eu mostro alguns cards estilizados com informações sobre cursos técnicos e superiores que já realizei ou que estou realizando no momento.
Na tela de contatos eu monstro minha foto, uma breve descrição sobre meus hobbies e alguns links. Me inspirei no linktree para desenvolver essa página. Aqui eu experimentei pela primeira vez a API Linking para abrir links externos a partir de um botão customizado por mim.
- Desenvolvido com
React Native. - Utiliza
Expopara facilitar o desenvolvimento e a gestão do projeto. - Desenvolvido com
TypeScriptpara garantir tipagem forte e maior segurança. - Ferramentas de desenvolvimento com suporte a tipagens do React.
- Navegação entre as telas desenvolvida com o pacote
bottom-tabs, que permite adicionar abas na parte inferior da tela.
 GracilianoOG |
|---|
O código fonte está sob a licença MIT.