hliejun's Portfolio

TECHNOLOGY

BUILD

Vue

Nuxt

AMP

SASS

TOOLS

NPM

Lighthouse

Photoshop

PLATFORMS

Google App Engine

GitHub Pages

ABOUT

DESCRIPTION

This portfolio lists some of my past work and projects, as well as my job history. It serves as a platform for me to share about myself, my interests and my work processes and outcomes.

The site uses the Vue MVVM pattern and directives for reusable, lightweight components and to separate data from the views. It consists of AMP components for asynchronous loading of media and scripts to speed up load time. Media queries and SASS mixins are used to create responsive layouts that adapts to various screen sizes and orientations.

MOTIVATION

I created this portfolio to document my work, projects and learning experiences. It also served as an opportunity to learn the ropes of SEO and server-rendering, pick up the Vue MVVM framework and directives, as well as practice the use of AMPHTML to create performant webpages.

In my experience with frontend web development, this was my first time stepping outside the realm of ReactJS and working with Vue and AMP.

CHALLENGES

The main challenge that I faced would be to have AMP play nice with Nuxt and scripts. Due to the restrictions that AMP imposes, I relied on additional AMP dependencies and media queries for responsive component behaviours.

Moving away from functional components in React, I took some time getting used to the Vue framework and use of directives to populate DOM elements.

REFERENCES

AMP Guide About AMP directives, restrictions, async components.

Vue Guide Explains Vue directives and framework.

Nuxt Guide Useful for Nuxt configurations, custom headers, routing, rendering options, structure and attributes usage.

Nuxt AMP Example Describes the integration of AMP with Nuxt, especially in header and metadata configurations.

SEO Starter Guide Guide to search engine optimisation by Google.

Nuxt SEO Guide Article about search engine optimisations for server-rendered Nuxt pages on Medium.

Widgets for WhatsApp™

React Chat