942 lines
32 KiB
HTML
942 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');
|
|
|
|
:root {
|
|
--earth: #3C2415;
|
|
--earth-light: #6B4226;
|
|
--sand: #F5EDE0;
|
|
--sand-dark: #E8DBC8;
|
|
--gold: #C68B3F;
|
|
--gold-light: #D4A55A;
|
|
--green: #4A6741;
|
|
--green-dark: #2D3E28;
|
|
--text-dark: #1a1a1a;
|
|
--text-body: #3d3630;
|
|
--text-muted: #7a6f64;
|
|
--midnight: #0a0a0f;
|
|
}
|
|
|
|
@page {
|
|
size: 1920px 1080px;
|
|
margin: 0;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.slide {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
page-break-after: always;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.slide:last-child {
|
|
page-break-after: auto;
|
|
}
|
|
|
|
/* ============================
|
|
SCREEN: single-slide viewer
|
|
============================ */
|
|
@media screen {
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: #000;
|
|
}
|
|
.slide {
|
|
display: none !important;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
transform-origin: 0 0;
|
|
page-break-after: auto;
|
|
}
|
|
.slide.active {
|
|
display: flex !important;
|
|
}
|
|
.slide-nav {
|
|
position: fixed;
|
|
bottom: 12px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
z-index: 100;
|
|
background: rgba(0,0,0,0.7);
|
|
padding: 6px 18px;
|
|
border-radius: 20px;
|
|
}
|
|
.slide-nav button {
|
|
background: none;
|
|
border: 1px solid rgba(245,237,224,0.3);
|
|
color: var(--sand);
|
|
font-size: 16px;
|
|
padding: 4px 14px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.slide-nav button:hover {
|
|
background: rgba(245,237,224,0.15);
|
|
}
|
|
.slide-nav span {
|
|
color: rgba(245,237,224,0.5);
|
|
font-size: 13px;
|
|
font-family: 'Inter', sans-serif;
|
|
min-width: 50px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.slide-nav { display: none !important; }
|
|
}
|
|
|
|
/* ============================
|
|
SHARED HELPERS
|
|
============================ */
|
|
.label {
|
|
font-size: 18px;
|
|
letter-spacing: 0.25em;
|
|
text-transform: uppercase;
|
|
color: var(--gold);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.heading {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 56px;
|
|
letter-spacing: 0.06em;
|
|
color: var(--earth);
|
|
line-height: 1.05;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.body-text {
|
|
font-size: 28px;
|
|
color: var(--text-body);
|
|
line-height: 1.65;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.body-text em {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 30px;
|
|
}
|
|
|
|
/* ============================
|
|
SLIDE 1: COVER — split layout
|
|
============================ */
|
|
.slide-cover {
|
|
background: var(--midnight);
|
|
display: flex;
|
|
}
|
|
|
|
.slide-cover .cover-left {
|
|
flex: 0 0 42%;
|
|
padding: 70px 50px 70px 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.slide-cover .cover-right {
|
|
flex: 0 0 58%;
|
|
position: relative;
|
|
}
|
|
|
|
.slide-cover .cover-right .cover-single-img {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center 40%;
|
|
}
|
|
|
|
.slide-cover .cover-right .img-overlay {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 30%; height: 100%;
|
|
background: linear-gradient(90deg, var(--midnight) 0%, rgba(10,10,15,0) 100%);
|
|
}
|
|
|
|
.slide-cover .overline {
|
|
font-size: 16px;
|
|
letter-spacing: 0.3em;
|
|
text-transform: uppercase;
|
|
color: var(--gold);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.slide-cover .title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 140px;
|
|
letter-spacing: 0.15em;
|
|
color: var(--sand);
|
|
line-height: 0.85;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.slide-cover .cover-desc {
|
|
font-size: 22px;
|
|
color: rgba(245, 237, 224, 0.72);
|
|
line-height: 1.65;
|
|
max-width: 880px;
|
|
}
|
|
|
|
.slide-cover .cover-desc em {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 25px;
|
|
color: rgba(245, 237, 224, 0.85);
|
|
}
|
|
|
|
/* ============================
|
|
SLIDE 2: EXHIBIT — text + image
|
|
============================ */
|
|
.slide-vision {
|
|
background: var(--sand);
|
|
display: flex;
|
|
align-items: stretch;
|
|
padding: 0;
|
|
}
|
|
|
|
.slide-vision .left {
|
|
flex: 1;
|
|
padding: 70px 50px 70px 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.slide-vision .right {
|
|
flex: 0 0 48%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slide-vision .right img {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.slide-vision .heading {
|
|
font-size: 52px;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.slide-vision .body-text {
|
|
font-size: 26px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
/* ============================
|
|
DARK SLIDES
|
|
============================ */
|
|
.slide-dark {
|
|
background: var(--midnight);
|
|
color: var(--sand);
|
|
padding: 80px 140px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.slide-dark .label { color: var(--gold-light); }
|
|
.slide-dark .heading { color: var(--sand); margin-bottom: 30px; }
|
|
.slide-dark .body-text { color: rgba(245, 237, 224, 0.8); margin-bottom: 20px; }
|
|
.slide-dark .body-text em { color: rgba(245, 237, 224, 0.9); }
|
|
|
|
/* Dark split — text left, image right (absolute positioned image) */
|
|
.slide-dark-split {
|
|
background: var(--midnight);
|
|
position: relative;
|
|
}
|
|
|
|
.slide-dark-split .ds-text {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 52%;
|
|
height: 1080px;
|
|
padding: 90px 70px 90px 120px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
}
|
|
|
|
.slide-dark-split .ds-img {
|
|
position: absolute;
|
|
top: 0; right: 0;
|
|
width: 48%;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slide-dark-split .ds-img img {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.slide-dark-split .ds-img .img-fade {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 60px; height: 100%;
|
|
background: linear-gradient(90deg, var(--midnight), transparent);
|
|
z-index: 1;
|
|
}
|
|
|
|
.slide-dark-split .label { color: var(--gold-light); margin-bottom: 12px; }
|
|
.slide-dark-split .heading { color: var(--sand); margin-bottom: 30px; font-size: 52px; }
|
|
.slide-dark-split .body-text { color: rgba(245, 237, 224, 0.78); margin-bottom: 20px; font-size: 26px; max-width: 700px; }
|
|
.slide-dark-split .body-text em { color: rgba(245, 237, 224, 0.9); font-family: 'Cormorant Garamond', serif; font-size: 28px; }
|
|
|
|
/* ============================
|
|
QUOTE SLIDE
|
|
============================ */
|
|
.slide-quote {
|
|
background: var(--midnight);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 120px 200px;
|
|
text-align: center;
|
|
}
|
|
|
|
.slide-quote .quote-text {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 48px;
|
|
font-style: italic;
|
|
color: var(--gold-light);
|
|
line-height: 1.5;
|
|
max-width: 1300px;
|
|
}
|
|
|
|
.slide-quote .quote-line {
|
|
width: 80px;
|
|
height: 2px;
|
|
background: var(--gold);
|
|
margin: 0 auto 40px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* ============================
|
|
SENSORY TAGS
|
|
============================ */
|
|
.sensory-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: repeat(4, auto);
|
|
gap: 20px 24px;
|
|
}
|
|
|
|
.sensory-item {
|
|
font-size: 20px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
padding: 18px 20px;
|
|
border: 1px solid rgba(198, 139, 63, 0.4);
|
|
color: var(--gold-light);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ============================
|
|
EARTH SLIDES
|
|
============================ */
|
|
.slide-earth {
|
|
background: var(--earth);
|
|
color: var(--sand);
|
|
padding: 80px 140px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.slide-earth .label { color: var(--gold-light); }
|
|
.slide-earth .heading { color: var(--sand); margin-bottom: 30px; }
|
|
.slide-earth .body-text { color: rgba(245, 237, 224, 0.78); margin-bottom: 20px; }
|
|
.slide-earth .body-text em { color: rgba(245, 237, 224, 0.9); }
|
|
|
|
/* ============================
|
|
THREE CARDS
|
|
============================ */
|
|
.three-cards {
|
|
display: flex;
|
|
gap: 24px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.three-cards .card { flex: 1; text-align: center; overflow: hidden; }
|
|
|
|
.three-cards .card-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 32px;
|
|
letter-spacing: 0.06em;
|
|
color: var(--sand);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.three-cards .card-text {
|
|
font-size: 22px;
|
|
color: rgba(245, 237, 224, 0.65);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.three-cards .card-icon {
|
|
width: 80px;
|
|
height: 2px;
|
|
background: var(--gold);
|
|
margin: 0 auto 20px;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.three-cards .card-img {
|
|
width: 100%;
|
|
height: 300px;
|
|
object-fit: cover;
|
|
object-position: center 30%;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* ============================
|
|
SPLIT SLIDE (image + text)
|
|
============================ */
|
|
.slide-split {
|
|
display: flex;
|
|
height: 1080px;
|
|
}
|
|
|
|
.slide-split .split-img {
|
|
flex: 0 0 50%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.slide-split .split-content {
|
|
flex: 1;
|
|
padding: 100px 80px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.slide-split.earth-bg .split-content { background: var(--earth); color: var(--sand); }
|
|
.slide-split.earth-bg .label { color: var(--gold-light); }
|
|
.slide-split.earth-bg .heading { color: var(--sand); font-size: 56px; margin-bottom: 30px; }
|
|
.slide-split.earth-bg .body-text { color: rgba(245, 237, 224, 0.78); font-size: 24px; }
|
|
|
|
/* ============================
|
|
GALLERY SLIDE
|
|
============================ */
|
|
.slide-gallery {
|
|
background: var(--midnight);
|
|
padding: 80px 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.gallery-4x2 {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
gap: 6px;
|
|
flex: 1;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.gallery-4x2 img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* ============================
|
|
ABOUT SLIDE
|
|
============================ */
|
|
.slide-about {
|
|
background: var(--sand);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 80px 120px;
|
|
}
|
|
|
|
.slide-about .photo {
|
|
flex: 0 0 380px;
|
|
height: 500px;
|
|
object-fit: cover;
|
|
margin-right: 80px;
|
|
}
|
|
|
|
.slide-about .info { flex: 1; }
|
|
|
|
.slide-about .name {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 56px;
|
|
letter-spacing: 0.06em;
|
|
color: var(--earth);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.slide-about .role {
|
|
font-size: 16px;
|
|
color: var(--gold);
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.slide-about .bio {
|
|
font-size: 24px;
|
|
color: var(--text-body);
|
|
line-height: 1.75;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.slide-about .bio em {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 26px;
|
|
}
|
|
|
|
/* ============================
|
|
TEAM SLIDE
|
|
============================ */
|
|
.slide-team {
|
|
background: var(--sand-dark);
|
|
padding: 100px 140px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.team-grid {
|
|
display: flex;
|
|
gap: 60px;
|
|
margin-top: 60px;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.team-member { flex: 1; text-align: center; }
|
|
|
|
.team-member .avatar {
|
|
width: 160px;
|
|
height: 160px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 4px solid var(--gold);
|
|
margin: 0 auto 24px;
|
|
display: block;
|
|
}
|
|
|
|
.team-member .member-name {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 30px;
|
|
letter-spacing: 0.06em;
|
|
color: var(--earth);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.team-member .member-role {
|
|
font-size: 14px;
|
|
color: var(--gold);
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.team-member .member-bio {
|
|
font-size: 22px;
|
|
color: var(--text-muted);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ============================
|
|
CLOSING SLIDE
|
|
============================ */
|
|
.slide-closing {
|
|
background: var(--midnight);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.slide-closing .bg-img {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
object-fit: cover;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.slide-closing .content {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.slide-closing .close-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 160px;
|
|
letter-spacing: 0.15em;
|
|
color: var(--sand);
|
|
line-height: 0.9;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.slide-closing .close-tagline {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 34px;
|
|
font-style: italic;
|
|
color: rgba(245, 237, 224, 0.6);
|
|
max-width: 800px;
|
|
line-height: 1.5;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.slide-closing .close-line {
|
|
width: 80px;
|
|
height: 2px;
|
|
background: var(--gold);
|
|
margin: 0 auto 30px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.slide-closing .close-credit {
|
|
font-size: 16px;
|
|
color: rgba(245, 237, 224, 0.4);
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ============================================================
|
|
SLIDE 1: COVER — full description + home design photos
|
|
============================================================ -->
|
|
<div class="slide slide-cover">
|
|
<div class="cover-left">
|
|
<p class="overline">A Cineasthesia Project</p>
|
|
<h1 class="title">HOME</h1>
|
|
<p class="cover-desc"><em>The Last Draw/Home</em> is a film and art installation that deconstructs and reimagines the notion of “home” — as cultural memory, as shelter, and as a form of resistance in service to a reimagined future. The project is multi-purpose: using neuroaesthetic principles rooted in West African indigenous practices to lower cortisol levels and induce states of joy, euphoria, play, and embodied remembrance — and as a prototype for fire-resistant, climate-adaptive affordable housing.</p>
|
|
</div>
|
|
<div class="cover-right">
|
|
<img class="cover-single-img" src="img/cropped/cover-wide.jpg" alt="HOME house design">
|
|
<div class="img-overlay"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
SLIDE 2: THE SENSORY JOURNEY — with home design image
|
|
============================================================ -->
|
|
<div class="slide slide-dark-split">
|
|
<div class="ds-text">
|
|
<p class="label">The Sensory Journey</p>
|
|
<h2 class="heading">Interconnected Sensory Chambers</h2>
|
|
<p class="body-text">Visitors move through interconnected sensory chambers — experiencing film, video, oral storytelling, bass vibrations, AR environments, projection mapping, sound frequencies tied to ancestral rhythms, and eco-designed spaces — across a durational journey modeled on ceremonial timescales.</p>
|
|
<p class="body-text">By fusing adaptive architectural design with immersive storytelling, <em>The Last Draw/Home</em> offers spaces that can function as both an externalized and internalized nervous system regulator.</p>
|
|
</div>
|
|
<div class="ds-img">
|
|
<img src="img/cropped/sanctuary-photo.jpg" alt="HOME architectural pillars">
|
|
<div class="img-fade"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
SLIDE 3: GOALS — three imperatives + cultural design
|
|
============================================================ -->
|
|
<div class="slide slide-vision">
|
|
<div class="left">
|
|
<p class="label">Project Goals</p>
|
|
<h2 class="heading">Cultural Reclamation, Nervous System Restoration, Climate-Resilient Housing</h2>
|
|
<p class="body-text"><em>The Last Draw/Home</em> operates at the intersection of three urgent imperatives: cultural reclamation, nervous system restoration, and climate-resilient housing.</p>
|
|
<p class="body-text" style="margin-top: 16px;">Through integrating technology with Ghanaian indigenous practices — sound frequencies, ceremonial pacing, ancestral storytelling modalities — the project invites visitors into what we call “cultural design”: architecture and narrative shaped by the epistemologies of the communities it serves.</p>
|
|
</div>
|
|
<div class="right">
|
|
<img src="img/cropped/acorus-overhead.jpg" alt="Acorus sanctuary overhead">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
SLIDE 4: GOALS (continued) — AR, housing, healing
|
|
============================================================ -->
|
|
<div class="slide slide-dark-split">
|
|
<div class="ds-text">
|
|
<p class="label">Cultural Design</p>
|
|
<h2 class="heading">What Would Housing Look Like If It Were Designed to Heal?</h2>
|
|
<p class="body-text">“How can we create both an externalized nervous system through design technology and an internalized nervous regulator through story and somatic sensory experiencing—linking the knowledge and ancient tech that has always been there to the technology of today?”</p>
|
|
</div>
|
|
<div class="ds-img">
|
|
<img src="img/cultural-design.jpg" alt="Cultural design dome interior">
|
|
<div class="img-fade"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
SLIDE 5: THE EXPERIENCE — neuroaesthetics + Walker/Lorde
|
|
============================================================ -->
|
|
<div class="slide" style="background: var(--midnight); display: flex; flex-direction: row; align-items: center; padding: 80px 100px;">
|
|
<div style="width: 50%; padding-right: 80px;">
|
|
<p class="label" style="color: var(--gold-light);">Immersive, Interactive Art</p>
|
|
<h2 class="heading" style="color: var(--sand); margin-bottom: 30px;">The Experience</h2>
|
|
<p class="body-text" style="color: rgba(245,237,224,0.8);">Drawing from Alice Walker’s radical tenderness and Audre Lorde’s framing of self-care as a form of political resistance, this project destigmatizes play, rest, and joy for people who may be in survival mode.</p>
|
|
<p class="body-text" style="color: rgba(245,237,224,0.8);">Each sensory chamber is designed using neuroaesthetic research to activate specific neurological responses: lowering cortisol, stimulating oxytocin and dopamine pathways, inviting the body back into safety. Visitors don’t just observe — they participate through the story and immersion.</p>
|
|
</div>
|
|
<div style="width: 50%; display: flex; align-items: center; justify-content: center;">
|
|
<div class="sensory-grid" style="width: 100%;">
|
|
<span class="sensory-item">Film</span>
|
|
<span class="sensory-item">Sound Frequency</span>
|
|
<span class="sensory-item">Bass Vibrations</span>
|
|
<span class="sensory-item">Volumetric Lasers</span>
|
|
<span class="sensory-item">Oral Storytelling</span>
|
|
<span class="sensory-item">Touch</span>
|
|
<span class="sensory-item">Cinemagraphs</span>
|
|
<span class="sensory-item">Scent</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
SLIDE 6: QUOTE
|
|
============================================================ -->
|
|
<div class="slide slide-quote">
|
|
<div>
|
|
<div class="quote-line"></div>
|
|
<p class="quote-text">“How can we create both an externalized nervous system through design technology and an internalized nervous regulator through story and somatic sensory experiencing—linking the knowledge and ancient tech that has always been there to the technology of today?”</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
SLIDE 7: SENSORY GALLERY
|
|
============================================================ -->
|
|
<div class="slide slide-gallery">
|
|
<p class="label" style="color: var(--gold-light);">Sensory Worlds</p>
|
|
<div class="gallery-4x2">
|
|
<img src="img/schwartz-web-of-life.jpg" alt="Web of Life">
|
|
<img src="img/schwartz-spider.jpg" alt="Spider web">
|
|
<img src="img/schwartz-waterdrops.jpg" alt="Water drops">
|
|
<img src="img/schwartz-web-wave.jpg" alt="Web wave">
|
|
<img src="img/schwartz-butterfly.jpg" alt="Butterfly">
|
|
<img src="img/schwartz-succulent.jpg" alt="Succulent">
|
|
<img src="img/schwartz-bees-palace.jpg" alt="Bees palace">
|
|
<img src="img/schwartz-plantkindom.jpg" alt="Plant kingdom">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
SLIDE 8: INTERCONNECTED NARRATIVE
|
|
============================================================ -->
|
|
<div class="slide slide-dark-split">
|
|
<div class="ds-text">
|
|
<p class="label">Immersive, Interactive Art</p>
|
|
<h2 class="heading">Interconnected Narrative</h2>
|
|
<p class="body-text">Each experience has its own separate space and is linked to a story, creating an interconnected larger narrative — layers revealed like a Russian doll across different mediums.</p>
|
|
<p class="body-text">Drawing from Alice Walker’s radical tenderness and Audre Lorde’s framing of self-care as a form of political resistance, this project destigmatizes play, rest, and joy for people who may be in survival mode.</p>
|
|
<p class="body-text">AR layers, volumetric projections, and spatially mapped soundscapes create environments where visitors encounter their own stories reflected back — not as trauma, but as source.</p>
|
|
</div>
|
|
<div class="ds-img">
|
|
<img src="img/interconnected-narrative.jpg" alt="Interconnected sensory dome interior">
|
|
<div class="img-fade"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
SLIDE 9: HOUSING PROTOTYPE — dark split with landscape
|
|
============================================================ -->
|
|
<div class="slide slide-dark-split">
|
|
<div class="ds-text">
|
|
<p class="label">Housing Prototype</p>
|
|
<h2 class="heading">The Home Within</h2>
|
|
<p class="body-text">The installation also serves as a functional prototype for fire-resistant, ecologically designed affordable housing.</p>
|
|
<p class="body-text">As climate disasters disproportionately displace Black and Brown communities — from wildfire corridors in California to flood-vulnerable neighborhoods across the Gulf Coast and West Africa — we need housing models that are both structurally resilient and culturally resonant.</p>
|
|
<p class="body-text"><em>The Last Draw/Home</em> investigates what “home” can be when designed from indigenous knowledge systems rather than extractive development logic.</p>
|
|
</div>
|
|
<div class="ds-img">
|
|
<img src="img/housing-prototype.jpg" alt="Housing prototype interior">
|
|
<div class="img-fade"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
SLIDE 10: STORY · SANCTUARY · LAND — with images
|
|
============================================================ -->
|
|
<div class="slide slide-earth">
|
|
<p class="label">Three Pillars</p>
|
|
<h2 class="heading">Story · Sanctuary · Land</h2>
|
|
<div class="three-cards">
|
|
<div class="card">
|
|
<img class="card-img" src="img/story-family.jpg" alt="Story">
|
|
<h3 class="card-title">Story</h3>
|
|
<p class="card-text">A grounded near-future narrative about a Ghanaian family living under ecological pressure and lottery-based survival gives the work its emotional life and human stakes.</p>
|
|
</div>
|
|
<div class="card">
|
|
<img class="card-img" src="img/cropped/sanctuary-card-photo.jpg" alt="Sanctuary">
|
|
<h3 class="card-title">Sanctuary</h3>
|
|
<p class="card-text">The habitat system through which this world takes architectural form — spherical, linked, repairable, teachable, and suited to distributed local manufacture.</p>
|
|
</div>
|
|
<div class="card">
|
|
<img class="card-img" src="img/cropped/land-photo.jpg" alt="Land">
|
|
<h3 class="card-title">Land</h3>
|
|
<p class="card-text">Food production, water catchment, soil repair, medicinal planting, nursery life, shade, and productive edges all shape how people live, move, and remain in place.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
SLIDE 11: MIM, GHANA — dark split
|
|
============================================================ -->
|
|
<div class="slide slide-dark-split">
|
|
<div class="ds-text">
|
|
<p class="label">Grounded in Place</p>
|
|
<h2 class="heading">Mim, Ghana</h2>
|
|
<p class="body-text">For this work, that place is Mim, Ghana — its red earth, water edges, agricultural life, quarry conditions, settlement patterns, and surrounding landforms create a grounded environment for thinking about climate adaptation in material terms.</p>
|
|
<p class="body-text">The project asks what becomes visible when future habitation is grounded in land, culture, pressure, and daily life.</p>
|
|
</div>
|
|
<div class="ds-img">
|
|
<img src="img/cropped/mim-photo.jpg" alt="Mim, Ghana">
|
|
<div class="img-fade"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
SLIDE 12: WORLDING FIT — dark split with image
|
|
============================================================ -->
|
|
<div class="slide slide-dark-split">
|
|
<div class="ds-text">
|
|
<p class="label">Why WORLDING</p>
|
|
<h2 class="heading" style="font-size: 46px; margin-bottom: 60px;">Where Story, Land, Climate Futures, and Real-Time Technology Meet</h2>
|
|
<p class="body-text" style="font-size: 22px; line-height: 1.6;"><em>The Last Draw/Home</em> sits precisely at the intersections WORLDING names: story, land-use, climate futures, and real-time technology — but it approaches that intersection from a position rarely centered in planning discourse. This is a project that deconstructs the various meanings of “home”, imagined through Black diasporic epistemology, where the act of dwelling is itself a narrative act, and where climate adaptation is inseparable from cultural survival.</p>
|
|
<p class="body-text" style="font-size: 22px; line-height: 1.6; margin-top: 14px;">The WORLDING incubator’s emphasis on teams working between storytelling and community-based placemaking is in direct alignment with our team and our values. This project takes shape as a prototype where story, ceremony, and shelter are developed together, each one informing how the others are experienced. The project needs exactly the kind of interdisciplinary support and pressure-testing that WORLDING provides.</p>
|
|
<p class="body-text" style="font-size: 22px; line-height: 1.6; margin-top: 14px;">Our use of real-time 3D technology — AR environments, volumetric laser mapping, spatially responsive projection — is central but not dominant. We believe this aligns with WORLDING’s approach to XR as a tool for worldbuilding rather than spectacle. <em>The Last Draw/Home</em> operates at the scale of the individual nervous system, the scale of the neighborhood, and the scale of diasporic climate futures all at once.</p>
|
|
</div>
|
|
<div class="ds-img">
|
|
<img src="img/cropped/proof-photo.jpg" alt="Proof of concept">
|
|
<div class="img-fade"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
SLIDE 13: ABOUT ELLE SAM
|
|
============================================================ -->
|
|
<div class="slide slide-about">
|
|
<img class="photo" src="img/elle-sam.jpg" alt="Elle Sam">
|
|
<div class="info">
|
|
<p class="label">The Creator</p>
|
|
<h2 class="name">Elle Sam</h2>
|
|
<p class="role">Storyteller · Filmmaker · Medicinal Healer</p>
|
|
<p class="bio">Michelle “ELLE” Sam is a storyteller, award-winning filmmaker, writer, multimedia artist, and medicinal healer of Ghanaian descent within the Fante, Akwapim, and Bwiti traditions. She holds a B.A. from Rice University in Visual and Dramatic Arts, Sociology, and Neuroscience — an interdisciplinary foundation that reflects the convergence driving her work.</p>
|
|
<p class="bio">Her credits include writing for Jason Katims’ <em>As We See It</em> (Amazon) and <em>Hardly Working</em> (Paramount+). Her short film <em>Missed Connections</em> won the audience award at TranScreen Amsterdam. She wrote <em>Black Boy Joy</em>, which received a NAACP Image Award. She was a speaker at TEDxAccra’s Chale Talks.</p>
|
|
<p class="bio">Her practice bridges West African indigenous healing traditions, neuroaesthetics, and multimedia narrative — the convergence at the heart of <em>The Last Draw/Home</em>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
SLIDE 14: THE TEAM
|
|
============================================================ -->
|
|
<div class="slide slide-team">
|
|
<p class="label">Collaborators</p>
|
|
<h2 class="heading">The Team</h2>
|
|
<div class="team-grid">
|
|
<div class="team-member">
|
|
<img class="avatar" src="img/george-jackson.jpg" alt="George A. Jackson II">
|
|
<h3 class="member-name">George A. Jackson II</h3>
|
|
<p class="member-role">Habitat Systems</p>
|
|
<p class="member-bio">Brings the Acorus habitat system and its architectural logic — spherical, linked, repairable civic sanctuary infrastructure suited to distributed local manufacture and climate-adapted settlement.</p>
|
|
</div>
|
|
<div class="team-member">
|
|
<img class="avatar" src="img/stefanie-schwartz.jpg" alt="Stefanie Atkinson Schwartz">
|
|
<h3 class="member-name">Stefanie Atkinson Schwartz</h3>
|
|
<p class="member-role">Multisensory Experience</p>
|
|
<p class="member-bio">Brings multisensory experience design, embodied perception, and visual storytelling into the worlding process. Her work explores the intersection of nature, sensation, and ecological awareness.</p>
|
|
</div>
|
|
<div class="team-member">
|
|
<img class="avatar" src="img/roxi-shohadee.jpg" alt="Roxi Shohadee">
|
|
<h3 class="member-name">Roxi Shohadee</h3>
|
|
<p class="member-role">Creative Producer</p>
|
|
<p class="member-bio">Brings production expertise and creative strategy to the HOME project, supporting its development across immersive art, housing innovation, and community engagement.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="slide-nav">
|
|
<button id="prev">←</button>
|
|
<span id="counter">1 / 14</span>
|
|
<button id="next">→</button>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
if (window.matchMedia('print').matches) return;
|
|
var slides = document.querySelectorAll('.slide');
|
|
var total = slides.length;
|
|
var current = 0;
|
|
var counter = document.getElementById('counter');
|
|
var navH = 48;
|
|
|
|
function show(i) {
|
|
slides[current].classList.remove('active');
|
|
slides[current].style.transform = '';
|
|
current = (i + total) % total;
|
|
slides[current].classList.add('active');
|
|
counter.textContent = (current + 1) + ' / ' + total;
|
|
fitSlide();
|
|
}
|
|
|
|
function fitSlide() {
|
|
var slide = slides[current];
|
|
var vw = window.innerWidth;
|
|
var vh = window.innerHeight - navH;
|
|
var scaleX = vw / 1920;
|
|
var scaleY = vh / 1080;
|
|
var scale = Math.min(scaleX, scaleY);
|
|
var x = (vw - 1920 * scale) / 2;
|
|
var y = (vh - 1080 * scale) / 2;
|
|
slide.style.transform = 'translate(' + x + 'px,' + y + 'px) scale(' + scale + ')';
|
|
}
|
|
|
|
slides[0].classList.add('active');
|
|
fitSlide();
|
|
window.addEventListener('resize', fitSlide);
|
|
|
|
document.getElementById('prev').addEventListener('click', function() { show(current - 1); });
|
|
document.getElementById('next').addEventListener('click', function() { show(current + 1); });
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); show(current + 1); }
|
|
if (e.key === 'ArrowLeft') { e.preventDefault(); show(current - 1); }
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|