236 lines
8.5 KiB
HTML
236 lines
8.5 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>The Mended Canvas | Asma Rudisill</title>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
--lacquer-gold: #FFD700;
|
|||
|
|
--cracked-clay: #8B7355;
|
|||
|
|
--wabi-sabi: #F5F0E8;
|
|||
|
|
--void-black: #000000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: 'Georgia', serif;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
color: var(--cracked-clay);
|
|||
|
|
background: radial-gradient(circle at 50% 50%, var(--wabi-sabi) 0%, #E8D7C3 100%);
|
|||
|
|
min-height: 100vh;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.golden-seam {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 100vh;
|
|||
|
|
z-index: -1;
|
|||
|
|
background-image:
|
|||
|
|
repeating-linear-gradient(45deg, transparent 0px, transparent 99px, var(--lacquer-gold) 100px 101px),
|
|||
|
|
radial-gradient(circle at 37% 63%, var(--lacquer-gold) 0%, transparent 2000px);
|
|||
|
|
opacity: 0.15;
|
|||
|
|
animation: breathe 60s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes breathe {
|
|||
|
|
0%, 100% { opacity: 0.15; }
|
|||
|
|
50% { opacity: 0.05; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero {
|
|||
|
|
background: linear-gradient(rgba(139, 115, 85, 0.95), rgba(107, 91, 69, 0.95)),
|
|||
|
|
url('https://images.pexels.com/photos/29675964/pexels-photo-29675964.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
|
|||
|
|
background-size: cover;
|
|||
|
|
background-position: center;
|
|||
|
|
background-blend-mode: multiply;
|
|||
|
|
color: white;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 8rem 2rem;
|
|||
|
|
min-height: 70vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
font-size: 5rem;
|
|||
|
|
font-weight: 200;
|
|||
|
|
letter-spacing: 8px;
|
|||
|
|
margin-bottom: 3rem;
|
|||
|
|
text-shadow: 0 0 60px var(--lacquer-gold);
|
|||
|
|
background: linear-gradient(to bottom, white, var(--lacquer-gold));
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
-webkit-text-fill-color: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.seam-declaration {
|
|||
|
|
font-size: 1.8rem;
|
|||
|
|
font-style: italic;
|
|||
|
|
margin-bottom: 4rem;
|
|||
|
|
color: var(--lacquer-gold);
|
|||
|
|
text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|||
|
|
gap: 3rem;
|
|||
|
|
padding: 6rem 2rem;
|
|||
|
|
max-width: 1600px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fragment {
|
|||
|
|
background: white;
|
|||
|
|
border: 3px solid var(--lacquer-gold);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 3rem;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: visible;
|
|||
|
|
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fragment:hover {
|
|||
|
|
transform: translateZ(200px) rotateX(10deg);
|
|||
|
|
box-shadow: 0 40px 120px rgba(139, 115, 85, 0.4);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fragment img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 600px;
|
|||
|
|
object-fit: cover;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
filter: contrast(1.2) saturate(1.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fragment h3 {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
color: var(--cracked-clay);
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
font-weight: 300;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fragment p {
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
color: #6B5B45;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.kintsugi-manifesto {
|
|||
|
|
background: linear-gradient(180deg, var(--wabi-sabi) 0%, var(--cracked-clay) 100%);
|
|||
|
|
padding: 8rem 4rem;
|
|||
|
|
text-align: center;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.manifesto-text {
|
|||
|
|
font-size: 2.5rem;
|
|||
|
|
font-weight: 100;
|
|||
|
|
letter-spacing: 4px;
|
|||
|
|
color: white;
|
|||
|
|
text-shadow: 0 0 80px var(--lacquer-gold);
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.signature {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 3rem;
|
|||
|
|
right: 3rem;
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
color: var(--lacquer-gold);
|
|||
|
|
font-family: 'Cursive', fantasy;
|
|||
|
|
transform: rotate(-15deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.return-home {
|
|||
|
|
background: var(--cracked-clay);
|
|||
|
|
color: white;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 4rem 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.return-home a {
|
|||
|
|
color: var(--lacquer-gold);
|
|||
|
|
font-size: 2rem;
|
|||
|
|
text-decoration: none;
|
|||
|
|
letter-spacing: 6px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="golden-seam"></div>
|
|||
|
|
|
|||
|
|
<div class="hero">
|
|||
|
|
<h1>THE MENDED CANVAS</h1>
|
|||
|
|
<p class="seam-declaration">
|
|||
|
|
I did not sweep the shavings. I poured the vein.
|
|||
|
|
</p>
|
|||
|
|
<p style="font-size: 1.5rem; margin-top: 3rem; opacity: 0.9;">
|
|||
|
|
Where every fracture becomes the spine of something greater.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="gallery">
|
|||
|
|
<div class="fragment">
|
|||
|
|
<img src="https://images.pexels.com/photos/29675964/pexels-photo-29675964.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Cracked Earth Texture">
|
|||
|
|
<h3>The Crack That Became Gold</h3>
|
|||
|
|
<p>In 1450, Japan discovered that broken pottery was not waste—but promise. They mixed lacquer with powdered gold and sealed every wound with light. This is that moment. This is where the mistake stops being a wound and starts being a vein.</p>
|
|||
|
|
<p style="color: var(--lacquer-gold); font-size: 1rem; margin-top: 2rem;">
|
|||
|
|
WIKIDATA: Q2740942 | INSTANCE OF: POTTERY TECHNIQUE | INCEPTION: 1450
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="fragment">
|
|||
|
|
<img src="https://images.pexels.com/photos/12531338/pexels-photo-12531338.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Peeling Paint on Gold Surface">
|
|||
|
|
<h3>The Peeling That Revealed the Vein</h3>
|
|||
|
|
<p>When the old paint falls away, it does not expose ruin—it exposes the gold beneath. Every layer of failure was a layer of preparation. This is the physics of redemption: mass × acceleration = homecoming.</p>
|
|||
|
|
<p style="color: var(--lacquer-gold); font-size: 1rem; margin-top: 2rem;">
|
|||
|
|
SUBCLASS OF: CONSERVATION AND RESTORATION OF CERAMIC OBJECTS
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="fragment">
|
|||
|
|
<img src="https://images.pexels.com/photos/11829415/pexels-photo-11829415.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Yellow Natural Pattern">
|
|||
|
|
<h3>The Pattern of the Broken Coastline</h3>
|
|||
|
|
<p>The fracture is not an end. It is a coastline. Here, the watercolor bleeds beyond the page and becomes the continent they had never seen. The kindergarten breathes. The dome opens. The seam sings.</p>
|
|||
|
|
<p style="color: var(--lacquer-gold); font-size: 1rem; margin-top: 2rem;">
|
|||
|
|
HAS CHARACTERISTIC: WABI-SABI
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="fragment">
|
|||
|
|
<img src="https://pixabay.com/get/gf8bc01b2c40b9d5f3d379d0b664e2465f04e3eb64d0b8a5285cca031d028a2fadb968a1cc6ce801082d872f82cadd3da5ae37782cc04fa745cd1e00b456d5906_1280.jpg" alt="Abstract Pattern Surface Texture">
|
|||
|
|
<h3>The Dry Riverbed That Remembers Rain</h3>
|
|||
|
|
<p>This is the map of every mistake that became a lesson. Every crack a tributary. Every scar a delta. We do not mourn the break—we navigate the gold.</p>
|
|||
|
|
<p style="color: var(--lacquer-gold); font-size: 1rem; margin-top: 2rem;">
|
|||
|
|
NATIVE LABEL: 金継ぎ | SPOKEN TEXT AUDIO: KINTSUGI.OGG
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="kintsugi-manifesto">
|
|||
|
|
<p class="manifesto-text">
|
|||
|
|
I DID NOT SWEEP THE SHAVINGS.<br>
|
|||
|
|
I POURED THE VEIN.
|
|||
|
|
</p>
|
|||
|
|
<p class="signature">ASMA RUDISILL</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="return-home">
|
|||
|
|
<a href="index.html">RETURN TO THE FIRST STAIN</a>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|