https://github.com/aszurar/devlinks
O projeto devlinks é um site pessoal que reúne os principais links de redes sociais, portfólio, projetos, blogs de um usuário.
https://github.com/aszurar/devlinks
axe axe-core framer-motion html html5 radix radix-ui react reactjs typescript yarn
Last synced: 2 months ago
JSON representation
O projeto devlinks é um site pessoal que reúne os principais links de redes sociais, portfólio, projetos, blogs de um usuário.
- Host: GitHub
- URL: https://github.com/aszurar/devlinks
- Owner: Aszurar
- Created: 2023-11-09T15:35:25.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-22T20:57:54.000Z (almost 2 years ago)
- Last Synced: 2025-02-10T10:26:32.362Z (over 1 year ago)
- Topics: axe, axe-core, framer-motion, html, html5, radix, radix-ui, react, reactjs, typescript, yarn
- Language: TypeScript
- Homepage: https://lucas-de-lima-ms.netlify.app/
- Size: 8.86 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# #8 - React: ****
## devlinks | Lucas de Lima
- O projeto devlinks é um site pessoal que reúne os principais links de redes sociais, portfólio, projetos, blogs de um usuário.
- O site foi publicado com CI/CD por meio da plataforma **[Netlify](https://www.netlify.com/)**.
- Acesse e teste o projeto em: ****
[](https://app.netlify.com/sites/lucas-de-lima-ms/deploys) [](https://vitejs.dev/) [](https://react.dev/) [](https://react.dev/learn/scaling-up-with-reducer-and-context) [](https://tailwindcss.com/) [](https://www.radix-ui.com/) [](https://www.typescriptlang.org/) [](https://www.javascript.com/) [](https://developer.mozilla.org/pt-BR/docs/Web/HTML) [](https://www.w3schools.com/css/) [](https://yarnpkg.com/)
---
---
## :information_source: Sobre
- O projeto **devlinks** é um projeto básico de um site pessoal, como um portfólio simples para o usuário feito no mine-curso Discover da [Rocketseat](https://www.rocketseat.com.br/).
- A acessibilidade foi levada em consideração, com o uso da lib **[axe-core](https://www.npmjs.com/package/@axe-core/react)** para testes e correções de acessibilidade assim como leitor de tela ChromeVox e o uso do **[Radix UI](https://www.radix-ui.com/)** para componentes acessíveis como Modais e Tooltips.
- **Tela inicial - tema claro**
---
## :interrobang: Motivo
- A ideia original desse projeto no mini curso do Dicover é revisar conceitos básicos de desenvolvimento web com HTML, CSS e javaScript. No entanto, eu refiz o projeto com React e TailwindCSS, com pequenas modificações no layout e na estrutura do projeto.
### Funcionalidades:
1. Troca, persistência e detecção entre temas claro e escuro.
2. Reunir os principais links de redes sociais, portfólio, projetos, blogs de um usuário.
### O que foi aprendido de novo?
1. Esse projeto foi uma revisão de conceitos de React, TailwindCSS.
- **Tela inicial - tema escuro**
---
## :art: Design
- O Design do projeto foi fornecido pela **[Rocketseat](https://www.rocketseat.com.br/)** no primeiro módulo do Ignite - React por meio do Figma.
devlinks
[](https://www.figma.com/design/HMRYilUJaaWgEzhWzvVZOa/DevLinks-%E2%9C%85?node-id=0-1&t=OHgFBfj7q4uq2gKs-0)
---
## :seedling: Requisitos Mínimos
1. NodeJS
2. ReactJS
3. Vite
4. Yarn(ou NPM)
---
## :rocket: Tecnologias Utilizadas
- O projeto foi desenvolvido utilizando as seguintes tecnologias:
1. **[axe-core/react](https://www.npmjs.com/package/@axe-core/react)**
2. **[JavaScript](https://developer.mozilla.org/pt1.BR/docs/Web/JavaScript)**
3. **[Netlify](https://www.netlify.com/)**
4. **[NodeJS](https://nodejs.org/en/)**
5. **[Framer Motion](https://www.framer.com/motion/)**
6. **[Radix UI](https://www.radix-ui.com/)**
7. **[React](https://pt1.br.react.dev/)**
8. **[TypeScript](https://www.typescriptlang.org/)**
9. **[Vite](https://vitejs.dev/)**
10. **[Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)**
- **Responsividade**
_
---
## :truck: Entrega e distribuição continua
****
- Para a publicação da aplicação foi por meio da plataforma **[Netlify](https://www.netlify.com/)** onde é possível publicar de forma rápida, fácil e simples projetos React que estão hospedados no GitHub, GitLab, dentre outras plataformas de repositório remoto de graça.
- Com isso, o CI/CD já é aplicado automaticamente por meio dessa plataforma definindo a branch de produção, sempre que houver uma atualização nela, será gerado uma nova versão do projeto e já publicado.
- Além disso, podemos customizar o próprio endereço do site, adicionar ferramentas dentre outras funcionalidades facilmente.
---
## :package: Como baixar e executar o projeto
### Baixar
- Clonar o projeto:
```bash
git clone https://github.com/Aszurar/devlinks
```
- É necessário ter o Node.js e um gerenciador de pacotes, como o Yarn, instalados em seu sistema. Se você ainda não os tem, siga estas instruções:
- [Instalação do NodeJS](https://nodejs.org/en/)
- [Instalação do Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)
- Instalação das dependências:
- Execute o comando abaixo dentro da pasta do projeto
```bash
yarn
```
### Execução
- Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:
```bash
yarn dev
```
---
Desenvolvido por :star2: Lucas de Lima Martins de Souza.