DEV Community

Cover image for Um portfolio de um engenheiro de software
LFXA
LFXA

Posted on • Updated on • Originally published at lfxa.vercel.app

Um portfolio de um engenheiro de software

À medida que mergulho na jornada da programação e da engenharia de software, descobri a importância de ter um espaço digital que não apenas apresente meu trabalho, mas também reflita minha criatividade e vontade de fazer. Foi assim que surgiu meu site portfólio.

O Que é Este Site Portfólio?

Meu site portfólio é mais do que uma simples coleção de projetos e habilidades técnicas. É um reflexo do meu compromisso com a qualidade, a inovação e a comunicação através da tecnologia. Utilizando ferramentas como Nuxt, Vue, Vuex e Tailwind.CSS, este site foi criado para ser mais do que apenas um currículo online — é uma expressão criativa.

(Seu portfólio é um dos únicos sites que você construirá que é uma expressão criativa completa de você mesmo, sem restrições) - @aspittel

Como Foi Construído?

Utilizei o framework Nuxt.js, que é construído sobre o Vue.js, para desenvolver o front-end do meu site. O Nuxt.js é uma estrutura Vue.js que simplifica muito o processo de criação de aplicativos Vue universais. Ele fornece recursos como roteamento automático, pré-renderização, geração estática e integração fácil com bibliotecas e plugins. Com o Nuxt.js, pude organizar meu código de maneira modular e eficiente, aproveitando as capacidades do Vue.js para criar componentes reutilizáveis e interativos.

Para estilizar meu site e criar uma interface de usuário visualmente atraente e coesa, adotei o Tailwind CSS. É um framework CSS utilitário que fornece uma abordagem de design baseada em classes, permitindo criar estilos personalizados de forma rápida e eficiente.

Para tornar meu site acessível para um público internacional e oferecer suporte a vários idiomas, integrei o Vue i18n. É uma biblioteca de internacionalização para aplicativos Vue.js, que permite gerenciar facilmente a tradução de textos e mensagens em diferentes idiomas.

Construí meu site com dedicação e paciência. Cada linha de código foi uma oportunidade de aprender e crescer, mesmo nos momentos em que a procrastinação tentava me distrair, Pude colocar em pratica algumas coisa que me inspiraram como o codepen abaixo.


com algumas linhas de css e html:

.expand {
  display: inline-flex;
  overflow: hidden;
  letter-spacing: -3em;
  transition: letter-spacing 1s;
}

.center:hover .expand {
  letter-spacing: 0.2px;
}

.center:hover .l-expand {
  transition-delay: 0s;
}

.center:hover .fx-expand {
  transition-delay: 0.5s;
}

.center:hover .a-expand {
  transition-delay: 1s;
}
Enter fullscreen mode Exit fullscreen mode
L<span class="expand l-expand">ucas</span>
<span> F<span class="expand fx-expand">eli</span>X</span>
<span> A<span class="expand a-expand">quino</span></span>
Enter fullscreen mode Exit fullscreen mode

O resultado foi esse:

result gif

Por Que Este Site Portfólio Existe?

Este site portfólio não é apenas uma apresentação pessoal, mas também uma declaração de presença na internet. É uma maneira de deixar uma marca positiva, de compartilhar meu conhecimento e serve tanto para novos desenvolvedores no futuro quanto para mim mesmo, quando olhar para trás e refletir sobre minha jornada de aprendizado. Você pode explorar meu site portfólio em aqui e pode ver o código fonte no github. Esteja à vontade para navegar, interagir e fornecer feedback.

O temor do Senhor é o princípio do conhecimento, mas os tolos desprezam a sabedoria e a disciplina.. Provérbios 1:7

Top comments (0)