Last Update: June 25, 2020
June 25, 2020
I am cleaning up my css and synchronize it back to my design files on Figma. I'm establishing a system on CSS variables especially on typography and color, which will hopefully laid up the foundation for upcoming new features to the website.
- ADDED Film component for blog to feature films that I reviewed
- ADDED Tag component at the bottom for each blog post
- ADDED Tip component for additional information shared on the blog
- CHANGED Page Title component
- CHANGED Button component style
- CHANGED Blockquote style
- CHANGED color scheme system for upcoming Light, Dark mode implementation and primary color
- CHANGED unordered list and ordered list style
- CHANGED body font from Libre Caslon Text to Chivo.
June 7, 2020
- ADDED Load More button on Blog page to enhance load speed (Tutorial on Codepen)
May 22, 2020
Work page is kind of dull right now with repeat content same as the Home page. I'm adding a screenshot carousel in replacing the "More Work" section. I have also updated the hero section for each case study, adding brand color and a transparent mock-up to let it be more attractive. In the end, I'm hoping to add some hover animation that could make the experience more interactive.
- CHANGED Work Preview on Home Page, Limit to 2 Case Studies Only
- ADDED More Work Carousel using React Carousel
- ADDED Prominent Hero Section for Individual Case Study Page
- UPDATED More detailed case study on the design process
Apr 20, 2020
This is one of the biggest change since I have updated my website to Gatsby 2.0. The site has undergone massive refactor, after learning more on react, I have decided to retire some old components, switching Class Components to functional component and set up type checking using Proptype. I have also introduce a new typography system for better reading and vertical rhythm. Spacing between images and paragraph should be more loose than before.
- ADDED New typography system
- CHANGED New primary font (Gibson from Adobe Font)and secondary font (Libre Caslon Text from Google Font)
My previous focus on the Photo section is to make Gatsby possible to serve as a photo portfolio. Now that it is completed (with some kind of manual work), I'm working on the aesthetic side. I have revamped the Photo Index Page and added a Photo grid section on Home page. The feature photo set seems still need some work on it as the style is incoherent. Loading speed of the home page is affected due to the photos added in the section, still working on a solution to it.
- ADDED Photo grid section on Home Page
- CHANGED Photo page layout
Jan 5, 2020
- Edited About Page with new Resume section
Dec 23, 2019
- Added Photo Section from previous portfolio
- Added Photo Main & Photo Post
May 26, 2019
- Added Gatsby-MDX to the website
- Added GatsbyRemark-Image-Zoom to add lightbox to all images processed on Gatsby Image
- Added new Gear page using MDX, more content and photos will be added
- Added new Changelog page using MDX
- Added TLDR field in markdown, Blog listing will prioritize to show TLDR, and rest will show excerpt of first 300 characters.
- Updated footer with Gear and Changelog
Mar 21, 2019
- Launched v2 using Gatsby 2.0
Oct 31, 2018
- Revamped landing page with new design and content. I have added my service section and an about section with React Simple Map as background (but it could function so much more)
- Revamped work page design. The section background is dynamic now to match every projects' brand color (manually input from the markdown files).
- Added mobile navigation and animation with some icons that I drew.
- Added 404 Page. One small step for man, one giant leap for mankind
- Added Work Category Page, each service can be viewed individually with relevant projects
- Enhanced landing page experience by cool reveal animation using React-Reveal
- Enhanced scroll animation using React Anchor Link Smooth Scroll when you click Get In Touch on landing page
- Enhanced blog reading experience especially with code block. Code will highlight according to the language using Gatsby-Remark-PrismicJS
- Enhanced footer design by replacing the author component, also added social media links and contact access.
- All blog posts have a feature image now on the top
- Fixed related post referenced to Gatsby Material Starter node.js
- Fixed code block overflow problem in blog
- Fixed Footer Width Problem
- Fixed Tag and Category with multiple words in slug using kebabCase