Add Roots, Speaking & Workshops, and Insights sections
- Roots: Visual timeline of Rice University triple degree, Gaiety School of Acting, and somatic/ancestral studies - Speaking: Signature topics, 4 format cards (keynote, workshop, panel, residency), and booking context - Insights: 3 thought leadership article teasers on neuroaesthetics, ancestral knowledge, and immersive art (coming soon) - Updated nav with new section links Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
4181ef7561
commit
c166fd91d8
508
index.html
508
index.html
|
|
@ -846,6 +846,342 @@
|
|||
color: rgba(212, 168, 83, 0.4);
|
||||
}
|
||||
|
||||
/* ---- Roots / Education ---- */
|
||||
.roots {
|
||||
background: linear-gradient(180deg, var(--deep-purple), var(--midnight));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.roots-container {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.roots-header {
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin: 0 auto 5rem;
|
||||
}
|
||||
|
||||
.roots-header p {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.8;
|
||||
color: rgba(245, 240, 232, 0.65);
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.roots-timeline {
|
||||
position: relative;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
.roots-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 12px;
|
||||
width: 1px;
|
||||
background: linear-gradient(to bottom, var(--warm-gold), rgba(212, 168, 83, 0.1));
|
||||
}
|
||||
|
||||
.roots-item {
|
||||
position: relative;
|
||||
margin-bottom: 3.5rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.roots-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.roots-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -2.65rem;
|
||||
top: 0.5rem;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--warm-gold);
|
||||
background: var(--midnight);
|
||||
}
|
||||
|
||||
.roots-item .roots-period {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--warm-gold);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.roots-item h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.roots-item .roots-institution {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(245, 240, 232, 0.5);
|
||||
margin-bottom: 0.75rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.roots-item p {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.75;
|
||||
color: rgba(245, 240, 232, 0.6);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.roots-degrees {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.roots-degree {
|
||||
padding: 0.35rem 0.9rem;
|
||||
background: rgba(212, 168, 83, 0.08);
|
||||
border: 1px solid rgba(212, 168, 83, 0.15);
|
||||
border-radius: 100px;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--warm-gold);
|
||||
}
|
||||
|
||||
/* ---- Speaking & Workshops ---- */
|
||||
.speaking {
|
||||
background: var(--deep-purple);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.speaking-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.speaking-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 5rem;
|
||||
align-items: start;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.speaking-text p {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.85;
|
||||
color: rgba(245, 240, 232, 0.7);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.speaking-topics {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.speaking-topics h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
margin-bottom: 1.25rem;
|
||||
color: var(--warm-gold);
|
||||
}
|
||||
|
||||
.topic-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
border-bottom: 1px solid rgba(245, 240, 232, 0.05);
|
||||
}
|
||||
|
||||
.topic-item:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.topic-icon {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
min-width: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--warm-gold);
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.topic-item h4 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.topic-item p {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.6;
|
||||
color: rgba(245, 240, 232, 0.5);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.speaking-formats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.format-card {
|
||||
padding: 2rem;
|
||||
background: rgba(245, 240, 232, 0.03);
|
||||
border: 1px solid rgba(245, 240, 232, 0.06);
|
||||
border-radius: 4px;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.format-card:hover {
|
||||
background: rgba(245, 240, 232, 0.06);
|
||||
border-color: rgba(212, 168, 83, 0.2);
|
||||
}
|
||||
|
||||
.format-card h4 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.format-card p {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.6;
|
||||
color: rgba(245, 240, 232, 0.5);
|
||||
}
|
||||
|
||||
.format-card .format-duration {
|
||||
display: inline-block;
|
||||
margin-top: 0.75rem;
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--warm-gold);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ---- Insights ---- */
|
||||
.insights {
|
||||
background: linear-gradient(180deg, var(--deep-purple), var(--midnight));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.insights-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.insights-header {
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin: 0 auto 4rem;
|
||||
}
|
||||
|
||||
.insights-header p {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.8;
|
||||
color: rgba(245, 240, 232, 0.65);
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.insights-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.insight-card {
|
||||
background: rgba(245, 240, 232, 0.02);
|
||||
border: 1px solid rgba(245, 240, 232, 0.06);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.insight-card:hover {
|
||||
background: rgba(245, 240, 232, 0.05);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.insight-visual {
|
||||
height: 200px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.insight-visual-1 {
|
||||
background: linear-gradient(135deg, var(--rich-indigo), var(--terracotta) 60%, var(--warm-gold));
|
||||
}
|
||||
|
||||
.insight-visual-2 {
|
||||
background: linear-gradient(135deg, var(--kente-green), var(--midnight) 50%, var(--warm-coral));
|
||||
}
|
||||
|
||||
.insight-visual-3 {
|
||||
background: linear-gradient(135deg, var(--warm-gold) 0%, var(--deep-purple) 50%, var(--kente-red));
|
||||
}
|
||||
|
||||
.insight-visual::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at 50% 80%, rgba(0,0,0,0.3), transparent 70%);
|
||||
}
|
||||
|
||||
.insight-body {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.insight-category {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--warm-gold);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.insight-card h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.35rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.35;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.insight-card .insight-excerpt {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.7;
|
||||
color: rgba(245, 240, 232, 0.55);
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.insight-read-more {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--warm-gold);
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: gap 0.3s ease;
|
||||
}
|
||||
|
||||
.insight-read-more:hover {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* ---- Scroll Reveal ---- */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
|
|
@ -893,6 +1229,15 @@
|
|||
|
||||
.entity-block.reversed .entity-text { order: 0; }
|
||||
|
||||
.speaking-grid { grid-template-columns: 1fr; gap: 3rem; }
|
||||
.speaking-formats { grid-template-columns: 1fr; }
|
||||
|
||||
.insights-grid {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
|
@ -940,8 +1285,9 @@
|
|||
<ul class="nav-links" id="navLinks">
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#services">What We Do</a></li>
|
||||
<li><a href="#approach">Approach</a></li>
|
||||
<li><a href="#work">Work</a></li>
|
||||
<li><a href="#speaking">Speaking</a></li>
|
||||
<li><a href="#insights">Insights</a></li>
|
||||
<li><a href="#connect">Connect</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle" id="navToggle" aria-label="Toggle menu">
|
||||
|
|
@ -1085,6 +1431,44 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Roots / Education -->
|
||||
<section class="roots" id="roots">
|
||||
<div class="roots-container">
|
||||
<div class="roots-header">
|
||||
<span class="section-label reveal">Roots</span>
|
||||
<h2 class="section-title reveal reveal-delay-1">A Rare <em>Convergence</em></h2>
|
||||
<p class="reveal reveal-delay-2">
|
||||
Most people choose between art and science. Elle chose both—and found that the space between them is where the deepest human truths live.
|
||||
</p>
|
||||
</div>
|
||||
<div class="roots-timeline">
|
||||
<div class="roots-item reveal">
|
||||
<div class="roots-period">2007 – 2011</div>
|
||||
<h3>Rice University</h3>
|
||||
<div class="roots-institution">Houston, Texas</div>
|
||||
<p>A triple degree that mapped the territory Elle would spend the next decade exploring: the brain, the society it inhabits, and the art that transforms both.</p>
|
||||
<div class="roots-degrees">
|
||||
<span class="roots-degree">B.S. Neuroscience</span>
|
||||
<span class="roots-degree">B.A. Sociology</span>
|
||||
<span class="roots-degree">B.A. Visual & Dramatic Arts</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="roots-item reveal">
|
||||
<div class="roots-period">Acting & Performance</div>
|
||||
<h3>Gaiety School of Acting</h3>
|
||||
<div class="roots-institution">Dublin, Ireland</div>
|
||||
<p>Training in one of Europe’s most storied acting traditions—learning to inhabit character, embody emotion, and understand the performer’s nervous system as an instrument of storytelling.</p>
|
||||
</div>
|
||||
<div class="roots-item reveal">
|
||||
<div class="roots-period">Ongoing Practice</div>
|
||||
<h3>Somatic & Ancestral Studies</h3>
|
||||
<div class="roots-institution">West & Central Africa, Global</div>
|
||||
<p>Deep study in somatic therapeutic practices, sensory wellness modalities, and the ancestral knowledge systems of West and Central Africa—traditions that understand healing and story as inseparable.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Entities: Cineasthesia + Out The Box -->
|
||||
<section class="entities" id="work">
|
||||
<div class="entities-container">
|
||||
|
|
@ -1127,6 +1511,128 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Speaking & Workshops -->
|
||||
<section class="speaking" id="speaking">
|
||||
<div class="speaking-container">
|
||||
<span class="section-label reveal">Speaking & Workshops</span>
|
||||
<h2 class="section-title reveal reveal-delay-1">Igniting <em>Rooms</em><br>& Rewiring Minds</h2>
|
||||
<div class="speaking-grid">
|
||||
<div class="speaking-text">
|
||||
<p class="reveal">
|
||||
Elle brings over a decade of multidisciplinary practice to the stage—weaving neuroscience research, cinematic storytelling techniques, and embodied wisdom into talks and workshops that leave audiences fundamentally changed.
|
||||
</p>
|
||||
<p class="reveal">
|
||||
Whether addressing a conference of neuroscientists, a film festival audience, or a room of corporate leaders seeking deeper creative practices, Elle meets every audience exactly where they are and takes them somewhere new.
|
||||
</p>
|
||||
<div class="speaking-topics reveal">
|
||||
<h3>Signature Topics</h3>
|
||||
<div class="topic-item">
|
||||
<div class="topic-icon"></div>
|
||||
<div>
|
||||
<h4>The Neuroscience of Story</h4>
|
||||
<p>How narrative physically reshapes neural pathways—and why the stories we tell ourselves matter more than we think.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topic-item">
|
||||
<div class="topic-icon"></div>
|
||||
<div>
|
||||
<h4>Cineasthesia: When Senses Cross</h4>
|
||||
<p>Designing multi-sensory experiences that bypass the rational mind and speak directly to the body’s intelligence.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topic-item">
|
||||
<div class="topic-icon"></div>
|
||||
<div>
|
||||
<h4>Ancestral Futures</h4>
|
||||
<p>How West African storytelling traditions offer a blueprint for immersive art, communal healing, and regenerative culture.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topic-item">
|
||||
<div class="topic-icon"></div>
|
||||
<div>
|
||||
<h4>Art as Medicine</h4>
|
||||
<p>The emerging science behind art-based healing—and practical frameworks for integrating creativity into wellness practices.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="speaking-formats">
|
||||
<div class="format-card reveal">
|
||||
<h4>Keynote</h4>
|
||||
<p>High-impact talks that weave research, personal narrative, and live demonstration into an unforgettable experience.</p>
|
||||
<span class="format-duration">30–60 minutes</span>
|
||||
</div>
|
||||
<div class="format-card reveal reveal-delay-1">
|
||||
<h4>Workshop</h4>
|
||||
<p>Hands-on sessions where participants experience neuroaesthetic principles through guided creative exercises.</p>
|
||||
<span class="format-duration">Half or full day</span>
|
||||
</div>
|
||||
<div class="format-card reveal reveal-delay-2">
|
||||
<h4>Panel & Moderation</h4>
|
||||
<p>Bridging conversations between art, science, technology, and healing communities with depth and nuance.</p>
|
||||
<span class="format-duration">60–90 minutes</span>
|
||||
</div>
|
||||
<div class="format-card reveal reveal-delay-3">
|
||||
<h4>Residency</h4>
|
||||
<p>Extended immersive engagements with institutions, festivals, or communities exploring the intersection of narrative and neuroscience.</p>
|
||||
<span class="format-duration">1–4 weeks</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Insights -->
|
||||
<section class="insights" id="insights">
|
||||
<div class="insights-container">
|
||||
<div class="insights-header">
|
||||
<span class="section-label reveal">Insights</span>
|
||||
<h2 class="section-title reveal reveal-delay-1">Thinking at<br>the <em>Edge</em></h2>
|
||||
<p class="reveal reveal-delay-2">
|
||||
Dispatches from the frontier where storytelling meets brain science, ancestral wisdom meets emerging technology, and art becomes a tool for human evolution.
|
||||
</p>
|
||||
</div>
|
||||
<div class="insights-grid">
|
||||
<div class="insight-card reveal">
|
||||
<div class="insight-visual insight-visual-1"></div>
|
||||
<div class="insight-body">
|
||||
<p class="insight-category">Neuroaesthetics</p>
|
||||
<h3>Why Your Brain Can’t Tell the Difference Between a Story and a Memory</h3>
|
||||
<p class="insight-excerpt">Neuroscience reveals that narrative activates the same neural architecture as lived experience. What happens when we design stories that know this?</p>
|
||||
<a href="#" class="insight-read-more">
|
||||
Coming Soon
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="insight-card reveal reveal-delay-1">
|
||||
<div class="insight-visual insight-visual-2"></div>
|
||||
<div class="insight-body">
|
||||
<p class="insight-category">Ancestral Knowledge</p>
|
||||
<h3>The Griot’s Neural Map: West African Storytelling as Somatic Technology</h3>
|
||||
<p class="insight-excerpt">Long before neuroscience had a name, griots understood that story is medicine—and that the body remembers what the mind forgets.</p>
|
||||
<a href="#" class="insight-read-more">
|
||||
Coming Soon
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="insight-card reveal reveal-delay-2">
|
||||
<div class="insight-visual insight-visual-3"></div>
|
||||
<div class="insight-body">
|
||||
<p class="insight-category">Immersive Art</p>
|
||||
<h3>Beyond the Screen: Designing Experiences That Rewire the Nervous System</h3>
|
||||
<p class="insight-excerpt">AR/VR and immersive installation offer something film cannot: the chance to place the audience inside the story. Here’s what that means for healing.</p>
|
||||
<a href="#" class="insight-read-more">
|
||||
Coming Soon
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Manifesto Quote -->
|
||||
<section class="manifesto">
|
||||
<blockquote class="manifesto-quote reveal">
|
||||
|
|
|
|||
Loading…
Reference in New Issue