This content originally appeared on DEV Community and was authored by Hoyasumii

Na minha carreira não muito longa como programador, eu sempre tive vontade de criar um site de portfólio. Algo que além de mostrar que eu de fato sei programar, me apresentasse como pessoa, e isso é um baita de um desafio. Criar um site que te aproxime ao leitor de modo simples, mas que ainda tenha uma experiência.

1. Uma apresentação não muito autêntica

O ano era 2023. E eu, um jovem adulto de 19 anos, que estudava incessantemente programação web, pois antes de 2023 eu focava muito em Python e C#, e quando eu quis criar um site meu, eu não tinha um repertório de tecnologia como eu tenho hoje, e é aí que surge o meu primeiro site. A primeira versão do meu site, embora não tenha sido algo único, nem muito menos criativo, foi criado apenas com HTML e CSS, sendo inspirado em um outro site(que eu me esqueci de quem era).

E para a surpresa de ninguém, era apenas um site estático. Um site que tinha apenas um hover sobre os ícones, e que não tinha nenhuma personalidade. Esse site me incomodava bastante, e por diversos problemas pessoais, eu não consegui dar a devida atenção para o meu site pessoal como deveria, então eu maquinei na minha cabeça, formas de eu me apresentar, querendo dar um toque moderno, que se diferenciasse dos sites comuns de todo programador, mas que ainda fosse um site de programador.

Um tempinho depois, eu fui para o Hackaton da Mulvi, uma empresa aqui da cidade de onde eu moro, e nesse Hackaton, acabei mexendo muito no site deles, para entender a estética da marca e acabei me interessando muito pelas formas e pela ideia em si. Mas e como isso afetou o meu “Design System”? Digamos que me ajudou a encontrar um pouco sobre o que eu queria mostrar.

Logo depois disso, consegui um estágio na área, e acabei indo aprender PHP e me aventurar em altas aventuras que não me agregou em nada, só me deixou mais maduro e me mostrou o que eu quero da minha vida.

2. O site de um dia

Indo para 2024, e saindo desse estágio e de um emprego de júnior, eu decidi pegar aquelas minhas ideias iniciais de fazer o meu site conforme aquela ideia, só que agora eu queria mostrar alguns dos meus projetos para me destacar. Nesse tempo, o meu repertório acabou crescendo: Aprendi tecnologias que hoje são base para o que eu faço. Não é como se eu não conseguisse fazer sem essa base, mas é que de fato facilita. Acabei aprendendo React, Next, Tailwind e SASS. E numa bela madrugada, esse site saiu:

Nessa versão, eu consegui entregar parte do que eu queria:

Me apresentar
Mostrar os meus projetos Mas o site não estava algo definitivo. Eu já escrevia os meus Artigos no LinkedIn, e estava planejando criar um canal no YouTube, onde eu falaria justamente sobre programação. E pior de tudo, eu precisava de uma API que pudesse colocar novos projetos, ou atualizar caso eu precisasse. Eu precisava também separar meus projetos, das bibliotecas que eu já fiz.

Além disso, a estética já não me agradava como antes. Parecia que eu estava preso a uma versão antiga minha, e eu queria ir para o céu.

3. A quase ida para o Espaço

Alguns meses depois, eu estava imaginando uma versão melhorada desse site. Algo que pudesse ser mais bonito para mim, e que me desse mais orgulho, e surgiu uma ideia de degradês com alto desfoque. Inclusive, eu acabei fazendo posts no meu LinkedIn sobre esse novo visual que eu estava planejando. Era algo que eu queria manter por um tempo, até mesmo pelo meu canal, que o sonho estava sendo real: Eu estava empenhado em criar conteúdo.

A verdade é que, desde novo eu sou apaixonado em ensinar. Se você conversar comigo pessoalmente sobre programação, você vai ver que eu de fato sou chato com isso, sabe? Mas me atrapalha muito eu não ter uma base para poder falar. Eu não ter um ponto de acesso para as pessoas poderem ver mais sobre o meu conteúdo, e às vezes nem ter a porta para poder aprender. Tanto que o próximo vídeo do meu canal vai ser justamente como um início para tudo e qualquer coisa que eu vá falar no futuro. O meu objetivo é criar uma base de conteúdo atemporal, que vá servir para qualquer desenvolvedor, independente de seu grau técnico.

E infelizmente, pelas minhas obrigações, que me tirava muito o tempo livre, acabei ficando sem forças de dar continuidade nesse projeto.

Voltando para os dias de hoje e tentando encontrar alguma imagem sobre o funcionamento, uma coisa que está me incomodando é que o Font Awesome é horrível. Eu nem ia comentar sobre o excesso de dependências de um projeto para uma ferramenta externa, mas aí vai. Tudo começou com meu amigo me compartilhando a chave profissional dele para eu usar nos meu site. O problema é que a chave não funciona mais, e o Font Awesome possui uma infinidade de bibliotecas de ícones. Agora eu preciso refatorar – ou quase – um projeto de 1 ano.

Depois de um tempo, finalmente consegui ajeitar. Obviamente, os ícones não estão certos, mas a ideia era só construir o básico para poder mostrar.

Era um projeto interessante, porque embora ele permanecesse simples em funcionamento, eu acabei aprendendo muita coisa interessante, inclusive a reutilizar uma ferramenta que já foi bastante utilizada nos sites de antigamente: Os iframe.

Um iframe permite que o seu site exiba um outro site num determinado espaço. Entretanto, é um recurso bem limitado, já que nem todos os sites permitem isso nos dias de hoje, e eu acabei ficando muito preso à essa ideia.

Uma estética presa à um espaço cósmico e desconhecido. Além disso, tinha uma feature que eu queria muito colocar nesse site, para justamente criar essa imersão na minha ideia: Estrelas. A estética era baseada em degradês metálicos, e ter estrelas para colorir essa névoa traria uma nuance bem interessante para o meu site, mas infelizmente eu não consegui masterizar algo semelhante e que me agradasse.

4. Caindo do céu e observando a Natureza

Com o meu fracasso, decidi estudar mais sobre coisas que me interessam, como engenharia de software, e comecei a aprender recentemente sobre AWS – eu até postei um vídeo recentemente no meu canal sobre deploy na AWS caso tenha interesse – mas infelizmente, a minha sede por criar os meus projetos está num tamanho que eu nem mais consigo aguentar. Eu preciso urgentemente criar conteúdo, mas antes preciso de uma marca pessoal. Isso foi um dos meus principais problemas que me fez tentar criar algo marcante, e que dissesse para todos quem sou eu. Eu não sou uma pessoa que vai nadar nas ondas de hype, eu vou querer criar algo inteiramente meu – a minha marca. E nessa minha fase da vida, a internet mexeu comigo de diversas formas, tanto positivas, quanto negativas, e eu precisava me ausentar um pouco do mundo externo.

Nesse momento, acabei voltando um pouco para as minhas raízes estéticas. Eu queria algo simples, mas vi que quando um projeto se torna monocromático ele se torna bem complicado de criar. Os elementos ficam limitados e medíocres demais. Foi aí que eu pensei em 2 pontos: Já tem cerca de um ano que eu me tornei usuário assíduo de MacBook – é sério, se vocês um dia tiverem a oportunidade de desenvolver com um MacBook, aproveitem! – e em algum esquema de cores que fizesse sentido e fosse marcante.

A minha inspiração com o visual da Apple é enorme, mas não num sentido de eu querer copiar o que eles fazem, longe disso, mas é pela ousadia deles. O foco na experiência de usuário. O experimental nas interfaces de usuário. Poxa, só vocês verem o Liquid Glass. Eu não sei exatamente como ele vai envelhecer, afinal, ainda estamos na Beta 3 – hoje é dia 19 de julho de 2025 – mas o Liquid Glass não é exatamente um sucessor ao Fruitiger Aero. O Fruitiger Aero vem na ideia de imaginarmos um futuro onde, o homem está lado a lado com a tecnologia, e a natureza voltou para a sua essência, como algo radiante, vibrante e aquoso. Nessa perspectiva, a tecnologia veio para nos unir à natureza novamente. Já o Liquid Glass é algo mais prático, menos utópico. Ele vem na ideia de já estarmos num mundo dominado pela tecnologia, mas que a tecnologia vai unir o homem de si mesmo, afinal o amor é a única coisa capaz de nos unir. E essa ousadia que a Apple tem, não se vê em outras empresas. Todas as empresas que criam interfaces, acabam se inspirando na Apple, e criam algo de uma qualidade menor. Não vem me dizer que o Windows é bonito, até o Gnome superou em todos os aspectos a interface do Windows.

Meu outro ponto é pensar nas cores. Como as cores nos afetam? O que dá vida à logos e marcas no geral? Infelizmente, todo processo criativo é infernal, e fica extremamente difícil de eu imaginar cores para mim, um programador, que antes de ser programador é um nerdola e audiófilo, e por que não usar cores amigáveis e juntá-las?

Foi aí que eu fui para o Figma, e criei uma versão experimental do que eu gostaria de mostrar para o mundo:

É uma estética que embora tenha sido meio simples, eu acabei me agradando, pois funcionou. E é difícil fazer algo sem muito repertório que funcione. E logo depois, eu fui começar a fazer o site.

5. O raso e Artificial Lago na Vizinhança de Andrômeda

Para a minha infelicidade, o site estava simples demais. Ao invés de seguir com aqueles esboços da versão espacial, eu acabei abandonando todas as minhas inovações para criar algo novo.

Embora simples, eu acabei usando essa estética para revisitar alguns projetos antigos, como o do QR Code Generator, onde eu acabei praticando a internacionalização do site, e pus em prática a estética, de modo simples ainda, nada ousado, mas já podendo dizer que algo está chegando.

Eu mal vou comentar sobre esse projeto, porque eu acabei precisando de fato revisitar ele pois ele já não funcionava mais, e agora eu deixei ele de uma forma definitiva.

Um mês se passa e aqui estava eu, frustrado com a vida, mexendo no LinkedIn, até que eu encontro um Post falando sobre o React Bits, que é nada mais, nada menos, que um conglomerado de componentes React, já estilizados, e que usam o Motion, ou o GSAP para animação desses componentes, e acabei encontrando uma grade de pontos interativa, e eu decidi adotar no meu site. Eu acabei percebendo que eu não preciso reinventar toda a roda por necessidade. Eu posso criar coisas novas com coisas já existentes, e ainda sendo autêntico. Meus queridos, depois de uma longa progressão, finalmente vamos falar sobre o meu projeto mais ousado: O meu site pessoal!

6. Conheçam o meu novo Site!

Após quase 2 semanas de desenvolvimento do site, finalmente ficou pronto. Foi bem trabalhoso, porque ao mesmo tempo que eu tinha que criar esse site, eu tinha que ficar escrevendo esse artigo. A ideia desse artigo é documentar um histórico meu, para que futuramente eu possa ter registrado o meu crescimento, e eu acabei de encontrar também, uma outra forma de criar conteúdo, algo que não necessariamente seja uma aula, mas que as pessoas consigam aprender algo com o que eu já passei. E eu sinto que eu finalmente consegui criar algo que eu poderia me orgulhar de ter.

O site em si é uma experiência visual que varia de plataforma em plataforma, e eu acabei tendo vários feedbacks sobre criação de interface, coisas que eu quero falar melhor num outro texto, onde eu provavelmente vou criticar essa interface que eu trabalhei em alguns aspectos. Mas o que tem de tão fantástico nesse site que eu tanto falei, mas não mostrei?

Embora eu tenha me agradado muito com o resultado final, eu sinto que essa interface, que é chamada de Artificial Lake, ainda vai amadurecer bastante, então eu não vou me preocupar com alguns detalhes. Eu optei por construir o bruto, a ideia, do que criar algo inteiramente definitivo, porque a proposta de um site para mim é poder ter uma base para qualquer outra coisa que eu fizer. Então logo após a criação desse site, eu já tenho que criar a API – que inclusive eu já comecei a fazer – e por fim, terei que integrar a API no site, mas assim, esse é um processo simples, então eu não estou muito preocupado.

Enquanto a API não está pronta, o site vai estar disponível em https://preview.alanreis.blog, e essa será a URL definitiva para cada versão em desenvolvimento do Artificial Lake.

7. Os Inúmeros Desafios

Agora que eu mostrei o meu site, eu preciso comentar o quão difícil foi o desenvolvimento dele em alguns aspectos, afinal, criar um site sem API pronta, e que não tenha nenhuma base por trás.

Vamos começar por uma das features mais interessantes, mas que deu um trabalho de fazer: Internacionalização. O processo de internacionalizar um site é você pegar cada elemento do seu site, e variar coleções de texto. E sim, cansa. Principalmente para você manter uma paridade entre cada idioma, e a ideia de que caso você crie algo novo, você precisa necessariamente internacionalizar também esse conteúdo novo. Mas depois que finaliza, o resultado é bem legal. Inclusive, dá pra eu comentar futuramente sobre como eu internacionalizo os meus sites, sem usar nenhuma biblioteca.

Outra coisa que me atrapalhou bastante no desenvolvimento do site, foi sobre a sua portabilidade. O site estava muito pesado até no desktop, imagine no celular? A partir daí, eu acabei criando um carrossel para passar cada tela, e ir animando a passagem dessas telas, mas ainda estava preocupado com a performance nos celulares. Afinal, no Brasil o que mais tem são usuários de celulares intermediários, ou antigos. Então eu tive que criar novos componentes, específicos para a plataforma mobile, o que melhorou consideravelmente a performance do site em dispositivos móveis. Em contrapartida, eu acabei não tendo oportunidade de poder criar mais variedades de responsividade. Eu planejo ver isso numa outra hora, mas eu real optei por criar a essência agora, e no próximo update, eu vou polir drasticamente essa interface.

Apesar de eu ter repensado a minha interface para a portabilidade, eu ainda fiquei preso em experiência de navegação, simplesmente porque os botões que são acessíveis no desktop não são tão acessíveis assim nos celulares. Isso em si vai para algum ensaio futuro meu, onde eu vou falar sobre responsividade.

Por fim, sinto que eu precisava me retratar como um programador que passou 1 ano criando aplicativos para redes sociais, e precisava focar em algo que eu nunca tinha focado antes: SEO. Para quem não sabe, SEO significa Search Engine Optimization e ele basicamente se resume em especificações que o seu site tem que ter, para que um mecanismo de busca, como o Google, consiga indexar o seu site. Então eu tive que além de mapear as rotas do meu site, com o sitemap.xml e o robots.txt, eu tive também que usar os Metadata do Next.js para especificar o meu site. Além disso, consegui também fornecer o OpenGraph dele, que seriam meta tag’s voltadas para a pré-visualização de um site, em um outro serviço, como o X e o WhatsApp. Foi uma experiência bem divertida, não vou negar. Sinto que os próximos projetos, vou acabar reciclando essa base de alguma forma, talvez até transformando numa biblioteca mesmo.

8. Conclusões

Eu acabei aprendendo muito no desenvolvimento desse site:

Aprendi como se usa o Motion, o sucessor do Framer Motion;
Consegui amadurecer um pouco mais o meu sistema de internacionalização;
Aprendi mais sobre o Next.js;
Tive as minhas reflexões sobre interfaces;

O desenvolvimento desse site foi muito experimental, afinal não tinha base nenhuma para criar ele. Tudo veio da minha cabeça, e isso foi ótimo, porque o site tem até Easter Egg: Se você tiver na versão de desktop e digitar ArtificialLake no Console, você verá que terá um novo objeto global. Dá pra explorar um pouco, mas aqui vai uma dica rápida: Se você o liberar, acesse andromeda.

Falando sobre o ArtificialLake, todas as versões terão nome – a versão atual se chama Andromeda’s Neighbourhood – e as versões serão separadas com base nos semestres. Provavelmente esse ano sairá duas versões num mesmo semestre, mas isso se dá por conta do estágio inicial dessa interface, mas a tendência no futuro é que ela vá sendo polida até que eu sinta necessidade de evoluir os elementos visuais.

Inclusive, eu também desenvolvi outras 2 telas para esse site, eu só não mostrei porque são páginas informativas, eu não senti necessidade em criar um show visual nessas telas. Queria algo limpo, pois na próxima atualização, essas telas serão o meu foco.

Como esse artigo está chegando ao fim, gostaria de agradecer por você ter me acompanhado nessa odisseia, e até o meu próximo artigo onde falarei sobre o desenvolvimento da API.

Por fim, gostaria de mostrar um dos textos que acabei escrevendo no desenvolvimento desse site e do artigo, seguido do nome completo da interface.

Uma das coisas que eu aprendi nesse meu experimento, foi que os elementos de um site se mostram de fato necessários quando eles precisam mudar de forma por conta da plataforma, e mantendo a sua essência original.

No fim, tudo é sobre a plataforma. Não importa que você criou um elemento e que ele faça tudo para desktop. Se esse seu elemento não consegue mudar para se adequar aos celulares, ele não está bom, e talvez não seja muito útil.

ARTIFICAL LAKE AT ANDROMEDA’S NEIGHBOURHOOD -> A.L.A.N.

Alan Reis, 2025