OpenSense LabsLead Developer

SPECTRUM
TECHNOLOGY

Role

Lead Developer

Timeline

2 Months

Platform

Drupal + React

Role & Contribution

What I Delivered

Built the Spectrum Technology platform from scratch — delivering a highly interactive, multilingual web experience on Drupal + React with an atomic design system, a 80% performance gain, and full WCAG 2.1 accessibility compliance.

check_circleArchitected a custom atomic design system and Pattern UI for a fully multilingual platform.
check_circleBoosted frontend performance by 80% through optimized asset delivery and lazy loading.
check_circleImplemented WCAG-compliant accessibility and cross-device responsiveness from day one.

Key Achievement

Performance Improvement

+80%

trending_up

"A complete greenfield build — multilingual, performant, and globally accessible — delivered on time and within scope." — Lead Developer

Architectural Solution

language

Multilingual Atomic Design

Architected a multilingual website using a custom atomic design system and Pattern UI, ensuring consistency, scalability, and seamless language switching across all locales.

speed

Performance Optimisation

Boosted frontend performance by 80% through optimized asset delivery, lazy loading strategies, and fine-tuned rendering pipelines.

widgets

React + Drupal Bridge

Collaborated with design and backend teams to bridge CMS-powered content (Drupal) with React-based interactive components, including a dynamic multilingual map module.

folder_special

Single Directory Components (SDC)

Adopted Drupal's Single Directory Component pattern to co-locate each component's templates, styles, and JS in one folder — eliminating scattered file sprawl and making the codebase instantly navigable for any new team member.

view_quilt

Drupal Layout Builder

Configured Drupal's Layout Builder so editors can independently compose and update pages by reusing pre-built, design-system-aligned blocks — giving content teams full creative autonomy post-delivery without touching a single line of code.

Innovation Spotlight

Key Features

Global network connections representing multilingual routing and locale strategy

Multilingual Routing & Locale Architecture

language

Engineered the multilingual URL and locale routing strategy across Drupal — handling language negotiation, content fallbacks, and hreflang configuration to serve the correct locale seamlessly to global users.

Spectrum Technologies interactive world map showing global office locations

Interactive Map Module

map

Built an interactive JavaScript map component displaying Spectrum's global office locations — countries highlighted on click with contact details surfaced inline, improving content discoverability for global users.

speed

Performance Metrics

Performance

+80%

↑ Post-optimisation

Frontend speed gain

Accessibility

↑ Full compliance

WCAG 2.1 compliant

LCP

<2.5s

↑ from 6.2s

Largest Contentful Paint

Asset Size

−60%

↓ CSS payload

Per-component libraries

Technical Highlights

The key engineering decisions centred on building a Drupal theme architecture that could scale across languages, devices, and post-delivery editorial workflows — without developer intervention for routine content changes.

paletteDrupal Theme Architecture

Architected the custom Drupal theme using a structured library system — separating global base styles, per-component CSS, and conditional JS attachments so only the assets each page needs are ever loaded.

view_quiltLayout Builder + Reusable Blocks

Configured Layout Builder with a library of design-system-aligned custom block types, enabling editors to compose any page layout post-delivery — no developer involvement required for content restructuring.

spectrum.theme

<?php
/**
 * Implements hook_preprocess_html().
 * Attach CSS custom properties based on active language
 * so the correct locale colours and font stacks load
 * without a page reload or JS dependency.
 */
function spectrum_preprocess_html(array &$variables): void {
  $lang = \Drupal::languageManager()
    ->getCurrentLanguage()->getId();

  // Attach language-specific asset library
  $variables['#attached']['library'][] =
    'spectrum/locale.' . $lang;

  // Pass active locale to Twig
  $variables['active_locale'] = $lang;
}

/**
 * Implements hook_preprocess_node().
 * Expose Layout Builder section count to templates
 * for conditional layout-aware styling.
 */
function spectrum_preprocess_node(array &$variables): void {
  $node = $variables['node'];
  $variables['has_layout_builder'] =
    $node->hasField('layout_builder__layout');
}

Lessons Learned

SDC Changes How You Think About Components

Co-locating the Twig template, CSS, and JS inside a single component folder eliminated the mental overhead of cross-referencing four directories. New team members could understand and contribute to a component within hours, not days.

Layout Builder is Scope Insurance

Configuring Layout Builder with pre-built block types before handover meant the client could restructure pages post-launch independently. It absorbed at least three change requests that would otherwise have come back to the dev team.

Locale Architecture Needs a Decision Made Early

Deferring the hreflang and language negotiation strategy to mid-project forced a structural rework of the routing layer. That decision should have been locked in during sprint zero — it touches URL structure, caching rules, and Twig context simultaneously.

Drupal Libraries Beat Global Stylesheets

Switching from a single global CSS bundle to per-component Drupal asset libraries cut unused CSS on most pages by over half. The library system's conditional attachment logic is one of Drupal's most underused performance tools.

Ready to Build?

From complex backend architecture to award-winning front-end experiences. Let's build the future together.

Launch Inquiry View All Work