/portifolio2023

Desenvolver uma plataforma web de um portfólio pessoal, para a construção deste projeto foi usado Next.js e TailwindCss.E um projeto que é uma compilação de materiais que exemplificam minhas crenças, habilidades, qualificações, educação, treinamento e experiências. Ele fornece informações sobre minha personalidade e ética de trabalho. Amostras de t

Primary LanguageTypeScript

portifolio logo

PORTIFÓLIO VERSÃO 2023


Layout da aplicação


Tópicos

🔹 Descrição do projeto

🔹 Funcionalidades

🔹 Deploy da Aplicação

🔹 Conceitos abordados

🔹 Resolvendo problemas

🔹 Tarefas em aberto

🔹 Tecnologias

🔹 Instalação e execução

🔹 Contrubuir

🔹 Desenvolvedor

🔹 Licença


Descrição do projeto

Desenvolver uma plataforma web de um portfólio pessoal, para a construção deste projeto foi usado Next.js e TailwindCss.E um projeto que é uma compilação de materiais que exemplificam minhas crenças, habilidades, qualificações, educação, treinamento e experiências. Ele fornece informações sobre minha personalidade e ética de trabalho. Amostras de trabalho e outros detalhes, conforme explicado acima. Está intimamente relacionado ao Currículo Online ou CV.

Todos os dados sobre os projetos, informações, tecnologias e etc. veem do Hygraph que é um CMS de API nativa do GraphQL, para entregar melhores projetos em escala. A criação de projetos com GraphQL CMS permite que criem projetos de alto desempenho com uma experiência de desenvolvedor imbatível e os recursos poderosos.


Funcionalidades

  • Listagem de Projetos: Listar os projetos com o uso da API GraphQL.

  • Listagem de conhecimentos: Método para lista tecnologias e a quantidade de anos de experiência.

  • Animações: Usando Biblioteca de animações Frame Motions.

  • Efeito nos botões: Criar uma animação ao usuário apresentar foco nos botões.

  • Selecionar projeto: Criar uma página na aplicação com mais detalhes sobre o projeto selecionado.

  • Criar links do projeto: Links do repósitorio no GitHub e Link do Deploy.

  • Seção Sobre: Dados básicos sobre a pessoa, tecnologia,icones das redes sociais e foto com botão de contato que leva para o preenchimento do contato .

  • Seção contato: Onde pode entrar emcontato mandando mensagem e com integração com o Discord.

  • Dinâmico: Tudo e controlado por um CMS onde pode se mudar tudo e adicionar mais projetos, tecnologias e experiências.


Deploy da Aplicação 💨

Link do deploy da aplicação


Conceitos abordados

  • Uso de flexbox para alinhar e ajustar elementos na página.

  • Manipulação no eixo z com o uso da propriedade z-index no css.

  • Consumo de api com o uso da lib axios.

  • Conceitos de tipagem no typescript.

  • Uso do conceito de função recursiva.

  • Configuração de fonte local.

  • Uso de TailwindCss

  • Uso de CMS Hygraph

  • Controle de versionamento

  • Deploy na Vercel

  • Animação com Framer Motion

  • Discord WebHook

  • Seo estático e dinâmico

  • Rotas estaticas

  • Next.js 13

  • Fetch Api

  • zod para validação


Resolvendo Problemas ❗

Um dos principais problemas que houve no desenvolvimento do projeto foi a responsividade, mais com o uso do tailwind ficous facil de resolver. Outro problema foi na hora do deploy mais foi por conta da biblioteca de icones que estava com conflito mais na troca de icone importado tudo se resolveu.


Tarefas em aberto

📝 Dark Mode

📝 Menu responsivo drawer

📝 Adiciona página de Blog


🚀 Tecnologias

Instalação e execução

Faça um clone desse repositório e acesse o diretório.

$ git clone https://github.com/darioreisjr/portifolio2023.git && cd portifolio2023
# Instalando as dependências
$ yarn

# Executanto aplicação
$ yarn run dev

💪 Contribuir

Faça o fork e clone o projeto a partir do seu usuário.

# Clonando projeto
$ git clone https://github.com/SEU-NOME-DE-USUARIO/portifolio2023.git

# Criando um branch
$ git branch minha-alteracao

# Acessando o novo branch
$ git checkout -b minha-alteracao

# Adicionando os arquivos alterados
$ git add .

# Criando commit e a mensagem
$ git commit -m "Corrigindo...."

# Enviando alterações para o brach
$ git push origin minha-alteracao

Você deve navegar até o seu repositório onde fez o fork e clicar no botão New pull request no lado esquerdo da página.


Desenvolvedor :octocat:


Dario Reis


Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.


Copyright ©️ 2023 - portifolio Dario Reis