jeffemmett
/
cineasthesia-landing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Interactive Art Installations section with Chroma and Sankofa photos 

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-19 14:03:42 -07:00
parent 9262018dfc
commit 81e89d1e43
5 changed files with 114 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/chroma-1.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 535 KiB

BIN
img/chroma-2.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 364 KiB

BIN
img/chroma-3.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 533 KiB

BIN
img/sankofa-accra.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

115
index.html
View File

@ -262,6 +262,69 @@
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);
@ -535,6 +598,14 @@
height: 280px;
}
.installations-grid {
grid-template-columns: 1fr;
}
.installation-item img {
height: 280px;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 2rem;
@ -555,6 +626,7 @@
<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>
@ -624,7 +696,48 @@
</div>
</section>
<div class="divider"></div>
<!-- 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&rsquo;s immersive installations use volumetric light, sacred geometry, UV-reactive environments, and sound frequency to create spaces where visitors don&rsquo;t just observe &mdash; 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 &middot; 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 &middot; 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 &middot; 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 &middot; UV-Reactive Environment</p>
</div>
</div>
</div>
</div>
</section>
<!-- ABOUT ELLE SAM -->
<section class="about-section" id="about">