Flesh out Cineasthesia home site with full content
- Worlding MIM deck content: climate futures, habitat design, regenerative land systems - Immersive experience section from production copy - Stefanie Schwartz nature photography gallery (7 photos) - Worlding MIM visuals extracted from deck (10 images) - Team section with Michelle Sam, George A. Jackson II, Stefanie Schwartz - Projects showcase: The Last Draw, Worlding Mim, Immersive Experiences - Ghana-inspired earth tone color palette with scroll animations - Updated Dockerfile to serve img/ directory Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
ff4a1a4afa
commit
dbdacddd11
|
|
@ -1,4 +1,5 @@
|
|||
FROM nginx:alpine
|
||||
COPY index.html /usr/share/nginx/html/index.html
|
||||
COPY img/ /usr/share/nginx/html/img/
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
EXPOSE 80
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 476 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 447 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 494 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 474 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 361 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 747 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 481 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 348 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 421 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 467 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 599 KiB |
848
index.html
848
index.html
|
|
@ -3,90 +3,856 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cineasthesia — by Elle</title>
|
||||
<meta name="description" content="Cineasthesia — film, storytelling, and cultural architecture by Elle.">
|
||||
<title>Cineasthesia — by Michelle Sam</title>
|
||||
<meta name="description" content="Cineasthesia — film, storytelling, immersive experience, and cultural architecture by Michelle Sam.">
|
||||
<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;
|
||||
--text-primary: #f0ece4;
|
||||
--text-secondary: rgba(240, 236, 228, 0.7);
|
||||
--text-muted: rgba(240, 236, 228, 0.5);
|
||||
--gold: #FCD116;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: var(--midnight);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
background: var(--sand);
|
||||
color: var(--text-body);
|
||||
overflow-x: hidden;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.logo {
|
||||
/* 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(60, 36, 21, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 0.8rem 2rem;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
||||
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.3) 0%, rgba(60,36,21,0.7) 100%),
|
||||
url('img/worlding-hero.jpg') center center / cover no-repeat;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.hero-accent {
|
||||
width: 50px;
|
||||
height: 4px;
|
||||
background: var(--gold);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: clamp(3rem, 7vw, 5.5rem);
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--sand);
|
||||
line-height: 1;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
|
||||
font-style: italic;
|
||||
color: var(--sand-dark);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: clamp(1rem, 2.5vw, 1.4rem);
|
||||
font-style: italic;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 3rem;
|
||||
max-width: 500px;
|
||||
.hero-desc {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(245, 237, 224, 0.7);
|
||||
max-width: 550px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.projects {
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* ABOUT */
|
||||
.about-section {
|
||||
background: var(--sand);
|
||||
}
|
||||
|
||||
.about-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
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;
|
||||
}
|
||||
|
||||
/* PROJECTS */
|
||||
.projects-section {
|
||||
background: var(--earth);
|
||||
color: var(--sand);
|
||||
}
|
||||
|
||||
.projects-section .section-label { color: var(--gold-light); }
|
||||
.projects-section .section-title { color: var(--sand); }
|
||||
|
||||
.project-card {
|
||||
display: flex;
|
||||
gap: 3rem;
|
||||
margin-bottom: 5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-card:last-child { margin-bottom: 0; }
|
||||
.project-card.reverse { flex-direction: row-reverse; }
|
||||
|
||||
.project-img {
|
||||
flex: 0 0 50%;
|
||||
height: 360px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.project-info { flex: 1; }
|
||||
|
||||
.project-tag {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold-light);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 2rem;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--sand);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.project-desc {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(245, 237, 224, 0.75);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.project-link {
|
||||
display: inline-block;
|
||||
color: var(--gold);
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.8rem 2.5rem;
|
||||
border: 1px solid rgba(252, 209, 22, 0.4);
|
||||
padding: 0.7rem 2rem;
|
||||
border: 1px solid rgba(198, 139, 63, 0.4);
|
||||
transition: all 0.3s;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.project-link:hover {
|
||||
background: rgba(252, 209, 22, 0.1);
|
||||
background: rgba(198, 139, 63, 0.15);
|
||||
border-color: var(--gold);
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
padding-top: 3rem;
|
||||
/* IMMERSIVE */
|
||||
.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 */
|
||||
.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; }
|
||||
|
||||
.gallery-credit {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
font-size: 0.75rem;
|
||||
color: rgba(245, 237, 224, 0.4);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* WORLDING */
|
||||
.worlding-section {
|
||||
background: var(--sand);
|
||||
}
|
||||
|
||||
.worlding-hero-img {
|
||||
width: 100%;
|
||||
max-height: 500px;
|
||||
object-fit: cover;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.worlding-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.worlding-card {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.worlding-card img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.worlding-card h3 {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--earth);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.worlding-card p {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 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: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: var(--earth);
|
||||
color: var(--sand);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 1.4rem;
|
||||
margin: 0 auto 1rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* IMAGE BREAKS */
|
||||
.img-break {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.img-break img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 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(60, 36, 21, 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 2rem 3rem; }
|
||||
|
||||
section { padding: 4rem 1.5rem; }
|
||||
|
||||
.about-grid {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.about-photo {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.project-card, .project-card.reverse {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.project-img {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.worlding-grid, .team-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="logo">CINEASTHESIA</h1>
|
||||
<p class="tagline">Film, storytelling, and cultural architecture by Elle</p>
|
||||
<div class="projects">
|
||||
<a href="https://thelastdraw.cineasthesia.com" class="project-link">The Last Draw</a>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav id="nav">
|
||||
<div class="nav-logo">CINEASTHESIA</div>
|
||||
<ul class="nav-links" id="navLinks">
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#projects">Projects</a></li>
|
||||
<li><a href="#immersive">Immersive</a></li>
|
||||
<li><a href="#worlding">Worlding</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 -->
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="hero-accent"></div>
|
||||
<h1 class="hero-title">CINEASTHESIA</h1>
|
||||
<p class="hero-subtitle">Film, storytelling, and cultural architecture by Michelle Sam</p>
|
||||
<p class="hero-desc">A creative practice working across film, immersive experience, habitat design, and regenerative futures. Rooted in the Black diaspora and continental Africa.</p>
|
||||
</div>
|
||||
<p class="footer">© 2025 Elle / Cineasthesia</p>
|
||||
</section>
|
||||
|
||||
<!-- ABOUT -->
|
||||
<section class="about-section" id="about">
|
||||
<div class="inner">
|
||||
<div class="reveal">
|
||||
<p class="section-label">About</p>
|
||||
<h2 class="section-title">The Practice</h2>
|
||||
</div>
|
||||
<div class="about-grid reveal">
|
||||
<img src="img/michelle-sam.jpg" alt="Michelle Sam" class="about-photo" loading="lazy">
|
||||
<div class="about-info">
|
||||
<h3 class="about-name">Michelle Sam</h3>
|
||||
<p class="about-role">Writer · Director · Experience Designer</p>
|
||||
<p class="about-bio">Michelle Sam is a writer, award-winning filmmaker, actress, and multimedia artist. Her work explores the intersection of identities and stories in a visceral manner. The daughter of Ghanaian immigrants raised in Ireland, she trained at the Gaiety School of Acting before moving to Chicago, where she studied at Second City and turned her talents to filmmaking. She holds a Sociology and Visual and Dramatic Arts degree from Rice University.</p>
|
||||
<p class="about-bio">In addition to creating film and TV, she cultivates immersive and interactive experiences and art installations that engage the nine senses through somatic experiencing, across the Black diaspora and in continental Africa under her name, Yaa Tabriwaa. She is a co-founder of Out The Box Creative, a hybrid Ghanaian production company and artist collective based in Accra, Ghana.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- PROJECTS -->
|
||||
<section class="projects-section" id="projects">
|
||||
<div class="inner">
|
||||
<div class="reveal">
|
||||
<p class="section-label">Work</p>
|
||||
<h2 class="section-title">Projects</h2>
|
||||
</div>
|
||||
|
||||
<!-- The Last Draw -->
|
||||
<div class="project-card reveal">
|
||||
<img src="img/worlding-family.jpg" alt="The Last Draw" class="project-img" loading="lazy">
|
||||
<div class="project-info">
|
||||
<p class="project-tag">Afrofuturistic Grounded Sci-Fi</p>
|
||||
<h3 class="project-name">The Last Draw</h3>
|
||||
<p class="project-desc">With seven days before an unstoppable environmental disaster, world leaders launch a global lottery to decide who escapes to Mars. When the most unlikely members of society and the black sheep of a multigenerational Ghanaian family are selected, they must navigate family fractures, buried truths, and the deeper forces shaping who lives and who's left behind.</p>
|
||||
<p class="project-desc">A genre-blending grounded sci-fi with the biting social satire of <em>Parasite</em>, the spiritual unease of <em>The Leftovers</em>, and the gritty immediacy of <em>Children of Men</em>.</p>
|
||||
<a href="https://thelastdraw.cinesthesia.art" class="project-link" target="_blank">Explore the Project</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Worlding Mim -->
|
||||
<div class="project-card reverse reveal">
|
||||
<img src="img/worlding-acorus.jpg" alt="Worlding Mim" class="project-img" loading="lazy">
|
||||
<div class="project-info">
|
||||
<p class="project-tag">Climate Futures · Habitat Design</p>
|
||||
<h3 class="project-name">Worlding Mim</h3>
|
||||
<p class="project-desc">A place-based climate futures proposal grounded in film, habitat design, and regenerative land systems in Mim, Ghana. The project asks what becomes visible when future habitation is grounded in land, culture, pressure, and daily life.</p>
|
||||
<p class="project-desc">Story, sanctuary, and land come together to create a future that can be inhabited as a narrative, understood as a settlement, and developed as a serious public proposition.</p>
|
||||
<a href="#worlding" class="project-link">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Immersive Experiences -->
|
||||
<div class="project-card reveal">
|
||||
<img src="img/schwartz-butterfly.jpg" alt="Immersive Art Installation" class="project-img" loading="lazy">
|
||||
<div class="project-info">
|
||||
<p class="project-tag">Immersive Art · Multisensory Experience</p>
|
||||
<h3 class="project-name">Immersive Experiences</h3>
|
||||
<p class="project-desc">A mobile immersive art installation that reclaims deliberate joy. Designed to induce happiness and euphoria through film, oral storytelling, sound frequency, bass vibrations, interactive art, cinemagraphs, and scent. Each sensory experience is linked to a story, creating an interconnected larger narrative.</p>
|
||||
<p class="project-desc">Travelling directly to working-class neighborhoods across the United States, the Black diaspora, and continental Africa.</p>
|
||||
<a href="#immersive" class="project-link">Discover</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- IMMERSIVE EXPERIENCE DETAIL -->
|
||||
<section class="immersive-section" id="immersive">
|
||||
<div class="inner">
|
||||
<div class="reveal">
|
||||
<p class="section-label">Immersive Art</p>
|
||||
<h2 class="section-title">Joy as Resistance</h2>
|
||||
</div>
|
||||
<div class="reveal">
|
||||
<p class="immersive-text">A space that reclaims deliberate joy. A mobile immersive art installation comprising various spaces for play, specifically designed to induce joy, happiness, and euphoria by using different sensory and artistic techniques to engage play and psychological inner child work.</p>
|
||||
</div>
|
||||
<div class="reveal">
|
||||
<p class="immersive-quote">“Black joy is a form of its own resistance to reclaim our humanity in the face of the legacies of imperialism, colonialism, and slavery across the diaspora and continental Africa.”</p>
|
||||
</div>
|
||||
<div class="reveal">
|
||||
<p class="immersive-text">The experiences specifically trigger the parts of the brain linked to the receptors that induce joy, happiness, and euphoria via film, video, oral storytelling, sound frequency, bass vibrations, an AI mirror that reflects the younger version of self along with affirmations, interactive art revolving around touch, cinemagraphs, and smell. Each experience has its own separate space and is linked to a story, creating an interconnected larger narrative.</p>
|
||||
</div>
|
||||
<div class="reveal">
|
||||
<p class="immersive-text">The installation is mobile—built using a 40ft shipping container with wheels, capable of travelling to multiple communities domestically and internationally. It travels directly to working-class neighborhoods across the United States, the Black diaspora, and continental Africa, engaging with different artists in each community.</p>
|
||||
</div>
|
||||
<div class="reveal">
|
||||
<p class="immersive-text">This project pushes the bounds of how to tell a story in a multimedia manner, engaging all the senses through psychological and scientific means. It takes the framing device found in literature and turns it on its head, revealing layers of a story similar to a Russian doll across different mediums.</p>
|
||||
</div>
|
||||
<div class="reveal">
|
||||
<p class="immersive-text">As a child of Ghanaian immigrants, stories are significant in our culture. Stories can be told through rhythm, visuals, culminating in a cathartic experience. The Black feminism movement—Alice Walker, Audre Lorde, Barbara Jordan, Angela Davis—posited that Black joy and self-care is a radical form of resistance. By reclaiming our narratives and deliberate joy, we combat the single story of trauma and pain.</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">AI Mirror</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 -->
|
||||
<section class="gallery-section">
|
||||
<p class="section-label reveal">Sensory Worlds · Photography by Stefanie Schwartz</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/worlding-method.jpg" alt="Interior commons" loading="lazy">
|
||||
</div>
|
||||
<p class="gallery-credit">Photography © Stefanie Schwartz</p>
|
||||
</section>
|
||||
|
||||
<!-- WORLDING MIM DETAIL -->
|
||||
<section class="worlding-section" id="worlding">
|
||||
<div class="inner">
|
||||
<div class="reveal">
|
||||
<p class="section-label">Climate Futures</p>
|
||||
<h2 class="section-title">Worlding Mim</h2>
|
||||
</div>
|
||||
<img src="img/worlding-regenerative.jpg" alt="Regenerative landscape in Mim" class="worlding-hero-img reveal" loading="lazy">
|
||||
<div class="reveal">
|
||||
<p class="section-text">Many climate futures remain hard to connect to because they are detached from the places where life actually happens. This project begins with one specific place and stays with it. It asks what becomes visible when future habitation is grounded in land, culture, pressure, and daily life.</p>
|
||||
<p class="section-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>
|
||||
</div>
|
||||
<div class="worlding-grid reveal">
|
||||
<div class="worlding-card">
|
||||
<img src="img/worlding-family.jpg" alt="Story" loading="lazy">
|
||||
<h3>Story</h3>
|
||||
<p><em>The Last Draw</em> gives the work its emotional life and human stakes. A grounded near-future story about a Ghanaian family living under ecological pressure and lottery-based survival.</p>
|
||||
</div>
|
||||
<div class="worlding-card">
|
||||
<img src="img/worlding-acorus.jpg" alt="Sanctuary" loading="lazy">
|
||||
<h3>Sanctuary</h3>
|
||||
<p>Acorus is the habitat system through which this world takes architectural form—spherical, linked, repairable, teachable, and suited to distributed local manufacture.</p>
|
||||
</div>
|
||||
<div class="worlding-card">
|
||||
<img src="img/worlding-mim.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="section-text">Together, they create a future that can be inhabited as a story, understood as a settlement, and developed as a serious public proposition. The work is ready for a deeper phase of refinement and shared development.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="img-break">
|
||||
<img src="img/worlding-closing.jpg" alt="Designing how to remain" loading="lazy">
|
||||
</div>
|
||||
|
||||
<!-- TEAM -->
|
||||
<section class="team-section" id="team">
|
||||
<div class="inner">
|
||||
<div class="reveal">
|
||||
<p class="section-label">Collaborators</p>
|
||||
<h2 class="section-title">The Team</h2>
|
||||
</div>
|
||||
<div class="team-grid reveal">
|
||||
<div class="team-card">
|
||||
<div class="team-icon">MS</div>
|
||||
<h3 class="team-name">Michelle Sam</h3>
|
||||
<p class="team-role">Narrative World</p>
|
||||
<p class="team-bio">Writer, award-winning filmmaker, and multimedia artist. Brings the narrative world of The Last Draw and immersive experience design across the Black diaspora and continental Africa. Co-founder of Out The Box Creative in Accra, Ghana.</p>
|
||||
</div>
|
||||
<div class="team-card">
|
||||
<div class="team-icon">GJ</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">SS</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<p class="footer-logo">CINEASTHESIA</p>
|
||||
<p class="footer-tagline">Film, storytelling, and cultural architecture</p>
|
||||
<div class="footer-links">
|
||||
<a href="https://thelastdraw.cinesthesia.art" target="_blank">The Last Draw</a>
|
||||
</div>
|
||||
<p class="footer-copy">© 2025 Michelle 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue