nataliech.in

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.

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.
   
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.