Source File

Home Page Dark

4 blocks

Home Page Dark · SECTION 1

Hero Section

Strategic Resolution Engine

I solve problems other people gave up on.

Architecture is not just about building structures; it is the systemic elimination of complexity through precise spatial logic and digital engineering.

Explore Manifestos

<section class="px-6 md:px-12 mb-32">
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
<div class="md:col-span-8">
<span class="font-label text-xs uppercase tracking-[0.3em] text-primary mb-6 block">Strategic Resolution Engine</span>
<h1 class="font-headline text-5xl md:text-8xl leading-tight mb-12 max-w-4xl">
                        I solve problems other people <span class="italic text-secondary">gave up on</span>.
                    </h1>
</div>
<div class="md:col-span-4 pt-4">
<p class="font-body text-on-surface-variant text-lg leading-relaxed mb-8">
                        Architecture is not just about building structures; it is the systemic elimination of complexity through precise spatial logic and digital engineering.
                    </p>
<div class="flex items-center gap-4 group cursor-pointer">
<div class="h-[1px] w-12 bg-primary group-hover:w-20 transition-all duration-500"></div>
<span class="font-label text-xs uppercase tracking-widest text-primary">Explore Manifestos</span>
</div>
</div>
</div>
</section>

Home Page Dark · SECTION 2

Architect's Engine Terminal

System Status

ARCHITECT_ENGINE_V4.0.2_RUNNING

Local Coordinates

40.7128° N, 74.0060° W

01 Initializing core heuristics...

02 Structure identified: Quantum Lattice Infrastructure

03 Analyzing conflict vectors in legacy framework...

04 Applying asymmetric structuralism to data nodes...

05 > RESOLUTION COMPLETE: ENTROPY NEUTRALIZED.

READY_FOR_NEXT_CHALLENGE_

<section class="px-6 md:px-12 mb-48">
<div class="bg-surface-container-lowest border border-outline-variant/15 p-1 md:p-2">
<div class="bg-surface-container p-6 md:p-12 relative overflow-hidden min-h-[500px] flex flex-col justify-between">

<div class="flex justify-between items-start border-b border-outline-variant/10 pb-8 mb-8">
<div>
<div class="font-label text-[10px] uppercase text-on-surface-variant tracking-tighter mb-1">System Status</div>
<div class="font-label text-sm text-primary flex items-center gap-2">
<span class="w-2 h-2 bg-primary animate-pulse"></span>
                                ARCHITECT_ENGINE_V4.0.2_RUNNING
                            </div>
</div>
<div class="text-right">
<div class="font-label text-[10px] uppercase text-on-surface-variant tracking-tighter mb-1">Local Coordinates</div>
<div class="font-label text-sm text-on-surface">40.7128° N, 74.0060° W</div>
</div>
</div>

<div class="font-label text-sm md:text-base space-y-4 max-w-3xl">
<div class="flex gap-4">
<span class="text-secondary opacity-50">01</span>
<span class="text-on-surface-variant">Initializing core heuristics...</span>
</div>
<div class="flex gap-4">
<span class="text-secondary opacity-50">02</span>
<span class="text-on-surface">Structure identified: <span class="text-primary underline">Quantum Lattice Infrastructure</span></span>
</div>
<div class="flex gap-4">
<span class="text-secondary opacity-50">03</span>
<span class="text-on-surface-variant">Analyzing conflict vectors in legacy framework...</span>
</div>
<div class="flex gap-4">
<span class="text-secondary opacity-50">04</span>
<span class="text-on-surface-variant">Applying asymmetric structuralism to data nodes...</span>
</div>
<div class="flex gap-4">
<span class="text-secondary opacity-50">05</span>
<span class="text-primary font-bold">&gt; RESOLUTION COMPLETE: ENTROPY NEUTRALIZED.</span>
</div>
<div class="pt-8">
<div class="inline-block bg-primary/10 border border-primary/20 px-4 py-2 text-primary">
                                READY_FOR_NEXT_CHALLENGE_
                            </div>
</div>
</div>

<div class="absolute right-[-10%] bottom-[-10%] w-2/3 opacity-10 pointer-events-none grayscale invert">
<img class="w-full h-auto" data-alt="abstract architectural blueprint with complex white geometric lines on a deep black background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCXI98SXiCecTC7j7segXpWtq9X1L5U1DqjlCQtkJJJZM5Rrx9xcksnCFKEGkuHQ3n1minGWLIl7gn_-5WSfZ6YtG0TaT607v-jTxE8jhAtQ8g3HeSKZ-hgMUmYqkvJHqIQvVrA4PRD7asJoAGZ7Y_uGTipJKLYYXLoHWkF5I8ecTbPw70AChcwstZnhCErqqklLicJkALtxVphpfpn1ULMYIweMBTRO9vR-g5egHqN6IPqdsod9fEA8jxgLguyNuU_xbNO9SpTx2oC"/>
</div>
</div>
</div>
</section>

Home Page Dark · SECTION 3

Case Study Previews

Case Studies

Selected Archives / 2022-2024

View All Works (12)

001 / INFRASTRUCTURE

The Void Pavilion

Reclaiming industrial wasteland through mathematical spatial folding.

002 / DIGITAL TWIN

Cyber-Grid Alpha

A virtual environment designed for high-frequency neural processing.

Technical Specification

Neo-Monolith Residence

A study in sensory deprivation and focus. This residential project utilizes smart-glass technology and sound-dampening basalt to create a silent sanctuary within the noise of the metropolis.

Materials: Basalt, Smart-Glass, Carbon

Location: Tokyo Sector 4

Deep Dive Research

<section class="px-6 md:px-12">
<div class="flex justify-between items-end mb-16">
<div>
<h2 class="font-headline text-4xl mb-4">Case Studies</h2>
<p class="font-label text-xs uppercase tracking-widest text-on-surface-variant">Selected Archives / 2022-2024</p>
</div>
<div class="hidden md:block h-[1px] flex-grow mx-12 bg-outline-variant/20"></div>
<div class="font-label text-xs uppercase tracking-widest text-primary hover:text-secondary cursor-pointer transition-colors">View All Works (12)</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant/15">

<div class="bg-surface group cursor-pointer overflow-hidden border-b md:border-b-0 md:border-r border-outline-variant/15">
<div class="relative h-[500px] overflow-hidden">
<img class="w-full h-full object-cover grayscale transition-all duration-700 group-hover:scale-105 group-hover:grayscale-0" data-alt="monolithic concrete skyscraper with sharp angles and dramatic shadows against a dark moody sky" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDA3F9CLse_Dx0RRudQ7lGGRRVP0K7XTnqXT9hJhw5r-T2Tsi5tIf_VFHTZW2ALxQ5HtjZgot2i6Vv0fE3MKEHVGRElsDBZ6XxWCNEwghFufUs3V_niGrqS24-QBBP7YEcZTbP696v2QDgT-DKY_jMRtjHLQ2yj8Ohio4nro7Q50w0_K3V_0ORxb1siG1_ovErXieFgTTyApmUs0yiuTPaIaTu4ZfMJMFZlGEhLHq_F-QyOIyqVsrwtc96-Ec7ICKjvBJpVT9qqZC0l"/>
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-80"></div>
<div class="absolute bottom-12 left-12 right-12">
<div class="font-label text-xs text-primary mb-4">001 / INFRASTRUCTURE</div>
<h3 class="font-headline text-3xl text-white mb-2">The Void Pavilion</h3>
<p class="font-body text-on-surface-variant text-sm max-w-sm">Reclaiming industrial wasteland through mathematical spatial folding.</p>
</div>
</div>
</div>

<div class="bg-surface group cursor-pointer overflow-hidden">
<div class="relative h-[500px] overflow-hidden">
<img class="w-full h-full object-cover grayscale transition-all duration-700 group-hover:scale-105 group-hover:grayscale-0" data-alt="futuristic interior with neon purple and cyan lighting reflecting off glossy dark surfaces and brutalist architecture" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDijtHReqPRkgakv-JeomrcVelRSbFq23ceY3gb3QxVvVU1wTSqquFYGYQogPklvdQMDiMuBuy6ZZWHeM-mlVWAqHoO0ntyxHmXktfJ9cAeZ6RatNmrxg-qkEjSjzr4REFgndkZFqT4WoriK-8U5WvZ4xopRehU-VeQGVvWWB1kD_uFZd8viairhqJcyeXM6ivFJa5yCEtkphumVk_0zG379HwCx2PMrGOsgvq9JpjyCpKa5XrUstwhSFR2GExPDm-5_iMYsBaR4OT9"/>
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-80"></div>
<div class="absolute bottom-12 left-12 right-12">
<div class="font-label text-xs text-secondary mb-4">002 / DIGITAL TWIN</div>
<h3 class="font-headline text-3xl text-white mb-2">Cyber-Grid Alpha</h3>
<p class="font-body text-on-surface-variant text-sm max-w-sm">A virtual environment designed for high-frequency neural processing.</p>
</div>
</div>
</div>
</div>

<a class="mt-24 grid grid-cols-1 md:grid-cols-12 items-center group cursor-pointer block" href="../door_county_case_study_dark/door_county_case_study_dark.html">
<div class="md:col-span-7 bg-surface-container-low p-12 order-2 md:order-1">
<span class="font-label text-[10px] uppercase text-primary tracking-[0.4em] block mb-8">Technical Specification</span>
<h3 class="font-headline text-5xl mb-8">Neo-Monolith Residence</h3>
<div class="space-y-6 max-w-md">
<p class="font-body text-on-surface-variant leading-relaxed">
                            A study in sensory deprivation and focus. This residential project utilizes smart-glass technology and sound-dampening basalt to create a silent sanctuary within the noise of the metropolis.
                        </p>
<div class="grid grid-cols-2 gap-4 font-label text-[10px] text-on-surface/60 uppercase">
<div>Materials: Basalt, Smart-Glass, Carbon</div>
<div>Location: Tokyo Sector 4</div>
</div>
</div>
<span class="mt-12 inline-block border border-primary/20 group-hover:border-primary px-10 py-4 font-label text-xs uppercase tracking-widest text-primary transition-all">
                        Deep Dive Research
</span>
</div>
<div class="md:col-span-5 order-1 md:order-2 h-[400px] md:h-full min-h-[500px]">
<img class="w-full h-full object-cover grayscale brightness-75 transition-all duration-700 group-hover:scale-105 group-hover:grayscale-0" data-alt="abstract view of modern architecture with repeating geometric patterns and high contrast shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAA_YURfYzE48wY01es4BeDOB9QJ089cTw1m1mdUqSsgLfw4hTWYMVzoi1p1XGjxVwrMRM4Gpf0l0lklq3E4emTmfGW-43rcEqqqtX5YYzIOv89kPTOdlkVyFXsNh7K9OqaAbvTjH2fU__w1XznPYCDSKl-lx5xMvEMNMSmdtRmoyqBZLCevclCzQIdCgysi_VPj91ZGOoKl-sVpLhbrChgjLZt_SLB6bWRY2SfnG5qJ6lYWh2rcDe4VwgIBDA93G18kGsWZcFyoJDs"/>
</div>
</a>
</section>

Home Page Dark · SECTION 4

Technical Footnote / Bottom Section

"The architect must be a prophet... a prophet in the true sense of the term... if he can't see at least ten years ahead, don't call him an architect."

— Frank Lloyd Wright (Optimized for the Void)

Source File

About Page Dark

4 blocks

About Page Dark · SECTION 1

Narrative Section

Biography — 01

Mike Shank. Bridging the gap between pixels and logic.

The modern web is an architectural challenge. My practice sits at the intersection of aesthetic rigor and computational efficiency. I build digital structures that don't just exist—they perform.

With over a decade of experience navigating the void between design systems and complex front-end engineering, I transform abstract visions into tactile, high-performance realities. Every pixel is a calculated decision; every line of code is a structural support.

<section class="px-6 md:px-12 max-w-7xl mx-auto mb-32">
<div class="grid grid-cols-1 md:grid-cols-12 gap-12">
<div class="md:col-span-8">
<span class="font-label text-primary text-xs tracking-[0.3em] uppercase mb-6 block">Biography — 01</span>
<h1 class="font-headline text-5xl md:text-7xl lg:text-8xl leading-tight mb-12">
                        Mike Shank. Bridging the gap between <span class="italic text-secondary">pixels</span> and <span class="text-primary">logic</span>.
                    </h1>
</div>
<div class="md:col-span-4 flex items-end">
<div class="relative w-full aspect-[3/4] bg-surface-container-high overflow-hidden group">
<img class="w-full h-full object-cover grayscale opacity-80 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-700" data-alt="Moody cinematic portrait of a professional man in a dark minimalist studio environment with subtle cyan rim lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDAIjf6EyI-4hlYT0_n8A3ZiJ-e3YCWKLqTspuXekRcmyNwSuBttDeW2W314KNfEEtBkR2LC9iRKwJtwFw8pYnsOw63Lxv3KgcINU7NUf2QXycF6byLcrAI53ieZCQlFLR4JjYbZ0sm_Iy_lUug2fHsWm2tTub4YxwdHrQxf4nG8MejBmjWqdQS-R43XLML9p8L608yrEHA3i7uzrOQxRm7xillk92_-ubI-uqDiMJADwlGtONBacOkzssqk0pl5FK7QTcvJb3XPzK5"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-12 gap-12 mt-16">
<div class="md:col-start-6 md:col-span-6">
<p class="font-body text-xl md:text-2xl text-on-surface-variant leading-relaxed mb-8">
                        The modern web is an architectural challenge. My practice sits at the intersection of aesthetic rigor and computational efficiency. I build digital structures that don't just exist—they perform.
                    </p>
<p class="font-body text-lg text-on-surface-variant/80 leading-relaxed">
                        With over a decade of experience navigating the void between design systems and complex front-end engineering, I transform abstract visions into tactile, high-performance realities. Every pixel is a calculated decision; every line of code is a structural support.
                    </p>
</div>
</div>
</section>

About Page Dark · SECTION 2

What I Actually Do Section (Bento Grid)

What I actually do

Capabilities_Manifesto.v2

01 architecture

System Architecture

Building scalable design systems that bridge the gap between creative teams and production codebases.

02 terminal

Logic Engineering

Translating complex user journeys into clean, performant React/Next.js architectures with obsessive precision.

03 monitoring

Performance Audit

Optimizing critical render paths and interaction latency to ensure the interface feels invisible and instant.

<section class="px-6 md:px-12 max-w-7xl mx-auto mb-40">
<div class="flex items-baseline justify-between mb-16 border-b border-outline-variant/15 pb-4">
<h2 class="font-headline text-3xl italic">What I actually do</h2>
<span class="font-label text-xs text-on-surface-variant uppercase tracking-widest">Capabilities_Manifesto.v2</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-1">

<div class="bg-surface-container-low p-12 aspect-square flex flex-col justify-between hover:bg-surface-container-high transition-colors group">
<div class="flex justify-between items-start">
<span class="font-label text-primary text-xl">01</span>
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">architecture</span>
</div>
<div>
<h3 class="font-headline text-2xl mb-4">System Architecture</h3>
<p class="font-body text-sm text-on-surface-variant leading-relaxed">Building scalable design systems that bridge the gap between creative teams and production codebases.</p>
</div>
</div>

<div class="bg-surface-container p-12 aspect-square flex flex-col justify-between hover:bg-surface-container-high transition-colors group">
<div class="flex justify-between items-start">
<span class="font-label text-primary text-xl">02</span>
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-secondary transition-colors">terminal</span>
</div>
<div>
<h3 class="font-headline text-2xl mb-4">Logic Engineering</h3>
<p class="font-body text-sm text-on-surface-variant leading-relaxed">Translating complex user journeys into clean, performant React/Next.js architectures with obsessive precision.</p>
</div>
</div>

<div class="bg-surface-container-low p-12 aspect-square flex flex-col justify-between hover:bg-surface-container-high transition-colors group">
<div class="flex justify-between items-start">
<span class="font-label text-primary text-xl">03</span>
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">monitoring</span>
</div>
<div>
<h3 class="font-headline text-2xl mb-4">Performance Audit</h3>
<p class="font-body text-sm text-on-surface-variant leading-relaxed">Optimizing critical render paths and interaction latency to ensure the interface feels invisible and instant.</p>
</div>
</div>
</div>
</section>

About Page Dark · SECTION 3

Image Break Section

Core Philosophy

"Simplicity is the consequence of structural integrity."

About Page Dark · SECTION 4

What I'm Looking For Section

What I'm looking for

Partnerships built on technical ambition and aesthetic obsession.

SPEC_01
Ambitious Product Shells

arrow_forward
SPEC_02
Design System Revolutions

arrow_forward
SPEC_03
Creative Technology Labs

arrow_forward
SPEC_04
Post-Mobile Experiments

arrow_forward

<section class="px-6 md:px-12 max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-12 gap-12">
<div class="md:col-span-4">
<h2 class="font-headline text-4xl italic mb-6">What I'm looking for</h2>
<p class="font-body text-on-surface-variant">Partnerships built on technical ambition and aesthetic obsession.</p>
</div>
<div class="md:col-span-8">
<ul class="space-y-0">
<li class="group border-b border-outline-variant/15 py-10 flex items-center justify-between">
<div class="flex items-center gap-8">
<span class="font-label text-on-surface-variant text-xs group-hover:text-primary">SPEC_01</span>
<h4 class="font-headline text-2xl md:text-3xl">Ambitious Product Shells</h4>
</div>
<span class="material-symbols-outlined text-on-surface-variant group-hover:translate-x-2 transition-transform">arrow_forward</span>
</li>
<li class="group border-b border-outline-variant/15 py-10 flex items-center justify-between">
<div class="flex items-center gap-8">
<span class="font-label text-on-surface-variant text-xs group-hover:text-primary">SPEC_02</span>
<h4 class="font-headline text-2xl md:text-3xl">Design System Revolutions</h4>
</div>
<span class="material-symbols-outlined text-on-surface-variant group-hover:translate-x-2 transition-transform">arrow_forward</span>
</li>
<li class="group border-b border-outline-variant/15 py-10 flex items-center justify-between">
<div class="flex items-center gap-8">
<span class="font-label text-on-surface-variant text-xs group-hover:text-primary">SPEC_03</span>
<h4 class="font-headline text-2xl md:text-3xl">Creative Technology Labs</h4>
</div>
<span class="material-symbols-outlined text-on-surface-variant group-hover:translate-x-2 transition-transform">arrow_forward</span>
</li>
<li class="group border-b border-outline-variant/15 py-10 flex items-center justify-between">
<div class="flex items-center gap-8">
<span class="font-label text-on-surface-variant text-xs group-hover:text-primary">SPEC_04</span>
<h4 class="font-headline text-2xl md:text-3xl">Post-Mobile Experiments</h4>
</div>
<span class="material-symbols-outlined text-on-surface-variant group-hover:translate-x-2 transition-transform">arrow_forward</span>
</li>
</ul>
</div>
</div>
</section>

Source File

Mad Planet Case Study Dark

6 blocks

Mad Planet Case Study Dark · HEADER 1

Hero Section

Case Study / 001

Mad Planet

A digital ecosystem designed for the next frontier of immersive social interaction. Engineering a bridge between brutalist architectural theory and fluid digital environments.

Timeline 2023—2024

Role Lead Architect

Sector Web3 / Spatial UI

<header class="px-12 md:px-24 mb-24 max-w-7xl mx-auto">
<div class="mono-label text-primary text-xs uppercase tracking-[0.3em] mb-4">Case Study / 001</div>
<h1 class="serif-display text-6xl md:text-8xl font-bold leading-tight mb-8">Mad Planet</h1>
<div class="grid grid-cols-1 md:grid-cols-12 gap-12 items-end">
<div class="md:col-span-8">
<p class="text-on-surface-variant text-xl md:text-2xl font-light leading-relaxed">
                        A digital ecosystem designed for the next frontier of immersive social interaction. Engineering a bridge between brutalist architectural theory and fluid digital environments.
                    </p>
</div>
<div class="md:col-span-4 flex flex-col gap-4 border-l border-outline-variant/15 pl-8">
<div class="flex justify-between items-center">
<span class="mono-label text-[10px] uppercase text-on-surface-variant">Timeline</span>
<span class="mono-label text-[10px] text-primary">2023—2024</span>
</div>
<div class="flex justify-between items-center">
<span class="mono-label text-[10px] uppercase text-on-surface-variant">Role</span>
<span class="mono-label text-[10px] text-primary">Lead Architect</span>
</div>
<div class="flex justify-between items-center">
<span class="mono-label text-[10px] uppercase text-on-surface-variant">Sector</span>
<span class="mono-label text-[10px] text-primary">Web3 / Spatial UI</span>
</div>
</div>
</div>
</header>

Mad Planet Case Study Dark · SECTION 2

Large Hero Image

Mad Planet Case Study Dark · SECTION 3

Situation & Diagnosis Bento Grid

01 / Situation

The Fragmented Void

In the current landscape of digital meta-spaces, user agency was being sacrificed for visual noise. Platforms were cluttered with legacy UI patterns that failed to respect the depth of 3D environments.

architecture distance

02 / Diagnosis

Cognitive Friction

/01 Excessive UI occlusion in immersive modes.
/02 Lack of spatial hierarchy in data visualization.
/03 High barrier for architectural customization.

<section class="px-12 md:px-24 mb-48 max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-12 gap-8">

<div class="md:col-span-7 bg-surface-container-low p-12 flex flex-col justify-between">
<div>
<div class="mono-label text-secondary text-[10px] uppercase tracking-widest mb-12">01 / Situation</div>
<h2 class="serif-display text-4xl mb-8 italic">The Fragmented Void</h2>
<p class="text-on-surface-variant font-body leading-relaxed mb-8">
                            In the current landscape of digital meta-spaces, user agency was being sacrificed for visual noise. Platforms were cluttered with legacy UI patterns that failed to respect the depth of 3D environments.
                        </p>
</div>
<div class="flex gap-4">
<span class="material-symbols-outlined text-primary text-4xl">architecture</span>
<span class="material-symbols-outlined text-secondary text-4xl">distance</span>
</div>
</div>

<div class="md:col-span-5 bg-surface-container-high p-12">
<div class="mono-label text-primary text-[10px] uppercase tracking-widest mb-12">02 / Diagnosis</div>
<h3 class="serif-display text-3xl mb-8">Cognitive Friction</h3>
<ul class="space-y-6">
<li class="flex items-start gap-4">
<span class="mono-label text-primary mt-1">/01</span>
<span class="text-sm font-label uppercase tracking-tighter">Excessive UI occlusion in immersive modes.</span>
</li>
<li class="flex items-start gap-4">
<span class="mono-label text-primary mt-1">/02</span>
<span class="text-sm font-label uppercase tracking-tighter">Lack of spatial hierarchy in data visualization.</span>
</li>
<li class="flex items-start gap-4">
<span class="mono-label text-primary mt-1">/03</span>
<span class="text-sm font-label uppercase tracking-tighter">High barrier for architectural customization.</span>
</li>
</ul>
</div>
</div>
</section>

Mad Planet Case Study Dark · SECTION 4

Strategy Section

03 / Strategy

Asymmetric Structuralism

Our approach abandoned the 'Canvas' metaphor in favor of 'Space.' We developed a UI that exists *within* the volume, reacting to the user's focus through gaze-tracking and proximity-based luminance.

System-Architecture-v4.0

L_01 Base Logic

L_02 Spatial Mesh

L_03 Visual Output

<section class="px-12 md:px-24 mb-48">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row gap-24">
<div class="md:w-1/3">
<div class="sticky top-32">
<div class="mono-label text-secondary text-[10px] uppercase tracking-widest mb-8">03 / Strategy</div>
<h2 class="serif-display text-5xl font-bold mb-6">Asymmetric Structuralism</h2>
<div class="h-px bg-primary w-24"></div>
</div>
</div>
<div class="md:w-2/3 space-y-16">
<p class="serif-display text-3xl leading-relaxed text-on-surface">
                        Our approach abandoned the 'Canvas' metaphor in favor of 'Space.' We developed a UI that exists *within* the volume, reacting to the user's focus through gaze-tracking and proximity-based luminance.
                    </p>

<div class="bg-surface-container p-8 relative overflow-hidden border-l border-primary/20">
<div class="absolute top-0 right-0 p-4 mono-label text-[8px] text-primary/40 uppercase">System-Architecture-v4.0</div>
<div class="flex flex-col gap-8">
<div class="h-24 w-full border border-outline-variant/30 flex items-center justify-center">
<div class="w-4/5 h-px bg-gradient-to-r from-transparent via-primary to-transparent opacity-50"></div>
</div>
<div class="grid grid-cols-3 gap-4">
<div class="h-32 border border-outline-variant/30 flex flex-col p-4">
<span class="mono-label text-[10px] text-primary">L_01</span>
<span class="mt-auto text-[8px] uppercase tracking-widest">Base Logic</span>
</div>
<div class="h-32 bg-primary/5 border border-primary/20 flex flex-col p-4">
<span class="mono-label text-[10px] text-secondary">L_02</span>
<span class="mt-auto text-[8px] uppercase tracking-widest">Spatial Mesh</span>
</div>
<div class="h-32 border border-outline-variant/30 flex flex-col p-4">
<span class="mono-label text-[10px] text-primary">L_03</span>
<span class="mt-auto text-[8px] uppercase tracking-widest">Visual Output</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Mad Planet Case Study Dark · SECTION 5

Results / Data Viz

04 / Results & Impact

142%

User Retention Increase

0.4s

Avg Interaction Latency

3.2M

Spatial Nodes Created

"The architecture of Mad Planet is not just a backdrop, it is the interface itself."

— Technical Journal Review

<section class="bg-surface-container-lowest py-32 px-12 md:px-24">
<div class="max-w-7xl mx-auto">
<div class="mono-label text-primary text-[10px] uppercase tracking-widest mb-24 text-center">04 / Results &amp; Impact</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-outline-variant/15">

<div class="bg-surface-container-lowest p-16 text-center group transition-colors hover:bg-surface-container">
<div class="serif-display text-7xl font-bold text-primary mb-4 group-hover:text-secondary transition-colors">142%</div>
<div class="mono-label text-xs uppercase tracking-[0.2em] text-on-surface-variant">User Retention Increase</div>
</div>

<div class="bg-surface-container-lowest p-16 text-center group transition-colors hover:bg-surface-container">
<div class="serif-display text-7xl font-bold text-primary mb-4 group-hover:text-secondary transition-colors">0.4s</div>
<div class="mono-label text-xs uppercase tracking-[0.2em] text-on-surface-variant">Avg Interaction Latency</div>
</div>

<div class="bg-surface-container-lowest p-16 text-center group transition-colors hover:bg-surface-container">
<div class="serif-display text-7xl font-bold text-primary mb-4 group-hover:text-secondary transition-colors">3.2M</div>
<div class="mono-label text-xs uppercase tracking-[0.2em] text-on-surface-variant">Spatial Nodes Created</div>
</div>
</div>
<div class="mt-32 max-w-3xl mx-auto text-center">
<h4 class="serif-display text-3xl italic mb-8 text-on-surface">"The architecture of Mad Planet is not just a backdrop, it is the interface itself."</h4>
<p class="mono-label text-[10px] uppercase tracking-widest text-primary">— Technical Journal Review</p>
</div>
</div>
</section>

Mad Planet Case Study Dark · SECTION 6

Image Gallery / Final Visuals

Final Protocol

Full deployment across the architectural grid. 100% synthesis achieved.

<section class="px-12 md:px-24 mt-48 mb-24 max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div class="aspect-square bg-surface-container overflow-hidden">
<img alt="Mad Planet Detail" class="w-full h-full object-cover grayscale contrast-125 opacity-70 hover:grayscale-0 hover:opacity-100 transition-all duration-700" data-alt="Macro view of a hardware interface with glowing cyan neon lines and technical monochrome components in a dark setting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCsOoPdxdXQMqpEZR1zjnwZNNZPY1R8fL_pbJe-MkpB8nS1iS3KeAMSc4WvkD6GWmdky5SFiIFOmJC6fyZRgdgKdaucMSzC1JeMYEtQsy6ahiDAByqKIJpSzMpD6ucy0tFxl3yZ5IqqlKWPpa94NjgipbX8cUzTHGq523rXL0EKVWXCSxcoJ8z-mDgH-yBAg_rbxAWYRamqo-VrOj4b2CBmTdjL94SkJqLEHc-OQyLJzsYWe7qwbFegG0K2F5tRjMq2Hdw0VM9RguPi"/>
</div>
<div class="aspect-square bg-surface-container overflow-hidden flex items-end p-12">
<div class="relative z-10">
<h5 class="serif-display text-4xl mb-4">Final Protocol</h5>
<p class="text-on-surface-variant font-light mb-8">Full deployment across the architectural grid. 100% synthesis achieved.</p>
<button class="bg-primary text-on-primary px-8 py-3 font-label text-xs uppercase tracking-widest hover:bg-secondary transition-colors">Review Documentation</button>
</div>
</div>
</div>
</section>

Source File

Hilltopper Case Study Dark

6 blocks

Hilltopper Case Study Dark · SECTION 1

Hero Section

Case Study / 001

Hilltopper Home Tour

A digital blueprint for physical navigation. Redefining the campus experience through technical precision and editorial grace.

Hilltopper Case Study Dark · SECTION 2

Full Width Imagery

Hilltopper Case Study Dark · SECTION 3

Project Overview / Challenge

The Challenge

The modern university campus is a labyrinth of tradition and progress. Our task was to bridge the gap between high-level architectural aesthetics and functional wayfinding for the next generation of students.

We needed to create a system that felt like a premium monograph—authoritative yet accessible—solving the friction of campus navigation without sacrificing the prestigious identity of the Hilltopper brand.

Hilltopper Case Study Dark · SECTION 4

Duality: Student vs Parent

school

Persona Alpha

Student Experience

Hyper-fast, mobile-first utility. Focus on social density, hidden shortcuts, and real-time event integration.

01 Live Lab Availability

02 Social Density Heatmaps

family_history

Persona Beta

Parent Experience

Curated editorial paths. Focus on safety, legacy landmarks, and institutional excellence.

01 Historic Landmark Tours

02 Safety Resource Access

<section class="px-12 mb-48">
<div class="editorial-grid">

<div class="col-span-12 md:col-span-6 bg-surface-container-low p-12 relative overflow-hidden group">
<div class="absolute top-0 right-0 p-8">
<span class="material-symbols-outlined text-primary text-4xl opacity-20 group-hover:opacity-100 transition-opacity" data-icon="school">school</span>
</div>
<span class="font-label text-primary text-xs uppercase tracking-widest mb-4 block">Persona Alpha</span>
<h3 class="font-headline text-4xl mb-6">Student Experience</h3>
<p class="font-body text-on-surface-variant mb-12 max-w-sm">
                        Hyper-fast, mobile-first utility. Focus on social density, hidden shortcuts, and real-time event integration.
                    </p>
<div class="space-y-4">
<div class="flex items-center space-x-4 border-b border-outline-variant/15 pb-4">
<span class="font-label text-primary">01</span>
<span class="font-label uppercase text-[10px] tracking-tighter">Live Lab Availability</span>
</div>
<div class="flex items-center space-x-4 border-b border-outline-variant/15 pb-4">
<span class="font-label text-primary">02</span>
<span class="font-label uppercase text-[10px] tracking-tighter">Social Density Heatmaps</span>
</div>
</div>
</div>

<div class="col-span-12 md:col-span-6 bg-surface-container-high p-12 relative group">
<div class="absolute top-0 right-0 p-8">
<span class="material-symbols-outlined text-secondary text-4xl opacity-20 group-hover:opacity-100 transition-opacity" data-icon="family_history">family_history</span>
</div>
<span class="font-label text-secondary text-xs uppercase tracking-widest mb-4 block">Persona Beta</span>
<h3 class="font-headline text-4xl mb-6">Parent Experience</h3>
<p class="font-body text-on-surface-variant mb-12 max-w-sm">
                        Curated editorial paths. Focus on safety, legacy landmarks, and institutional excellence.
                    </p>
<div class="space-y-4">
<div class="flex items-center space-x-4 border-b border-outline-variant/15 pb-4">
<span class="font-label text-secondary">01</span>
<span class="font-label uppercase text-[10px] tracking-tighter">Historic Landmark Tours</span>
</div>
<div class="flex items-center space-x-4 border-b border-outline-variant/15 pb-4">
<span class="font-label text-secondary">02</span>
<span class="font-label uppercase text-[10px] tracking-tighter">Safety Resource Access</span>
</div>
</div>
</div>
</div>
</section>

Hilltopper Case Study Dark · SECTION 5

Technical Architecture (Bento Style)

Technical Architecture

Core Engine

Spatial Graph Database

The backbone of the Hilltopper Home Tour relies on a Neo4j spatial implementation, mapping every room, walkway, and elevator as nodes in a high-velocity graph. This allows for millisecond route recalculations based on physical constraints.

VECTOR_ENGINE GEOJSON_SYNC

Connectivity

Real-time IoT Nodes

Integrating 400+ campus sensors sensors

Interface

WebGPU Render Pipeline

Zero-latency 3D floorplan visualizer polyline

<section class="px-12 mb-48">
<h2 class="font-headline text-5xl mb-16 italic text-center">Technical Architecture</h2>
<div class="grid grid-cols-1 md:grid-cols-4 grid-rows-2 gap-4">

<div class="md:col-span-2 md:row-span-2 bg-surface-container p-12 border-l-4 border-primary">
<span class="font-label text-primary text-[10px] uppercase mb-4 block">Core Engine</span>
<h4 class="font-headline text-3xl mb-6">Spatial Graph Database</h4>
<p class="font-body text-on-surface-variant text-sm leading-relaxed mb-8">
                        The backbone of the Hilltopper Home Tour relies on a Neo4j spatial implementation, mapping every room, walkway, and elevator as nodes in a high-velocity graph. This allows for millisecond route recalculations based on physical constraints.
                    </p>
<div class="flex gap-4">
<span class="px-4 py-2 bg-primary/10 text-primary font-label text-[10px]">VECTOR_ENGINE</span>
<span class="px-4 py-2 bg-primary/10 text-primary font-label text-[10px]">GEOJSON_SYNC</span>
</div>
</div>

<div class="md:col-span-2 bg-surface-container-high p-8 flex flex-col justify-between">
<div>
<span class="font-label text-secondary text-[10px] uppercase mb-2 block">Connectivity</span>
<h4 class="font-headline text-xl mb-2">Real-time IoT Nodes</h4>
</div>
<div class="flex items-center justify-between">
<span class="font-body text-xs text-on-surface-variant">Integrating 400+ campus sensors</span>
<span class="material-symbols-outlined text-secondary" data-icon="sensors">sensors</span>
</div>
</div>

<div class="md:col-span-2 bg-surface-container-highest p-8 flex flex-col justify-between">
<div>
<span class="font-label text-primary text-[10px] uppercase mb-2 block">Interface</span>
<h4 class="font-headline text-xl mb-2">WebGPU Render Pipeline</h4>
</div>
<div class="flex items-center justify-between">
<span class="font-body text-xs text-on-surface-variant">Zero-latency 3D floorplan visualizer</span>
<span class="material-symbols-outlined text-primary" data-icon="polyline">polyline</span>
</div>
</div>
</div>
</section>

Hilltopper Case Study Dark · SECTION 6

Blueprint Detail

The Structural Logic

We eschewed the standard "map" interface for a technical monograph approach. Every pixel was treated as a data point. The resulting UI allows users to "read" the campus rather than just look at it.

<section class="px-12 mb-48 flex flex-col md:flex-row items-center gap-24">
<div class="w-full md:w-1/2">
<img class="w-full border border-outline-variant/20 shadow-[0_0_80px_-20px_rgba(0,255,255,0.15)]" data-alt="Abstract architectural blueprint with cyan glowing lines on a deep black background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8L_Ru1eotBYzu7YIjonUEAMDHQXFflAjwHFo0ykkM8NkIXVzq-gaoBRJfDY08AwTLm_Um-6jLQXvQovkW6IXYZE6uLlLZYNrnm3_3JDgnV8G7SqW0Iz1iuTPX95q0dOF9-bsTMhZz4gOwPtTNROtlPaa_1WPNKb0XG1TNFSebpZXsOX0bZjNW6lI3ATL_8OVPQ2Ye-Oto7yWubgFTZmd_VfSzuzmKhxzMK2Je8pkUeiKHhPBbJuH9hEIQIAx7meV6xeq4uxfq7K2U"/>
</div>
<div class="w-full md:w-1/2">
<h2 class="font-headline text-5xl mb-8">The Structural Logic</h2>
<p class="font-body text-on-surface-variant mb-8 leading-loose">
                    We eschewed the standard "map" interface for a technical monograph approach. Every pixel was treated as a data point. The resulting UI allows users to "read" the campus rather than just look at it.
                </p>
<button class="bg-primary text-on-primary px-10 py-4 font-label uppercase tracking-widest text-xs hover:bg-secondary hover:text-white transition-all duration-500">
                    View Full Repository
                </button>
</div>
</section>

Source File

Door County Case Study Dark

5 blocks

Door County Case Study Dark · HEADER 1

Hero Section

Case Study // 004

Door County:
WordPress on .NET

A technical monograph on bridging legacy PHP architecture with enterprise .NET environments.

Door County Case Study Dark · SECTION 2

Project Details & Imagery

Client

Door County Tourism

Scope

Hybrid Infrastructure
CMS Decoupling
Legacy Migration

<section class="px-12 mb-40">
<div class="editorial-grid">
<div class="col-span-12 md:col-span-7 aspect-[16/9] bg-surface-container overflow-hidden group">
<img class="w-full h-full object-cover grayscale opacity-60 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-700" data-alt="Technical blueprint overlaying a minimalist server room with glowing cyan led lights and sharp architectural lines in a dark space" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDp8sz5zfIalbQQ1zsuYF8yKATd-Rl_8Fvayvngz2iwjZPXortlblOqDItmnP7fhvbSq0ZbVN8TssmkAOxy4Sxt-keUPrJ-pw3RVQ3LBLvAr4xV-pe1XEI3_NnTlfDuzixdy-Smdr6Wij3ji99dOBCJfNLjrbRuHeplIBAb68WiKsd7UzO1hXYfVzJ2_TyzpMRgpZPD0Ix5ype5iDag5at-O54c_XDOUIp9rCZ9LMfZi_cWvN9_S_mXlQl6QxSFcUhgmQlE8Q6l-IL-"/>
</div>
<div class="col-span-12 md:col-span-4 md:col-start-9 flex flex-col justify-center">
<div class="mb-8">
<p class="font-label text-secondary text-xs uppercase tracking-widest mb-2">Client</p>
<p class="font-headline text-xl text-on-surface">Door County Tourism</p>
</div>
<div class="mb-8">
<p class="font-label text-secondary text-xs uppercase tracking-widest mb-2">Scope</p>
<ul class="font-body text-on-surface-variant space-y-1">
<li>Hybrid Infrastructure</li>
<li>CMS Decoupling</li>
<li>Legacy Migration</li>
</ul>
</div>
</div>
</div>
</section>

Door County Case Study Dark · SECTION 3

The Problem

The Integration Problem

Door County faced a critical architectural bottleneck: a high-performing marketing front-end powered by WordPress, needing to coexist within a rigid, secure .NET enterprise backend. The silos prevented real-time data synchronization and created a disjointed user experience.

Traditional "bridge" solutions introduced unacceptable latency and security vulnerabilities, threatening the integrity of the tourism portal's booking engines.

Constraint 01

"Zero-latency requirements for dynamic pricing data fetched via .NET APIs."

Constraint 02

"CMS flexibility for marketing teams without compromising server-side security."

<section class="bg-surface-container-low py-32 px-12 mb-40">
<div class="max-w-screen-xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-24 items-start">
<div>
<h2 class="font-headline text-4xl mb-8">The Integration Problem</h2>
<div class="space-y-6 font-body text-on-surface-variant leading-loose">
<p>Door County faced a critical architectural bottleneck: a high-performing marketing front-end powered by WordPress, needing to coexist within a rigid, secure .NET enterprise backend. The silos prevented real-time data synchronization and created a disjointed user experience.</p>
<p>Traditional "bridge" solutions introduced unacceptable latency and security vulnerabilities, threatening the integrity of the tourism portal's booking engines.</p>
</div>
</div>
<div class="space-y-4">
<div class="bg-surface-container p-8 border-l-2 border-error-dim">
<p class="font-label text-error-dim text-xs uppercase tracking-widest mb-2">Constraint 01</p>
<p class="font-body text-on-surface italic">"Zero-latency requirements for dynamic pricing data fetched via .NET APIs."</p>
</div>
<div class="bg-surface-container p-8 border-l-2 border-primary">
<p class="font-label text-primary text-xs uppercase tracking-widest mb-2">Constraint 02</p>
<p class="font-body text-on-surface italic">"CMS flexibility for marketing teams without compromising server-side security."</p>
</div>
</div>
</div>
</div>
</section>

Door County Case Study Dark · SECTION 4

The Solution (Bento Grid)

The Hybrid Solution

hub

Proxied Architecture

We implemented a custom reverse-proxy layer using YARP (Yet Another Reverse Proxy) to seamlessly route traffic between PHP and .NET cores under a single domain umbrella.

terminal

Shared Auth

Custom JWT middleware allowed the WordPress session state to be recognized by the .NET Identity framework, enabling a single-sign-on experience across the entire ecosystem.

database

Unified Storage

A synchronized MySQL and SQL Server pipeline using Azure Data Factory ensured marketing content and transactional data remained in parity.

Outcome Efficiency

45%

Load Time Reduction

100%

Uptime during Migration

0

Security Breaches

<section class="px-12 mb-40">
<h2 class="font-headline text-4xl mb-16 text-center italic">The Hybrid Solution</h2>
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">

<div class="col-span-12 md:col-span-8 bg-surface-container-high p-12 flex flex-col justify-between">
<div>
<span class="material-symbols-outlined text-primary text-4xl mb-6" data-icon="hub">hub</span>
<h3 class="font-headline text-2xl mb-4">Proxied Architecture</h3>
<p class="font-body text-on-surface-variant max-w-md">We implemented a custom reverse-proxy layer using YARP (Yet Another Reverse Proxy) to seamlessly route traffic between PHP and .NET cores under a single domain umbrella.</p>
</div>
<div class="mt-12">
<img class="w-full h-48 object-cover opacity-30" data-alt="Abstract visualization of data flowing through digital conduits with glowing cyan and violet nodes on a black background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6MmHw5_JcugiY-fj3jd7StWJWMETUfuTswuROyo0QTQsCbLOLLqGDlWYZtaiGN2Li6SFIb8UCs1mo0TEyuApkNuXFWjylu19rjMc-wTl58qUvqpVBt5NbJyCovA7sWX0xliKHnf8-MOY06yvxLJKckNsrbHxdgbMwPhQYvwrhWDYvztUKyLb-QkX0TbNA1jJC7I9f4qBi7vsh9NR_GglpDlp-Ve8x8y_uPFh5b0Vq9ku5onGizPMnzi614EqWiWbCPLWGO5lWbaiK"/>
</div>
</div>

<div class="col-span-12 md:col-span-4 bg-secondary-container/10 p-12 border border-secondary/20">
<span class="material-symbols-outlined text-secondary text-4xl mb-6" data-icon="terminal">terminal</span>
<h3 class="font-headline text-2xl mb-4">Shared Auth</h3>
<p class="font-body text-on-surface-variant">Custom JWT middleware allowed the WordPress session state to be recognized by the .NET Identity framework, enabling a single-sign-on experience across the entire ecosystem.</p>
</div>

<div class="col-span-12 md:col-span-4 bg-surface-container p-12">
<span class="material-symbols-outlined text-tertiary text-4xl mb-6" data-icon="database">database</span>
<h3 class="font-headline text-2xl mb-4">Unified Storage</h3>
<p class="font-body text-on-surface-variant">A synchronized MySQL and SQL Server pipeline using Azure Data Factory ensured marketing content and transactional data remained in parity.</p>
</div>

<div class="col-span-12 md:col-span-8 bg-surface-container p-12 relative overflow-hidden">
<div class="relative z-10">
<h3 class="font-headline text-2xl mb-4 text-primary">Outcome Efficiency</h3>
<div class="grid grid-cols-3 gap-8 mt-8">
<div>
<p class="font-label text-4xl text-on-surface">45%</p>
<p class="font-label text-[10px] text-on-surface-variant uppercase tracking-tighter">Load Time Reduction</p>
</div>
<div>
<p class="font-label text-4xl text-on-surface">100%</p>
<p class="font-label text-[10px] text-on-surface-variant uppercase tracking-tighter">Uptime during Migration</p>
</div>
<div>
<p class="font-label text-4xl text-on-surface">0</p>
<p class="font-label text-[10px] text-on-surface-variant uppercase tracking-tighter">Security Breaches</p>
</div>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent"></div>
</div>
</div>
</section>

Door County Case Study Dark · SECTION 5

Final Outcome

Project Outcomes

The Door County digital platform now stands as a benchmark for hybrid enterprise architecture. By respecting the strengths of both WordPress and .NET, we achieved a system that is as flexible as it is indestructible.

Source File

Art Gallery Dark

3 blocks

Art Gallery Dark · HEADER 1

Hero Section

Archive Vol. 01

Fine Art Portfolio

A curation of spatial explorations,
focused on Materiality & Form.

Art Gallery Dark · SECTION 2

Bento Gallery Grid

Materiality Studies 01

Brutalist Textures / 2024

SPEC_044

Analog Stack

Mixed Media / Oil on Steel

The Void Sequence

An exploration into the absence of light as a physical medium. These works utilize ultra-matte black surfaces to challenge depth perception.

Technical Parameters

MEDIUM Pigment on Archival Mesh

DIMENSIONS 2400mm x 3600mm

ORIGIN Tokyo Digital Studio

<section class="px-12 mb-48">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-8">

<div class="md:col-span-8 group cursor-crosshair">
<div class="aspect-[16/9] overflow-hidden bg-surface-container mb-4 relative">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale hover:grayscale-0" data-alt="Abstract architectural minimalist concrete structure with sharp shadows and high contrast moody dramatic lighting in black and white" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCytbXvR5h213kthW2vumDsMjBR8fUyfbpvKE2UdhqDseALWwq8R7a365-V4px_AI4UqFatVmYE4FxxI_DP6Fxik29m-qSLb9Qp2RgcmBy9kthr69hEkdhdd9iWTcH3klNUz84Un7FRFPwI87uREkYIRWQg2In4zRKNHQOSxugvjoUFLuF4hqPkMap_F6daz6LinLovhiyE2WoiZk4gy6lfBFwfqhce6LENCEd4oOicJ36R-0nPAQOjMF3JJBwswNk1GE1klsDiCwLj"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest to-transparent opacity-60"></div>
</div>
<div class="flex justify-between items-start">
<div>
<h3 class="font-headline text-2xl text-on-surface">Materiality Studies 01</h3>
<p class="font-label text-xs text-on-surface-variant uppercase tracking-widest mt-1">Brutalist Textures / 2024</p>
</div>
<div class="text-primary font-label text-xs">SPEC_044</div>
</div>
</div>

<div class="md:col-span-4 group cursor-crosshair md:mt-24">
<div class="aspect-[3/4] overflow-hidden bg-surface-container mb-4">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Extreme close up of oil paint texture with heavy impasto brushstrokes and metallic gold highlights against dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAizQZFd2M1hUR8z7M2u0_weaY-daPwuikRFaIlOrN9tY_1x7Nx-1vsItOTBJ6rNjhV3Zoy20VetIVWSSuYH6wYesgNqZysYO6YmPe8dHNEnMV5T7R86NWtoc6N3w3NxVzesAVWR9k36tvGGRBsqWUziiRU7ih0gB68ESE3H5n6j2UKWrEGi69BBGqo0cM_2BuZaIwiD7QaAzDVwktU89UaGrk6AnNQDZEFTej1eddcqgzxnxhmBdLBlFf8K9MO3ZJYn8k5Nc63gLjv"/>
</div>
<h3 class="font-headline text-2xl text-on-surface">Analog Stack</h3>
<p class="font-label text-xs text-on-surface-variant uppercase tracking-widest mt-1">Mixed Media / Oil on Steel</p>
</div>

<div class="md:col-span-12 group cursor-crosshair mt-12">
<div class="aspect-[21/9] overflow-hidden bg-surface-container-low mb-4 relative">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale" data-alt="Wide panoramic view of a dark art gallery with neon cyan lights reflecting off glossy black floor and minimalist sculptures" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAmTlREJacL1HftXWJOR5JLxF4asHIC8pmlL5a1UY4c4ffQehTrSaR5gtXNEx4Wv-Fgq8YvoV8HQZ24vLbxM4cKBdPUgfEzc4BzKGhf2wUffzRoyXSZ0oE1xDgzHOr2ftZzP94zMuj5Lh-1IjX8fbjweL2nnAi4badUOfJ8_Xm29zIr2Sgd3PBRc_Q28YYP-gXuFfQgmIjzgNbDBy4aTCBVsDaeNsS5_-yfw4zFVsHasQsssdn4ec-i9sOmO8yRB3gxoUHam7OxCHwQ"/>
<div class="absolute inset-0 border border-primary/10 group-hover:border-primary/40 transition-colors pointer-events-none"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="col-span-2">
<h3 class="font-headline text-3xl text-on-surface">The Void Sequence</h3>
<p class="font-body text-on-surface-variant mt-4 max-w-xl leading-relaxed">
                                An exploration into the absence of light as a physical medium. These works utilize ultra-matte black surfaces to challenge depth perception.
                            </p>
</div>
<div class="flex flex-col justify-end space-y-4">
<button class="bg-primary text-on-primary font-label text-xs py-4 px-8 self-end transition-all hover:bg-secondary">
                                VIEW COLLECTION
                            </button>
</div>
</div>
</div>

<div class="md:col-span-5 mt-24">
<div class="p-12 bg-surface-container-low border border-outline-variant/10">
<span class="font-label text-[10px] text-secondary uppercase tracking-[0.3em] block mb-8 underline decoration-secondary/30 underline-offset-8">Technical Parameters</span>
<div class="space-y-6">
<div class="flex justify-between border-b border-outline-variant/10 pb-2">
<span class="font-label text-xs text-on-surface-variant">MEDIUM</span>
<span class="font-label text-xs text-on-surface">Pigment on Archival Mesh</span>
</div>
<div class="flex justify-between border-b border-outline-variant/10 pb-2">
<span class="font-label text-xs text-on-surface-variant">DIMENSIONS</span>
<span class="font-label text-xs text-on-surface">2400mm x 3600mm</span>
</div>
<div class="flex justify-between border-b border-outline-variant/10 pb-2">
<span class="font-label text-xs text-on-surface-variant">ORIGIN</span>
<span class="font-label text-xs text-on-surface">Tokyo Digital Studio</span>
</div>
</div>
</div>
</div>

<div class="md:col-span-7 mt-24 group">
<div class="aspect-square overflow-hidden bg-surface-container">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:rotate-1" data-alt="Geometric minimalist sculpture made of light and mirrors in a dark misty room with purple and cyan glow" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCEf3O1-cvgEH6t2uUphD2gEPLALwoX2xdjhq6YQ1WSUFK3SkZP0sKbqxjh84icG6r3vyg_4hBCcigu7puR3h0-l8FyPeIRaJ3Oh2mobySYd5w-wT2wxHvzCPdj2VhwHSZZnjIS5-hz3iQvdejRV8Epk1pVVElk7KyaiumDywxDCpNYAGoyTZYGrmTrnC2tkBTz91Ut1HIS3eY0awTNiQhTrmNRbVqE3TPptnh5BNEFrqkFvRKMyHkRdpWHxIMdpsSXPKhHUbXTvTh8"/>
</div>
</div>
</div>
</section>

Art Gallery Dark · SECTION 3

Newsletter / Contact Callout

Acquire the Monographs.

Join the private list for early access to quarterly architectural art drops and physical prints.

<section class="px-12 py-32 bg-surface-container-lowest">
<div class="max-w-7xl mx-auto border-t border-primary/20 pt-16 flex flex-col md:flex-row items-center justify-between">
<div class="mb-12 md:mb-0">
<h2 class="font-headline text-5xl mb-4 italic">Acquire the Monographs.</h2>
<p class="font-body text-on-surface-variant max-w-md">Join the private list for early access to quarterly architectural art drops and physical prints.</p>
</div>
<div class="w-full md:w-1/3">
<form class="flex flex-col space-y-6">
<div class="relative">
<label class="font-label text-[10px] text-primary uppercase tracking-widest absolute -top-4">EMAIL_ADDRESS</label>
<input class="w-full bg-transparent border-0 border-b-2 border-outline focus:border-primary focus:ring-0 font-label py-4 text-primary placeholder:text-outline-variant transition-colors" placeholder="ENTER THE VOID" type="email"/>
</div>
<button class="bg-primary text-on-primary px-8 py-4 font-label text-xs hover:bg-secondary transition-all flex items-center justify-center space-x-2">
<span>SUBMIT ENTRY</span>
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</form>
</div>
</div>
</section>

Every extracted Stitch section, ready to copy.

Home Page Dark

Hero Section

I solve problems other people gave up on.

Architect's Engine Terminal

Case Study Previews

Case Studies

The Void Pavilion

Cyber-Grid Alpha

Neo-Monolith Residence

Technical Footnote / Bottom Section

About Page Dark

Narrative Section

Mike Shank. Bridging the gap between pixels and logic.

What I Actually Do Section (Bento Grid)

What I actually do

System Architecture

Logic Engineering

Performance Audit

Image Break Section

"Simplicity is the consequence of structural integrity."

What I'm Looking For Section

What I'm looking for

Ambitious Product Shells

Design System Revolutions

Creative Technology Labs

Post-Mobile Experiments

Mad Planet Case Study Dark

Hero Section

Large Hero Image

Situation & Diagnosis Bento Grid

The Fragmented Void

Cognitive Friction

Strategy Section

Asymmetric Structuralism

Results / Data Viz

"The architecture of Mad Planet is not just a backdrop, it is the interface itself."

Image Gallery / Final Visuals

Final Protocol

Hilltopper Case Study Dark

Hero Section

Hilltopper Home Tour

Full Width Imagery

Project Overview / Challenge

The Challenge

Duality: Student vs Parent

Student Experience

Parent Experience

Technical Architecture (Bento Style)

Technical Architecture

Spatial Graph Database

Real-time IoT Nodes

WebGPU Render Pipeline

Blueprint Detail

The Structural Logic

Door County Case Study Dark

Hero Section

Project Details & Imagery

The Problem

The Integration Problem

The Solution (Bento Grid)

The Hybrid Solution

Proxied Architecture

Shared Auth

Unified Storage

Outcome Efficiency

Final Outcome

Project Outcomes

Art Gallery Dark

Hero Section

Bento Gallery Grid

Materiality Studies 01

Analog Stack

The Void Sequence

Newsletter / Contact Callout

Acquire the Monographs.