Rogerio Lucas Viana

Full Stack Developer Junior

Como desenhei e organizei o meu portfolio RogerLab

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