Este projeto buscou criar uma forma fácil de mostrar os filmes indicados e vencedores do Oscar de cada ano. Além de uma visão geral de todos os filmes indicados naquele determinado ano, há também uma página dedicada para cada categoria de premiação.

O primeiro desafio do projeto foi coletar as informações de cada filme nomeado. Escrevi um script em NodeJS para organizar os filmes a partir de uma lista de indicados, acessar uma REST API e um banco de dados (MongoDB) e cruzar as informações de cada filme.

Com Astro e Typescript foi possível superar o desafio seguinte: criar uma página para cada categoria de cada ano. Com as mesmas ferramentas foi possível lidar com outro desafio: as card com informações de cada filme. O resultado foi um componente que se adapta ao contexto, mostrando o nome do filme ou pessoa indicada, um ícone de troféu para os vencedores, e uma lista de outras indicações.

O design do site foi implementando usando Sass e PicoCSS. Em telas menores, o tamanho do texto é adaptado e as card mudam de layout para melhor aproveitar o espaço.

O objetivo deste projeto foi criar e implementar um design elegante e moderno para o site de uma empresa fictícia de arquitetura, que transmitisse uma imagem profissional e sofisticada.

Um dos principais destaques do site é a navegação por meio de um mural, que se transforma em um cabeçalho para cada página. O mural é um grid de CSS que utiliza informações de navegação para modificar o tamanho de cada linha e coluna, deixando somente a imagem desejada em destaque quando um dos links é acessado.

Para a realização deste projeto, foram utilizados VueJS e Typescript. Com a utilização da framework Nuxt, foi possível implementar a transição entre páginas de forma eficiente. Além disso, o uso do pré-processador SASS permitiu a criação de CSS modular, escalável e com alta facilidade de manutenção.

O site está hospedado na plataforma Netlify, que também fornece mecanismos de CI/CD, permitindo integração contínua e entrega automatizada.

Este projeto é um aplicativo web para exibir o horário dos eventos de Formula 1, destacando os próximos eventos.

É possível acessar os horários de todos as corridas do ano, incluindo uma contagem regressiva para cada, além do horário de início ajustado ao fuso horário do usuário. O design é original e se adapta a diferentes formatos de tela.

Um dos desafios do projeto foi escrever código que depende de tempo e fuso horário. Por isso, escolhi utilizar Vitest para testes unitário, o que me ajudou a determinar se aplicativo funcionava sem precisar esperar um fim de semana de corrida.

O projeto utiliza da framework Nuxt, que permite o uso de VueJS e Typescript. Com essa framework, foi possível utilizar uma estratégia de Server Side Rendering, que em conjunto com uma Serverless Function, consegue realizar um cache da REST API consumida para gerar a página. Isso permite que o site seja leve e rápido de carregar.

É comum esquecer completamente quais livros você já leu quando alguém pede uma sugestão de leitura. Para resolver esse problema, comecei um projeto de um website com os livros que recomendo, já li ou estou lendo. Para hospedar as informações de cada livro, como título, nome dos autores, editora, ano de lançamento e imagem da capa, utilizei o Contentful, um sistema de gerenciamento de conteúdo (CMS).

Para manter o site sempre atualizado, utilizei o Next.js 13, um framework de React. Com a estratégia de Server Side Rendering, o site é construído no servidor a cada visita, resultando em um site sempre atualizado.

Como o site lida com informações externas, utilizei o Zod para validar os resultados de chamadas da API e o TypeScript para garantir que o modelo de conteúdo estivesse de acordo com o código. Isso me permitiu ter confiança quando precisei modificar o modelo de conteúdo ou refatorar meu código.

O resultado é um site rápido, sempre atualizado e fácil de ser mantido. Para adicionar um novo livro, basta utilizar o CMS, sem precisar editar o código ou construir o site localmente. Com essa abordagem, o projeto se torna robusto e confiável para futuras atualizações.

O AlkaBlog tem como objetivo demonstrar como consumir informações de um REST API para criação de um blog. Usando Nuxt, Vue e Typescript, o projeto inclue uma tela inicial com diferentes posts e comentários, além de um Painel de Administrador.

Originalmente, o projeto foi criado como parte de um Exame Técnico, e agora serve como um exemplo de como implementar features importantes e comuns em desenvolvimento web.

Entre as principais features estão: desenvolvimento com Server Side Rendering, uso de SASS e Scoped CSS, implementação de uma lista virtual para melhora de performance, componenents assíncronos, requisição de dados sem replicação de chamadas, controle de erros e design responsível.

Pude aprender muito durante a criação desse projeto, e espero que outras pessoas possam também aprender com o código que foi criado.

Este projeto é um aplicativo web que permite verificar o nível de contraste entre diferentes cores ao mesmo tempo, ajudando a determinar se uma combinação de cores possui o contraste necessário para atender aos padrões de acessibilidade da WCAG (Web Content Accessibility Guidelines).

É possível adicionar, modificar e remover cores utilizando um seletor de cores ou modificando a representação da cor em RGB. Mesmo após fechar ou reiniciar o aplicativo web, as cores escolhidas são salvas.

Uma tabela de resultados exibe os valores de contraste entre a cor de primeiro plano e segundo plano, e se eles atendem aos limites de contraste exigidos pela WCAG. O valor do contraste é exibido em uma caixa que utiliza as cores selecionadas.

Com o objetivo de auxiliar na divulgação do evento acadêmico “Colóquio Thomas Kuhn”, este site foi desenvolvido para incluir informações sobre localização, inscrições, submissão de trabalhos, palestras e programação.

O projeto se destaca pelo seu design adaptável a múltiplas dimensões de tela e pela sua velocidade de carregamento, e teve papel fundamental no processo de divulgação do evento.