This site contains a personal resumé/CV as a Vue.js app. It makes use of Vue CLI 3.
Specifify a FontAwesome token, see .env.example for instructions
Clone the repo locally and install its node dependencies
$ git clone git@github.com:jdvivar/danielvivar.com.git
$ cd danielvivar.com
$ npm install
That's it. To make the most out the Vue CLI, open its UI from anywhere:
$ vue ui
Now from there you can point and click any npm task you wish:
This site was designed to be deployed with Netlify. Click the badge to start:
Specifically, the AWS Lambda configuration is setup to to serve locally proxied endpoints that will mock the same relative paths that Netlify provides on the live server.
This site uses a PRO licence from FontAwesome for icons, via this Vue component: vue-fontawesome. Because it's a private package, npm needs a token to verify the installation. A token is served through an environment variable (it's not available in the code).
But don't worry, if you don't have a FontAwesome licence then you'll need to remove the PRO icons and use the FREE ones instead, manually. Proceed as follows:
$ npm uninstall @fortawesome/pro-light-svg-icons
Substitute lines like this in Vue components code:
import { faAngleUp } from "@fortawesome/pro-light-svg-icons";
with this, note only the source package name changes, from pro
to free
:
import { faAngleUp } from "@fortawesome/free-solid-svg-icons";
That's it. Now it all should work OK. However, free solid icons doesn't look as good for this design!
I've used ƛ functions to provide contact data, so it's not available to spam robots. In Netlify this works seamlessly, but when executing the app locally, these cloud are just not available. We need to spin up a separate server specifically for them. netlify-lambda will help us with that. Click on the task in the Vue UI or execute the script:
npm run lambda:serve
You can add it and it will work exactly as it works in Netlify, but then Vue UI doesn't capture any of the data from the vue-cli-service serve
build command when it executes, so the dashboard just produces terminal lines and therefore the UI lose most of its appeal :)