DEV Community

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

Posted on • Edited 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

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs