/devlinks

O projeto devlinks é um site pessoal que reúne os principais links de redes sociais, portfólio, projetos, blogs de um usuário.

Primary LanguageTypeScript

Banner

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.

  • Acesse e teste o projeto em: https://lucas-de-lima-ms.netlify.app

Netlify Status Vite React Context-API TailwindCSS Radix UI TypeScript JavaScript HTML5 CSS3 Yarn

Sobre |  Motivo |  Design |  Requisitos |  Tecnologias |  CI/CD |  Baixar e Executar 


Imagem do projeto

ℹ️ 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.

  • A acessibilidade foi levada em consideração, com o uso da lib axe-core para testes e correções de acessibilidade assim como leitor de tela ChromeVox e o uso do Radix UI para componentes acessíveis como Modais e Tooltips.

  • Tela inicial - tema claro

Tela Inicial

⁉️ 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
Tela Inicial

🎨 Design

  • O Design do projeto foi fornecido pela Rocketseat no primeiro módulo do Ignite - React por meio do Figma.

Design


🌱 Requisitos Mínimos

  1. NodeJS
  2. ReactJS
  3. Vite
  4. Yarn(ou NPM)

🚀 Tecnologias Utilizadas

Tela inicial no modo claro e responsivo_Tela de Histórico no modo escuro e responsivo

🚚 Entrega e distribuição continua

https://lucas-de-lima-ms.netlify.app

  • Para a publicação da aplicação foi por meio da plataforma Netlify 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.
Projeto publicado no Netlify

📦 Como baixar e executar o projeto

Baixar

  • Clonar o projeto:

     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 das dependências:

    • Execute o comando abaixo dentro da pasta do projeto

        yarn

Execução

  • Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:

      yarn dev

Desenvolvido por 🌟 Lucas de Lima Martins de Souza.