Creating.
Building.
Repeat.

- Frontend
- NextJS
- ReactJS
- Redux-Toolkit (RTK)
- React-Query
- TypeScript
- TailwindCSS
- RadixUI
- ShadcnUI
- Mantine
- HTML5
- CSS3
- Immer
- JSON
- JSON Web Tokens (JWT)
- Dotenvx
- Backend
- PostgreSQL
- DevOps
- Supabase
- Vercel
- CloudFlare
- Git
- API
- Stripe
- Others
- Visual Studio Code (VSCode)
- Zod
- PNPM
- SGQR-PayNow
The following will be a skeletal explanatory breakdown of the build given the sensitive-active-build of the project.
[TL;DR]
Solely designed & built this fullstack white-label (OEM) Community-Builder SaaS product to digitally empower non-technical organizations to grow their communities:
- Hyperlocalized With Superpowers—Simplified, security-focused community-builder turnkey solutions that eliminate chaos of multiple platforms and tooling.
- Human-Centric Automation—Battle-tested user-calibrated automated-workflows that make customers’ or administrators’ experiences fun high-quality & a breeze to use.
- Accelerate Real-People Impact—Equip organizational team members the freedom to focus on real, communal-interactive impact while allowing the platform to handle the grunt work.
The current primary product-focus is on *MingleMemberships*, which centers around working solutions that will help our existing clients resolve their community-building issues.
[2025-07-23]
This platform has officially served 170 user(s), across 5 event(s), and helped clients transacted a total of SGD 18,639.60 since the initial 4-months of service.
[A. MingleMemberships (WebApp)]
- BYOB (Bring Your Own Branding):
- Multi-Tenant White-Labeling (OEM) Solutions for multiple clients
- Client-Focused Brand-Presence across entire system including URL addresses
- Responsive-Ready designs to enable immediate access across platforms
- Events:
- Membership-Verification For Members-Only Ticketing
- Add-On Trackable Guest(s) Ticketing
- Add-On Trackable Group-Ticketing capabilities for bulk-orders
- Add-On Product Sales with active-quality tracking
- Switchable To Complimentary-Only RSVP bookings with tracking
- Payments Via Stripe (One-Off / Automated Subscriptions)
- Payments Via SGQR-PayNow
- Event-Day live Attendees’ registrations & tracking
- Memberships:
- New Memberships Registrations
- Add-On Subscriptions with multi-year package purchasing
- Add-On Product Sales with active-quality tracking
- Multi-Year Memberships-Tiered Selection
- Automated Existing Memberships Renewals & Reminders
- Admin
- Advanced Dynamic analytics
- Events / Attendees / Orders / Payments / Members tracking
- Granular Permissions Management
- Enhanced B2B-Grade Security session usage
- And many more…
[B. MingleConnect (Module)]
- Social-Login Module to enhance Memberships capabilities for pre-existing membership-databases.
- Secured session login with active JWT authorization
[C. MingleTribe (MicroSite)]
- Responsive-Ready Landing MicroSite For MingleTribe
- Covered Full Design, Copywriting and Overall Custom-Build
[A. MingleMemberships (WebApp)]:
On-going active fullstack build since Aug 2024.
[B. MingleTribe (MicroSite)]:
Fully customized landing page build since Mid-Aug 2025. Baseline build completed within 3-4 weeks on 20250909.
- Multi-Tenant Turnkey Solution Provider—Ability To Enable Clients To Run Their Full Brand Presence While We Manage All The Hard Work Behind-The-Scenes.
- Multi-Tiered Page-Content Security—Utilizing A Mix Of Middleware-Filtering, Authenticated JWT Verification & Component-Level User-Role Authentication Layers.
- Highly-Customized Complex Components—Multi-tiered Fully-Customized Component system To Enable Code-Scalability & Future Code-Maintainability.
- And many more…
![[MingleTribe] Community-Builder Turnkey-Solutions WebApp - MingleMemberships - Admin Portal Login Page](/images/screenshots/webp/20250723-mingletribe-minglememberships-webapp-admin.portal-screenshot2025-07-23-16_54_29.webp)
![[MingleTribe] Community-Builder Turnkey-Solutions WebApp - MingleMemberships - All Events Page](/images/screenshots/webp/20250723-mingletribe-minglememberships-webapp-all.events-screenshot-2025-07-23-18_39_19.webp)
![[MingleTribe] Community-Builder Turnkey-Solutions WebApp - MingleMemberships - Admin Portal Login Page](/images/covers/webp/20250909-mingletribe-site-landing.page-screenshot2025-09-09-22_49_34.webp)
- Frontend
- NextJS
- ReactJS
- Redux-Toolkit (RTK)
- RTK Query
- JavaScript
- TailwindCSS
- MaterialUI
- Mantine
- HTML5
- CSS3
- Immer
- GraphQL
- JSON
- JSON Web Tokens (JWT)
- I18Next
- Backend
- GoLang
- PostgreSQL
- DevOps
- Git
- Docker
- Redis
- Azure DevOps (ADO)
- API
- Okta
- Others
- JIRA
- Confluence
- Visual Studio Code (VSCode)
The following will be a skeletal explanatory breakdown of the build given the work-related embargo on the project.
[TL;DR]
Built on & Led a lean 5-personnel team of 4x Frontend Developers while working closely with our 4x Backend & 1x DevOps members. This new ground-up build seeks to:
- Simplify and improve stakeholders’ workflows impacting primarily Hospitals, Doctors and Patients.
- Digitize pre-existing paper-based manual processes across medical markets in the APAC region.
- Enable language localization capabilities to help local markets better interact with webapp.
- Streamline new digital processes and utilize webapp as a one-stop portal for processes relating to Patient Care.
[A. DPC+ WebApp]
- Structured a standalone Healthcare WebApp codenamed Digital Patient Care Plus (DPC+) / Patient Care Plus (PCP) from the ground up.
- Frontend Build: Utilize a modernized ReactJS-based tech-stack revolving primarily around JavaScript, ReactJS, NextJS, Redux-Toolkit (RTK), RTK Query, TailwindCSS, MaterialUI, Mantine, Okta, I18n, JWT, HTML5 & CSS3, with GraphQL & JSON as the middleware connection between the Backend.
- Backend Build: Utilize GoLang as the primary build language & PostgreSQL as our Database.
- Hosted on Azure DevOps (ADO) with Docker. Some integration with Redis was also involved to improve data pickup speeds to the Frontend.
- Overall project was managed on JIRA via bi-weekly sprint cycles, and code documentation running on Confluence.
[A. DPC+ WebApp]:
Planning Initiated Since Dec 2022. I helped to setup the Foundational Codebase Since Late-Jan 2023 while a New Team Was Formed & Prepped. Our Overall Team Build Started in Mid-Feb 2023 running on Bi-Weekly Sprints. Lead & Co-Coded for the project for the next 10-11 Months. In this midst, I also Trained & Mentored Mid-Junior Frontend Developers, as well as was on a Interview-Hiring Process To Re-Pick New Developers and hire an Additional Tech Lead who eventually took over my Frontend duties for the project.
- Multi-Tiered Page-Content Security—Utilizing A Mix Of Middleware-Filtering, Authenticated JWT Verification & Component-Level User-Role Authentication Layers.
- Translated Localization Content—Using i18n Techniques Coupled With Backend Database Syncing To Save Last Preferred Translation Settings.
- Highly-Customized Complex Components—Notably For Select-Dropdowns That Enabled Fast-Search For Dropdown-List Content For Up To 1,000 Items With The Ability To Easily Switch Between Different Modes Of;
- (a) Plain, Clickable Options,
- (b) Selectable Checkbox options, OR
- (c) Customizable With Icon Options capabilities.
- Various Component-Wrappers—To Enable Faster Code Integration For Similar Use-Cases, and More Importantly, Reduce Redundant Replicated Codes Across WebApp To Better Optimize Overall Build Package Sizing.
- Utilization of Redux-Toolkit Query (RTK Query) with GraphQL to fully streamline the WebApp’s bulk data-exchange with the Redux and the Backend, as well as to help provide a snappy interactivity experience for the user.
- Custom Sidebar-Overflow That Integrates A Complex TreeList Structure Design That Will Highlight The current-active Child-Node Link, While Switching Between Different Containers To Facilitate Different Page-Interactive-Design-Views Required By The Design Team.
- Responsive-Ready Landing Page (Main WebApp To Fully Convert In Due Time Due To Other Key Build Priorities.)
![[Zuellig] PatientCare+ B2B Admin Portal WebApp - Translated Landing Page](/images/screenshots/webp/20230414-zuelligpharma-digitalpatientcare-webapp.admin.portal-screenshot.2023-04-14.at.11.56.14.AM.webp)
![[Zuellig] PatientCare+ B2B Admin Portal WebApp - Profile Management Sample Listing Page](/images/screenshots/webp/20230414-zuelligpharma-digitalpatientcare-webapp.admin.portal-screenshot.2023-04-14.at.11.56.50.AM.webp)
![[Zuellig] PatientCare+ B2B Admin Portal WebApp - Hospitals Sample Details Page](/images/screenshots/webp/20230414-zuelligpharma-digitalpatientcare-webapp.admin.portal-screenshot.2023-04-14.at.11.57.37.AM.webp)
![[Zuellig] PatientCare+ B2B Admin Portal WebApp - Hospitals-Profile Sample Details Page With Hovered Sidebar](/images/screenshots/webp/20230414-zuelligpharma-digitalpatientcare-webapp.admin.portal-screenshot.2023-04-14.at.11.57.48.AM.webp)
![[Zuellig] PatientCare+ B2B Admin Portal WebApp - Hospitals-Contact Sample Details Page](/images/screenshots/webp/20230414-zuelligpharma-digitalpatientcare-webapp.admin.portal-screenshot.2023-04-14.at.11.58.03.AM.webp)
![[Zuellig] PatientCare+ B2B Admin Portal WebApp - Landing Page](/images/covers/webp/20230414-zuelligpharma-digitalpatientcare-webapp.admin.portal-screenshot.2023-04-14.at.11.55.58.AM.webp)
- Frontend
- NextJS
- ReactJS
- JavaScript
- TailwindCSS
- MaterialUI
- Mantine
- Markdown (MDX)
- HTML5
- CSS3
- JSON
- NPM
- DevOps
- CloudFlare
- Vercel
- GitHub
- Others
- Visual Studio Code (VSCode)
The main intention of this build, was to seek improvements in page interactivity & loading-speeds of my Coding Portfolio by building on the significantly-faster Static-Site-Generation (SSG) Stack plus experimenting on the new & upcoming React Server Components (RSC) / App Router with NextJS concept as compared to previously being hosted as part of a WordPress page, which will be a tad-bit slower given the additional need to pre-load other WordPress plugins & the templating system beforehand.
What I had wanted for this upgrade is to create a flexible yet simple site that I can continue to manually update and/or upgrade the portfolio easily, as well as enable me to occasionally extend it should I intend to experiment with new code extensions. This would definitely be a much better option over my pre-existing WordPress build as its design & templating system is significantly more restrictive after the initial set up.
With the new use of MDX files as an alternative Markdown input, this feature will give me an added layer of ease & flexibility to easily add new content when I add new projects to this listing.
Also, this build is giving me the opportunity to experiment & test out the new NextJS v13 Server-Sided Components’ build design & architecture, which is definitely a surprising speed bump! Looking forward to pushing new boundaries & build updates as this project moves along!
- [New] RobertChai-Projects Changelog - New Changelog tracker implemented on 2024-04-04.
- [New] https://projects.robertchai.com - Loads within 1-2s.
- [Old] https://robertchai.com/life/projects - Loads within 2-3s.
[A. Static-Site]: 3-4 Weeks. Since Early-Mar 2023. Completed Baseline Build Without Responsiveness Built-In at 3rd Week Mark. The 4th Week Was Used to Cover Up Mainly for New Content Updates. Completed Build in v3.0.0 on 20230401 for Final Updates With Fully-Responsiveness Built-In For Desktop/Tablet & Mobile. Actively Tweaking.
[B. 2024-Mar v4.5.3 Update]: Given an array of external component library upgrades that significantly broke the website since Sep 2023, I have delayed the update till when I have the time to rebuild most of the key components from scratch to improve the buggy user experience that plagued the site if I just plainly updated the component libraries.
Decided to rebuild most of the key components using a highly popularized Radix-UI, which strips away a lot of the non-essential codes and allowing full customization plus highly optimized base components to work on. Overall build took about 2-3 weeks to complete.
Currently @ Version 4 in Feb/Mar 2024. Optimization improvements from v4.2.9 [Desktop // Performance: 64 / Accessibility: 82 / Best Practices: 96 / SEO: 100] to v4.5.1 [Desktop // Performance: 90 / Accessibility: 92 / Best Practices: 100 / SEO: 100], providing a 1.0s FCP direct improvement to first load of the page.
Thereafter, other slights refinements were also achieved TBT & LCP upon v4.5.3 [Desktop // Performance: 94 / Accessibility: 92 / Best Practices: 100 / SEO: 100]. Further New Tweaks are expected moving forward.
[C. 2024-Apr v4.7.4 Update]: Decided to add a new “Switch View” functionality where Viewers can switch between either “List” or “Cards” view to view the Portfolio of Projects. This required some new code restructuring as the current Webapp is based on NextJS v14’s React Server Components (RSC) build, the manner on how data is passed especially from a Client-Component down to a Server-Component is much more tricky than the standard “useContent” methodology.
This tweak was planned sometime back and I’m glad it took about 5-days to execute. Another 3-4 days were used to attempt to optimize the newly-added chunks of code. Latest on 2024-04-07 running at v4.7.14 [Desktop // Performance: 86 / Accessibility: 92 / Best Practices: 100 / SEO: 100].
- Responsive-Ready For Both Desktop/Tablet & Mobile. Optimized Ideally For Desktops/Tablet Viewing.
- Custom Error Page with New Error-Boundary Sub-Page Detections.
- New Custom-Built Header-Bar That Include Intuitive Shortcuts That Either Provide Immediate Links Accesses Or Action Shortcuts.
- New ”🚨 Recent Proficiencies” TL;DR Segment That Expands In-Depth With Search & Other Interactive Capabilities.
- New Timeline-Trail For Projects For A Clearer-Visual Rundown Of Each Project’s Content-Span Across The Entire Webpage.
- New Header-Link-Click To Immediately Direct User To Anchor Segment.
- New Header-Link-Anchor Animated Copy-Shortcut That Will Copy Link To Clipboard.
- Improved Content Segmentation & White-Space Allocation For Better Reading.
- UPDATE—2023-04-01: Completed Granular Responsive-Ready Components For Improved, Optimized Views On Mobile.
- UPDATE—2023-04-01: Revised Search-Module Launch To Enable Multiple Launch-Trigger-Components.
- UPDATE—2023-04-01: Updated Mobile-Popup Views To Drawer Components For Better Interactivity.
![[RobertChai-Projects] PageSpeed Analysis v4.2.9 - Desktop Results](/images/screenshots/webp/20240324-robertchai-projects-screencapture-pagespeed-web-dev-analysis-9capjkc6jk-2024-03-24-09_05_03.webp)
![[RobertChai-Projects] PageSpeed Analysis v4.5.1 - Desktop Results](/images/screenshots/webp/20240324-robertchai-projects-screencapture-pagespeed-web-dev-analysis-dhaxljl5rg-2024-03-24-09_05_18.webp)
![[RobertChai-Projects] PageSpeed Analysis v4.5.3 - Desktop Results](/images/screenshots/webp/20240324-robertchai-projects-screencapture-pagespeed-web-dev-analysis-9mnxzwg8cg-2024-03-24-09_05_29.webp)
![[RobertChai-Projects] GTMetrix Analysis v4.5.3 - Desktop Results](/images/screenshots/webp/20240324-robertchai-projects-screencapture-gtmetrix-reports-projects-robertchai-com-3MWGSWxE-2024-03-24-09_13_27.webp)
![[RobertChai] Projects by RobertChai Website - Coding Projects Portfolio Page](/images/covers/webp/20230326-robertchai-projects.by.robertchai-screencapture-localhost-3000-2023-03-26-20_14_37.webp)
- Frontend
- NextJS
- ReactJS
- Redux-Toolkit (RTK)
- RTK Query
- JavaScript
- TypeScript
- TailwindCSS
- MaterialUI
- Mantine
- HTML5
- CSS3
- StorybookJS
- GraphQL
- RESTful APIs
- JSON
- JSON Web Tokens (JWT)
- LernaJS
- PNPM
- Prettier
- Jest
- React Testing Library
- Cypress
- Webpack
- Backend
- GoLang
- PostgreSQL
- DevOps
- Git
- Docker
- Azure DevOps (ADO)
- Others
- JIRA
- Confluence
- Notion
- Visual Studio Code (VSCode)
The following will be a skeletal explanatory breakdown of the build given the work-related embargo on the project.
[TL;DR]
Built on a one-man personnel team, this ecosystem was conceptualized and constructed to help:
- Drive collaborative initiatives between various Engineering & Design Teams,
- Streamline resources & unify duplicated codes,
- Consolidate common build services together, and
- Bootstrap initiative to bring together multiple pre-existing siloed & newer MicroApps under a bigger SuperApp umbrella.
[A. Boilerplate WebApp]
- Architected & built APAC’s first Healthcare SuperApp’s webapp component ecosystem codenamed Boilerplate from the ground up, seeing >40% efficiency bumps & significantly-improved code maintainability through reusable cross-webapp components, centralized theming system & cleaner coding structuring.
- Used a combination of NextJS, ReactJS, Redux-Toolkit (RTK), RTK Query, JavaScript, TypeScript, TailwindCSS, MaterialUI, Mantine & StorybookJS, HTML5 & CSS3 with GraphQL as foundational libraries.
- Included additional tooling support for Prettier, Jest, React Testing Library & Cypress.
- Hosted on Azure DevOps (ADO) with Docker.
- Managed via JIRA on weekly sprint cycles.
[B. Boilerplate Monorepo WebApp]
- Branched out a concurrent monorepo build using Lerna & PNPM, which will better modularize various component-sets or webapp-sets into individual packages that can eventually be served up under an npm private registry.
- Strengthened a SuperApp-hierarchical build structure & facilitated more efficient code redistribution & maintenance for the longer term. ’ Reduced extended duplication of npm packages’ downloads thus improving the growing list of npm libraries’ updating processes.
[C. Boilerplate Technical Docs]
- Built an interactive technical documentation based on StorybookJS that targets solely Frontend-Webapp Developers. This tooling helps developers to save crucial time by enabling immediate previewing of the boilerplate’s pre-built atom-components / preset-components without the need to clone the code repository and build a copy in their local development machine.
- Served as an immediate documentation repository for developers to take reference on how to activate the boilerplate’s pre-built atom-components / preset-components, either in Offline Mode (Local Dev Machine) or in Online mode (Hosted Docs).
- Enables the future ability to execute unit-testing of individual components or end-to-end testing of experience-interfaces prior to releasing the codebase to production, thus simplifying the need to write separate testing codes via Jest / React Testing Library / Cypress.
[D. Boilerplate Docs]
- Wrote up detailed internal documentation on Notion to help serve as a “central-source-of-truth” for both Technical & Non-Technical viewers who are totally new to the boilerplate ecosystem.
- Served up immediate links to critical modules of the boilerplate ecosystem so that self-serve viewers can instantly access codebases, documentation, or demo previews, to help resolve their build needs.
[A. Boilerplate WebApp]: 2-4 Months. Since Apr 2022. Weekly Sprints. Completed Baseline Build at v1.18.1 which Covers For 95% Of Build Use-Cases. Latest Build at v1.30.0 in early Nov 2022.
[B. Boilerplate Monorepo WebApp]: 1-2 Months. Since Aug 2022. Concurrent Build. Weekly Sprints. Latest Build at v1.30.0 in early Nov 2022.
[C. Boilerplate Technical Docs]: 2-3 Months. Since May 2022. Concurrent Build. Weekly Sprints. Completed Baseline Technical Docs at v1.18.1 which Covers About 20-30% Of Atom-Components. Latest Build at v1.30.0 in early Nov 2022.
[D. Boilerplate Docs]: 1 Month. Since Jul 2022. Completed Foundational Docs at v1.17.1 which Covers Overarching Ecosystem Docs for General Technical & Non-Technical Audience. Latest Review at v1.30.0 in early Nov 2022.
![[Zuellig] Boilerplate WebApp - Authenticated Homepage](/images/screenshots/webp/20221103-zuelligpharma-boilerplate-screencapture-boilerplate-webapp-azurewebsites-net-ezdemo-home-2022-11-03-17_51_12-scaled.webp)
![[Zuellig] Boilerplate WebApp - Authenticated Page - Prescriptions](/images/screenshots/webp/20221103-zuelligpharma-boilerplate-screencapture-boilerplate-webapp-azurewebsites-net-ezdemo-doctor-prescriptions-2022-11-03-17_51_43.webp)
![[Zuellig] Boilerplate WebApp - SuperApp - EZHealth - UnAuthenticated Homepage](/images/screenshots/webp/20221103-zuelligpharma-boilerplate-screencapture-boilerplate-webapp-azurewebsites-net-home-2022-11-03-09_35_34.webp)
![[Zuellig] Boilerplate WebApp - MicroApp - EZDemo - UnAuthenticated Homepage](/images/screenshots/webp/20221103-zuelligpharma-boilerplate-screencapture-boilerplate-webapp-azurewebsites-net-ezdemo-home-2022-11-03-09_35_24.webp)
![[Zuellig] Boilerplate Docs - Notion - Central-Source-Of-Truth Ecosystem Docs](/images/screenshots/webp/20221103-zuelligpharma-boilerplate-screencapture-boilerplate-notion-docs-2022-11-03-17_53_40-scaled.webp)
![[Zuellig] Boilerplate Technical Docs - StorybookJS](/images/screenshots/webp/20221103-zuelligpharma-boilerplate-screencapture-boilerplate-docs-2022-11-03-17_55_55-scaled.webp)
![[Zuellig] Boilerplate WebApp - SuperApp Template - Landing Intro Page](/images/covers/webp/20221103-zuelligpharma-boilerplate-screencapture-boilerplate-webapp-azurewebsites-net-2022-11-03-09_35_42.webp)
- Frontend
- ReactJS
- JavaScript
- TailwindCSS
- MaterialUI
- HTML5
- CSS3
- Chrome Extensions V3
- RESTful APIs
- JSON
- JSON Web Tokens (JWT)
- NPM
- Backend
- ExpressJS
- NodeJS
- MongoDB
- DevOps
- AWS Lambda
- Git
- Others
- Asana
- Trello
- Visual Studio Code (VSCode)
The following will be a skeletal explanatory breakdown of the build given the work-related embargo on the project.
[A. WebApp]
- Re-architected & simplified a new v2 codebase from the ground up, resulting in a 55% reduction of codes used for the same number of functions & features.
- Used a combination of ReactJS, Redux, JavaScript, HTML5 & CSS3 as primary libraries.
- Introduced new MaterialUI components & integration of TailwindCSS + new CI/CD tooling to speed up build processes.
- Gained some entry-level experiences working with JSON Web Tokens (JWT), MongoDB & AWS Lamba (Serverless)
[B. Chrome Extensions]
- Got re-assigned to Chrome Extensions Team to help migrate from Manifest v2 to Manifest v3.
- Steep learning curve due to non-experience with Chrome Extensions codebase + flow.
- Initiated a new build to bring together key new features of Hot-Reloading, Custom WebPack integration, & TailwindCSS support.
- Modularized codebase to enable better code maintainability in the future.
- Overall efforts helped cut preview-times & codebase of Chrome Extensions by >40%.
[A. WebApp]: 2-4 Months. Since Sep 2021. Completed v2 Build.
[B. Chrome Extensions]: 1-2 Months. Since Jan 2022. Initiated v2 Build.
![[UserTip] Chrome Extensions](/images/screenshots/webp/20220317-usertip-chrome.extensions-Screenshot-2022-03-17-at-3.54.20-PM.webp)
![[UserTip] WebApp Login](/images/covers/webp/20220203-usertip-webapp-screencapture-localhost-3000-2022-02-03-11_26_53.webp)
- Frontend
- NextJS
- ReactJS
- JavaScript
- TailwindCSS
- Redux-Toolkit (NEW)
- RTK Query (NEW)
- MaterialUI
- Mantine
- HTML5
- CSS3
- RESTful APIs
- JSON
- NPM
- Backend
- Ghost CMS (Headless)
- DevOps
- CloudFlare
- Vercel
- DigitalOcean
- GitHub
- API
- MailGun
- Algolia
- Others
- Visual Studio Code (VSCode)
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!
[UPDATE-20220802]: Updated to NextJS v13.2.1 to revamp the whole build from NextJS v12.3, Redux-Toolkit (RTK) & RTK Query.
5-6 Months. Since Aug 2021. Updated to v13.2.1 on 20220802. Actively Tweaking.
- Responsive Layouts for All Pages / Posts / Tags.
- Custom Error Pages to capture 4xx & 5xx Errors.
- Custom Preview Posts Function to enable the ability to Preview Drafts written on Ghost’s Backend Admin Interface.
- Custom Maintenance/Content-Not-Ready Pages.
- Custom Settings Page Controls to Switch On/Off Specific Features.
- Built-In TailwindCSS Support for Easier CSS Maintenance.
- Member Subscriptions using Ghost’s In-Built Magic-Link.
- Member Subscriptions Authentication-Hack to Authenticate New Email Subscriptions with Ghost Backend.
- Custom Code to Abstract Post Views from Google Analytics.
- Custom Code to Abstract, Compare & Display Top Posts Views based on statistics from Google Analytics.
- Custom Top Posts Page with Selectable Views-Ranking Listing Filters.
- Custom Donation Pages with Cryptocurrencies QRCode Support.
- Custom Integration of Random-Curated Quotes for Selected Pages.
- Integration of CSSNano for Minified CSS for Production (postcss.config.js).
- Integration of Terser for Minified JS for Production (webpack.config.js).
- UPDATE—2022-01-16: Code Integration with Ghost’s new in-built elements.
- UPDATE—2022-03-21: Updated codebase with modularized UI Library Components.
- UPDATE—2022-03-27: Re-tweaked file architecture + used next/dynamic to replace loadable to improve Lighthouse performance averages from previously a 40-point to improved 50-point scorecard.
![[AdultingStuffz] Self-Help Blog](/images/covers/webp/20220108-adultingstuffz-blog-screencapture-adultingstuffz-2022-01-08-11_24_52.webp)
- Frontend
- Ghost
- HandlebarsJS
- HTML5
- CSS3
- TailwindCSS
- Backend
- Ghost CMS
- DevOps
- CloudFlare
- Vercel
- DigitalOcean
- GitHub
- API
- Mailgun
- Others
- Ghost CLI
- Visual Studio Code (VSCode)
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.
[A. Ghost-Theme]: 4-5 Months. Since Aug 2020. Currently @ Version 3 in 2021. Pending OverHaul Upgrade.
[B. 2024-FEB Update]: Decided to streamline and merge AdultingStuffz under TheRobExperiment and merge both sites into one. Took about 2-3 Weeks to rebuild & instead of just a Technical Blog, I decided to rename it as a Technology, Work & Living Blog. Given improved Ghost-Theme technologies, including the removal of Glup as a theme-compiler, and the new integration of TailwindCSS, building a new Ghost-Theme is significantly faster with better Developer Experience. Entire theme was rebuilt from scratch and includes most of my favorite features using mostly JavaScript scripting to integrate. Currently @ Version 8 in Feb/Mar 2024. Further New Tweaks are expected moving forward.
- Responsive-Ready Layouts for All Pages / Posts.
- Custom-coded IndexPage/HomePage/CustomPages in an attempt to custom-design Ghost theme to personal requirements.
- Custom-coded Individual Post Templating in an attempt to custom-design Ghost theme to personal requirements.
![[TheRobExperiment] Technical Blog - v6.0](/images/screenshots/webp/20220108-therobexperiment-technical.blog-screencapture-therobexperiment-2022-01-08-12_46_51.webp)
![[TheRobExperiment] Technology, Work & Living Blog - v8.0](/images/covers/webp/20240310-therobexperiment-technical.blog-screencapture-therobexperiment-v8-2024-03-10-08_41_12.webp)
- Frontend
- ReactJS
- React-Redux
- JavaScript
- HTML5
- CSS3
- Ant Design (ANTD)
- DraftJS
- NPM
- RESTful APIs
- JSON
- Backend
- Django
- Python
- PostgreSQL
- DevOps
- CloudFlare
- Netlify
- DigitalOcean
- Dokku
- AWS Amazon S3
- GitHub
- API
- Auth0
- Stripe
- SendGrid
- Unsplash
- Others
- Visual Studio Code (VSCode)
A project that started off as a new personal challenge to jump-start 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 to 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 (Authentication), Stripe Checkouts (Payments), AWS S3 (File Storage), SendGrid (Automated Emails), Unsplash (Images) & a few other APIs.
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:
- **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.
- A ReactJS + React-Redux Combination is a truly fast & efficient powerhouse to build Progressive WebApps for cross-device compatibility.
- 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.
7-8 Months. Since Apr 2019. Retired in Apr 2020.
- Responsive-Ready Layouts for All Pages.
- Custom Error Pages to capture 4xx & 5xx Errors.
- Custom build that converts a new job form payment details into a custom-designed Invoice PDF file.
- Custom build with DraftJS to enable minor rich text editor functions for new job form.
- Custom integration with Auth0 to simplify server-authentication processes.
- Custom integration with Stripe Checkout Payments for digital payments function.
- 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.
- Custom integration with SendGrid to send out a confirmation email upon completion of the new job form.
- Custom integration with Unsplash to preload specific page header images, to add a generated visual representation for each respective page.
- Initial backend server setup on Dokku (PaaS) to streamline website management within one platform.
![[Hirebred] Experimental Jobs Classifieds WebApp](/images/covers/webp/20220109-hirebred-jobs.classifieds.webapp-screencapture-hardcore-darwin-e6df85-netlify-app-landing-2022-01-09-18_18_14.webp)
- FullStack
- WordPress
- PHP
- HTML5
- CSS3
- PHPAdmin
- MySQL
- DevOps
- CloudFlare
- CPanel (Linux)
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.
3-5 Months. Since Nov 2011. Currently @ Version 18 in 2022. Actively Tweaking.
- Responsive-Ready rollout for All Pages / Posts.
- Custom Error Page to capture 404 Errors.
- Custom Maintenance Page to replace Index page during Maintenance.
- Custom input form to help track client bookings for Estimates/Invoicing requirements.
- Integrated security plugin to scan for attempted logins/hacks/viruses.
- Integrated security plugin to migrate options to copy photo content illegally.
- Integrated optimization plugins to compress custom CSS & JavaScript codes with caching.
- Integrated multiple internal plugins to enable faster content & media management for long-term content updates & system upgrades.
- From 2013-2021, overhauled, revamped, tweaked & upgraded numerous designs to suit changing market needs & increase in content updates.
- 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:
![[Roberryarts] Business Website - Photoshoots Page](/images/screenshots/webp/20220108-roberryarts-business.website-screencapture-roberryarts-2022-01-08-12_43_28.webp)
![[Roberryarts] Business Website - Landing Page](/images/covers/webp/20220108-roberryarts-business.website-screencapture-roberryarts-2022-01-08-12_40_16.webp)
- FullStack
- WordPress
- PHP
- HTML5
- CSS3
- PHPAdmin
- MySQL
- DevOps
- CloudFlare
- CPanel (Linux)
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.
1-2 Months. Since Jul 2021. Completed.
- Single-Page Website Design.
- Responsive-Ready for cross-device displayed (Mobile/Tablet/Desktop).
- Custom input form to enable direct follow-up via default email.
- Integrated optimization plugins to compress custom CSS & JavaScript codes with caching.
- Integrated multiple internal plugins to enable faster content & media management for long-term content updates & system upgrades.
![[Drfelixlim] Business Website - Landing Page](/images/covers/webp/20220108-drfelixlim-business.website-screencapture-drfelixlim-2022-01-08-12_47_36.webp)
- FullStack
- WordPress
- PHP
- HTML5
- CSS3
- PHPAdmin
- MySQL
- DevOps
- CloudFlare
- CPanel (Linux)
Built intentionally as a separate themed portfolio in early 2014, this WordPress website helped to align wedding-related works under one umbrella and provides lesser distractions for potential clients to the website.
Since the portfolio works typically revolved around weddings and love, the design theme was then pivoted to be more light-hearted, casual and personalized. Given that most of the websites I have built thus far were primarily more formal and professional, it was indeed a slight challenge to re-think how this can be achieved, but in design and them-building on WordPress.
Eventually, the site did take up about 1-2 months to complete, despite the very simplified final look and site interactivity, but I was pretty thrilled and deeply satisfied with the outcome of the website!
Though this website ultimately required quite minimal maintenance over the years, I still decided simplify all my pre-existing sub-portfolios and re-merge it under one bigger primary umbrella portfolio in 2021, which was renamed to ROBERRYARTS WEDDINGS under ROBERRYARTS STUDIOS.
1-2 Months. Since Feb 2014. In Nov 2020, Merged with ROBERRYARTS STUDIOS as ROBERRYARTS WEDDINGS.
- Single-Page Focused Landing Page design to minimize clutter & display key portfolio photos as key highlights.
- Individual Story-Pages Templating to provide unique storytelling per couple-love-story & ease of mew content updating.
![[MatchMadeStories] Wedding Photography Portfolio - Book Us Page](/images/screenshots/webp/20201105-matchmadestories-book-us-page.webp)
![[MatchMadeStories] Wedding Photography Portfolio - AD Weddings - Celebrating Mingjie & Karen](/images/screenshots/webp/20201105-matchmadestories-wedding-stories-actual-day-photography-weddings-celebrating-mingjie-karen-page.webp)
![[MatchMadeStories] Wedding Photography Portfolio - AD Weddings - Celebrating Azim & Eser](/images/screenshots/webp/20201105-matchmadestories-wedding-stories-actual-day-photography-weddings-celebrating-azim-eser-page.webp)
![[MatchMadeStories] Wedding Photography Portfolio - ROMs - Welcoming RogerLim & MichelleTan](/images/screenshots/webp/20201105-matchmadestories-wedding-stories-roms-celebrating-roger-lim-michelle-tan-the-friends-party-page.webp)
![[MatchMadeStories] Wedding Photography Portfolio - ROMs - Welcoming BoonLong & Jamie](/images/screenshots/webp/20201105-matchmadestories-wedding-stories-roms-welcoming-boonlong-jamie-page.webp)
![[MatchMadeStories] Wedding Photography Portfolio - Homepage](/images/covers/webp/20201105-matchmadestories-homepage-page.webp)
- FullStack
- WordPress
- PHP
- HTML5
- CSS3
- PHPAdmin
- MySQL
- DevOps
- CloudFlare
- CPanel (Linux)
Coined initially as a standalone website in late 2013 as there was a significant portion of commissioned work that goes specifically into corporate, events and party-related photography, and the amount of content created makes this effort a much necessary step to further grow the business.
Using WordPress yet again was a no-brainer as it enables me to create standardized templates that can be repeatedly used easily and quickly to inject and update new portfolio stories, which help serve as a album-distribution source for my client’s customers, as well as a potential reference point for future clients to refer to on the quality of my photography works.
This site eventually grew quite sizable and the main challenge was considering how to more effectively and efficiently display numerous high-resolution images for an album preview for multiple visitors to the website, as the load was often creating some server issues when far-too-many visitors flood the website when a few albums were loaded all together at the same timeframe.
After consistently updating this portfolio website consistently over 7 years across 8 versioning, a hard decision was made to streamline this portfolio as well under one bigger primary umbrella in 2020 to ROBERRYARTS EVENTS under the ROBERRYARTS STUDIOS branding.
3-4 Months. Since Nov 2013. In Nov 2020, Merged with ROBERRYARTS STUDIOS as ROBERRYARTS EVENTS.
- Responsive-Ready rollout for All Pages / Posts.
- Multiple Interactive Custom-Sliders that correspond to movements of the user’s mouse movements.
- Custom Error Page to capture 404 Errors.
- Custom Maintenance Page to replace Index page during Maintenance.
- Integrated multiple internal plugins to enable faster content & media management for long-term content updates & system upgrades.
![[Capturefuse Photography] Corporate Photography Portfolio - Corporate Photography](/images/screenshots/webp/20201106-capturefusephotography-corporate-photography-page.webp)
![[Capturefuse Photography] Corporate Photography Portfolio - Events Photography](/images/screenshots/webp/20201106-capturefusephotography-events-photography-page.webp)
![[Capturefuse Photography] Corporate Photography Portfolio - Party Photography](/images/screenshots/webp/20201106-capturefusephotography-party-photography-page.webp)
![[Capturefuse Photography] Corporate Photography Portfolio - Why Us](/images/screenshots/webp/20201106-capturefusephotography-why-us-page.webp)
![[Capturefuse Photography] Corporate Photography Portfolio - Corporate - Linkedin Singapore Event 2017](/images/screenshots/webp/20201106-capturefusephotography-photography-corporate-linkedin-singapore-cannes-la-event-jul-2017-brief-highlights-page.webp)
![[Capturefuse Photography] Corporate Photography Portfolio - Corporate - Singapore Tourism Board (STB) x WeChat Singapore Event 2018](/images/screenshots/webp/20201106-capturefusephotography-photography-corporate-singapore-tourism-board-stb-x-wechat-workshop-sep-2018-page.webp)
![[Capturefuse Photography] Corporate Photography Portfolio - Homepage](/images/covers/webp/20201106-capturefusephotography-homepage-page.webp)
- FullStack
- WordPress
- PHP
- HTML5
- CSS3
- PHPAdmin
- MySQL
- DevOps
- CloudFlare
- CPanel (Linux)
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 6 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.
2-3 Months. Since Nov 2014. In Nov 2020, Merged with ROBERRYARTS STUDIOS as ROBERRYARTS CREATIVES.
- Responsive-Ready rollout for All Pages / Posts.
- Multiple Interactive Custom-Sliders that correspond to movements of the user’s mouse movements.
- Custom Error Page to capture 404 Errors.
- Custom Maintenance Page to replace Index page during Maintenance.
- Integrated multiple internal plugins to enable faster content & media management for long-term content updates & system upgrades.
![[LabelHouseCreatives] Business Website - Landing Page](/images/covers/webp/20220109-labelhousecreatives-business.website-screencapture-roberryarts-creatives-2022-01-09-07_57_33.webp)
- Frontend
- AngularJS
- JavaScript
- jQuery
- D3.js
- HTML
- CSS
- JSON
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.
2-4 Weeks. Since 2011. Completed.
- Animate Various Graph Types using D3.js/Javascript/JSON.
- Custom-designed & coded interactive in-page features to increase the visual appeal of RAW data for viewers using jQuery animations.
- 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.
![[3Angular] Experimental Visual Analytics Microsite - Landing Page](/images/covers/webp/20220109-3angular-visual.analytics.microsite-screencapture-robertchai-sites-3angular-2022-01-09-08_05_27.webp)
- Frontend
- JavaScript
- jQuery
- HTML
- CSS
Structured in a very bare, upfront yet straightforward design, this microsite aims to portray various layers of love, as well as commemorating this event alongside with Singapore’s National Day Parade (NDP) 2010 birthday event.
The main challenge for this build is the custom-tweaking of the graphics’ layout, as well as a differentiated positioning of navigation links, coupled with integrating jQuery to add a few nuggets of interactivity to make the experience of viewing the event’s details more alluring.
1-2 Weeks. Since 2010. Completed.
![[StarringSMU'10] Faithfully Yours - Landing Page](/images/covers/webp/20240403-starringsmu10-faithfullyyours-screencapture-faithfullyyours-2024-04-03-10_41_10.webp)
- Frontend
- JavaScript
- jQuery
- HTML
- CSS
A similarly-simple hard-coded microsite that attempts to sprinkle some feelings of excitement, fun & joy into the wonders encouraging young teenagers to participate in community service through a series of “Giving Back” events under the SMU Gives Back umbrella, which will benefit roughly 37 benefices in the 2010 lineup.
The heavyweight side of the build was tweaking the graphics & integrating jQuery to add a few nuggets of interactivity to make the experience of viewing the event’s details more alluring.
1-1.5 Weeks. Since 2010. Completed.
![[StarringSMU'10] SMU Gives Back '10 - Landing Page](/images/covers/webp/20240403-starringsmu10-smugivesback10-screencapture-smugivesback-2024-04-03-10_40_52.webp)
- Frontend
- JavaScript
- jQuery
- HTML
- CSS
A very simple hard-coded microsite that was solely focused on displaying the event details in a trendy & eye-catching manner, so as to capture the attention of the viewers in hopes that they will attend & participate this charity carwash for a good cause.
The heavyweight side of the build was tweaking the graphics & integrating jQuery to add a few nuggets of interactivity to make the experience of viewing the event’s details more alluring.
1-1.5 Weeks. Since 2010. Completed.
![[StarringSMU'10] SMU Charity Car Foam Party '10 - Landing Page](/images/covers/webp/20240403-starringsmu10-smucharitycarfoamparty10-screencapture-smucarfoamparty-2024-04-03-10_40_38.webp)
- Frontend
- JavaScript
- jQuery
- HTML
- CSS
Uniquely-designed & structured, this hard-coded microsite is the mainstay of Singapore Management University’s (SMU) signature Community Service Project (CSP) starringSMU. Given its 10th year reign, which also coincides with SMU’s 10th Birthday in 2010, the StarringSMU’10 seeks to break boundaries & a few records to celebrate 2010 with a bang!
The key focus of this microsite is to utilize vivid colors that revolved around its main color palette of yellow & orange, as well as explore the entire rainbow color range, in order to fully express the exhilarating excitement for the 10-days of back-to-back events, as well as connecting character to its sister events, (i) StarringSupernova, (ii) SMU Charity Car Foam Party, (iii) SMU Gives Back, (iv) Faithfully Yours, & (v) StarringStarlight.
Besides spending the main bulk of the built on the very customized design tweaking, the remaining bulk of coding work felt towards integrating custom-positioned jQuery & JavaScript codes in order to add some additional spice to the interactivity of the microsite.
2-3 Weeks. Since 2010. Completed.
![[StarringSMU'10] starringSMU'10 Community Service Project (CSP) Microsite - Landing Page](/images/covers/webp/20240403-starringsmu10-screencapture-starringsmu10-2024-04-03-10_39_55.webp)
- FullStack
- WordPress
- PHP
- HTML5
- CSS3
- PHPAdmin
- MySQL
- DevOps
- CloudFlare
- CPanel (Linux)
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.
3-4 Months. Since Nov 2007. Currently @ Version 15 in 2022. Actively Tweaking.
- Responsive-Ready rollout for All Pages / Posts.
- Custom-Tweaked Templating System to handle different categories of content (eg. Albums/Lookbacks/etc.)
- Custom Error Page to capture 404 Errors.
- Custom Maintenance Page to replace Index page during Maintenance.
- Custom input form to handle direct correspondence via email.
- Integrated security plugin to scan for attempted logins/hacks/viruses.
- Integrated security plugin to migrate options to copy photo content illegally.
- Integrated optimization plugins to compress custom CSS & JavaScript codes with caching.
- Integrated multiple internal plugins to enable faster content & media management for long-term content updates & system upgrades.
![[RobertChai] Personal Website - Photos Collection](/images/screenshots/webp/20220109-robertchai-personal.website-screencapture-robertchai-life-photos-2022-01-09-07_56_57.webp)
![[RobertChai] Personal Website - Landing Page](/images/covers/webp/20220108-robertchai-personal.website-screencapture-robertchai-life-about-2022-01-08-12_45_16.webp)