Garden

<a class="passage-link" data-passage="the end 2"> <div id="passage-fade"> <p> When I first began, at the beginning of spring, I felt I could control life, what grew when and how. </br> I feared failure and relished any seeming win. </p> [[<span aria-label="next page" class="button__next">...</span>->the end 2]] </div> </a>

<a class="passage-link" data-passage="the end 3"> <div id="passage-fade"> <p> The weeks that followed mellowed that feeling, with each new insect population I encountered, or days of rain, or weeks of heat. </p> [[<span aria-label="next page" class="button__next">...</span>->the end 3]] </div>

<a class="passage-link" data-passage="the end 4"> <div id="passage-fade"> <p> I am a part of a larger network.</br> A white root seeking in the dark, a green leaf emerging. </p> [[<span aria-label="next page" class="button__next">...</span>->the end 4]] </div>

<a class="passage-link" data-passage="the end 5"> <div id="passage-fade"> <p> with September came the last of growth. </br>  It wasn't the end.</br> </p> <p> Cutting back, cutting down, piling up the weeds and the leaves</br> Covering them with compost</br> And laying cardboard on top, </br> I drew a line under my work that summer.</br> </p> [[<span aria-label="next page" class="button__next">...</span>->the end 5]] </div>

<a class="passage-link" data-passage="Home"> <div id="passage-fade"> <p> I leave the garden to the worms</br> and the mycelium </br> and the ants </br> and the woodlice,</br> the dark soil-workers and the beasties,</br> to feed, sleep and dance through the winter,</br> until I disturb them again in the spring. </p> [[<span aria-label="next page" class="button__next">...</span>->Home]] </div> </a>

Double-click this passage to edit it.

I gave away some seedlings, and planted as many I as I thought possible in our small beds. Some thrived, but more were eaten by slugs and snails. The first thing I'd do in the morning was hurry to check on the plants in the garden, and I'd find the decimation wrought over night. The tell-tale shining trails glistened next to stringy stubs of leaves, the only trace left of the visitors that had come in the dark. I tried different plants and different spots, and noticed what happened, and things started to last longer. I realised the small courtyard was filled with life. A handful of earth sifted to reveal wriggling worms. A pot moved to surprise a small colony of woodlice, spiders and other creepy crawlies underneath. Ants were busy ferrying too and fro across the flagstones. A pair of sparrows visited daily to eat the greenfly on a wild rose bush. Bees loved to visit a shrub I had wanted to get rid of. I realised what I had thought were ugly spindly branches with ungenerous dry berries, had bloomed into a thriving part of the tiny ecosystem of the garden. Seeing the thousands of little insects and the dozens of plants in what I thought was a relatively barren patch of land is humbling. I'm in awe at the abundance of the world, it's complexity, it's unsentimentality, and the fragile interconnectedness of it all. <img alt="" src="poppies_page.png" class="page-bean" /> <img alt="" src="poppies_bud_1.png" class="image-left" />

<% s.garden = "false"; s.nasturtiums = "false"; s.rose = "false"; s.weeds = "false"; s.end = "false"; %> <div aria-hidden="true" class="cover"></div> <img alt="a blowsy close up of a wild pink rose, floating on a white background with a grid of grey dots on it" src="rose_cutout.png" class="image-left"/> <%= window.story.render("chapters") %> <img aria-hidden="true" class="blob left" src="blob_left.png"/> <img aria-hidden="true" src="blob_right.png" class="blob image-right" style="top: 0;"/> <img aria-hidden="true" class="blob" src="blob_center.png"/> <footer> <p>made by <a src="https://mas.to/@harriethw">HarrietHW</a>, in association with <a src="https://www.control-shift.network/artwork.html?artwork=can-a-website-be-a-garden">Control Shift</a> and <a src="https://containermagazine.co.uk/poem-garden/">Container Mag</a></p> <p>this garden is hosted from a living room in Bristol, UK. It is a DIY <a src="https://areyoubeingserved.constantvzw.org/Summit_afterlife.xhtml">feminist server</a>. <p>it is built with <a src="http://www.motoslave.net/tweego/">Tweego</a></p> </footer>

<a class="passage-link" data-passage="the garden 4"> <div id="passage-fade"> <p>I started gardening for the first time this spring.</p> <p>I had tucked away a few rustling paper packets of seeds in a forgotten cupboard. </p> <p>Their labels read like magic spells - sunflowers, mange tout, kale, radishes - each seed a different size, colour and weight. </p> [[<span aria-label="next page" class="button__next">...</span>->the garden 4]] </div> <img aria-hidden="true" src="blob_left.png" style="width: 100px; position: absolute; left: 0; top: 10px;"> <img aria-hidden="true" src="blob_right.png" style="width: 100px; position: absolute; z-index: -1; bottom: 200px;"> <img alt="a grainy close up of a mange tout growing with a delicate white flower half covering it" src="beans_cutout.png" alt="" class="image-right "> </a>

<a class="passage-link" data-passage="the garden 5"> <div id="passage-fade"> <p>I did not think that such small things, so dry and still, could produce anything.</p> [[<span aria-label="next page" class="button__next">...</span>->the garden 5]]  </div> </a>

<a class="passage-link" data-passage="the garden 6"> <img alt="" src="beans_wall.webp" class="image-left" style="transform: rotate(0deg);" /> <img alt="" src="beans_wall.webp" class="image-right" style="transform: rotate(0deg);" /> <div id="passage-fade"> <p>I put them in soil and I watered them and left them in a sunny spot.</p> <p>In less than a week there was something happening.</p> <p>One day bare earth, the next day a green shoot.</p> [[<span aria-label="next page" class="button__next">...</span>->the garden 6]] </div> <a>

<div id="passage-fade"> <p>Life was bursting out under the soil and over it.</p> <p>Every day a new leaf or more growth, bending towards the sun.</p> </div> <img alt="" src="beans_left_cutout.webp" class="image-left" style="transform: rotate(0deg);" /> <img alt="" src="beans_right_cutout.webp" class="image-right" style="transform: rotate(0deg);" /> <% s.garden = "true" %> <%= window.story.render("chapters") %>

<div class="carousel-container"><h1 class="carousel">WORK IN PROGRESS</h1></div>

<% if(s.garden == "false"){ %> <div class="row-box"> <div class="chapter-box">[[the garden->the garden 3]]</div> </div> <% } %> <div class="row-box"> <% if(s.nasturtiums == "false"){ %> <div class="chapter-box">[[the nasturtiums]]</div> <% } %> <% if(s.rose == "false"){ %> <div class="chapter-box">[[the rose bush]]</div> <% } %> <% if(s.weeds == "false"){ %> <div class="chapter-box">[[the weeds]]</div> <% } %> </div> <div class="row-box"> <% if(s.end == "false"){ %> <div class="chapter-box">[[the end]]</div> <% } %> </div>

<a class="passage-link" data-passage="the nasturtiums 2"> <div id="passage-fade"> <p>The nasturtiums and their grasping, insistent, joyful reaching out for light and space. Generating leaf after leaf, tiny star-like pops of green that unfurled like parasols around their beautiful flowers.</p> [[<span aria-label="next page" class="button__next">...</span>->the nasturtiums 2]] </div> <img alt="a joyful spread of nasturtiums in the sun" src="nasturtiums_bush.png" class="image-bottom" />  </a>

<a class="passage-link" data-passage="the nasturtiums 3"> <div id="passage-fade"> <p>The red-orange is almost incandescent, unlike any red, unlike any orange, with a powdery depth to it that nothing else I saw in my life had.</p> [[<span aria-label="next page" class="button__next">...</span>->the nasturtiums 3]] </div> <img alt="close ups of red grainy flowers rotating" src="nasturtiums_flower_cutout_2.webp" class="image-hover"> <img aria-hidden="true" src="nasturtiums_flower_cutout_1.webp" class="image-hover image-right">   <img aria-hidden="true" src="nasturtiums_2.png" class="image-left"/> </a>

<a class="passage-link" data-passage="the nasturtiums 4"> <div id="passage-fade"> <p>The bees assidiously visit one bloom after another, rooting deep into the yellow trumpet of the flower, their little legs sticking out with their soft jodphurs of blossom. </p> [[<span aria-label="next page" class="button__next">...</span>->the nasturtiums 4]] </div> <img aria-hidden="true" src="nasturtiums_border.webp" class="image-right"> <img alt="a bumble bee landing on a red flower" src="nasturtiums_bee_cutout.webp" class="image-left" /> </a>

<a class="passage-link" data-passage="the nasturtiums 5"> <div id="passage-fade"> <p>I feel that to be in the garden is to be embedded in the real, the present moment, the ever-changing now. Not a story of the real, or a transmuted vision of reality. I can feel and hear and touch and smell. </p> [[<span aria-label="next page" class="button__next">...</span>->the nasturtiums 5]] </div> <img alt="" src="nasturtiums_yellow_full.webp" /> <img alt="" src="nasturtiums_yellow_cutout.webp" class="image-left " /> <img alt="" src="nasturtiums_yellow_cutout.webp" class="image-right " /> </a>

<div id="passage-fade"> <p>The plants knew nothing, but they knew enough to turn towards the light, to spread out, sometimes curling around another stem as tight as a noose, to fling themselves up, and up and up.</p> <% s.nasturtiums = "true" %> </div> <img aria-hidden="true" src="nasturtiums_leaf_1.webp" class="image-bottom image-fade image-hover" style="width: 50vh; z-index: 0;"> <%= window.story.render("chapters") %> <img aria-hidden="true" src="nasturtiums_leaf_2.webp" class="image-fade image-left"> <img aria-hidden="true" src="nasturtiums_border.webp" class="image-left "> <img aria-hidden="true" src="nasturtiums_variegated.webp" class="image-right " />

<a class="passage-link" data-passage="the rose bush 2"> <div id="passage-fade"> <p>The scraggly wild rose bush grew fast and ragged throughout the year, though we seem to always be cutting it back.</p> [[<span aria-label="next page" class="button__next">...</span>->the rose bush 2]] </div> <img alt="a pink rose that has one petal turned over" src="rose_cutout_big.webp" class="image-top "> <img aria-hidden="true" src="rose_border.webp" class="image-bottom "> </a>

<a class="passage-link" data-passage="the rose bush 3"> <div id="passage-fade"> <p>It became a host to many visitors over the spring and summer.</p> [[<span aria-label="next page" class="button__next">...</span>->the rose bush 3]] </div> <img aria-hidden="true" src="blob_center.png" style="width: 100px; position: absolute; left: 0; top: 100px; z-index: -1;"> <img aria-hidden="true" src="blob_right.png" style="width: 100px; position: absolute; z-index: -1; bottom: 200px;"> <img aria-hidden="true" src="rose_caterpillar.webp" class="image-right "> <img alt="a fluffy caterpillar eats a leaf on a rose bush" src="rose_caterpillar_cutout.webp" class="image-left " style="width: 50%;"> </a>

<a class="passage-link" data-passage="the rose bush 4"> <div id="passage-fade"> <p>The green fly, the hover flies, the tiny caterpillars, all taking their turn at making a home on the dark green leaves.</p> [[<span aria-label="next page" class="button__next">...</span>->the rose bush 4]] </div> <img alt="a scraggly rose bush borders the page" src="rose_border_2.webp" class="image-right " style="width: 80%; transform: rotate(0deg);"> </a>

<a class="passage-link" data-passage="the rose bush 5"> <div id="passage-fade"> <p>A family of sparrows came to eat the insects, fluttering in and out.</p> [[<span aria-label="next page" class="button__next">...</span>->the rose bush 5]] </div> <img alt="a group of cheerful little pink roses" src="rose_cutout_small.webp" > <img src="rose_border_2.webp" class="image-right " style="transform: rotate(0deg);"> </a>

<div id="passage-fade"> <p>Occassionally within the center of a frowsty pink flower there would sit a jewel-like rose chafer beetle, like a visitor from another world.</p> </div> <img alt="a golden green rose chafer beetle sits inside a pink rose" src="rose_cutout.png" class="image-right "> <img aria-hidden="true" src="rose_beetle_2.png" class="image-left " style="transform: rotate(0deg);"> <% s.rose = "true" %> <%= window.story.render("chapters") %>

<a class="passage-link" data-passage="the weeds 2"> <div id="passage-fade"> <img aria-hidden="true" src="weeds_poppy_cutout.webp" class="image-right " style="z-index: 0;"> <p>What's more delightful than a green shoot coming through the cracks of a paving stone?</p> <p>While our attention was elsewhere, </br> on the seedlings and the plants we intended to grow,</br> there were surprises biding their time around the edges of old paving stones.</p> [[<span aria-label="next page" class="button__next">...</span>->the weeds 2]] </div> <img alt="a curly-leafed big pink poppy and a group of daisies and weeds are collaged in the background" src="weeds_daisy_floor.webp" class="image-bottom " style="width:100vw" /> </a>

<a class="passage-link" data-passage="the weeds 3"> <div id="passage-fade"> <div> <p>We noticed a small blue lobelia here, a stem of pretty grass there, </br> a cluster of daisies, a rococo poppy. </p> </div> <div> </div> <img aria-hidden="true" src="weeds_poppy_cutout.webp" class="image-left image-fade" style="z-index: -1;"> <img alt="a cutout close up of a daisy and a lobelia spin in the center of the screen" src="weeds_daisy_lobelia_cutout.webp" class="image-bottom image-fade image-hover" style="" /> </div> [[<span aria-label="next page" class="button__next">...</span>->the weeds 3]] </a>

<a class="passage-link" data-passage="the weeds 4"> <div id="passage-fade"> <p>I enjoy crouching and looking at the detail, the intricacy of these tiny plant outposts. </p> [[<span aria-label="next page" class="button__next">...</span>->the weeds 4]] </div> <img alt="a full portrait photo of weeds in sprawling bloom in strong sunlight" src="weeds_daisies_full.png" class="image-full " /> </a>

<a class="passage-link" data-passage="the weeds 5"> <div id="passage-fade"> <p>Neighbors of herb robert, lobelia, white hawkweed and groundswell jostle each other as they spring out towards open air.</p> [[<span aria-label="next page" class="button__next">...</span>->the weeds 5]] </div> <img aria-hidden="true" src="weeds_toadflax_cutout.webp" class="image-fade image-left" /> <img alt="a clost up of flowers in a circle" src="weeds_circle.webp" class="image-fade image-right" /> </a>

<a class="passage-link" data-passage="the weeds 6"> <div id="passage-fade"> <p>The violet lobelias spread out as the season goes on, a crowd of them blooming large in a corner.</p> <p>The white collars on their dresses hang delicately in the breeze. </p> [[<span aria-label="next page" class="button__next">...</span>->the weeds 6]] </div> <img aria-hidden="true" src="weeds_lobelia_cutout.webp" style="position: absolute; z-index: -1; transform: rotate(180deg);" /> <img aria-hidden="true" src="weeds_lobelia_cutout.webp" style="position: absolute; z-index: -1; left: -20vw;" /> <img alt="a trio of lobelia flowers in extreme close up line the background" src="weeds_lobelia_cutout.webp" style="position: absolute; z-index: -1; rotate(-180deg); right: -20vw;" /> </a>

<div id="passage-fade"> <p>I love the sheer chance of the weeds. A stray seed blown on the wind or caught on a foot, finding just the right hold on life to grow.</p>  <p>Someone else has sown a seed here, there have been other seasons and other stories, and I am a small visitor alongside the daisy, the bee and the ant.</p> </div> <img aria-hidden="true" src="weeds_flower_cutout.webp" class="image-bottom-right " /> <img aria-hidden="true" src="weeds_pink_cutout.webp" class="image-top image-hover" /> <img aria-hidden="true" src="weeds_pink_cutout.webp" class="image-left image-hover" /> <img alt="a huge pink flower spins in the background" src="weeds_toadflax_cutout.webp" class="image-bottom " /> <% s.weeds = "true" %> <%= window.story.render("chapters") %>