As I delve into the journey of programming and software engineering, I have discovered the importance of having a digital space that not only showcases my work but also reflects my creativity and drive to create. That’s how my portfolio website came into existence.
What is This Portfolio Website?
My portfolio website is more than just a simple collection of projects and technical skills. It is a reflection of my commitment to quality, innovation, and communication through technology. Utilizing tools like Nuxt, Vue, Vuex, and Tailwind.CSS, this website was created to be more than just an online resume — it’s a creative expression.
(Your portfolio is one of the only sites you’ll build that’s a complete creative expression of yourself, with no constraints) - @aspittel
How Was It Built?
I used the Nuxt.js framework, built on Vue.js, to develop the front-end of my site. Nuxt.js is a Vue.js framework that greatly simplifies the process of building universal Vue apps. It provides features like automatic routing, pre-rendering, static site generation, and easy integration with libraries and plugins. With Nuxt.js, I could organize my code in a modular and efficient way, leveraging Vue.js capabilities to create reusable and interactive components.
To style my site and create a visually appealing and cohesive user interface, I adopted Tailwind CSS. It’s a utility-first CSS framework that provides a class-based design approach, allowing for quick and efficient custom styling.
To make my site accessible to an international audience and support multiple languages, I integrated Vue i18n. It’s an internationalization library for Vue.js applications, which allows for easy management of text translation and messaging in different languages.
I built my site with dedication and patience. Every line of code was an opportunity to learn and grow, even in moments when procrastination tried to distract me. I was able to put into practice some things that inspired me, like the codepen below.
with just a few lines of CSS and 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>
The result was this:
Why Does This Portfolio Website Exist?
This portfolio website is not just a personal presentation but also a statement of presence on the internet. It’s a way to leave a positive mark, to share my knowledge, and it serves both for future developers and for myself when I look back and reflect on my learning journey. You can explore my portfolio website here and view the source code on GitHub. Feel free to browse, interact, and provide feedback.
The fear of the LORD is the beginning of knowledge: but fools despise wisdom and instruction. Proverbs 1:7
Top comments (0)