Website revamp

Brief Description

It has been awhile since my personal portfolio site was last updated. Aside from a fresh visual redesign, I also rebuild the site using a different stack configuration.


Natalie Chin


Designer, Developer, Theming, Information Architecture, User Experience

Technology Used

    Hexo, HTML, SCSS, Javascript, EJS, SVG, YAML, Gulp, Adobe XD

The Challenge

Being my own client, I had the freedom to implement anything I want to, especially in the areas of UX and web accessibility. In this project, I wanted to use some of the new tricks I learned at Smashing Conference 2018 in Toronto - particularly SVG, gradient, animations, CSS Grid, and feature queries.

I also wanted to have the backend of my web site function like a lightweight CMS with templates that will allow me to easily add new content through defined fields. This will allow me to scale much easier and faster. The previous site used a JSON and Javascript string interpolation.

My goal was to complete the redesign and redevelopment in 2 weeks. I considered Vue.js since I am learning it and it would be a good practice project for me, however considering the timeline that I have set, I decided to use EJS templates with Hexo. This is not a step back since it will actually make it easier for me to rewrite the code using Vue.js now that I already have templates that can be easily ported into Vue components and also, the content is now up-to-date and broken down into fields.

item.left_alt_tag ||
A screenshot of the old website
A screenshot of the new website
A screenshot of the new website

The Process Taken

  1. Inventorized projects and rewrite content
    Inventorized projects completed. I decided to rewrite the content for each of my projects following a structured format that will highlight the challenges of each project and the thought process and technology implementation to help overcome these challenges. I also included my role in these projects and the client that I have received.
  2. Branding, design and prototyping phase.
    For the initial design phase, I followed Dan Mall’s advice on incorporating design components that I really liked from sites that I have came across. I also looked for layout inspirations on Pinterest and Dribbble and created a wireframe on paper and prototyped it using Adobe XD. While doing this, I also chose my other design assets such as colors and fonts.
     Mockup of site
  3. Implementation phase.
    Installing and setting up Hexo was actually quite a pain as the error messages were really vague. I was able to understand some of the YAML coding idiosyncrasies and iron out the bugs in my source files. I proceeded to build out the template files using EJS using my experience templating content types using Twig in Drupal. I used Gulp to compile my SCSS into CSS and minify CSS and JS files.


I was really pleased with how my new portfolio site turned out. It was a little difficult at first since I have to work with my own branding which needed to be defined, and also, the client would usually provide input and feedback. The site and its design elements came together cohesively, and it reflects my personality and how I like to showcase my work to my clients, a polished end product.

Features implemented:

  • SVG for logo, arrows and curve background
  • CSS grid
  • CSS animations
    Animation on buttonHover effect on arrow buttons
  • Typewriting animation effect
    Typewritter animation on page heading
  • Image optimatization
  • Progressive enhancement
    • Fallbacks for text gradients
    • Used feature queries to provide Flexbox fallback for CSS grid
  • WCAG 2.1 compatible