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.

É 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.

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.