941 lines
34 KiB
HTML
941 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HOME — An Immersive Art Exhibit & Fire-Proof Housing Prototype</title>
|
|
<meta name="description" content="HOME — a mobile immersive art installation and fire-proof housing prototype by Elle Sam / Cineasthesia. Joy as resistance, shelter as design.">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="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" rel="stylesheet">
|
|
<style>
|
|
: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;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--sand);
|
|
color: var(--text-body);
|
|
overflow-x: hidden;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* NAV */
|
|
nav {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0;
|
|
z-index: 100;
|
|
padding: 1.2rem 2rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: all 0.4s;
|
|
}
|
|
|
|
nav.scrolled {
|
|
background: rgba(10, 10, 15, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
padding: 0.8rem 2rem;
|
|
}
|
|
|
|
.nav-logo {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.3rem;
|
|
letter-spacing: 0.2em;
|
|
color: var(--sand);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--sand);
|
|
text-decoration: none;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
opacity: 0.8;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.nav-links a:hover { opacity: 1; }
|
|
|
|
.nav-toggle {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-toggle span {
|
|
display: block;
|
|
width: 22px;
|
|
height: 2px;
|
|
background: var(--sand);
|
|
margin: 5px 0;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
/* HERO */
|
|
.hero {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding: 6rem 4rem 4rem;
|
|
background:
|
|
linear-gradient(180deg, rgba(10,10,15,0.2) 0%, rgba(10,10,15,0.6) 100%),
|
|
url('img/hero-landscape.jpg') center center / cover no-repeat;
|
|
}
|
|
|
|
.hero-content {
|
|
max-width: 700px;
|
|
}
|
|
|
|
.hero-overline {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.3em;
|
|
text-transform: uppercase;
|
|
color: var(--gold);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.hero-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(5rem, 14vw, 10rem);
|
|
letter-spacing: 0.15em;
|
|
color: var(--sand);
|
|
line-height: 0.9;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
|
|
font-style: italic;
|
|
color: rgba(245, 237, 224, 0.7);
|
|
margin-bottom: 2rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.hero-cta {
|
|
display: inline-block;
|
|
color: var(--gold);
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
padding: 0.8rem 2.5rem;
|
|
border: 1px solid rgba(198, 139, 63, 0.4);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.hero-cta:hover {
|
|
background: rgba(198, 139, 63, 0.15);
|
|
border-color: var(--gold);
|
|
}
|
|
|
|
/* SECTIONS */
|
|
section { padding: 7rem 2rem; }
|
|
|
|
.inner { max-width: 1100px; margin: 0 auto; }
|
|
|
|
.section-label {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--gold);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(2rem, 4vw, 3rem);
|
|
letter-spacing: 0.06em;
|
|
color: var(--earth);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.section-text {
|
|
font-size: 1rem;
|
|
color: var(--text-body);
|
|
line-height: 1.8;
|
|
max-width: 800px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.divider {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
height: 1px;
|
|
background: rgba(60, 36, 21, 0.1);
|
|
}
|
|
|
|
/* CONCEPT — two-column intro */
|
|
.concept-section { background: var(--sand); }
|
|
|
|
.concept-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.concept-visual { position: relative; }
|
|
|
|
.concept-visual img {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 16/9;
|
|
object-fit: contain;
|
|
background: var(--sand-dark);
|
|
}
|
|
|
|
.concept-visual .overlay-tag {
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
left: 1rem;
|
|
background: rgba(10, 10, 15, 0.85);
|
|
color: var(--gold);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.concept-text h3 {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.6rem;
|
|
letter-spacing: 0.06em;
|
|
color: var(--earth);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.concept-text p {
|
|
font-size: 0.95rem;
|
|
color: var(--text-body);
|
|
line-height: 1.8;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* IMMERSIVE — dark section */
|
|
.immersive-section {
|
|
background: var(--midnight);
|
|
color: var(--sand);
|
|
}
|
|
|
|
.immersive-section .section-label { color: var(--gold-light); }
|
|
.immersive-section .section-title { color: var(--sand); }
|
|
|
|
.immersive-text {
|
|
font-size: 1rem;
|
|
color: rgba(245, 237, 224, 0.75);
|
|
line-height: 1.8;
|
|
max-width: 800px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.immersive-quote {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: clamp(1.3rem, 3vw, 1.8rem);
|
|
font-style: italic;
|
|
color: var(--gold-light);
|
|
max-width: 700px;
|
|
margin: 3rem 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.sensory-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.8rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.sensory-tag {
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
padding: 0.5rem 1.2rem;
|
|
border: 1px solid rgba(198, 139, 63, 0.3);
|
|
color: var(--gold-light);
|
|
}
|
|
|
|
/* GALLERY — Stef's art only */
|
|
.gallery-section {
|
|
background: var(--midnight);
|
|
padding: 0 0 5rem;
|
|
}
|
|
|
|
.gallery-section .section-label {
|
|
color: var(--gold-light);
|
|
padding: 0 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.gallery-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 3px;
|
|
}
|
|
|
|
.gallery-grid img {
|
|
width: 100%;
|
|
height: 280px;
|
|
object-fit: cover;
|
|
transition: opacity 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gallery-grid img:hover { opacity: 0.8; }
|
|
|
|
/* SHELTER — fire-proof housing */
|
|
.shelter-section {
|
|
background: var(--earth);
|
|
color: var(--sand);
|
|
}
|
|
|
|
.shelter-section .section-label { color: var(--gold-light); }
|
|
.shelter-section .section-title { color: var(--sand); }
|
|
|
|
.shelter-text {
|
|
font-size: 1rem;
|
|
color: rgba(245, 237, 224, 0.75);
|
|
line-height: 1.8;
|
|
max-width: 800px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.shelter-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 2rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.shelter-card { text-align: center; }
|
|
|
|
.shelter-card img {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 16/9;
|
|
object-fit: contain;
|
|
background: rgba(0,0,0,0.2);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.shelter-card h3 {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.2rem;
|
|
letter-spacing: 0.06em;
|
|
color: var(--sand);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.shelter-card p {
|
|
font-size: 0.85rem;
|
|
color: rgba(245, 237, 224, 0.6);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* DECK IMAGES — proper sizing */
|
|
.deck-img {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 16/9;
|
|
object-fit: contain;
|
|
background: var(--sand-dark);
|
|
}
|
|
|
|
/* ABOUT */
|
|
.about-section { background: var(--sand); }
|
|
|
|
.about-grid {
|
|
display: flex;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.about-photo {
|
|
flex: 0 0 300px;
|
|
height: 400px;
|
|
object-fit: cover;
|
|
filter: grayscale(0.2);
|
|
}
|
|
|
|
.about-info { flex: 1; }
|
|
|
|
.about-name {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 2rem;
|
|
letter-spacing: 0.06em;
|
|
color: var(--earth);
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.about-role {
|
|
font-size: 0.8rem;
|
|
color: var(--gold);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.about-bio {
|
|
font-size: 0.95rem;
|
|
color: var(--text-body);
|
|
line-height: 1.8;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* TEAM */
|
|
.team-section { background: var(--sand-dark); }
|
|
|
|
.team-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 2.5rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.team-card { text-align: center; }
|
|
|
|
.team-icon {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
background: var(--earth);
|
|
color: var(--gold);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.8rem;
|
|
letter-spacing: 0.05em;
|
|
margin: 0 auto 1rem;
|
|
border: 3px solid var(--gold);
|
|
}
|
|
|
|
.team-icon img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.team-name {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.3rem;
|
|
letter-spacing: 0.06em;
|
|
color: var(--earth);
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.team-role {
|
|
font-size: 0.75rem;
|
|
color: var(--gold);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.team-bio {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* FLIPBOOK EMBED */
|
|
.flipbook-section {
|
|
background: var(--midnight);
|
|
color: var(--sand);
|
|
padding: 5rem 2rem;
|
|
}
|
|
|
|
.flipbook-section .section-label { color: var(--gold-light); }
|
|
.flipbook-section .section-title { color: var(--sand); }
|
|
|
|
.flipbook-embed {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
aspect-ratio: 16/9;
|
|
border: 1px solid rgba(198, 139, 63, 0.15);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.flipbook-embed iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
/* IMAGE BREAKS */
|
|
.img-break {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.img-break img {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 16/9;
|
|
object-fit: contain;
|
|
display: block;
|
|
background: var(--sand-dark);
|
|
}
|
|
|
|
/* FOOTER */
|
|
footer {
|
|
background: var(--earth);
|
|
padding: 4rem 2rem 2rem;
|
|
text-align: center;
|
|
color: var(--sand);
|
|
}
|
|
|
|
.footer-logo {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.5rem;
|
|
letter-spacing: 0.2em;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.footer-tagline {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-style: italic;
|
|
font-size: 1rem;
|
|
color: rgba(245, 237, 224, 0.6);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: var(--gold);
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
padding: 0.6rem 1.5rem;
|
|
border: 1px solid rgba(198, 139, 63, 0.3);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
background: rgba(198, 139, 63, 0.15);
|
|
border-color: var(--gold);
|
|
}
|
|
|
|
.footer-copy {
|
|
font-size: 0.7rem;
|
|
color: rgba(245, 237, 224, 0.35);
|
|
}
|
|
|
|
/* SCROLL REVEAL */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: opacity 0.7s ease, transform 0.7s ease;
|
|
}
|
|
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* MOBILE */
|
|
@media (max-width: 768px) {
|
|
.nav-links {
|
|
position: fixed;
|
|
top: 0; right: -100%;
|
|
width: 280px;
|
|
height: 100vh;
|
|
background: rgba(10, 10, 15, 0.98);
|
|
flex-direction: column;
|
|
padding: 5rem 2rem;
|
|
transition: right 0.4s;
|
|
}
|
|
|
|
.nav-links.active { right: 0; }
|
|
.nav-toggle { display: block; z-index: 101; }
|
|
|
|
.hero {
|
|
padding: 6rem 1.5rem 3rem;
|
|
min-height: 80vh;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: clamp(3.5rem, 12vw, 5rem);
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
section { padding: 3.5rem 1.2rem; }
|
|
|
|
.concept-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.concept-visual img {
|
|
aspect-ratio: auto;
|
|
}
|
|
|
|
.immersive-quote {
|
|
font-size: 1.15rem;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.about-grid {
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.about-photo {
|
|
flex: none;
|
|
width: 100%;
|
|
height: 280px;
|
|
}
|
|
|
|
.gallery-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.gallery-grid img {
|
|
height: 160px;
|
|
}
|
|
|
|
.shelter-grid, .team-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.shelter-card img {
|
|
aspect-ratio: auto;
|
|
max-height: 250px;
|
|
}
|
|
|
|
.flipbook-section { padding: 3.5rem 1rem; }
|
|
|
|
.flipbook-embed {
|
|
aspect-ratio: 16/9;
|
|
}
|
|
|
|
.sensory-tags {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.sensory-tag {
|
|
font-size: 0.65rem;
|
|
padding: 0.4rem 0.8rem;
|
|
}
|
|
|
|
.team-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.footer-links {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.footer-links a {
|
|
font-size: 0.7rem;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.footer-tagline {
|
|
font-size: 0.85rem;
|
|
padding: 0 1rem;
|
|
}
|
|
}
|
|
|
|
/* SMALL MOBILE */
|
|
@media (max-width: 400px) {
|
|
.hero { padding: 5rem 1rem 2rem; }
|
|
|
|
.hero-title {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
section { padding: 3rem 1rem; }
|
|
|
|
.gallery-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.gallery-grid img {
|
|
height: 200px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav id="nav">
|
|
<div class="nav-logo">HOME</div>
|
|
<ul class="nav-links" id="navLinks">
|
|
<li><a href="#exhibit">The Exhibit</a></li>
|
|
<li><a href="#joy">The Experience</a></li>
|
|
<li><a href="#shelter">Shelter</a></li>
|
|
<li><a href="#deck">Deck</a></li>
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#team">Team</a></li>
|
|
</ul>
|
|
<button class="nav-toggle" id="navToggle" aria-label="Toggle menu">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- HERO — uses lead image from deck (page 1) -->
|
|
<section class="hero">
|
|
<div class="hero-content">
|
|
<p class="hero-overline">A Cineasthesia Project</p>
|
|
<h1 class="hero-title">HOME</h1>
|
|
<p class="hero-subtitle">An immersive arts installation using neuroaesthetics to proof-of-concept climate resilient housing.</p>
|
|
<a href="#exhibit" class="hero-cta">Enter</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- THE EXHIBIT — two-column intro -->
|
|
<section class="concept-section" id="exhibit">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">The Exhibit</p>
|
|
<h2 class="section-title">HOME</h2>
|
|
</div>
|
|
<div class="concept-grid reveal">
|
|
<div class="concept-visual">
|
|
<img src="img/acorus-garden.jpg" alt="Acorus sanctuary garden courtyard" loading="lazy">
|
|
<span class="overlay-tag">Mobile · Immersive · Multisensory</span>
|
|
</div>
|
|
<div class="concept-text">
|
|
<h3>Cultural Reclamation, Nervous System Restoration, Climate-Resilient Housing</h3>
|
|
<p><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>Through 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. AR layers, volumetric projections, and spatially mapped soundscapes create environments where visitors encounter their own stories reflected back—not as trauma, but as source. Ultimately, <em>The Last Draw/Home</em> asks: what would housing look like if it were designed to heal? And what stories do we need to tell to build that world?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- JOY AS RESISTANCE -->
|
|
<section class="immersive-section" id="joy">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Immersive, Interactive Art</p>
|
|
<h2 class="section-title">The Experience</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="immersive-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="reveal">
|
|
<p class="immersive-text">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 story and immersion. The experiences trigger the parts of the brain linked to joy, happiness, and euphoria via film, oral storytelling, sound frequency, bass vibrations, volumetric laser mapping, interactive art revolving around touch, cinemagraphs, and scent.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="immersive-quote">“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="reveal">
|
|
<p class="immersive-text">Drawing from Alice Walker’s radical tenderness and Audre Lorde’s framing of self-care as political resistance, this project destigmatizes play, rest, and joy for people who may be in survival mode.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="immersive-text">HOME travels directly to working-class neighborhoods across the United States, the Black diaspora, and continental Africa, engaging with different artists in each community. 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>
|
|
</div>
|
|
<div class="sensory-tags reveal">
|
|
<span class="sensory-tag">Film</span>
|
|
<span class="sensory-tag">Sound Frequency</span>
|
|
<span class="sensory-tag">Bass Vibrations</span>
|
|
<span class="sensory-tag">Volumetric Lasers</span>
|
|
<span class="sensory-tag">Oral Storytelling</span>
|
|
<span class="sensory-tag">Touch</span>
|
|
<span class="sensory-tag">Cinemagraphs</span>
|
|
<span class="sensory-tag">Scent</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- GALLERY — Stef's art ONLY, no deck photos -->
|
|
<section class="gallery-section">
|
|
<p class="section-label reveal">Sensory Worlds</p>
|
|
<div class="gallery-grid reveal">
|
|
<img src="img/schwartz-web-of-life.jpg" alt="Web of Life" loading="lazy">
|
|
<img src="img/schwartz-spider.jpg" alt="Spider web" loading="lazy">
|
|
<img src="img/schwartz-waterdrops.jpg" alt="Water drops" loading="lazy">
|
|
<img src="img/schwartz-web-wave.jpg" alt="Web wave" loading="lazy">
|
|
<img src="img/schwartz-butterfly.jpg" alt="Butterfly in bubble" loading="lazy">
|
|
<img src="img/schwartz-succulent.jpg" alt="Water on succulent" loading="lazy">
|
|
<img src="img/schwartz-bees-palace.jpg" alt="Bees palace" loading="lazy">
|
|
<img src="img/schwartz-plantkindom.jpg" alt="Plant kingdom" loading="lazy">
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SHELTER — fire-proof housing prototype -->
|
|
<section class="shelter-section" id="shelter">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Housing Prototype</p>
|
|
<h2 class="section-title">The Home Within</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="shelter-text">The installation also serves as a functional prototype for fire-resistant, ecologically designed affordable housing. 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="shelter-text"><em>The Last Draw/Home</em> investigates what “home” can be when designed from indigenous knowledge systems rather than extractive development logic. The project asks what becomes visible when future habitation is grounded in land, culture, pressure, and daily life. 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>
|
|
</div>
|
|
<div class="shelter-grid reveal">
|
|
<div class="shelter-card">
|
|
<img src="img/story-family.jpg" alt="Story" loading="lazy">
|
|
<h3>Story</h3>
|
|
<p>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="shelter-card">
|
|
<img src="img/cropped/sanctuary-card-photo.jpg" alt="Sanctuary" loading="lazy">
|
|
<h3>Sanctuary</h3>
|
|
<p>The habitat system through which this world takes architectural form—spherical, linked, repairable, teachable, and suited to distributed local manufacture.</p>
|
|
</div>
|
|
<div class="shelter-card">
|
|
<img src="img/cropped/land-photo.jpg" alt="Land" loading="lazy">
|
|
<h3>Land</h3>
|
|
<p>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 class="reveal" style="margin-top: 3rem;">
|
|
<p class="shelter-text">Together, they create a future that can be inhabited as a story, understood as a settlement, and developed as a serious public proposition.</p>
|
|
<p class="shelter-text"><em>The Last Draw/Home</em> sits precisely at the intersections of story, land-use, climate futures, and real-time technology—but 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="shelter-text">Our use of real-time 3D technology—AR environments, volumetric laser mapping, spatially responsive projection—is central but not dominant. <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. Story, ceremony, and shelter are developed together, each one informing how the others are experienced.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FLIPBOOK — StPageFlip embed from slides.jeffemmett.com -->
|
|
<section class="flipbook-section" id="deck">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">HOME Deck</p>
|
|
<h2 class="section-title" style="color: var(--sand);">The Full Deck</h2>
|
|
</div>
|
|
<div class="flipbook-embed reveal">
|
|
<iframe src="/deck.html" allowfullscreen loading="lazy" title="HOME Deck Flipbook"></iframe>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ABOUT -->
|
|
<section class="about-section" id="about">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">About</p>
|
|
<h2 class="section-title">HOME — The Creator</h2>
|
|
</div>
|
|
<div class="about-grid reveal">
|
|
<img src="img/elle-sam.jpg" alt="Elle Sam" class="about-photo" loading="lazy">
|
|
<div class="about-info">
|
|
<h3 class="about-name">Elle Sam</h3>
|
|
<p class="about-role">Storyteller · Filmmaker · Medicinal Healer</p>
|
|
<p class="about-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. She carries a deep connection to land and lineage through her healing practice—a relationship that anchors her work across disciplines. A prolific storyteller with an extensive resume in film, television, immersive art installation, and community development, Sam brings indigenous knowledge systems, embodied narrative, and empirical neuroscience into every medium she touches.</p>
|
|
<p class="about-bio">Her film and television credits include writing for Jason Katims’ <em>As We See It</em> (Amazon), based on the Israeli series <em>On The Spectrum</em> about neurodiversity, and <em>Hardly Working</em> (Paramount+). Her short film <em>Missed Connections</em> (KweliTV, CFMDC) won the audience award at TranScreen Amsterdam Transgender Film Festival and was developed in collaboration with the GLAAD Transgender Media Equality Program. She wrote <em>Black Boy Joy</em>, which received a NAACP Image Award. She has feature and series projects in development with several major studios and production companies.</p>
|
|
<p class="about-bio">Sam was a speaker at TEDxAccra’s Chale Talks, and penned a limited series about refugees with Made Up Stories and Endeavor Content, <em>Sankofa</em> in the Outfest screenwriting lab. Beyond screen work, Sam cultivates immersive and interactive experiences and art installations that engage the nine senses, creating work across the Black diaspora and in continental Africa under her name, ELLE. She is co-founder of Out The Box Creative, a Ghanaian production company and artist collective based in Accra. 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>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- TEAM — George first, Stef second, Roxi last -->
|
|
<section class="team-section" id="team">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Collaborators</p>
|
|
<h2 class="section-title">HOME — The Team</h2>
|
|
</div>
|
|
<div class="team-grid reveal">
|
|
<div class="team-card">
|
|
<div class="team-icon"><img src="img/george-jackson.jpg" alt="George A. Jackson II"></div>
|
|
<h3 class="team-name">George A. Jackson II</h3>
|
|
<p class="team-role">Habitat Systems</p>
|
|
<p class="team-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-card">
|
|
<div class="team-icon"><img src="img/stefanie-schwartz.jpg" alt="Stefanie Atkinson Schwartz"></div>
|
|
<h3 class="team-name">Stefanie Atkinson Schwartz</h3>
|
|
<p class="team-role">Multisensory Experience</p>
|
|
<p class="team-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-card">
|
|
<div class="team-icon"><img src="img/roxi-shohadee.jpg" alt="Roxi Shohadee"></div>
|
|
<h3 class="team-name">Roxi Shohadee</h3>
|
|
<p class="team-role">Creative Producer</p>
|
|
<p class="team-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>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<p class="footer-logo">HOME</p>
|
|
<p class="footer-tagline">An immersive arts installation using neuroaesthetics to proof-of-concept climate resilient housing.</p>
|
|
<div class="footer-links">
|
|
<a href="https://thelastdraw.cinesthesia.art" target="_blank">The Last Draw</a>
|
|
</div>
|
|
<p class="footer-copy">© 2025 Elle Sam / Cineasthesia. All rights reserved.</p>
|
|
</footer>
|
|
|
|
<script>
|
|
// Nav scroll
|
|
const nav = document.getElementById('nav');
|
|
window.addEventListener('scroll', () => {
|
|
nav.classList.toggle('scrolled', window.scrollY > 80);
|
|
});
|
|
|
|
// Mobile nav
|
|
const toggle = document.getElementById('navToggle');
|
|
const links = document.getElementById('navLinks');
|
|
toggle.addEventListener('click', () => {
|
|
links.classList.toggle('active');
|
|
});
|
|
links.querySelectorAll('a').forEach(a => {
|
|
a.addEventListener('click', () => links.classList.remove('active'));
|
|
});
|
|
|
|
// Scroll reveal
|
|
const reveals = document.querySelectorAll('.reveal');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' });
|
|
reveals.forEach(el => observer.observe(el));
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|