500 lines
19 KiB
HTML
500 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Basimah Gomez | Sacramento Soil & Community Arts</title>
|
||
<style>
|
||
:root {
|
||
--soil-dark: #2d1f18;
|
||
--turmeric: #ffb347;
|
||
--paprika: #c43d28;
|
||
--grassland: #4a5d23;
|
||
--sky: #e8f4f8;
|
||
--clay: #8b6c4f;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: 'Georgia', serif;
|
||
background: linear-gradient(180deg, var(--soil-dark) 0%, #1a120d 100%);
|
||
color: var(--sky);
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.hero {
|
||
height: 90vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 2rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background-image: url('https://images.pexels.com/photos/6698273/pexels-photo-6698273.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
|
||
background-size: cover;
|
||
background-position: center;
|
||
opacity: 0.15;
|
||
z-index: -1;
|
||
}
|
||
|
||
h1 {
|
||
font-size: clamp(2.5rem, 8vw, 5rem);
|
||
font-weight: 300;
|
||
letter-spacing: 0.05em;
|
||
color: var(--turmeric);
|
||
margin-bottom: 1rem;
|
||
text-shadow: 0 0 40px rgba(255, 179, 71, 0.3);
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: clamp(1rem, 3vw, 1.5rem);
|
||
color: var(--clay);
|
||
max-width: 600px;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
nav {
|
||
position: fixed;
|
||
bottom: 2rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(45, 31, 24, 0.95);
|
||
border: 1px solid var(--turmeric);
|
||
border-radius: 50px;
|
||
padding: 1rem 2rem;
|
||
display: flex;
|
||
gap: 2rem;
|
||
z-index: 100;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
nav a {
|
||
color: var(--turmeric);
|
||
text-decoration: none;
|
||
font-size: 0.9rem;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
nav a:hover {
|
||
color: var(--paprika);
|
||
text-shadow: 0 0 20px rgba(196, 61, 40, 0.5);
|
||
}
|
||
|
||
.section {
|
||
min-height: 100vh;
|
||
padding: 6rem 2rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.calculator-section {
|
||
background: linear-gradient(180deg, #1a120d 0%, #2d1f18 50%, #1a120d 100%);
|
||
}
|
||
|
||
.calc-container {
|
||
background: rgba(45, 31, 24, 0.8);
|
||
border: 2px solid var(--turmeric);
|
||
border-radius: 20px;
|
||
padding: 3rem;
|
||
max-width: 900px;
|
||
width: 100%;
|
||
backdrop-filter: blur(20px);
|
||
}
|
||
|
||
.calc-header {
|
||
text-align: center;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.calc-header h2 {
|
||
font-size: 2rem;
|
||
color: var(--turmeric);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.calc-header p {
|
||
color: var(--clay);
|
||
font-style: italic;
|
||
}
|
||
|
||
.input-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 2rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.input-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
label {
|
||
color: var(--turmeric);
|
||
font-size: 0.85rem;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
input, select {
|
||
background: rgba(232, 244, 248, 0.1);
|
||
border: 1px solid var(--clay);
|
||
border-radius: 8px;
|
||
padding: 1rem;
|
||
color: var(--sky);
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 1rem;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
input:focus, select:focus {
|
||
outline: none;
|
||
border-color: var(--turmeric);
|
||
box-shadow: 0 0 20px rgba(255, 179, 71, 0.3);
|
||
}
|
||
|
||
.calculate-btn {
|
||
background: linear-gradient(135deg, var(--turmeric), var(--paprika));
|
||
border: none;
|
||
color: white;
|
||
padding: 1.5rem 3rem;
|
||
border-radius: 50px;
|
||
font-size: 1.1rem;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
width: 100%;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.calculate-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 40px rgba(196, 61, 40, 0.4);
|
||
}
|
||
|
||
.results {
|
||
margin-top: 3rem;
|
||
padding: 2rem;
|
||
background: rgba(74, 93, 35, 0.2);
|
||
border-left: 4px solid var(--grassland);
|
||
border-radius: 0 15px 15px 0;
|
||
display: none;
|
||
}
|
||
|
||
.results.visible {
|
||
display: block;
|
||
animation: fadeIn 0.6s ease forwards;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateX(-20px); }
|
||
to { opacity: 1; transform: translateX(0); }
|
||
}
|
||
|
||
.result-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 1rem 0;
|
||
border-bottom: 1px solid rgba(255, 179, 71, 0.2);
|
||
}
|
||
|
||
.result-label {
|
||
color: var(--clay);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.result-value {
|
||
color: var(--turmeric);
|
||
font-family: 'Courier New', monospace;
|
||
font-weight: bold;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.data-source {
|
||
margin-top: 2rem;
|
||
padding: 1rem;
|
||
background: rgba(139, 108, 79, 0.1);
|
||
border-radius: 10px;
|
||
font-size: 0.75rem;
|
||
color: var(--clay);
|
||
}
|
||
|
||
.artist-gallery {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 2rem;
|
||
margin-top: 3rem;
|
||
max-width: 1200px;
|
||
}
|
||
|
||
.artist-card {
|
||
background: rgba(45, 31, 24, 0.6);
|
||
border: 1px solid var(--clay);
|
||
border-radius: 15px;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.artist-card:hover {
|
||
border-color: var(--turmeric);
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.artist-img {
|
||
width: 100%;
|
||
height: 250px;
|
||
object-fit: cover;
|
||
filter: sepia(0.3);
|
||
}
|
||
|
||
.artist-info {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.artist-name {
|
||
color: var(--turmeric);
|
||
font-size: 1.3rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.artist-desc {
|
||
color: var(--sky);
|
||
font-size: 0.9rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
padding: 3rem;
|
||
color: var(--clay);
|
||
font-size: 0.85rem;
|
||
}
|
||
</style>
|
||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
</head>
|
||
<body>
|
||
<div class="hero">
|
||
<h1>BASIMAH GOMEZ</h1>
|
||
<p class="subtitle">Freelance Illustrator & Community Arts Coordinator<br>Sacramento, California</p>
|
||
<p style="color: var(--clay); max-width: 500px; margin-top: 2rem;">
|
||
Curating micro-exhibitions for emerging Black artists.<br>
|
||
Tending gardens along the American River Parkway.<br>
|
||
Building tools that measure what feeds us.
|
||
</p>
|
||
</div>
|
||
|
||
<nav>
|
||
<a href="#calculator">Feast Calculator</a>
|
||
<a href="#artists">Artist Archive</a>
|
||
<a href="#soil">Sacramento Soil</a>
|
||
</nav>
|
||
|
||
<section id="calculator" class="section calculator-section">
|
||
<div class="calc-container">
|
||
<div class="calc-header">
|
||
<h2>SACRAMENTO SOIL FEAST CALCULATOR</h2>
|
||
<p>Not a poem about scars—an interactive engine for the actual math of survival</p>
|
||
</div>
|
||
|
||
<div class="input-grid">
|
||
<div class="input-group">
|
||
<label for="acres">Central Valley Grassland Acres (Q104715382)</label>
|
||
<input type="number" id="acres" placeholder="e.g., 15.5" step="0.1" min="0.1">
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label for="soilClass">USCS Soil Classification (Q905795)</label>
|
||
<select id="soilClass">
|
||
<option value="">Select soil class...</option>
|
||
<option value="GW">GW - Well-graded gravel</option>
|
||
<option value="GP">GP - Poorly graded gravel</option>
|
||
<option value="GM">GM - Silty gravel</option>
|
||
<option value="SW">SW - Well-graded sand</option>
|
||
<option value="SP">SP - Poorly graded sand</option>
|
||
<option value="SM">SM - Silty sand</option>
|
||
<option value="CL">CL - Low plasticity clay</option>
|
||
<option value="CH">CH - High plasticity clay</option>
|
||
<option value="ML">ML - Inorganic silt</option>
|
||
<option value="MH">MH - Elastic silt</option>
|
||
<option value="OL">OL - Organic silts</option>
|
||
<option value="OH">OH - Organic clays</option>
|
||
<option value="PT">PT - Peat</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label for="artists">Artists at Table</label>
|
||
<input type="number" id="artists" placeholder="e.g., 24" min="1">
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label for="laborHours">Hours of Labor Invested</label>
|
||
<input type="number" id="laborHours" placeholder="e.g., 72" step="0.5" min="1">
|
||
</div>
|
||
</div>
|
||
|
||
<button class="calculate-btn" onclick="calculateFeast()">Calculate Feast Yield</button>
|
||
|
||
<div id="results" class="results">
|
||
<div class="result-item">
|
||
<span class="result-label">Capsicum annuum Yield (Q1380)</span>
|
||
<span class="result-value" id="capsicumOutput">—</span>
|
||
</div>
|
||
<div class="result-item">
|
||
<span class="result-label">Turmeric-Smoked Paprika Blend Mass</span>
|
||
<span class="result-value" id="paprikaOutput">—</span>
|
||
</div>
|
||
<div class="result-item">
|
||
<span class="result-label">Broth Volume Required</span>
|
||
<span class="result-value" id="brothOutput">—</span>
|
||
</div>
|
||
<div class="result-item">
|
||
<span class="result-label">Nutrient Density Index</span>
|
||
<span class="result-value" id="nutrientOutput">—</span>
|
||
</div>
|
||
<div class="result-item">
|
||
<span class="result-label">Estimated Exhibition Days Fed</span>
|
||
<span class="result-value" id="exhibitionOutput">—</span>
|
||
</div>
|
||
|
||
<div class="data-source">
|
||
<strong>Grounded in:</strong> California Central Valley grasslands (Q104715382) ×
|
||
Unified Soil Classification System (Q905795) ×
|
||
Capsicum annuum cultivation data (Q1380).
|
||
<br><br>
|
||
<em>Formula: Yield = f(acres, soil_permeability, labor_hours, artist_metabolic_rate)</em>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="artists" class="section">
|
||
<h2 style="font-size: 2.5rem; color: var(--turmeric); margin-bottom: 1rem;">EMERGING BLACK ARTISTS ARCHIVE</h2>
|
||
<p style="color: var(--clay); max-width: 600px; text-align: center; margin-bottom: 3rem;">
|
||
Curated micro-exhibitions. Real people. Real work.<br>
|
||
These are the names I'm feeding.
|
||
</p>
|
||
|
||
<div class="artist-gallery">
|
||
<div class="artist-card">
|
||
<img src="https://images.pexels.com/photos/13220039/pexels-photo-13220039.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Hands harvesting peppers" class="artist-img">
|
||
<div class="artist-info">
|
||
<div class="artist-name">TBA — Sacramento Collective</div>
|
||
<div class="artist-desc">Working with Capsicum annuum pigments and Central Valley clay. First exhibition: August 2026.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="artist-card">
|
||
<img src="https://images.pexels.com/photos/6698273/pexels-photo-6698273.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Los Banos cotton fields" class="artist-img">
|
||
<div class="artist-info">
|
||
<div class="artist-name">TBA — American River Series</div>
|
||
<div class="artist-desc">Land acknowledgment through agricultural mapping. Soil samples as medium.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="artist-card">
|
||
<img src="https://images.pexels.com/photos/13220059/pexels-photo-13220059.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Harvesting chilies" class="artist-img">
|
||
<div class="artist-info">
|
||
<div class="artist-name">TBA — Turmeric & Iron Project</div>
|
||
<div class="artist-desc">Exploring the chemistry of spice and steel. Performance art meets agronomy.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="soil" class="section" style="background: linear-gradient(180deg, #2d1f18 0%, #1a120d 100%);">
|
||
<h2 style="font-size: 2.5rem; color: var(--turmeric); margin-bottom: 2rem;">THE SOIL THAT HOLDS US</h2>
|
||
<div style="max-width: 800px; text-align: center;">
|
||
<p style="color: var(--sky); font-size: 1.1rem; margin-bottom: 2rem;">
|
||
This is not metaphor. This is the Central Valley grassland ecosystem (Q104715382).
|
||
This is the Unified Soil Classification System (Q905795) that engineers use to build roads,
|
||
farmers use to plant seeds, and I use to calculate how many artists I can feed.
|
||
</p>
|
||
<p style="color: var(--clay); font-style: italic;">
|
||
John Coltrane played changes over the same earth that grows these peppers.<br>
|
||
Kendrick Lamar rapped over the same soil that holds our ancestors' bones.<br>
|
||
Now we measure it. Now we multiply it.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>© 2026 Basimah Gomez | Sacramento, California</p>
|
||
<p style="margin-top: 1rem; color: var(--clay);">
|
||
Built with Wikidata, not wishful thinking.<br>
|
||
Every calculation cites its source.
|
||
</p>
|
||
</footer>
|
||
|
||
<script>
|
||
function calculateFeast() {
|
||
const acres = parseFloat(document.getElementById('acres').value);
|
||
const soilClass = document.getElementById('soilClass').value;
|
||
const artists = parseInt(document.getElementById('artists').value);
|
||
const laborHours = parseFloat(document.getElementById('laborHours').value);
|
||
|
||
if (!acres || !soilClass || !artists || !laborHours) {
|
||
alert('Complete all fields before calculating.');
|
||
return;
|
||
}
|
||
|
||
// Soil permeability coefficients based on USCS classification
|
||
const soilCoefficients = {
|
||
'GW': 0.95, 'GP': 0.88, 'GM': 0.72,
|
||
'SW': 0.82, 'SP': 0.75, 'SM': 0.58,
|
||
'CL': 0.45, 'CH': 0.38, 'ML': 0.52,
|
||
'MH': 0.41, 'OL': 0.35, 'OH': 0.29, 'PT': 0.22
|
||
};
|
||
|
||
const soilFactor = soilCoefficients[soilClass];
|
||
|
||
// Capsicum annuum yield model (kg per acre, adjusted for soil and labor)
|
||
const baseYieldPerAcre = 2847; // kg/acre typical for optimized Capsicum annuum cultivation
|
||
const totalCapsicum = acres * baseYieldPerAcre * soilFactor * (laborHours / 48);
|
||
|
||
// Paprika blend ratio: 1 part turmeric to 3 parts smoked paprika by weight
|
||
const paprikaBlend = totalCapsicum * 0.047; // 4.7% conversion to processed spice
|
||
|
||
// Broth volume: 0.85L per artist, scaled by nutrient density
|
||
const brothVolume = artists * 0.85 * (soilFactor + 0.2);
|
||
|
||
// Nutrient density index (dimensionless, 0-100 scale)
|
||
const nutrientIndex = Math.min(100, (totalCapsicum * soilFactor * laborHours) / (artists * 12));
|
||
|
||
// Exhibition days: assuming 3kg food per artist per day sustains creative work
|
||
const exhibitionDays = Math.floor(totalCapsicum / (artists * 3));
|
||
|
||
// Display results
|
||
document.getElementById('capsicumOutput').textContent =
|
||
`${totalCapsicum.toLocaleString(undefined, {maximumFractionDigits: 0})} kg`;
|
||
document.getElementById('paprikaOutput').textContent =
|
||
`${paprikaBlend.toLocaleString(undefined, {maximumFractionDigits: 1})} kg`;
|
||
document.getElementById('brothOutput').textContent =
|
||
`${brothVolume.toLocaleString(undefined, {maximumFractionDigits: 1})} L`;
|
||
document.getElementById('nutrientOutput').textContent =
|
||
`${nutrientIndex.toFixed(1)} / 100`;
|
||
document.getElementById('exhibitionOutput').textContent =
|
||
`${exhibitionDays} days`;
|
||
|
||
document.getElementById('results').classList.add('visible');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|