---
title: "AI Brand Site — WebGL, Contentful & ChatOps — Tran Manh Tuan"
description: "The AI brand website of a Japanese technology group — WebGL visuals, 15 Contentful content types, Slack-based content approval, and modernisation of a system running for years."
canonical: "https://tmtuan.dev/en/projects/ai-brand-site"
language: "en"
image: "https://tmtuan.dev/_img/projects/ai-brand-site/ai-brand-site.826563bd-og.jpg"
tokens: 1049
---

# AI Brand Site

The brand website for **the AI division of a Japanese technology group**: projects, stories, team members, technical articles, community, news and the summer internship programme. The brief: visuals worthy of an AI brand, a marketing/PR team that updates content itself with review before going public, and — since the system has been running for years — maintenance and vulnerability patching that never breaks a feature.

The visual experience is built with **WebGL (OGL)**, **GSAP** animation, custom sliders and cursor; images are automatically optimised to WebP. Production is a **static site on a CDN** — pages load fast and there is no server to attack. Content lives in **Contentful** across 15 content types; a self-built content-export tool pulls the data, **validates it against a schema and transforms it before pages are built** — bad data never reaches the site. After the renewal, old URLs 301-redirect, so existing links keep working.

Publishing follows a **ChatOps** model: the moment an editor publishes, Slack asks — Deploy to push to production, or Revert to restore the previous version of the content; a Deploy to dev button in Contentful puts drafts on a password-protected staging environment for preview. The deploy service is designed **fail-closed**: if it cannot load its secrets it refuses to run, never operating in an unsafe state. An event landing page produced by an external partner was packaged into the same pipeline and released on the same domain — no separate infrastructure, and still inside the shared control process.

The contact form validates input strictly and blocks bots with **Google reCAPTCHA Enterprise**; senders get an automatic reply and the team in charge is notified via **AWS SES**. Mail credentials live in **Secret Manager** and are read only at runtime — never in code or environment variables; the API accepts requests only from the site's own domain, and staging is open only to allowed IPs, IPv4 and IPv6 alike.

On taking over and modernising the running system: the runtime was raised to **Node.js 22** and the backend moved to **Cloud Functions 2nd gen**; every Pull Request is scanned automatically with Trivy, Semgrep and Gitleaks — the Semgrep rules for Vue are self-written (stock rulesets cannot scan .vue files, and all 10 of the 10 issues the tooling found came from these rules); Gitleaks scans the entire Git history, not just new changes. **19 library vulnerabilities were patched down to zero without breaking the system** — deliberately avoiding forced auto-fixes, which silently downgrade the framework. The site ships the standard security headers: HSTS, clickjacking protection, MIME-sniffing protection.

## Details

- **Role:** Technical Lead
- **Website:** [dena.ai/](https://dena.ai/)

## Technology

- Nuxt
- Vue
- TypeScript
- WebGL
- GSAP
- Contentful
- Node.js
- Express
- AWS SES
- reCAPTCHA
- Cloud Functions
- Firebase Hosting
- Secret Manager
- Github Action
- Trivy
- Semgrep
- Gitleaks

## Services this project shows

- [Corporate & Content Web Platforms](https://tmtuan.dev/en/services/web-platforms)

## Related articles

- [Docs-as-code Knowledge Base + Context Graph for a 15-project portfolio](https://tmtuan.dev/en/articles/knowledge-base-docs-as-code-context-graph)

## Structured data (JSON-LD)

```json
{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://tmtuan.dev/en/projects/ai-brand-site#webpage","url":"https://tmtuan.dev/en/projects/ai-brand-site","name":"AI Brand Site — WebGL, Contentful & ChatOps","description":"The AI brand website of a Japanese technology group — WebGL visuals, 15 Contentful content types, Slack-based content approval, and modernisation of a system running for years.","inLanguage":"en","isPartOf":{"@id":"https://tmtuan.dev/#website"},"about":{"@id":"https://tmtuan.dev/#person"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://tmtuan.dev/en"},{"@type":"ListItem","position":2,"name":"Projects","item":"https://tmtuan.dev/en/projects"},{"@type":"ListItem","position":3,"name":"AI Brand Site","item":"https://tmtuan.dev/en/projects/ai-brand-site"}]}]}
```