Description

Web page to present the technologies and tools that are in my area of expertise.

Language

English

Techs

• Vue
• Vuetify
• Material Design Icons
• CSS Transitions

Why using Vue from a CDN?

https://vuetifyjs.com/en/getting-started/installation/#usage-with-cdn

If you want to build a quick demo project, this app is a good example of how a simple Vue setup from CDN can be used.

The idea of creating an app with Vue directly from a CDN is based on:

• No need for specific setup to build: you can use Vue from anywhere
• Focus on simplicity and speed to create a quick MVP that demonstrate the usage of HTML, CSS and JS
• Everything is portable: others can easily change stuff
• It is a simple page with no such complex functionalities.

Sometimes a simple solution is enough.

All of this works within a single HTML page and some JS files.

It is online!

https://skills.jvictor.com.br

Responsive web page built from scratch with VUE.JS, using JAVASCRIPT, HTML and CSS. In addition, to faster and beauty design I used VUETIFY UI library and some MATERIAL DESIGN ICONS. Hosted in a Linux UBUNTU dedicated server at DIGITALOCEAN cloud infrastructure. Version control by GIT and GITHUB. Reverse proxy with NGINX. SSL certification with CERTBOT.

TODO (changelog + backlog)

• ✅ Initial commit: world cloud with a basic skills filter [v0.1.0]
• ✅ Added CSS fade transitions [v0.2.0]
• ✅ Using CSS variables [v0.2.1]
• ✅ Tech skill filters refactored [v0.3.0]
• ✅ New Settings menu section: grayscale palette on/off [v0.4.0]
• ✅ New setting option: animations on/off [v0.4.1]
• ✅ Added opening animations 🎞️🍿 [v0.5.0]
• ✅ Added isMobile Vue computed prop to clean code [v0.5.1]
• ✅ Opening loading progress bar while CDN files are downloaded [v0.5.2]
• ✅ Skill tooltip with details: years of exp., skill level ⭐⭐⭐, projects. [v0.6.0]
• ✅ Add flip functionality to main content (front: skills, back: projects) [v0.7.0]
• ✅ Add Projects list with basic details to the back of main content [v0.8.0]
• ✅ Skills -> filter by projects (show skills according to project selected) [v0.8.1]
• ✅ Projects -> add youtube demo video url + language [v0.8.2]
• ✅ Add resume download button to top menu [v1.0.0]
• Create skill vue component
• New filter: skills relevance slider (hide/show smaller ones)