Brief DescriptionIt 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.
RoleDesigner, Developer, Theming, Information Architecture, User Experience
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.
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
- 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.
- 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.
- 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.
- SVG for logo, arrows and curve background
- CSS grid
- CSS animations
- Typewriting animation effect
- Image optimatization
- Progressive enhancement
- Fallbacks for text gradients
- Used feature queries to provide Flexbox fallback for CSS grid
- WCAG 2.1 compatible