MY CREATIVE
CENTER

01 / Frontend architecture: shared state for presentation and workflows

The interface uses React 18.3.1 with the DCLogic template runtime. Templates mount as React components, with state / setState driving form fields, view changes and feedback. URL hashes locate views such as challenges and submissions, connecting the event narrative with ongoing participant tasks.

UI runtime

React / ReactDOM 18.3.1 · DCLogic

Views & preferences

Hash-based view selection · language preference in localStorage

02 / Real-time visuals: particle systems and WebGL

The Firebird scene uses Three.js for real-time particles, with BufferGeometry, typed arrays and custom particle attributes organising the scene data. Shader-driven visuals and an EffectComposer / UnrealBloomPass bloom pipeline extend the brand into a dynamic scene. The configured scene combines 22,000 primary sampled particles and 460 embers to give the event identity a sense of spatial depth.

Rendering engine

Three.js 0.128.0 · WebGL

Scene composition

22,000 primary sampled particles + 460 ember particles

Post-processing

EffectComposer · UnrealBloomPass bloom

03 / Motion orchestration: scrolling as part of the experience

GSAP and ScrollTrigger tie typography, sections and parallax to scroll progress. Lenis supplies smooth scrolling and synchronises ScrollTrigger updates. IntersectionObserver triggers viewport reveals and count-up effects, coordinating large-scale scenes with local feedback.

Scroll animation

GSAP / ScrollTrigger 3.12.5

Smooth scrolling

Lenis 1.0.42 · synchronised scroll events

Accessibility

Respects the prefers-reduced-motion preference

04 / Rendering budget: resource constraints in the implementation

The scene caps pixel density and monitors frame time. Persistent slow frames disable bloom while retaining the base scene, and scene updates are skipped when the page is hidden. A static Canvas 2D drawing path is also included. These choices put resource awareness into the rendering logic, adapting visual effects to device conditions and page visibility.

Pixel ratio cap

devicePixelRatio capped at 1.4

Adaptive post-processing

Accumulated frames above 42 ms trigger bloom disablement

05 / API separation: interface and business services

A JavaScript Worker handles requests through its Fetch entry point, routing event operations by HTTP method and path. The production domain supports same-origin /api routing. JSON APIs serve frontend submissions and data retrieval, Worker-generated HTML serves administrative views, and CSV responses support exports. Interface interactions, data operations and event administration share one backend implementation.

Runtime & protocols

Cloudflare Workers · Fetch API · HTTPS

Interfaces & outputs

Same-origin API · JSON · server-rendered HTML · CSV

06 / Data architecture: event state and project records

Cloudflare D1 stores structured event data for submissions, progress, judges, assignments, scores, public curation, votes and test flags. The Worker uses prepare / bind for parameterised SQL. R2 stores file contents while D1 stores their object keys. Resubmissions retain submission identifiers and history, preserve earlier values for blank fields and restrict which material fields may be updated, keeping project updates connected to judging references.

Structured data layer

Cloudflare D1 · parameterised SQL

Data / file separation

D1 stores metadata and object keys · R2 stores files

Resubmission handling

Retained project ID · material-field updates · history reconciliation

07 / File architecture: R2 signed uploads and temporary access

Cloudflare R2 stores project files. The Worker validates signing requests using team, project, material kind, filename and declared size, then implements AWS Signature V4 with Web Crypto SHA-256 / HMAC to generate S3-compatible temporary upload URLs. The browser uploads directly to R2 via XMLHttpRequest PUT, then submits object keys and project metadata to D1. Downloads also use time-limited signatures, separating transfer, business records and access authorisation.

Object storage & signing

Cloudflare R2 · S3-compatible API · AWS Signature V4

Upload signature lifetime

3,600 seconds / 60 minutes

Upload flow

Request signature → PUT upload to R2 → file references in D1

Transfer feedback & validation

Progress, speed and ETA · file-kind and declared-size validation

08 / Judging and operations: assignments to ranking views

Judge-to-project assignments are stored in a mapping table and configured through an administrative matrix. The Worker writes assignments to D1 in batches of 40. Scores are organised by round, judge and project, with ON CONFLICT updates for dimensions, total scores, notes and timestamps to support repeated saves. Administrative features include publication controls, finalist flags, awards and cover management, progress summaries, rankings, participant-list preparation and CSV exports.

Score record key

Round × judge × project · ON CONFLICT updates

Assignment writes

D1 batch · 40 records per batch

Operational outputs

Project curation · ranking views · CSV exports

09 / Access and consistency: server-side rules

Administrative views use HTTP Basic authentication, with configuration such as the administrator password held in Cloudflare Secrets. Judging validates judge codes and supports an additional password check. Voting enforces the deadline server-side and uses hashed identifiers, composite database keys and a per-network, per-project time-window limit to handle repeated records. Historical votes are reconciled after project updates to keep the public presentation connected to the project record.

Identity & configuration

Admin authentication · judge-code validation · Cloudflare Secrets

Vote record handling

SHA-256 identifiers · composite keys · server-side deadline and frequency checks

10 / AI and languages: cross-regional judging and exchange

The interface supports Simplified Chinese, Traditional Chinese and English, persisting the language preference in localStorage. Server-side translation handles dynamic project descriptions and judging content. The source configures Cloudflare Workers AI’s @cf/meta/m2m100-1.2b model for Chinese-to-English translation and includes an optional Google Cloud Translation adapter. The current deployment has a confirmed Workers AI binding. Translation assists understanding across regions.

Interface languages

Simplified Chinese · Traditional Chinese · English

AI translation configuration

Workers AI · @cf/meta/m2m100-1.2b

Application context

Dynamic project descriptions · Chinese / English judging support

Organisational involvement and project significance

Founder Ma Ye participated in preparing and organising the event as an HKUST alumnus, Vice-President of the HKUST Mainland Alumni Association and Co-Chair of the organising committee. MY CREATIVE CENTER translated innovation-community needs into an interactive system for participation, submissions and collaboration—a concrete example of our work connecting design, technology and innovation practice.

Two missions, two distinctive visual identities

The EAC identity transforms E, A and C into a blue, red and gold robot face. The Red Bird connects it to the university, the smile conveys friendliness, equality, respect and patience, and the handshake detail represents dialogue and collaboration.

The SCDC identity combines a Red Bird preparing for flight with a rising sun and water, incorporating the relationships between S, C, D and C. Its concept connects student growth, learning and future career development.

Identity systems

EAC — External Affairs Committee; SCDC — Student Career Development Committee

Language variants

Bilingual, English and Simplified Chinese versions for each identity

From identities to usable brand standards

The handbook defines placement, spacing and combinations when committee identities appear with the university logo, referencing the university brand guidelines to support consistent application.

Typography uses Futura Medium for English and Heiti for Chinese. Colour guidance distinguishes CMYK printing, RGB digital display, web colours and fabric printing.

Document deliverable

17-page brand management handbook; 2024 version

Typography

English: Futura Medium; Chinese: Heiti

Colour system

Pantone 872, 124, 295 and 185; white and black; CMYK / RGB / web specifications

Co-branding

Placement and spacing for university, college and committee identities

Bringing the identity into everyday use

Envelope, letterhead and business-card layouts translate the identity rules into daily communication, specifying logo placement, information hierarchy, dimensions and paper choices.

This early project demonstrates the company’s ability to translate an organisation’s mission into a visual language and organise that language into a usable design system. Together with the later Firebird Hackathon brand experience and website development, it shows a practice spanning identity and digital products.

Letterhead

A4 portrait; 100 gsm Impact PT100 paper

Envelope

Landscape format; 100 gsm Impact PT100 paper

Business cards

90 × 50 mm; 270 gsm Coronado sst CR682SS bright white, smooth paper

Company scope

Complete logo design, visual standards and brand handbook

A name becomes a form: horse / Ma, leaf / Ye

Ma aligns a surname with a recognisable animal. The leaf connects to the given name through the shared sound ye. Sound becomes the bridge and natural forms become the language for translating a name.

A viewer can recognise horse and leaf before discovering Ma Ye, moving from image to name to meaning. Chinese meaning and pronunciation connect with the Romanised name in a single mark.

Designed

2015

Name correspondence

Ma: surname and horse; Ye: leaf, pronounced like 烨 in the given name

Agency and growth: complementary living forces

The horse can be read as agency, independence and exploration: putting judgment into action, entering unfamiliar territory and finding direction through practice. It gives the mark an active, determined character.

The leaf can be read as vitality, learning and renewal: drawing nourishment from its surroundings, responding to changing conditions and continuing to grow. It adds patience, adaptability and a long-term perspective to action.

Together they suggest exploring through action and responding through growth. Research, design and entrepreneurship require this rhythm: the initiative to begin and the willingness to learn from feedback.

Animal and plant: an identity within an ecology

Animals and plants exist through relationships within living systems. The meeting of horse and leaf can symbolise the interdependence of people and nature, and a wish for individuals and their environments to grow together.

This extends green into a way of examining a question: understanding the setting of an action, attending to the resources and relationships involved in creating value, and considering its longer-term effects.

Viewed today, this ecological narrative resonates with MY CREATIVE CENTER and Mgreen Lab’s interest in green innovation and product design: considering human needs, business value and environmental relationships together when exploring technology and products.

Form and colour: connection through flow

The solid horse profile and its outward curves echo the leaf contour and veins. Continuing arcs and negative space organise the two forms into a whole, giving the identity a flowing, open rhythm.

Black creates a clear silhouette and visual anchor, inviting a reading of independent judgment and purposeful action. Green highlights the leaf’s vitality, suggesting renewal, growth and ecological awareness. Their contrast supports recognition.

The existing artwork is stored as SVG vector paths, and the website also uses a white monochrome version. This case retains the original forms and colours while using presentation and element studies to explain their meaning.

Original colours

Black #000000; green #009242

Artwork

Original SVG vector artwork; existing white monochrome website version

Brand value: a name that becomes a lasting visual language

The name supplies an identity cue, horse and leaf supply visual memory, and agency and growth supply a value narrative. Together, these layers support consistent recognition across personal introductions, research exchange and entrepreneurial expression.

The mark also illustrates an approach to brand design: beginning with a real name and experience, then finding a visual language that can be seen, remembered and explained. A simple form carries several meanings, while continued use allows those meanings to accumulate.

A concise reading: act with the horse’s agency; grow with the leaf’s vitality; remain connected to the world that sustains both.