DEV Community: Hoyasumii

Programação Orientada à Pobreza - Crie Apps FullStack de GRAÇA

Hoyasumii — Tue, 29 Jul 2025 09:21:23 +0000

Logo após que eu terminei de construir o meu site, como podem ver nesse artigo, eu decidi criar a API do meu site, pois um dos defeitos que a minha versão antiga tinha, era a ausência de uma API que conseguisse atualizar o conteúdo do site automaticamente.

Para a minha infelicidade, eu estou desempregado e sem um centavo para poder arcar com AWS, ou outros serviços como a Railway. Com isso, criar essa API seria uma tarefa quase que impossível, pois eu não sabia onde faria o deploy da minha API, nem qual banco de dados eu usaria.

A ideia da API em si era bem simples, porque o único objetivo era listar minhas coisas.

Eu não preciso de um Dashboard, nem tela de login. Preciso apenas criar rotas para exibir meus Artigos e meus Projetos, apenas. E aí eu me perguntei: Qual Stack eu vou escolher para publicar as minhas aplicações?

Já tem mais de um ano que eu uso Next.js em meus projetos, e embora eu tenha diversas críticas à Vercel, é um framework que eu acabo gostando muito de usar, principalmente por conta dele ter a proposta de ser um framework FullStack para React. Ele acabou implementando a renderização do lado do servidor para a geração de sites, semelhante com o PHP, graças ao fato do Next.js executar um servidor HTTP. Com isso também se torna possível criar suas próprias API's. Com isso vem o primeiro ponto que eu gostaria de falar sobre:

1. Escolha uma Stack Poderosa

Escolher a sua própria Stack é uma tarefa bem complicada. O que você usar no Front-End, no Back, e qual banco escolher? São muitas perguntas que acabam pesando na hora de publicar um projeto, mesmo que seja um projeto de portfólio.

Uma boa Stack pode te poupar horas de dores de cabeça, e te prepararem para problemas que você não vai querer ter, mas quando a Stack acaba sendo fraca, você provavelmente passará pelas piores dores de cabeça, nos piores momentos possíveis, e isso pode FAZER VOCÊ GASTAR DINHEIRO, o que não queremos agora.

A partir de agora, eu vou falar sobre a Stack que eu venho usando para resolver um dos meus principais problemas: A Criação da minha API.

Criar a minha API não foi difícil, mas isso foi por conta de algumas coisas que eu já tinha sabia, e da API da dev.to, que é um dos lugares que eu publico meus textos. A API da Dev.to consegue listar os artigos que você posta, e ele consegue diferenciar seus artigos por idioma, e como o meu site tem apenas 2 versões, a Estadunidense e a Brasileira, eu implementei um filtro do lado do servidor para exibir os artigos de acordo com o idioma escolhido, e fiz a consumação da API para exibir todo esse conteúdo. Com isso, minha tarefa acabou ficando mais leve e tranquila, restando agora a tarefa de listar os meus projetos.

Beleza, qual framework e qual banco de dados eu devo escolher?

A indecisão foi grande entre o Fastify e o Nest.js. O Fastify é um Framework que facilita muito o desenvolvimento back-end. Ele possui ferramentas nativas que dão qualidade de vida e facilitam o desenvolvimento de testes E2E, o que é incrível se eu quiser implementá-los.

Já o Nest.js, é um Framework de API REST com princípios e opiniões bem definidas. O que acaba sendo uma escolha bem interessante para quem quer ter um nível mínimo de decência
no código. Entretanto, o Nest.js acaba sofrendo demais com o acoplamento de seus próprios mecanismos. Várias opiniões que acabam complicando o desenvolvimento à longo prazo. Para solucionar esse alto acoplamento, eu acabo sendo obrigado a criar soluções que desacopla ao máximo o meu projeto Nest.js. E vou ser sincero: Mesmo que eu não tivesse com que me preocupar com o Deploy da API, eu não escolheria o Nest.js. Ele é muito robusto para a minha aplicação, e eu teria que fazer muitas classes e factories pra fazer as coisas da forma que eu gosto.

Eu acabei deixando para depois a minha escolha de Framework de API, e comecei a escolher o banco de dados. Para a minha felicidade, eu me lembrei que o MongoDB possui uma ferramenta chamada de Atlas, que é um serviço de hospedagem dos bancos MongoDB, e que oferece 500mb de armazenamento no seu plano gratuito, o que para armazenar poucas informações acaba sendo uma boa escolha.

Usei o Mongoose como ODM e defini os modelos das Coleções na camada de schemas. Falando em camadas, eu escolhi seguir com uma Arquitetura Limpa. Mesmo que seja um projeto simples, seguir com essa arquitetura me deixará despreocupado com o acoplamento do meu código, em contrapartida, eu terei que escrever muito mais, e foi o que eu precisei fazer.

2. Como organizar o seu projeto?

Quando você não tem prática com back-end, você acaba tendo que lidar com vários problemas que irão surgir no desenvolvimento da sua API, sendo comumente associado na distribuição correta de camadas, e isso acaba sendo um processo que levará semanas até que você consiga entender todo o seu funcionamento, mas confia em mim que esse processo de aprendizado acaba sendo compensado com o passar dos seus próximos projetos.

Essa imagem é um resumo de como eu organizo o coração do meu código.

O fluxo é bem simples:

Iremos sempre criar uma camada de persistência para os nossos dados com um Repositório.
Com o nosso repositório, precisaremos de uma camada para executar os métodos de um repositório somado ao processamento dos dados. Ou seja, validações, erros, tratamentos, acontecerão nessa camada.
Para concluir, precisamos de uma Factory para retornar o serviço já instanciado.

É um fluxo simples, mas para quem está começando é algo bem complicadinho de entender.

Com a base do código feita, eu consigo mover essa base para qualquer framework que existe, já que todo o seu funcionamento é separado em camadas, e eu acabei me lembrando de uma ferramenta que existe e que faria toda a diferença.

3. Escolhendo o Next.js para especificar as Rotas

Como eu mencionei antes, eu uso o Next.js há um tempo considerável, e uma das features que mais me incomodou quando surgiu foi o Route Handlers. Embora hoje seja a ferramenta que mais me ajudou a deixar as minhas APIs de graça para hospedar, eu nunca tinha visto um motivo real para criar uma API com Next.js, mas quando eu percebi que a vantagem de se fazer isso era de justamente facilitar o processo de deploy de uma aplicação inteira, eu passei a valorizar essa feature e adotei em meus projetos mais antigos, que nem sequer conseguiam ficar online, para revitalizá-los.

O Next.js acabou facilitando e muito o meu processo. Eu pensei que faria essa API em pelo menos 3 dias, já que a minha ideia para facilitar esses custos era usar o AWS Lambda e o AWS API Gateway, mas como eu percebi que usar o Next.js seria mais fácil e rápido, o processo de criação foi encurtado, eu consegui criar a API em poucas horas e consegui fazer com que o seu custo para funcionar permanecesse em US$0.00, ao hospedar na Vercel.

4. Uso da Stack para contextos peculiares

Um dos momentos mais interessantes que eu estou passando nesse meu processo de deixar todos os meus projetos concluídos online é quando eu acabo usando o Next.js em ocasiões que ninguém costuma pensar nisso, como é o caso de eu estar usando EJS com Next.js.

Para quem não sabe, o EJS é uma biblioteca para Node.js, que oferece uma Template Engine para que você consiga usar no seu projeto Node.js com o MVC clássico: Aquele projeto que só tem Model, View e Controller.

Por que eu estou usando Next.js com EJS?

Um pouquinho de contexto: Quando eu estava aprendendo Node.js, 2 anos atrás, eu acabei aprendendo o EJS para criar os meus projetos, e existem 2 projetos meus que usam EJS: Um blog, e um fórum de perguntas e respostas. Como é um projeto de 2 anos atrás, eu decidi conservar todo o seu funcionamento externo, me preocupando apenas com reescrever a base do código. Reescrevendo o back-end, e o organizando. O processo em si é bem chato, mas acaba sendo recompensador, porque imagina você conseguir colocar no ar, uma aplicação, que na época que você criou, você não sabia como colocar no ar?

Para a minha felicidade, eu não terei que fazer isso novamente, porque depois que terminar todo esse processo de ajeitar o meu portfólio, eu vou querer criar coisas maiores e mais interessantes pra mim e pra comunidade.

5. O Programador Pobre

O programador pobre não é aquele que tem pouco dinheiro, e que tem dificuldades em manter projetos no ar por causa do custo: É aquele que não consegue criar projetos, sem ser da forma que aprenderam inicialmente. Na nossa profissão teremos diversos desafios até que cômicos de certo modo, mas precisamos nos superar a cada dia.

Entenda o seu projeto, pois entendendo-o, você conseguirá resolver seus problemas de formas inimagináveis, e isso até te incentiva a aprender mais.

Num dos projetos que eu estou reescrevendo, eu estou trocando a base de Express para Next.js, e vou usar o EJS como Template Engine. Mas ao invés de usar o MongoDB como database, eu decidi usar o Supabase, que eu nunca usei antes, com o Prisma. Eu acabei solucionando uma das dores que eu tinha para Hospedar o meu banco de dados, e agora eu tenho 2 soluções que consigo usar para os meus projetos.

Eu estou bem satisfeito com o resultado desse meu projeto, pois eu consegui criar uma nova versão do meu site, e também pude encontrar formas não convencionais de criar as minhas aplicações.

Inclusive, finalmente terminei o projeto do meu site, e quem tiver curiosidade em acessar, basta acessar: https://alanreis.blog. Foi um trabalho bem cansativo, mas que trouxe muita bagagem pra mim. Inclusive, todos os meus projetos que estão no meu site, possuem repositório público. No momento atual está faltando apenas 2 projetos, mas a intenção é que em poucos dias, os projetos estejam concluídos.

Muito obrigado a todos que tenham lido esse artigo, e acabou me acompanhando nessa jornada do meu site pessoal!

Até mais!

Como eu criei o meu site pessoal depois de tantas tentativas (e o que aprendi no processo)

Hoyasumii — Wed, 23 Jul 2025 17:08:48 +0000

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

Building My Personal Website After Countless Attempts – What I Learned

Hoyasumii — Wed, 23 Jul 2025 17:02:58 +0000

In my not-so-long career as a programmer, I’ve always wanted to create a portfolio website. Something that not only shows that I can indeed code but also introduces me as a person—and that’s quite a challenge. Creating a site that brings you closer to the reader in a simple way, while still delivering a meaningful experience.

1. A Not-So-Authentic Introduction

The year was 2023. I was a 19-year-old young adult, relentlessly studying web development. Before 2023, I focused heavily on Python and C#. So when I first decided to build my own website, I didn’t have the tech stack I do today. And that’s where my first site was born. The first version, although not unique nor particularly creative, was built using just HTML and CSS. It was inspired by another site (I forgot which one).

And unsurprisingly, it was a static site. It had hover effects on icons, but no personality. This site bothered me a lot, and due to several personal issues, I couldn’t give it the attention it deserved. So I started imagining ways I could present myself with a modern touch that would stand out from the typical developer websites—while still being one.

Some time later, I participated in a hackathon hosted by Mulvi, a local company. During the event, I worked a lot on their website to understand their brand aesthetics and ended up liking the shapes and the idea behind them. So, how did that affect my “Design System”? Let’s just say it helped me figure out what I wanted to express.

Soon after, I got an internship where I learned PHP and embarked on wild coding adventures that didn’t add much to my career but definitely matured me and gave me clarity on what I want from life.

2. The One-Day Website

Jumping to 2024, after leaving that internship and a junior position, I decided to bring those original ideas to life. This time, I wanted to showcase my projects to stand out. My skill set had expanded—I’d learned React, Next.js, Tailwind, and SASS. And one fine late night, this version was born:

In this version, I achieved a few goals:

Introduce myself
Showcase my projects

But the site still wasn’t final. I was already writing on LinkedIn and planning a YouTube channel about programming. I also needed an API to add and update projects. Plus, I wanted to separate my personal projects from the libraries I had created.

The aesthetics didn’t appeal to me anymore. It felt like I was stuck in an old version of myself, and I wanted to fly.

3. The Almost Space Launch

A few months later, I envisioned an improved version. Something more beautiful and something to be proud of. I thought of gradients with strong blurs and even posted some of those ideas on LinkedIn. It was something I planned to keep, especially for the channel, which was starting to feel real—I was committed to creating content.

Truth is, I’ve always loved teaching. Talk to me about programming in person, and you’ll see how annoyingly passionate I can get. But it really hurts not having a base to start from—not having a space for people to access my content or even get introduced to it. The next video on my channel will be the starting point for everything I create moving forward. I want to build a timeless foundation that serves any developer, no matter their level.

Unfortunately, due to life obligations eating up all my free time, I lost the energy to keep this project going.

Back to today—while looking for some old references—I realized how awful Font Awesome is. I wasn’t even going to rant about relying on external dependencies, but here we are. A friend shared his pro key with me to use in my project. But now the key doesn’t work anymore, and Font Awesome has an overwhelming number of icon libraries. Now I have to almost refactor a 1-year-old project.

Eventually, I got it working. The icons are wrong, but the idea was to build a minimal prototype to showcase.

It was an interesting project. Even though it was simple in functionality, I learned a lot—like reusing an old-school web tool: the iframe.

An iframe allows your site to embed another site in a defined area. But it’s limited, as many modern sites don’t allow this anymore. Still, I got really attached to the idea.

A cosmic, unknown-themed aesthetic. One feature I really wanted to add to bring immersion into this concept was: stars. The theme was metallic gradients, and stars would add a colorful misty vibe to the whole look. Sadly, I couldn’t master a satisfying implementation.

4. Falling from the Sky and Observing Nature

After failing, I decided to study more about what interests me, like software engineering. I recently started learning AWS (I even posted a video on deploying to AWS if you’re interested). But honestly, my desire to build projects has reached a point where I can’t hold it in anymore. I need to create content urgently—but first, I need a personal brand.

That’s one of the key reasons I tried to create something memorable, something that truly says who I am. I’m not someone who chases trends. I want to build something completely mine—my brand. The internet has affected me in many ways—positively and negatively—so I needed to step away for a while.

I went back to my aesthetic roots. I wanted something simple, but I noticed that when a project goes monochrome, it becomes hard to design. The elements feel too limited, too dull.

So I thought of two things:

I’ve been a dedicated MacBook user for over a year now—seriously, if you ever get the chance, develop on a MacBook!
I needed a meaningful, memorable color scheme.

I’m deeply inspired by Apple’s visual direction—not in the sense of copying them, but for their boldness. Their focus on user experience. The experimental nature of their interfaces. Just look at Liquid Glass. I’m not sure how it will age—we’re still on Beta 3 (today is July 19, 2025)—but Liquid Glass isn’t exactly a successor to Fruitiger Aero.

Fruitiger Aero imagined a future where humanity and nature coexist, radiant, vibrant, and fluid. In that view, tech brings us closer to nature. Liquid Glass is more practical, less utopian—it imagines a tech-dominated world where tech reconnects us with ourselves. Because love is the only thing that truly unites us.

And that boldness from Apple—you don’t see it in other companies. Everyone else copies Apple and delivers something worse. Don’t tell me Windows looks good—even Gnome has surpassed it in every way.

Then comes color psychology. How do colors affect us? What brings logos and brands to life? Unfortunately, creative processes are hellish. It’s hard to pick colors for someone like me—a nerd and audiophile—so I decided to combine friendly colors.

I opened Figma and built an experimental version of what I wanted to share with the world:

It was simple, but I liked it. It worked. And that’s hard to pull off without a strong design background. I then started building the site.

5. Shallow Waters and Artificial Lake at Andromeda’s Neighbourhood

Unfortunately, the site turned out too simple. Instead of continuing with the cosmic sketches, I abandoned all innovations to build something new.

Although basic, this version helped me revisit old projects like the QR Code Generator. I used it to practice internationalization and apply this new aesthetic in a modest way.

I won’t say much about this project—it needed revisiting anyway. Now, it’s in a stable state.

A month later, frustrated with life and scrolling LinkedIn, I found a post about React Bits—a collection of styled React components using Motion or GSAP. I stumbled upon an interactive dot grid and decided to use it on my site. That’s when I realized I didn’t have to reinvent the wheel just for the sake of it. I can create new things with existing tools and still be authentic.

My friends, after a long journey, let’s finally talk about my most ambitious project: my personal website!

6. Meet My New Website!

After nearly 2 weeks of development, it’s finally done. It was a lot of work, especially since I was also writing this article. The idea here is to document my journey so I can look back and track my growth. I also discovered a new way of creating content—not necessarily through tutorials, but by sharing my experiences.

The site is a visual experience that varies depending on the platform. I got tons of feedback about UI design, which I plan to dive deeper into in another post. So what’s so special about this site I’ve been talking about?

Even though I’m happy with the final result, I know this interface—called Artificial Lake—will continue to evolve. I focused on building the core idea rather than a final product. For me, a personal site is a foundation for all future projects. So after this, I’ll work on the API (which I already started) and later integrate it with the site. It’s a simple process, so I’m not worried.

Until the API is ready, the site will be available at https://preview.alanreis.blog — this will be the permanent URL for in-progress versions of Artificial Lake.

7. The Numerous Challenges

Now that I’ve shown the site, I need to talk about the development challenges—especially building a site without an API or backend.

Let’s start with internationalization. Translating every element on the site is exhausting—especially maintaining consistency across languages. And when you add something new, you have to translate that too. But once done, it’s very rewarding. I’ll even write about how I handle it without libraries.

Another challenge was portability. The site was heavy—even on desktop—imagine on mobile! I created a carousel to navigate between screens with animations, but performance still worried me. Most Brazilian users are on mid or low-end phones. I had to create mobile-specific components, which drastically improved performance. I didn’t have time to make the site super responsive yet, but that’s coming in the next update.

Despite thinking through mobile UX, navigation still suffered. Desktop buttons weren’t very mobile-friendly. I’ll talk about this in a future post about responsiveness.

Lastly, I had to learn about SEO. After building social media apps for a year, SEO was new to me. I had to map my routes with sitemap.xml and robots.txt and use Next.js Metadata and OpenGraph tags for previewing on X and WhatsApp. Honestly, it was fun. I think I’ll reuse this base in future projects, maybe even turn it into a library.

8. Final Thoughts

I learned a lot building this site:

How to use Motion (the successor to Framer Motion)
Improved my internationalization system
Learned more about Next.js
Reflected on UI design

This project was highly experimental. I had no base—it all came from my mind. And that’s great because the site even has an Easter egg: on desktop, type ArtificialLake in the console and you’ll see a new global object. Here’s a quick tip: If you unlock it, access andromeda.

Speaking of ArtificialLake, each version will have a name—the current one is Andromeda’s Neighbourhood—and versions will be organized by semester. Probably this year I’ll launch two versions in the same semester due to the early stage of this interface, but over time, I’ll polish it until it needs a visual evolution.

I also designed two other pages for this site, but didn’t show them because they’re informative—I wanted something clean, as they’ll be the focus of the next update.

As this article comes to a close, thank you for joining me on this journey. See you in the next article, where I’ll talk about developing the API.

Lastly, here’s something I wrote during the development of this site and article, followed by the full name of the interface:

One thing I learned from this experiment is that website elements become truly necessary when they need to change form depending on the platform—while still keeping their original essence.
In the end, everything is about the platform. It doesn’t matter if your element works perfectly on desktop. If it can’t adapt to mobile, it’s not good—and maybe not even useful.

ARTIFICIAL LAKE AT ANDROMEDA’S NEIGHBOURHOOD → A.L.A.N.

Alan Reis, 2025