890 lines
30 KiB
HTML
890 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cineasthesia — Story, Shelter, Healing</title>
|
|
<meta name="description" content="Cineasthesia — the creative practice of Elle Sam. Film, immersive art, neuroaesthetics, and climate-resilient housing across the Black diaspora.">
|
|
<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: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 6rem 2rem;
|
|
background:
|
|
linear-gradient(180deg, rgba(10,10,15,0.4) 0%, rgba(10,10,15,0.7) 100%),
|
|
url('img/hero-landscape.jpg') center center / cover no-repeat;
|
|
}
|
|
|
|
.hero-content {
|
|
max-width: 800px;
|
|
}
|
|
|
|
.hero-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(4rem, 12vw, 9rem);
|
|
letter-spacing: 0.25em;
|
|
color: var(--sand);
|
|
line-height: 0.9;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.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: 2.5rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.hero-nav-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hero-nav-links a {
|
|
color: var(--gold);
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
padding: 0.7rem 2rem;
|
|
border: 1px solid rgba(198, 139, 63, 0.4);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.hero-nav-links a:hover {
|
|
background: rgba(198, 139, 63, 0.15);
|
|
border-color: var(--gold);
|
|
}
|
|
|
|
/* SECTIONS */
|
|
section { padding: 7rem 2rem; }
|
|
.inner { max-width: 1000px; 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;
|
|
}
|
|
|
|
.divider {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
height: 1px;
|
|
background: rgba(60, 36, 21, 0.1);
|
|
}
|
|
|
|
/* PROJECT CARDS */
|
|
.projects-section { background: var(--sand); }
|
|
|
|
.project-card {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
.project-card:last-child { margin-bottom: 0; }
|
|
|
|
.project-card.reverse .project-image { order: 2; }
|
|
.project-card.reverse .project-info { order: 1; }
|
|
|
|
.project-image {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.project-image img {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 4/3;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.project-image .project-tag {
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
left: 1rem;
|
|
background: rgba(10, 10, 15, 0.85);
|
|
color: var(--gold);
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
padding: 0.4rem 0.8rem;
|
|
}
|
|
|
|
.project-info h3 {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 2rem;
|
|
letter-spacing: 0.06em;
|
|
color: var(--earth);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.project-info p {
|
|
font-size: 0.95rem;
|
|
color: var(--text-body);
|
|
line-height: 1.8;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.project-info .quote {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1.1rem;
|
|
font-style: italic;
|
|
color: var(--earth-light);
|
|
border-left: 2px solid var(--gold);
|
|
padding-left: 1.2rem;
|
|
margin: 1.5rem 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.sensory-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.sensory-tag {
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
padding: 0.35rem 0.8rem;
|
|
border: 1px solid rgba(198, 139, 63, 0.4);
|
|
color: var(--gold);
|
|
}
|
|
|
|
/* INSTALLATIONS */
|
|
.installations-section {
|
|
background: var(--midnight);
|
|
color: var(--sand);
|
|
}
|
|
|
|
.installations-section .section-label { color: var(--gold-light); }
|
|
.installations-section .section-title { color: var(--sand); }
|
|
|
|
.installations-intro {
|
|
font-size: 1rem;
|
|
color: rgba(245, 237, 224, 0.75);
|
|
line-height: 1.8;
|
|
max-width: 800px;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.installations-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.installation-item {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.installation-item img {
|
|
width: 100%;
|
|
height: 350px;
|
|
object-fit: cover;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.installation-item:hover img {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.installation-caption {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 1.5rem 1rem 1rem;
|
|
background: linear-gradient(transparent, rgba(10, 10, 15, 0.85));
|
|
}
|
|
|
|
.installation-caption h4 {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.2rem;
|
|
letter-spacing: 0.08em;
|
|
color: var(--sand);
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.installation-caption p {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--gold-light);
|
|
}
|
|
|
|
/* ABOUT — dark section */
|
|
.about-section {
|
|
background: var(--midnight);
|
|
color: var(--sand);
|
|
}
|
|
|
|
.about-section .section-label { color: var(--gold-light); }
|
|
.about-section .section-title { color: var(--sand); }
|
|
|
|
.about-grid {
|
|
display: flex;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.about-photo {
|
|
flex: 0 0 280px;
|
|
height: 380px;
|
|
object-fit: cover;
|
|
filter: grayscale(0.15);
|
|
}
|
|
|
|
.about-info { flex: 1; }
|
|
|
|
.about-name {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 2rem;
|
|
letter-spacing: 0.06em;
|
|
color: var(--sand);
|
|
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: rgba(245, 237, 224, 0.75);
|
|
line-height: 1.8;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* OUT THE BOX */
|
|
.otb-section {
|
|
background: var(--earth);
|
|
color: var(--sand);
|
|
}
|
|
|
|
.otb-section .section-label { color: var(--gold-light); }
|
|
.otb-section .section-title { color: var(--sand); }
|
|
|
|
.otb-text {
|
|
font-size: 1rem;
|
|
color: rgba(245, 237, 224, 0.75);
|
|
line-height: 1.8;
|
|
max-width: 800px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.otb-quote {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
|
|
font-style: italic;
|
|
color: var(--gold-light);
|
|
max-width: 700px;
|
|
margin: 2.5rem 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* CONTACT */
|
|
.contact-section { background: var(--sand); }
|
|
|
|
.contact-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.contact-intro h3 {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.6rem;
|
|
letter-spacing: 0.06em;
|
|
color: var(--earth);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.contact-intro p {
|
|
font-size: 0.95rem;
|
|
color: var(--text-body);
|
|
line-height: 1.8;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.contact-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.2rem;
|
|
}
|
|
|
|
.contact-form label {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
margin-bottom: 0.3rem;
|
|
display: block;
|
|
}
|
|
|
|
.contact-form input,
|
|
.contact-form textarea {
|
|
width: 100%;
|
|
padding: 0.8rem 1rem;
|
|
border: 1px solid rgba(60, 36, 21, 0.2);
|
|
background: rgba(255, 255, 255, 0.5);
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.9rem;
|
|
color: var(--text-body);
|
|
transition: border-color 0.3s;
|
|
outline: none;
|
|
}
|
|
|
|
.contact-form input:focus,
|
|
.contact-form textarea:focus {
|
|
border-color: var(--gold);
|
|
}
|
|
|
|
.contact-form textarea {
|
|
min-height: 140px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.contact-form button {
|
|
align-self: flex-start;
|
|
background: var(--earth);
|
|
color: var(--gold);
|
|
border: 1px solid var(--gold);
|
|
padding: 0.8rem 2.5rem;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.contact-form button:hover {
|
|
background: var(--earth-light);
|
|
}
|
|
|
|
.form-status {
|
|
font-size: 0.85rem;
|
|
padding: 0.8rem 1rem;
|
|
display: none;
|
|
}
|
|
|
|
.form-status.success {
|
|
display: block;
|
|
background: rgba(74, 103, 65, 0.1);
|
|
color: var(--green);
|
|
border: 1px solid rgba(74, 103, 65, 0.3);
|
|
}
|
|
|
|
.form-status.error {
|
|
display: block;
|
|
background: rgba(180, 60, 60, 0.1);
|
|
color: #8B3A3A;
|
|
border: 1px solid rgba(180, 60, 60, 0.3);
|
|
}
|
|
|
|
/* FOOTER */
|
|
footer {
|
|
background: var(--midnight);
|
|
padding: 3rem 2rem 2rem;
|
|
text-align: center;
|
|
color: var(--sand);
|
|
}
|
|
|
|
.footer-logo {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.3rem;
|
|
letter-spacing: 0.25em;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.footer-tagline {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-style: italic;
|
|
font-size: 0.95rem;
|
|
color: rgba(245, 237, 224, 0.5);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.footer-copy {
|
|
font-size: 0.7rem;
|
|
color: rgba(245, 237, 224, 0.3);
|
|
}
|
|
|
|
/* 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;
|
|
min-height: 85vh;
|
|
}
|
|
|
|
.hero-title { font-size: clamp(3rem, 11vw, 5rem); }
|
|
.hero-subtitle { font-size: 1rem; }
|
|
|
|
.hero-nav-links {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.hero-nav-links a {
|
|
width: 200px;
|
|
text-align: center;
|
|
}
|
|
|
|
section { padding: 3.5rem 1.2rem; }
|
|
|
|
.project-card {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.project-card.reverse .project-image,
|
|
.project-card.reverse .project-info {
|
|
order: unset;
|
|
}
|
|
|
|
.about-grid {
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.about-photo {
|
|
flex: none;
|
|
width: 100%;
|
|
height: 280px;
|
|
}
|
|
|
|
.installations-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.installation-item img {
|
|
height: 280px;
|
|
}
|
|
|
|
.contact-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.hero { padding: 5rem 1rem; }
|
|
.hero-title { font-size: 2.8rem; }
|
|
section { padding: 3rem 1rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav id="nav">
|
|
<div class="nav-logo">CINEASTHESIA</div>
|
|
<ul class="nav-links" id="navLinks">
|
|
<li><a href="#projects">Projects</a></li>
|
|
<li><a href="#installations">Installations</a></li>
|
|
<li><a href="#about">Elle Sam</a></li>
|
|
<li><a href="#otb">Out The Box</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
<button class="nav-toggle" id="navToggle" aria-label="Toggle menu">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<div class="hero-content">
|
|
<h1 class="hero-title">CINEASTHESIA</h1>
|
|
<p class="hero-subtitle">Film, immersive art, and neuroaesthetics across the Black diaspora — bridging indigenous healing traditions with the technology of today.</p>
|
|
<div class="hero-nav-links">
|
|
<a href="#projects">Explore the Work</a>
|
|
<a href="#contact">Get in Touch</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PROJECTS -->
|
|
<section class="projects-section" id="projects">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Projects</p>
|
|
<h2 class="section-title">The Work</h2>
|
|
</div>
|
|
|
|
<!-- THE LAST DRAW -->
|
|
<div class="project-card reveal">
|
|
<div class="project-image">
|
|
<img src="img/story-family.jpg" alt="The Last Draw — near-future narrative" loading="lazy">
|
|
<span class="project-tag">Film · Narrative</span>
|
|
</div>
|
|
<div class="project-info">
|
|
<h3>The Last Draw</h3>
|
|
<p><em>The Last Draw</em> is a grounded near-future narrative set in Mim, Ghana — following a family living under ecological pressure and lottery-based survival. The story gives the work its emotional life and human stakes, centering the act of dwelling as itself a narrative act.</p>
|
|
<p>Imagined through Black diasporic epistemology, the film explores what becomes visible when future habitation is grounded in land, culture, pressure, and daily life — red earth, water edges, agricultural rhythm, quarry conditions, and the settlement patterns that shape how people live, move, and remain in place.</p>
|
|
<div class="quote">“What would housing look like if it were designed to heal? And what stories do we need to tell to build that world?”</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HOME -->
|
|
<div class="project-card reverse reveal">
|
|
<div class="project-image">
|
|
<img src="img/acorus-garden.jpg" alt="HOME — immersive art installation" loading="lazy">
|
|
<span class="project-tag">Immersive · Multisensory</span>
|
|
</div>
|
|
<div class="project-info">
|
|
<h3>HOME</h3>
|
|
<p><em>HOME</em> is a mobile immersive art installation and fire-proof housing prototype that uses neuroaesthetic research to activate specific neurological responses — lowering cortisol, stimulating oxytocin and dopamine pathways, inviting the body back into safety.</p>
|
|
<p>Drawing from Alice Walker’s radical tenderness and Audre Lorde’s framing of self-care as political resistance, HOME destigmatizes play, rest, and joy for people who may be in survival mode. The installation travels to working-class neighborhoods across the United States, the Black diaspora, and continental Africa.</p>
|
|
<p>Each sensory chamber engages visitors through interconnected modalities:</p>
|
|
<div class="sensory-tags">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- INTERACTIVE ART INSTALLATIONS -->
|
|
<section class="installations-section" id="installations">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Exhibits</p>
|
|
<h2 class="section-title">Interactive Art Installations</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="installations-intro">Elle’s immersive installations use volumetric light, sacred geometry, UV-reactive environments, and sound frequency to create spaces where visitors don’t just observe — they participate. Each installation is designed using neuroaesthetic principles to activate embodied memory, lower cortisol, and invite the body back into safety and play.</p>
|
|
</div>
|
|
<div class="installations-grid reveal">
|
|
<div class="installation-item">
|
|
<img src="img/chroma-1.jpg" alt="Chroma — sacred geometry light panel" loading="lazy">
|
|
<div class="installation-caption">
|
|
<h4>Chroma</h4>
|
|
<p>Sacred Geometry · Light</p>
|
|
</div>
|
|
</div>
|
|
<div class="installation-item">
|
|
<img src="img/chroma-2.jpg" alt="Chroma — volumetric projection ceremony" loading="lazy">
|
|
<div class="installation-caption">
|
|
<h4>Chroma</h4>
|
|
<p>Volumetric Projection · Ceremony</p>
|
|
</div>
|
|
</div>
|
|
<div class="installation-item">
|
|
<img src="img/chroma-3.jpg" alt="Chroma — blue laser light installation" loading="lazy">
|
|
<div class="installation-caption">
|
|
<h4>Chroma</h4>
|
|
<p>Laser · Immersion</p>
|
|
</div>
|
|
</div>
|
|
<div class="installation-item">
|
|
<img src="img/sankofa-accra.jpg" alt="Sankofa — UV-reactive installation in Accra" loading="lazy">
|
|
<div class="installation-caption">
|
|
<h4>Sankofa</h4>
|
|
<p>Accra · UV-Reactive Environment</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ABOUT ELLE SAM -->
|
|
<section class="about-section" id="about">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">The Creator</p>
|
|
<h2 class="section-title">Elle Sam</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">Michelle “ELLE” Sam</h3>
|
|
<p class="about-role">Storyteller · Filmmaker · Medicinal Healer · Multimedia Artist</p>
|
|
<p class="about-bio">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="about-bio">Her film and television credits include writing for Jason Katims’ <em>As We See It</em> (Amazon), <em>Hardly Working</em> (Paramount+), and the NAACP Image Award-winning <em>Black Boy Joy</em>. Her short film <em>Missed Connections</em> won the audience award at TranScreen Amsterdam Transgender Film Festival. She was a speaker at TEDxAccra’s Chale Talks and has feature and series projects in development with several major studios.</p>
|
|
<p class="about-bio">Her practice bridges West African indigenous healing traditions, neuroaesthetics, and multimedia narrative — the convergence at the heart of Cineasthesia.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- OUT THE BOX CREATIVE -->
|
|
<section class="otb-section" id="otb">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Artist Collective</p>
|
|
<h2 class="section-title">Out The Box Creative</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="otb-text">Elle Sam is co-founder of <strong>Out The Box Creative</strong>, a Ghanaian production company and artist collective based in Accra. The collective brings together filmmakers, artists, healers, and cultural practitioners to create work that centers African and diasporic voices, epistemologies, and creative traditions.</p>
|
|
<p class="otb-text">Out The Box Creative operates at the intersection of storytelling, community development, and cultural preservation — producing immersive experiences, film projects, and collaborative works that travel between continental Africa and the global diaspora. The collective’s work is rooted in the belief that creative practice and indigenous knowledge are inseparable from the work of building just, resilient futures.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="otb-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>
|
|
</section>
|
|
|
|
<!-- CONTACT -->
|
|
<section class="contact-section" id="contact">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Get in Touch</p>
|
|
<h2 class="section-title">Contact</h2>
|
|
</div>
|
|
<div class="contact-grid reveal">
|
|
<div class="contact-intro">
|
|
<h3>Let’s Connect</h3>
|
|
<p>Interested in collaborations, screenings, installations, press inquiries, or community partnerships? We’d love to hear from you.</p>
|
|
<p>Whether you’re a fellow artist, curator, community organizer, funder, or just someone moved by the work — reach out.</p>
|
|
</div>
|
|
<form class="contact-form" id="contactForm">
|
|
<div>
|
|
<label for="name">Name</label>
|
|
<input type="text" id="name" name="name" required>
|
|
</div>
|
|
<div>
|
|
<label for="email">Email</label>
|
|
<input type="email" id="email" name="email" required>
|
|
</div>
|
|
<div>
|
|
<label for="subject">Subject</label>
|
|
<input type="text" id="subject" name="subject">
|
|
</div>
|
|
<div>
|
|
<label for="message">Message</label>
|
|
<textarea id="message" name="message" required></textarea>
|
|
</div>
|
|
<button type="submit">Send Message</button>
|
|
<div class="form-status" id="formStatus"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<p class="footer-logo">CINEASTHESIA</p>
|
|
<p class="footer-tagline">Story, shelter, healing — across the Black diaspora and continental Africa.</p>
|
|
<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));
|
|
|
|
// Contact form
|
|
const form = document.getElementById('contactForm');
|
|
const status = document.getElementById('formStatus');
|
|
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const btn = form.querySelector('button');
|
|
btn.textContent = 'Sending...';
|
|
btn.disabled = true;
|
|
|
|
const data = new FormData(form);
|
|
const payload = Object.fromEntries(data.entries());
|
|
|
|
try {
|
|
const res = await fetch('/api/contact', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if (res.ok) {
|
|
status.className = 'form-status success';
|
|
status.textContent = 'Thank you! Your message has been sent.';
|
|
form.reset();
|
|
} else {
|
|
throw new Error('Server error');
|
|
}
|
|
} catch (err) {
|
|
status.className = 'form-status success';
|
|
status.textContent = 'Thank you for your interest. Please email us directly at hello@cineasthesia.com';
|
|
}
|
|
|
|
btn.textContent = 'Send Message';
|
|
btn.disabled = false;
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|