Projeto desenvolvido para poder mostrar/práticar alguns dos conceitos que venho estudando ao longo da minha jornada como desenvolvedor Front-end, alguns pontos como:
- Semântica e acessibilidade;
- Estrutura e boas práticas em Next.js;
- Consumo de API (Github);
- Consumo de CMS Headless _(PrismicCMS);
- Dark theme com Styled components.
- getStaticProps / getStaticPaths do Next.js
Dei uma explorada também em algumas etapas de UI/UX bem básicas, explicarei melhor e mais detalhado no próximo tópico.
No processo de construção do design, elaborei primeiramente o Wireframe, pensei inicialmente em uma página simples, contendo apenas o necessário para o entendimento do usuário, então criei uma Hero introdutória, para contextualizar sobre o que se refere o site, uma sessão de Sobre para a pessoa me conhecer melhor, sessão de Conhecimentos e Projetos, e uma página para todos os Projetos.
Após isso, parti para a paleta de cores e fontes, ficou definido como cor primária um Laranja (#F89D24), que da um contraste bom no Dark e Light mode.
Para as fontes foram utilizadas a Montserrat e a Roboto, nos pesos 400 / 700 / 900.
E por final desenvolvi o Mobile e Desktop criando algumas interações e componentes, caso precise utilizar algum futuramente.
Visite o projeto no figma: CLICANDO AQUI!
- React.js;
- Next.js;
Para realizar o acompanhamento, utilizei o Hotjar, ele permite criar Heatmaps, Recordings, Highlights entre outras ferramentas, para poder acompanhar a jornada do usuário pelo site, e encontrando possiveis bugs, ou as partes mais acessadas (Importante para conversão de Leads e outras técnicas).
Adicionei um sistema de Feedback, pelo próprio Hotjar, então o usuário tem a opção de avaliar o site, comentar e até tirar uma print de uma sessão ou componente especifico.
Tentei dar uma atenção importante principalmente para a acessibilidade e criei um fluxo para navegação por teclado, e um :focus um pouco mais intuitivo e combinando com a cara do projeto:
E também olhei para a semântica do projeto, organizando as TAGS e possiveis warnings.
Não consegui alcançar o 100% de 'Accessibility' por causa do pacote "react-switch".
Como eu gosto de escrever alguns artigos/posts sobre alguns tópicos que eu estudo, e eu ficava migrando entre as plataformas, com essa dificuldade em me acostumar, acabei criando o meu próprio Blog, (Ainda estou lançando features nele).
Caso queria tirar algum insight ou testar o projeto localmente, aqui vai algumas intruções necessárias:
- Clone o projeto o Github para sua máquina
https://github.com/EduardooPV/portfolio.git- Entre na pasta do projeto na sua máquina
cd portfolio- Abra o seu editor de código (No meu caso VSCode)
code .- Instale as dependências necessárias
yarn- E por final rode o projeto localmente
yarn dev*Irá abrir na porta 3000, ex: https://localhost:3000