danielvivar.com

This site contains a personal resumé/CV as a Vue.js app. It makes use of Vue CLI 3.

Pre-requisites

Specifify a FontAwesome token, see .env.example for instructions

How to start

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:

Continuous Deployment with Netlify

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.

Troubleshooting

npm gives a weird error for a fontawesome package

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:

1. Remove the PRO icons package

$ npm uninstall @fortawesome/pro-light-svg-icons

2. Use the correct package when importing 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!

E-mail/phone buttons are not working

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

Why didn't I add this in the `serve` command?

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 :)

jdvivar/danielvivar.com