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

Add leafy backgrounds and Design Science Studio section 

- Add subtle SVG leaf patterns to Projects, Film & TV, OTB, and
  Contact sections with light/dark variants matching each section
- New Design Science Studio section between Film & TV and Elle bio,
  describing Elle's fellowship with DSS / Buckminster Fuller Institute
- Links to designscience.studio and bfi.org
- Bucky Fuller quote in right column

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-19 16:07:48 -07:00
parent 723c7d4ea5
commit 562770b462
1 changed files with 118 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
public/index.html
View File

@ -201,6 +201,33 @@
background: rgba(60, 36, 21, 0.1);
}
/* LEAF BACKGROUNDS */
.leafy-bg {
position: relative;
}
.leafy-bg::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.04;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='200' viewBox='0 0 180 200'%3E%3Cpath d='M40 10 Q60 40 50 80 Q45 100 30 90 Q15 80 25 50 Q30 30 40 10Z' fill='%233C2415'/%3E%3Cpath d='M40 10 Q40 50 38 80' stroke='%233C2415' stroke-width='0.5' fill='none'/%3E%3Cpath d='M130 60 Q150 90 140 130 Q135 150 120 140 Q105 130 115 100 Q120 80 130 60Z' fill='%233C2415'/%3E%3Cpath d='M130 60 Q130 100 128 130' stroke='%233C2415' stroke-width='0.5' fill='none'/%3E%3Cpath d='M80 120 Q100 150 90 190 Q85 210 70 200 Q55 190 65 160 Q70 140 80 120Z' fill='%233C2415'/%3E%3Cpath d='M80 120 Q80 160 78 190' stroke='%233C2415' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
background-size: 180px 200px;
}
.leafy-bg-light::before {
opacity: 0.06;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='220' viewBox='0 0 200 220'%3E%3Cpath d='M50 15 Q75 50 62 100 Q56 125 38 112 Q20 100 32 62 Q38 38 50 15Z' fill='%234A6741'/%3E%3Cpath d='M50 15 Q50 60 47 100' stroke='%234A6741' stroke-width='0.6' fill='none'/%3E%3Cpath d='M150 70 Q175 105 162 155 Q156 180 138 167 Q120 155 132 117 Q138 93 150 70Z' fill='%234A6741'/%3E%3Cpath d='M150 70 Q150 115 147 155' stroke='%234A6741' stroke-width='0.6' fill='none'/%3E%3Cpath d='M95 140 Q120 175 107 210 Q104 218 92 212 Q78 205 85 175 Q90 155 95 140Z' fill='%234A6741'/%3E%3C/svg%3E");
background-size: 200px 220px;
}
.leafy-bg-dark::before {
opacity: 0.08;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='210' viewBox='0 0 190 210'%3E%3Cpath d='M45 10 Q70 45 57 95 Q51 120 33 107 Q15 95 27 57 Q33 33 45 10Z' fill='%23C68B3F'/%3E%3Cpath d='M45 10 Q45 55 42 95' stroke='%23C68B3F' stroke-width='0.5' fill='none'/%3E%3Cpath d='M140 65 Q165 100 152 150 Q146 175 128 162 Q110 150 122 112 Q128 88 140 65Z' fill='%23C68B3F'/%3E%3Cpath d='M140 65 Q140 110 137 150' stroke='%23C68B3F' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
background-size: 190px 210px;
}
/* PROJECT CARDS */
.projects-section { background: var(--sand); }
@ -418,6 +445,63 @@
margin-bottom: 1rem;
}
/* DSS / DESIGN SCIENCE */
.dss-section {
background: var(--green-dark);
color: var(--sand);
}
.dss-section .section-label { color: var(--gold-light); }
.dss-section .section-title { color: var(--sand); }
.dss-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.dss-text {
font-size: 0.95rem;
color: rgba(245, 237, 224, 0.75);
line-height: 1.8;
margin-bottom: 1rem;
}
.dss-links {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.dss-links a {
display: inline-block;
color: var(--gold-light);
text-decoration: none;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.6rem 1.5rem;
border: 1px solid rgba(212, 165, 90, 0.4);
transition: all 0.3s;
}
.dss-links a:hover {
background: rgba(212, 165, 90, 0.15);
border-color: var(--gold-light);
}
.dss-quote {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.2rem, 2.5vw, 1.5rem);
font-style: italic;
color: var(--gold-light);
line-height: 1.5;
border-left: 2px solid var(--gold);
padding-left: 1.5rem;
}
/* FILM & TV */
.filmtv-section {
background: var(--sand-dark);
@ -771,6 +855,11 @@
grid-template-columns: 1fr;
}
.dss-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.installation-item {
flex: 0 0 100%;
}
@ -806,6 +895,7 @@
<li><a href="#projects">Projects</a></li>
<li><a href="#installations">Installations</a></li>
<li><a href="#filmtv">Film & TV</a></li>
<li><a href="#dss">Design Science</a></li>
<li><a href="#about">ELLE</a></li>
<li><a href="#otb">Out the Box Creative Group</a></li>
<li><a href="#contact">Contact</a></li>
@ -831,7 +921,7 @@
</section>
<!-- PROJECTS -->
<section class="projects-section" id="projects">
<section class="projects-section leafy-bg leafy-bg-light" id="projects">
<div class="inner">
<div class="reveal">
<p class="section-label">Projects</p>
@ -932,7 +1022,7 @@
</section>
<!-- FILM & TV -->
<section class="filmtv-section" id="filmtv">
<section class="filmtv-section leafy-bg" id="filmtv">
<div class="inner">
<div class="reveal">
<p class="section-label">Screen Work</p>
@ -961,6 +1051,30 @@
</div>
</section>
<!-- DESIGN SCIENCE STUDIO -->
<section class="dss-section leafy-bg leafy-bg-dark" id="dss">
<div class="inner">
<div class="reveal">
<p class="section-label">Design Science</p>
<h2 class="section-title">Design Science Studio</h2>
</div>
<div class="dss-grid reveal">
<div>
<p class="dss-text">Elle is a fellow of the <strong style="color: var(--sand);">Design Science Studio</strong>, a (r)evolutionary cultural and educational incubator created in partnership with the <strong style="color: var(--sand);">Buckminster Fuller Institute</strong>. The Studio supports creators worldwide to imagine and build regenerative futures that work for 100% of life.</p>
<p class="dss-text">Through the Studio&rsquo;s curriculum of systemic thinking, world-building, and embodied praxis, Elle&rsquo;s work on HOME and Cineasthesia connects directly to Fuller&rsquo;s legacy of comprehensive anticipatory design science &mdash; applying whole-systems thinking to housing, healing, and storytelling across the Black diaspora.</p>
<div class="dss-links">
<a href="https://www.designscience.studio/" target="_blank">Design Science Studio</a>
<a href="https://www.bfi.org/" target="_blank">Buckminster Fuller Institute</a>
</div>
</div>
<div class="dss-quote">
&ldquo;You never change things by fighting the existing reality. To change something, build a new model that makes the existing model obsolete.&rdquo;<br>
<span style="font-style: normal; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 237, 224, 0.5); margin-top: 0.8rem; display: inline-block;">&mdash; R. Buckminster Fuller</span>
</div>
</div>
</div>
</section>
<!-- ABOUT ELLE SAM -->
<section class="about-section" id="about">
<div class="inner">
@ -982,7 +1096,7 @@
</section>
<!-- OUT THE BOX CREATIVE -->
<section class="otb-section" id="otb">
<section class="otb-section leafy-bg leafy-bg-dark" id="otb">
<div class="inner">
<div class="reveal">
<p class="section-label">Artist Collective</p>
@ -1020,7 +1134,7 @@
</section>
<!-- CONTACT -->
<section class="contact-section" id="contact">
<section class="contact-section leafy-bg leafy-bg-light" id="contact">
<div class="inner">
<div class="reveal">
<p class="section-label">Get in Touch</p>