À 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;
}
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:
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)