by bella — Portfolio Design Gallery

A project by Qalarc — AI systems studio, Sydney, Australia. Built, shipped and maintained by Qalarc.

Six completely different portfolio website concepts for Sydney designer Bella Brockwell, rebuilt from the real content of bybella.co — 29 projects across five disciplines, presented as one reviewable gallery. Same material, six moods: gallery-minimal, dark editorial, generative mycelium, playful bento, spatial light/XR, and Swiss brutalist index.

Vanilla HTML/CSS/JS (zero dependencies)Single-file self-contained sitesShared JSON content moduleCanvas 2D generative simulationIntersectionObserver revealsCSS clamp() fluid typeGoogle Fonts

by bella — Portfolio Design Gallery screenshot

A ground-up redesign exploration for graphic/spatial designer Bella Brockwell. co) was stripped for parts — all 29 projects, five discipline categories, bio, curiosities and socials extracted into a single shared JSON content module, with every cover image pulled down and optimised locally.

Six opinionated, fully independent single-file sites were then built from that one source of truth, each giving the same body of work a different personality: The Atelier (warm gallery-minimal, numbered exhibition rooms), The Editorial (dark magazine chapters with kinetic word-by-word headlines and a gold cursor glow), Mycelium (a live generative canvas growing hyphae threads behind organic project clusters — a nod to her Rhizome festival installations), The Studio Bento (colour-coded pastel bento grid with sticker badges), Lumen (drifting light sources, glass panels and a cursor spotlight, drawn from her architectural lighting practice), and The Index (a Klein-blue Swiss catalogue raisonné with cursor-following image previews).

All six passed a dedicated mobile QA round: 44px tap targets, no hover-only content on touch, capped devicePixelRatio and reduced simulation loads on phones, and prefers-reduced-motion fallbacks throughout. co page, and an inspiration link-list page documents the reference sites behind each direction.

Capabilities

Six fully built, live-reviewable portfolio concepts from one shared content source
Concept 01 — The Atelier: warm gallery-minimal with numbered exhibition rooms and wall-text bio
Concept 02 — The Editorial: dark magazine chapters, kinetic headlines, gold cursor-follow glow
Concept 03 — Mycelium: generative hyphae-growth canvas reacting to scroll, bioluminescent clusters
Concept 04 — The Studio Bento: colour-coded pastel bento grid, sticker badges, curiosity ticker
Concept 05 — Lumen: drifting light sources, glassmorphism, cursor spotlight, 3D-tilt cards
Concept 06 — The Index: Swiss brutalist catalogue with filterable rows and cursor-following previews
All 29 real projects scraped from bybella.co with locally optimised imagery
Dedicated mobile QA pass on every concept (touch targets, hover fallbacks, phone-safe canvas perf)
prefers-reduced-motion respected across all six sites
Inspiration link-list documenting the reference sites behind each direction

by bella — Portfolio Design Gallery

Capabilities

Tags