Renovando meu site pessoal com o Gatsby

Sunny Singh Blocked Unblock Seguir Seguindo 5 de janeiro

Isso foi há algum tempo. Meu último redesenho foi há três anos , o que em parte fez com que este site ficasse desatualizado em termos de estilo e conteúdo.

O design anterior

Para acariciar um pouco meu ego, ainda gosto do que criei em 2016. Está longe de ser perfeito, mas apresenta meu conteúdo e projetos razoavelmente bem.

Você pode notar algumas semelhanças entre meus projetos antigos e novos, e isso é realmente de propósito. Nós vamos chegar a isso em um momento.

O novo design

A primeira coisa que você provavelmente percebe é o tema sombrio. Eu decidi mudar porque:

? Cria uma estética limpa.

? É versátil para leitura no dia e noite.

???? Ugh, eu realmente prefiro temas sombrios.

A segunda coisa é sim, eu finalmente tenho um logotipo ! Eu realmente consegui voltar em janeiro de 2018, e é insano que eu precisei de um ano inteiro para finalmente usá-lo. Eu não tenho habilidades de design gráfico, então estou muito feliz com o quão simples e inteligente aconteceu. Ter um logotipo deve realmente me ajudar na criação de uma marca mais identificável.

Tudo bem, então o principal problema com meu design antigo era que alguém que estivesse visitando minha página inicial não teria ideia do que fazer devido ao estouro de informações e ações. Aqui está o que eu quero dizer:

  • A navegação principal tinha ícones ambíguos. Esse ícone de e-mail leva você a um boletim informativo ou a uma página de contato? Tudo isso apenas para dar espaço a uma caixa de pesquisa que só era relevante no blog.
  • Minha descrição dizia apenas que eu era um desenvolvedor da Web e onde trabalhava. Qualquer um que quisesse realmente aprender sobre mim teria que clicar no ícone da pessoa na navegação para ir para a página sobre, e sinceramente eu esperaria que a maioria das pessoas deixasse o site até lá.
  • Você pode ver listas de meus artigos e projetos, mas por que um novo visitante se importaria? Eu prefiro que eles aprendam mais sobre mim primeiro, e então eles podem mostrar interesse em meu conteúdo indo para as páginas apropriadas.
  • Os ícones sociais são pequenos e enterrados no rodapé. Eu acho que eu simplesmente não via mídias sociais tão importantes na época quanto agora. Eu também odeio como eu tenho tantos links como se eu estivesse ativo em todas essas plataformas (eu não sou).

O novo design corrige todos esses problemas; Eu me livrei da minha página sobre, páginas de projeto único, os mais recentes artigos e projetos na página inicial, a pesquisa e muito mais. Qualquer pessoa nova pode acessar a minha página inicial e aprender rapidamente sobre mim. A navegação tem apenas outras três páginas onde você pode encontrar meus projetos, podcasts e artigos. O melhor de tudo, meus principais perfis de mídia social estão ligados acima da dobra.

Mencionei anteriormente que ambos os projetos têm qualidades semelhantes. Isso porque acredito na criação de designs atemporais em vez dos modernos, então, fazer melhorias com cada novo design ajuda a marca a evoluir com o tempo.

Acredito na criação de designs atemporais, em vez de modernos, então, fazer melhorias com cada novo design ajuda a marca a evoluir com o tempo.

Há alguns outros aspectos do design que gostei de adicionar, como as animações sutis, que você esperou notar:

?? Os "raios de sol" no meu logotipo aumentam e desaparecem quando você carrega uma página.

? Os emojis wave wave e laptop animam na minha página inicial, mas apenas uma vez.

? O emoji do foguete na minha página inicial tem um efeito infinito de animação voadora.

?? Os cartões nas minhas páginas de projetos, podcasts e artigos têm um efeito oscilante.

Por fim, dediquei muito esforço ao design do artigo. Eu simplesmente queria tornar o conteúdo o mais legível possível, e fiz isso pegando algumas dicas do Refactoring UI Book . Tentei manter o tamanho do caractere em torno de 80 e apliquei espaço generoso entre cada caractere, linha e seção. Como eu tenho controle total sobre a minha própria plataforma em oposição a um terceiro como o Medium, é extremamente importante que eu crie uma experiência de leitura agradável para manter as pessoas voltando ao blog.

A pilha de tecnologia

Por mais que eu goste de falar sobre design, eu sou um desenvolvedor. Então, vamos para as coisas divertidas dando uma olhada na pilha de tecnologia. Observe que todo o site é aberto no GitHub se você quiser examinar o código.

?? Gatsby e React

Eu já estava usando um gerador de site estático que foi construído em Node.js chamado Metalsmith , mas faltou muito dos recursos que eu encontrei recentemente no Gatsby .

Aqui estão as principais razões pelas quais decidi renovar com o Gatsby:

  • Ele é construído com tecnologias familiares que já estão na minha pilha: Node.js e React . O modelo de componente reutilizável do React é ótimo para manutenção.
  • Eu não tenho que pensar muito sobre o desempenho. Muitas das melhores práticas já estão preparadas para que eu possa me concentrar apenas na criação do site.
  • O recarregamento a quente de código e conteúdo significa que posso fazer atualizações no site muito rapidamente, sem ter que esperar por uma reconstrução completa.

? componentes estilizados

Como já estou usando o React, isso significa que também posso aproveitar minha biblioteca de estilos favorita, componentes estilizados . Ainda há debates no Twitter sobre se o CSS-in-JS é uma boa abordagem para o estilo, mas depois de usá-lo em alguns projetos, decidi que é.

Com componentes estilizados, simplesmente crio componentes com estilo já anexado. É CSS completo que é incluído como uma folha de estilo normal, portanto, consultas de mídia, quadros-chave etc. funcionam normalmente. Ah, sim, podemos deixar Sass e outros pré-processadores de lado agora que estamos apenas trabalhando com JavaScript.

? GraphQL e MDX

Todos os meus artigos são escritos em MDX e recuperados com o GraphQL . Como o React, o GraphQL é algo que já é usado pelo Gatsby, o que me dá uma boa oportunidade de me familiarizar com ele. No momento, ele está apenas buscando arquivos Markdown locais, mas eu poderia facilmente trazer um CMS completo se quisesse.

MDX é muito legal e se encaixa muito bem. Isso me permite incluir componentes React em meus arquivos Markdown, que é atualmente como eu incorporo vídeos do YouTube, canetas CodePen e tweets. Nada extravagante ainda, mas eu sou um componente longe de ter demos de código executável em meus artigos (sem uma incorporação de terceiros).

? Socialshares, Pena e Reagir Kawaii

Há algumas outras bibliotecas miscelâneas que eu acho que valem a pena mencionar.

Claro que seria um crime se eu não usar meus próprios socialshares compartilhamento sociais botões que você pode ver na parte inferior dos meus artigos.

Para os ícones sociais da página inicial e outros ícones da interface do usuário, uso o Feather .

Finalmente, o mais bonito de todos, React Kawaii fornece ilustrações SVG que são úteis para diferentes estados da interface do usuário (por exemplo, erros, conteúdo vazio). Atualmente, você pode vê-los na página 404 e depois de assinar o boletim informativo .

O que você acha?

Eu adoraria ouvir seus pensamentos sobre o novo design e a pilha de tecnologia, então me avise na mídia social ou deixe um comentário abaixo. Pessoalmente, estou muito feliz com a aparência do site e gostei muito de construí-lo. Espero que isso signifique que eu estarei escrevendo com mais frequência também.