Como desenhei e organizei o meu portfolio RogerLab
Imagem 1 de 4
Um portfolio de desenvolvimento web deve mostrar mais do que uma lista de tecnologias. Deve também ajudar a compreender como trabalha a pessoa por trás dos projetos: que decisões toma, como organiza o seu trabalho e o que considera importante ao construir uma aplicação.
Foi com essa ideia que redesenhei o RogerLab. O objetivo não era mudar a sua identidade, mas apresentar melhor o meu trabalho e criar uma estrutura que possa continuar a crescer comigo.
Uma identidade visual mais clara
Mantive a paleta de tons carvão e marfim, com versões clara e escura. A partir dessa base, trabalhei a hierarquia visual, os espaços e a tipografia para que cada secção tenha uma função reconhecível e a informação seja mais fácil de explorar.
Os títulos utilizam Big Shoulders e o texto principal, Public Sans. Esta combinação permite distinguir a apresentação dos conteúdos sem recorrer a demasiadas fontes ou elementos decorativos.
Também preservei o fundo animado de partículas, um dos detalhes que identificam o site. A animação pode ser pausada e respeita a preferência de movimento reduzido do dispositivo. A intenção é acompanhar o conteúdo, não competir com ele.
Uma estrutura pensada para conhecer o meu trabalho
A página inicial apresenta o meu perfil e dá acesso direto ao currículo em espanhol e inglês. A partir daí, o portfolio organiza-se em secções dedicadas aos meus conhecimentos, ao estágio profissional, aos projetos, ao contacto e a este blog.
Na secção de projetos, cada trabalho tem espaço para explicar o seu contexto, as tecnologias utilizadas e o seu funcionamento através de imagens e ligações. Não se trata apenas de mostrar uma captura de ecrã: quero que seja possível compreender o que construí e explorar o resultado.
A secção de estágio reúne a minha experiência e as aprendizagens dessa etapa. O contacto completa o percurso com uma forma de receber propostas profissionais e oportunidades de colaboração.
A navegação permanece visível durante o deslocamento da página para facilitar o acesso entre secções, sobretudo nas páginas com mais conteúdo.
A tecnologia por trás do design
O portfolio foi construído com Laravel e templates Blade. Os estilos estão organizados com Sass e variáveis CSS partilhadas, enquanto o TypeScript gere as interações no navegador. O Vite e o Gulp preparam os recursos para publicação.
Mantive esta stack durante o redesign. Em vez de acrescentar ferramentas para cada detalhe visual, dei prioridade à reutilização de estilos e componentes, a uma estrutura compreensível e à redução de dependências desnecessárias.
As cores, os espaços e os estilos dos controlos assentam num sistema comum. Isto facilita a aplicação coerente de melhorias e reduz as diferenças entre páginas.
Cuidar da experiência também faz parte do desenvolvimento
O design adapta-se a telemóveis, tablets e computadores. Além do aspeto visual, trabalhei o contraste, o foco visível na navegação por teclado, os tamanhos dos controlos e o comportamento das animações.
O conteúdo geral do portfolio está disponível em espanhol, inglês e português. No blog, cada publicação tem campos próprios para os três idiomas, incluindo o título, o texto, os metadados SEO e as descrições alternativas das imagens.
Uma nova secção para partilhar o processo
Este blog acrescenta uma parte que faltava no portfolio: um lugar para explicar o trabalho que nem sempre é visível numa demonstração final.
As publicações podem incluir uma imagem, várias num carrossel manual ou nenhuma, sendo nesse caso apresentado o logótipo do RogerLab. A gestão é feita num painel privado, separado da leitura pública.
Quero utilizar este espaço para partilhar decisões técnicas, melhorias, dificuldades e aprendizagens reais. Esta primeira publicação é o ponto de partida: uma explicação de como foi construído o lugar onde vou mostrar a minha evolução como programador.
Voltar ao blog