Para desenvolver um tema com o mesmo visual e funcionalidades do HairFutur no blogger, usei diferentes bibliotecas javascript, o que possibilitou o design cinematográfico com efeitos de hover e transições suaves realizados pelo CSS3, e para o menu de artigos individuais tive a oportunidade de criar um script que organiza todo o conteúdo do artigo em um sistema grid que muda o seu visual de forma aleatória assim que a página é refrescada. Esta funcionalidade também foi implementada nos 4 cartões que aparecem ao passar o mouse (Efeito Hover) na foto principal na página inicial (Home page). 

Este tema tem um aspecto moderno, com layout grid baseado nos populares templates Bento Grid, uma navegação intuitiva graças ao seu menu de navegação unificado e postes dinâmicos. Deste modo, esse tema é ideal para agências de fotografia que querem apresentar o seu portfólio de forma inovadora, inspiracional e um website com forte apelo visual.

Tecnologias utilizadas para a criação deste website:

É estranho que esse é um dos websites mais modernos que tive a oportunidade de conceber, mas as suas tecnologias são meramente as mais comuns:

Para sua estrutura usei o google blogger, com uma arquitetura markdown HTML5, para animações usei CSS3 animations assim como Vanilla Javascript que ajudou a adicionar mais interatividade e funcionalidades dinâmicas, por exemplo a contagem de postagem que pode ser vista no lado inferior direicto do website. A tipografia moderna foi garantida pela font inter e os ícones são populados pela biblioteca Tabler Icons. 

Alguns destaque sobre o tema:

O tema se destaca pelo seu slider na homepage, que funciona de modo simples: No tema, através do Fetch API, ele busca o HTML do post completo, onde é extraído todas as imagens com excepção da capa ao mesmo tempo o sistema lê as suas URLs (endereço online) das imagens e de seguida remove duplicados da primeira imagem, com todas imagens registradas o sistema emparelha 4 imagens escolhidas pelo array e distribui no slots disponíveis, que tornam-se visíveis assim que passamos o mouse sobre a imagem principal  

Para o Bento Grid Dinâmico, o javascript lê o conteúdo do post (#raw-content) e de seguida processa elementos <p>, <img>, <blockquote>, <h2>, <h3>, que são guardados na memória, de seguida cada elemento é atribuído um tamanho aleatório, por fim é injectado no segundo container da secção com o id “Bento-body”

Para as animações usamos hover, perspectivas (posição absolute e relative) e z-index.

Veja o resultado final visitando a página: https://kelly-was-here.blogspot.com/