Um portfolio de um engenheiro de software
Tags: portfolio, css, website, frontend
Published: 2024-03-10 17:19:39

À 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)](https://dev.to/aspittel/building-a-kickass-portfolio-28ph) - @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.

---

{% codepen https://codepen.io/sereezha/pen/OGzJOL %}

com algumas linhas de css e html:

```CSS
.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;
}
```

```HTML
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>
```
O resultado foi esse:

![result gif](https://res.cloudinary.com/dd3hu4paf/image/upload/v1709054588/LFXA_personal._-_19_February_2024_2_lyzyy4.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](https://lfxa.vercel.app/en-US) e pode ver o código fonte no [github](https://github.com/LFXA/lfxa-nuxt-personal). 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