Apenas para atualizar sobre as últimas mudanças visuais, e as melhorias que fiz no presente site a partir de testes de performance.
Além das cores, eu alterei a interação com o botão de troca dos modos “dark x light”, que agora é um botão switch (interruptor), e com ícones personalizados que comunicam essa ideia.

Escolhi aplicar uma paleta de cores (5 cores) mais quentes, apenas para demonstrar um padrão diferente do azul mais usual que vemos na maioria dos sites e projetos voltados à audiência mais ampla — ou seja, quero mostrar que também é possível fazer um site “vermelho”. (risos!)… Trata-se de um projeto onde recursos de “warning”, como mensagens, ou “alerts”, de “erro”, ou campos “required”, são pouco usados, e por isso considero como desnecessários, me liberando para explorar mais a cor vermelha que seria por eles mais usada.
Aqui eu tenho uma abordagem mais experimental, de fato… então estou me valendo de “licenças poéticas” de design.
E fazer essa troca de paleta de cores é algo relativamente fácil, graças aos recursos do Boostrap.

Devo frisar também, novamente, que o site é o meu portfolio, sendo não só os conteúdos, mas ele próprio, produções de design de minha autoria. [* mais abaixo, no texto de 28/11/2023]

Teste PageSpeed Insights

Consegui ganhos de performance também, ao organizar e “enxugar” melhor o CSS e os HTMLs de todos os elementos do layout, além de ter atualizado para o Boostrap v.5.3.3.
Eu uso a ferramenta de testes da Google chamada “PageSpeed Insights“ para avaliar performance e S.E.O.
Os resultados (de desempenho mobile e desktop) são os que estão nas imagens a seguir (seguem também os links para uma consulta completa) [clique para ver maior]:

https://pagespeed.web.dev/analysis/https-nstarconcepts-com/ovvtlp8lid?form_factor=desktop
E claro, faço questão de mostrar esses resultados aqui pois trata-se de algo relativamente difícil de se conseguir, principalmente no contexto comum de projetos reais das empresas no mercado amplo.

[*][—– 28, Novembro, 2023 —–]
Este é um site em WordPress que eu mesmo customizei. Procurei fazer nele um design inspirado em estilos de ficção-científica, ou de algumas das capas da banda Pink Floyd, e estabelecer um layout semelhante à diagramação de revistas de estórias em quadrinhos/HQs, principalmente no showcase (no mosaico grande de imagens, no início da página Home do site). Inteiramente responsivo. E contou com uma participação consistente do ChatGPT em todo o processo de desenvolvimento e adaptação do layout.

Concluí todos os principais refinamentos e ajustes em 28/11/2023.

O site tem efetivamente o propósito de ser o meu porfolio, e de demonstrar todas as minhas habilidades técnicas, e competências profissionais, como nas áreas de UI Design, e Desenvolveimento Web; além de incluir as ilustrações que também faço (ainda como hobby, mas que pretendo levar adiante, conforme o tempo me for favorável) e as pinturas digitais, concept arts, character designs, e etc., já que também sou desenhista.

As imagens destas ilustrações acabam vindo a calhar para serem aplicadas no showcase (já que, se nele eu tivesse que colocar as imagens de projetos web, ficaria algo meio estranho, ou um padrão de diagramação sem consistência, e redundante na linguagem visual).

Showcase Mosaico

O showcase de mosaico é um CSS baseado em “display: grid” (CSS Grid).
Ele se ajusta de duas formas:
fica num formato “deitado”, landscape (paisagem), ou horizontalizado, quando em telas widescreen; ou pode ficar em formato “retrato” para dispositivos que são mais usados com a tela orientada verticalmente/verticalizada.

Modos “ligth” e “dark”

Fiz questão de aplicar o novo recurso de modos “Light” e “Dark” que vem com a versão atualizada do Boostrap. Você pode visualizar isso ao clicar no pequeno botão — toggler button, com ícones de “dia” e “noite” — que fica fixo no canto inferior direito da tela.
Todo o layout aqui é baseado em Bootstrap, incluindo os mínimos detalhes. Aproveitei ao máximo os recursos e componentes do framework para as necessidades do projeto deste meu site.
Incluí também a integração com o plugin “Masonry Js“, que faz os itens de uma lista ficarem como se fossem tijolinhos, ou como um “mosaico” também, o que acho bastante interessante e diferente.

E sim: eu tenho me tornando um especialista em Bootstrap. Se já não sou, estou caminhando pra isso.

ChatGPT

O site chegou a este resultado, em toda a qualidade e funcionalidade, graças à ajuda que tive do ChatGPT.
Sem ele, eu teria travado uma jornada muito mais longa, ou talvez nem sequer teria conseguido alcançar a qualidade que eu queria, e os pormenores de funcionalidades… Eu teria que recorrer a ajuda de pessoas que nem sei se realmente me ajudariam (ou se teriam disposição para me ajudar). Ou eu teria que pagar pacotes de template de WordPress mais caros e etc… Tudo que consegui no meu site é geralmente cobrado em opções de templates “premium”… Mas com a ajuda do ChatGPT, eu fui “refinando”, adaptando, e “burlando” o premium, agregando tudo que eu queria em um template que a princípio era gratúito. kkkk!

Esta é a principal conversa que tive com ele, pedindo ajudas para os problemas no código do meu site. Vou colocar aqui o link para deixar registrado e para compartilhar o conhecimento:
https://chat.openai.com/share/dd9fc1d4-7119-4c5d-884c-f83f174f1c5e

Enfim.. creio que realizei algo consistente, e com os recursos do Bootstrap, eu aprimorei muitos aspectos do site, no código, na qualidade de todo o layout, e na performance geral.

E você, o que achou?
Fique à vontade para postar comentários aqui no formulário de comentário logo abaixo.
Críticas e sugestão são muito bem vindas e muito necessárias pra mim como profissional.
Eu particularmente gosto do resultado final… mas claro que sou suspeito para avaliar. haha!

Coletânea/mosaico de printscreens, mostrando versões light, dark, e outras manifestações de interface do site e da ID visual criada:

• Fontes:
  Devo deixar constando aqui também que o template usado é o “Fullby”, crédito de MarchettiDesign. A versão original dele me serviu de referência, que de fato baixei, instalei, customizei/personalizei, e estou usando atualmente nas páginas internas (não mais na home desde Setembro 2024).