projects.

Creating.

Building.

Repeat.

Coding is a side passion of mine since 2003.

Recent Proficiencies TL;DRReactJS / NextJS / JavaScript / TailwindCSS / MaterialUI / Mantine / WordPress / Ghost / HTML5 / CSS3.

Here are a few of my actively-maintained Personal Experimentations / Side Projects I have built thus far.

ADULTING STUFFZ · Self-Help Blog

TechStack.
  • Frontend
    • NextJS (ReactJS)
    • JavaScript
    • HTML5
    • CSS3
    • TailwindCSS
    • MaterialUI
    • Mantine
  • Backend
    • Ghost CMS (Headless)
  • APIs
    • MailGun
    • GitHub
  • Others
    • NPM
    • Git
Brief.

The initial intention of this project was to create a subscription-based blog that can tap on the full flexibility of integrating any build, code, or tool that I wanted while achieving the loading speeds benefits of a static website. This particular combination is not achievable with existing tools such as WordPress or Ghost, which are great tools in what they do but do lack the ability to fully customize the UI/UX to a personalized level.

In addition, this project also serves as a challenge for me to attempt at a static webapp based on a JAMStack, by self-learning NextJS and integrating it as a frontend interface to a Ghost CMS (Headless) backend, which I really love to use to help manage content given Ghost‘s very clean and simple interface. 

Though I had initially expected this project to take up about 2-3 months to complete, in reality, it took roughly double the time, as despite having foundational knowledge of building on ReactJS, there were a number of integration issues with the way how NextJS processes a request, as well as more challenging issues relating to building advanced Ghost features, such as its Magic-Link subscription, or Previewing Post Drafts, amongst others.

Nonetheless, I am very happy with the final result of the project as the loading performance via Web.dev has been near perfect! The next challenge for me is actually making time to update more content to this particular working project! 

Development Duration.

5-6 Months. Since Aug 2021. Currently @ Version 3 in 2022. Actively Tweaking.

Key Features.
  1. Responsive Layouts for All Pages / Posts / Tags.
  2. Custom Error Pages to capture 4xx & 5xx Errors.
  3. Custom Preview Posts Function to enable the ability to Preview Drafts written on Ghost’s Backend Admin Interface.
  4. Custom Maintenance/Content-Not-Ready Pages.
  5. Custom Settings Page Controls to Switch On/Off Specific Features.
  6. Built-In TailwindCSS Support for Easier CSS Maintenance.
  7. Member Subscriptions using Ghost’s In-Built Magic-Link.
  8. Member Subscriptions Authentication-Hack to Authenticate New Email Subscriptions with Ghost Backend.
  9. Custom Code to Abstract Post Views from Google Analytics.
  10. Custom Code to Abstract, Compare & Display Top Posts Views based on statistics from Google Analytics.
  11. Custom Top Posts Page with Selectable Views-Ranking Listing Filters.
  12. Custom Donation Pages with Cryptocurrencies QRCode Support.
  13. Custom Integration of Random-Curated Quotes for Selected Pages.
  14. Integration of CSSNano for Minified CSS for Production (postcss.config.js).
  15. Integration of Terser for Minified JS for Production (webpack.config.js).
  16. UPDATE—2022-01-16: Code Integration with Ghost’s new in-built elements.

THEROBEXPERIMENT · Technical Blog

TechStack.
  • Ghost
  • Ghost CLI
  • HTML5
  • CSS3
  • APIs—MailGun
  • APIs—GitHub
Brief.

As a serious upcoming heavyweight competitor to WordPress, Ghost has been another open-source project I’ve been really wanting to try since 2017, given its famous improvements to the authors’/writers’ experience (Closely similar yet better than Medium) & its “decluttered system” as a CMS system, when compared to WordPress.

Despite a need to spin up a new server due to Ghost‘s need of pre-allocated memory resources for every runtime instance, the unexpected challenge fell more on understanding its unique yet heavily-modularized theme’s coding structure. Though this code structure had definitely made Ghost a very fast, secure & effective system, it really creates a slight pain-point for potential theme-developers as whilst it provides more freedom of design control for custom personalization, the system is still somewhat restrictive, in order to comply with Ghost‘s built-in responsive-ready & security systems.

Nonetheless, I was still glad to have tried my best after a 4-5 month attempt and came to a result, a tad close to my ideal personalization. However, I do think there is still potential for future design/restriction upgrades to further improve my UX/UI for this website. The other alternative is to potentially build a decoupled system via JAMStack where the frontend will be built on a separate web language & hosting platform.

 

Development Duration.

4-5 Months. Since Aug 2020. Currently @ Version 3 in 2021. Pending OverHaul Upgrade.

Key Features.
  1. Responsive-Ready Layouts for All Pages / Posts.
  2. Custom-coded IndexPage/HomePage/CustomPages in an attempt to custom-design Ghost theme to personal requirements.
  3. Custom-coded Individual Post Templating in an attempt to custom-design Ghost theme to personal requirements.

HIREBRED · Experimental Jobs Classifieds WebApp

TechStack.
  • Frontend
    • ReactJS
    • React-Redux
    • JavaScript
    • HTML5
    • CSS3
  • Backend
    • Django (Python)
    • PostgreSQL
  • PaaS
    • Dokku
  • APIs
    • Auth0
    • Stripe
    • SendGrid
    • Unsplash
  • Others
    • NPM
    • Git
Brief.

A project that started off as a new personal challenge to jumpstart on learning ReactJS, React-Redux & Django from scratch, I had initially scheduled roughly 2-3 months to complete a simple online Jobs Classifieds codenamed “Hirebred“. Little did I expect that this timeline will blow over to a good 7-8 months before I finally managed to complete the project. 

The key delay factors involved the substantially-steep learning curve for both ReactJS, React-Redux & Django, especially when one self-learns & attempts to adhere to best practices & troubleshoot runtime & dependency issues at the same time.

Notably, the real fun part was having the full prowess of data-processing now available on the frontend, as well as the ability to push the envelope of design & data display due to the new advancements in ReactJS & modern browser performance upgrades. With a growing ecosystem of 3rd-party open-source NPM libraries, it further expands the ease to quickly build in new features into the project, with the “shared-resource-assistance” of the open-source community at large.

I was pretty happy being able to integrate numerous interesting features, resources into this Progressive WebApp (PWA), such as Auth0, Stripe Checkouts, AWS S3, SendGrid, Unsplash & a few others.

Though the project did fully function at the end of my build, after running it for a span of 4-months, I decided to close off this project.

A few key takeaways that I had learned after my journey:

  1. Do Not Build a project that No One Has The Intention of Using in the First Place.Proved the Demand & Trial The Features Prior to a Full Build.
  2. A ReactJS + React-Redux Combination is a truly fast & efficient powerhouse to build Progressive WebApps for cross-device compatibility.
  3. Have a specialized Frontend Developer & Backend Developer to accelerate builds faster. Doing Fullstack may be helpful, but it will be not efficient for fast builds & scale fast situations, especially if both frontend & backend run on different languages.
Development Duration.

7-8 Months. Since Apr 2019. Retired in Dec 2019.

Key Features.
  1. Responsive-Ready Layouts for All Pages.
  2. Custom Error Pages to capture 4xx & 5xx Errors.
  3. Custom build that converts a new job form payment details into a custom-designed Invoice PDF file.
  4. Custom build with Draft,js to enable minor rich text editor functions for new job form.
  5. Custom integration with Auth0 to simplify server-authentication processes. 
  6. Custom integration with Stripe Checkout Payments for digital payments function.
  7. Custom integration with AWS S3 to both enable immediate backup of generated Invoice PDFs to a server, as well as the download function for users to gain access to the digital invoices.
  8. Custom integration with SendGrid to send out a confirmation email upon completion of the new job form.
  9. Custom integration with Unsplash to preload specific page header images, to add a generated visual representation for each respective page.
  10. Initial backend server setup on Dokku (PaaS) to streamline website management within one platform.

ROBERRYARTS STUDIOS · Business Website

TechStack.
  • WordPress
  • PHP
  • HTML5
  • CSS3
Brief.

Starting up my photography business some time ago in 2012, I tasked myself with creating a relatable brand & website that will help serve up multiple photo-stories quickly & easily. 

Despite identifying WordPress as the platform of choice for its easy-to-update CMS system & feature-rich plugin ecosystem, the website did present an unexpected challenge where it needs to handle pre-loading a large number of images across multiple platforms (Mobile/Tablet/Desktop) at once, while still having the ability to manage a level of “image-protection security“.

Probably after Version 4 was born in 2015, where significant improvements to the WordPress code, plugin ecosystem, as well as new possibilities of a “templating system” within WordPress, where I was then able to better sync up content into a more beautified layout.

Eventually, the overall structure was more or less locked-in after Version 15 in 2018, where advancements in image optimizations & more easily-accessed CDNs were available, which had significantly improved the overall website load-performance timings & cross-platform compatibility. 

Development Duration.

3-5 Months. Since Nov 2011. Currently @ Version 18 in 2022. Actively Tweaking.

Key Features.
  1. Responsive-Ready rollout for All Pages / Posts.
  2. Custom Error Page to capture 404 Errors.
  3. Custom Maintenance Page to replace Index page during Maintenance.
  4. Custom input form to help track client bookings for Estimates/Invoicing requirements.
  5. Integrated security plugin to scan for attempted logins/hacks/viruses.
  6. Integrated security plugin to migrate options to copy photo content illegally.
  7. Integrated optimization plugins to compress custom CSS & JavaScript codes with caching.
  8. Integrated multiple internal plugins to enable faster content & media management for long-term content updates & system upgrades.
  9. From 2013-2021, overhauled, revamped, tweaked & upgraded numerous designs to suit changing market needs & increase in content updates.
  10. In 2021, re-combined & re-integrated the content of 4 sub-branded websites (ROBERRYARTS STUDIOS, CAPTUREFUSE PHOTOGRAPHY, MATCHMADESTORIES, LABELHOUSECREATIVES) into one primary parent website. The latest version now includes:
    • A. ROBERRYARTS PHOTOSHOOTS
    • B. ROBERRYARTS EVENTS
    • C. ROBERRYARTS WEDDINGS
    • D. ROBERRYARTS COLLECTIVE
    • E. ROBERRYARTS CREATIVES

DR FELIX LIM · Business Website

TechStack.
  • WordPress
  • HTML5
  • CSS3
Brief.

Adhering to specific requirements set by Dr. Felix Lim to tailor & showcase personalized brand signature & website in accordance with Dr. Lim’s music-centric methodology & design styles.

Created with WordPress as the base support system, the simplistic outlay was created in an effort to declutter yet ensure that the potential audience will be able to grasp the treatment procedures & be aligned with a prospective therapy session with Dr. Lim.

A key value-adding factor was to add more vivid colors & informative details, to give this long-established profession an added twist, as well as a potentially more “thought-provoking” conversation starter to a new digitally-focused audience.

Development Duration.

1-2 Months. Since Jul 2021. Completed.

Key Features.
  1. Single-Page Website Design.
  2. Responsive-Ready for cross-device displayed (Mobile/Tablet/Desktop).
  3. Custom input form to enable direct follow-up via default email.
  4. Integrated optimization plugins to compress custom CSS & JavaScript codes with caching.
  5. Integrated multiple internal plugins to enable faster content & media management for long-term content updates & system upgrades.

LABELHOUSECREATIVES (Now ROBERRYARTS CREATIVES) · Business Website

TechStack.
  • WordPress
  • PHP
  • HTML5
  • CSS3
Brief.

Previously set up as a separate Brand Consulting label named “LABELHOUSECREATIVES” back in 2014, the original website that was built on WordPress, to streamline my updating & upgrading processes, was created to solely showcase Print, Digital & Interactive works created for my professional clients. 

Most of this particular project was more labor & time-consuming on two fronts, namely the design side, where multiple angles of mockups & design prototyping had to be newly-created to help the viewer visualize the collateral in its actual form, as well as the interactive side, where numerous micro-level layers have to be individually-crafted & animated to create the different slider-boards for the respective introduction headers. 

Despite only revising over 5 different versions over 7 years, I eventually decided to re-merge this portfolio of works under one bigger primary umbrella in 2021, which was renamed to ROBERRYARTS CREATIVES under ROBERRYARTS STUDIOS

Development Duration.

2-3 Months. Since Nov 2014. Merged with ROBERRYARTS STUDIOS as ROBERRYARTS CREATIVES.

Key Features.
  1. Responsive-Ready rollout for All Pages / Posts.
  2. Multiple Interactive Custom-Sliders that correspond to movements of the user’s mouse movements.
  3. Custom Error Page to capture 404 Errors.
  4. Custom Maintenance Page to replace Index page during Maintenance.
  5. Integrated multiple internal plugins to enable faster content & media management for long-term content updates & system upgrades.

3ANGULAR · Experimental Visual Analytics Microsite

TechStack.
  • AngularJS
  • HTML
  • CSS
  • jQuery
  • D3.js
Brief.

Built as a visual analytics module project, this experimental microsite aims to tap on the potential of D3.js, a very powerful open-sourced JavaScript visualization library, as well as to stretch the minimum potential of how graphs can be updated with live data on-the-fly via JSON & animated on command via JavaScript. 

The tightly-scheduled project was quite a challenge, notably having the need to self-learn & understand how D3.js, jQuery & AngularJS functioned, while still attempting to combine it with a self-summarized knowledge of how the Singapore COE system worked, as well as simplifying the overall User Experience / User Interaction (UX/UI) in the process.

In the end, the intense hard work paid off & the result of the project scored high points by the grading panel. 

Development Duration.

2-4 Weeks. Since 2011. Completed.

Key Features.
  1. Animate Various Graph Types using D3.js/Javascript/JSON.
  2. Custom-designed & coded interactive in-page features to increase the visual appeal of RAW data for viewers using jQuery animations.
  3. Single Static Page design to compress all related information regarding the topic of Singapore’s COE Rates & Bidding Processes & hard-coded using AngularJS/HTML/CSS.

ROBERT CHAI · Personal Website

TechStack.
  • WordPress
  • PHP
  • HTML5
  • CSS3
Brief.

What started off as a personal, experimental design-branding site named “Bertographic.com“, to bring together my digital design portfolio, eventually morphed into redesigning for a personal website as a redirection-hub for my personal projects, photo snaps & albums, and having a clearer separation from my professional photography portfolio as it slowly grows over the years.

From the raw HTML/CSS coding combination on NotePad on Microsoft Windows back in 2007 where personal websites are pretty much “hard-coded“, to the conversion to “RobertChai.com” on WordPress in Version 3 in 2013.

Moving through the years from 2014-2018, the website grew in complexity along with my work & exploratory interests. However, it reached a point in 2019 where I wanted to “flush out” the layers piled up & just have a clean website with a lot of whitespaces yet still attempting to retain especially the numerous photos & albums over the years.

Version 12 represented that beautifully well & I’m comfortably happy with making new website optimizations & the overall results ever since.

Development Duration.

3-4 Months. Since Nov 2007. Currently @ Version 15 in 2022. Actively Tweaking.

Key Features.
  1. Responsive-Ready rollout for All Pages / Posts.
  2. Custom-Tweaked Templating System to handle different categories of content (eg. Albums/Lookbacks/etc.)
  3. Custom Error Page to capture 404 Errors.
  4. Custom Maintenance Page to replace Index page during Maintenance.
  5. Custom input form to handle direct correspondence via email.
  6. Integrated security plugin to scan for attempted logins/hacks/viruses.
  7. Integrated security plugin to migrate options to copy photo content illegally.
  8. Integrated optimization plugins to compress custom CSS & JavaScript codes with caching.
  9. Integrated multiple internal plugins to enable faster content & media management for long-term content updates & system upgrades.