AI-assisted Web Development

The Problem

The current blog site is visually dated and had poor content scanning patterns (centered layout, limited readability). The eye-scanning for content is very limited to only at the center of the page, instead of Z-pattern which is the natural eye-scanning path.

Z-pattern is where the user's eye is moving left-to-right (top), diagonally down-left, and then right again (bottom), forming a "Z"

My Approach

• Redefined content hierarchy to follow natural reading patterns (Z-pattern) and improved scannability.
• Built interactive components and created a component-driven spec that Cursor could use to scaffold pages.
• Extract all existing blog articles data using Scrapy, an open source data extraction framework.

Result/Impact

• Improved content accessibility and reading patterns, modernized the blog and marketing presence.
• Integrated with TinaCMS, allowing ease of use for content management (it is free too).

The Problem

Customers always contacting our sales team for instructions on how to accomplished a certain tasks using powerful features we had. We need to instruct and guide all of them, which has causing repetitive tasks from our side.

My Approach

It's all started by trying out GitBook for this purpose. Since it has a limitation under free plan, we started trying to build a similar online platform using Cursor AI.

Result/Impact

• Reduced development time by ~60% while shipping production-ready pages.
• Integrated with TinaCMS for easy content management.
• Saved a lot of subscription cost for online documentation.

My Approach

I built Keyword Tool Content Management System (CMS) platform that is integrated with TinaCMS in order to manage website content for both the blog and tutorial websites of Keyword Tool.

I built it with TinaCMS multi-tenant approach in order to manage 2 websites at the same time by just using one unified CMS platform.

The Solution

• Implemented TinaCMS multi-tenancy approach for better content organization.
• Implemented contextual-editing which allows Admin to see live preview while editing content.
• Created theme system to ensure visual branding consistency.