Personal website 2023

KIRTI is an interview, archiving, and publishing project focused on emerging scenes of contemporary art practice from Southeast Asia in alternative ways.

The site adopts Google platforms (Sheet & Doc) as a conceptual solution to unify frontend and backend coherently. In other words, a WYSIWYG backend system.

Visit the site here kirti.baoanh1buinguyen.workers.dev

1. Website Concept

KIRTI explores contemporary art from Southeast Asia in alternative ways. This effort is vital as a countermeasure to art world silos and stratifications.

Hunter (KIRTI founder) came to me to ask for a digital solution that can aggregate all of his archived interviews (currently in Google Docs), is easy to update himself (with no technical skill), while providing a nice reading and browsing experience for the visitors. Of course, the site’s design and concept should align to the energy of the project, that is experimental, impromptu, and open-ended.

We have discussed through various ways from a dedicated CMS to using Google Drive as a platform. In the end, we conclude on combining Google Sheet and Google Doc into a website.

2. Frontend Development

Using iframes, I was able to hijack the visual interface of Google Sheet and Google Doc with ease. For the interactivity, I found a solution by using data from the Google Sheets API to create an interactive, transparent overlay positioned directly and precisely on top of the sheet iframe.

Diagram to show how all of this works together.

The site includes a basic sort and filter function to help users browse the archive, made possible through Google Sheets’ Filter Views feature. Unfortunately, due to limitations in Google Sheets, this feature only works on the desktop version.

Google sheet is not responsive to screen size at all, which makes the mobile version of the sheet horrible in terms of user experience. To improve usability on smaller screens, I designed a separate sheet specifically optimized for mobile viewing.

3. Backend Development

For this project, I used Svelte/SvelteKit as a fullstack framework and Cloudflare for deployment out of curiosity. I want to implement ISR function to allow immediate website updates without a full rebuild. However, unlike Next.js, SvelteKit didn’t natively support ISR at the time.

To work around this, I developed a custom Cloudflare Workers adapter for SvelteKit, utilizing Workers KV to handle caching and revalidation.

4. Documentation and handoff

For Hunter to use and populate the content into the sheet without disrupting the site’s functionality, I created detailed documentation on best practices and potential pitfalls. This guide covered what to avoid and how to perform key tasks correctly.

I also made a couple of phone calls to clarify specific steps, which helped me better understand how Hunter would actually work with the sheet.

Tech Stack: Svelte/SvelteKit web framework, Typescript, SCSS, Google Sheet API, Cloudflare Workers
Bao Anh as designer & developer
This work is done for KIRTI Project