1. STATE OF THE ART¶

REFERENCES & INSPIRATION¶

Nature, Materials, Textures, Natural colors

I am most inspired by materials. When I encounter materials in nature, I am drawn to their texture, their structure, and their colors, which make me want to create something with them. I am also fascinated by the process of making things myself, such as biomaterials, as well as observing the growth and emergence of things. These processes are a major source of inspiration for me.

Inspiring artists¶

Diana Scherer – textiles by guiding plant root growth into woven fabric-like materials
I love the concept of a textile-like material that grows naturally and can be shaped by selecting the mold in which it develops.
Anouk Wipprecht - FashionTech
Her work inspires me for the way she merges wearables with technology, which I find especially exciting to incorporate into costume design and performance work.
Suzanne Lee - BioCouture
BioCouture inspires me through her innovative use of kombucha leather. It’s fascinating how she has been able to grow large, durable sheets of this material, strong enough to be crafted into jackets.

*Rootboud #2, Diana Scherer, 2027; Biocouture, Suzanne Lee; FashionTech, Anouk Wipprecht*

Inspiring fabricademy participants¶

Loes Bogers - Archiving New Naturals
I like Loes's biomaterial Library and the way she documented it.
Annah-Ololade Sangosanya - The Purhyphae Project
The Purhyphae Project inspired me in my research on how to grow mycelium and how to treat it it afterwards.
Barabra Arteaga - Kombucha Fibre Printer
I like the approach of 3D printing with sustainable materials like kombucha fibers
Margrét Katrín Guttormsdóttir - Moving Shapes
The integration of sensors in performances is something I would love to explore further.
Saskia Helinska - Unflatables
I love the visual effect of inflating, and I would like to experiment with this technique in garment design.

Inspiring books¶

CHEMARTS Cookbook – Aalto University CHEMARTS
Natural Dyeing: Learn How to Create Color and Dye Fabric the Natural Way – Babs Behan
Wild gefärbt: Pflanzenfarben sammeln, herstellen, anwenden – Abigail Booth
Radical Matter – Rethinking Materials for a Sustainable Future - Kate Franklin
Biomimetics for Designers: Applying Nature's Processes and Materials in the Real World – Veronika Kapsali

*book covers in order in which they were listed*

DOCUMENTATION¶

MkDocs¶

Since I had never used MkDocs before, it was very helpful for me to check the Material for MKDocs website and examine the code of previous participants. I liked the layouts of Asli Aydin Aksan and Andreas Komodromou, which are somewhat similar to the style of my own website, so I used their sites as orientation.

Front page¶

General settings¶

I wanted to have a similar layout to my own website, so I changed a few general settings in my mkdocs.yml file.

Changed the font to Plus Jakarta Sans
Changed the site name
Changed the theme color to white
Changed the website logo
Changed the favicon icon

Tip: The logo and the favicon icon need to be placed directly under theme.

I wanted the website to be wider, so I hid the navigation on the left side to have more space. I took a look at Asli Aydin Aksans code to figure out how to do this.

---
hide: toc
    navigation
---

Placing images¶

Three side-by-side images¶

To show my previous work, I wanted to place three images side-by-side. For this, I looked it up here, copied the code, and added some HTML to my index.md file and styles to my extra CSS file.

HTML:

<div class="row">
<div class="column">
    <img src="images/home/kostuem-der-zukunft.jpg" style="width:100%">
    <p style="text-align:center;"><i>costume of the future, Johanna Schründer, 2025</i></p>
</div>
<div class="column">
    <img src="images/home/biomimetic-insects.jpg" style="width:100%">
    <p style="text-align:center;"><i>biomimetic insects, Johanna Schründer, 2023</i></p>
</div>
<div class="column">
    <img src="images/home/myzel-handtasche.jpg" style="width:100%">
    <p style="text-align:center;"><i>myceelium handbag, Johanna Schründer, 2025 </i></p>
</div>
</div>

extra.css

    /** Add your extra/custom CSS classes below */
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
    float: left;
    width: 33.33%;
    padding: 5px;
}

/* Clear floats after image containers */
.row::after {
    content: "";
    clear: both;
    display: table;
}

Two side-by-side images¶

I wanted the same layout with two side-by-side images on my assignments page of week 1. Therefore, I had to change the HTML and extra CSS from above.

Troubleshooting: The layout worked, but the image was not shown, and only a question mark appeared instead of the picture. I used a different kind of addressing for the photo, which is unusual but works.

HTML

<div class="row">
<div class="columnTwo">
    <img src="../../images/home/kostuem-der-zukunft.jpg" style="width:100%">
    <p style="text-align:center;"><i>costume of the future, Johanna Schründer, 2025</i></p>
</div>
<div class="columnTwo">
    <img src="../images/home/biomimetic-insects.jpg" style="width:100%">
    <p style="text-align:center;"><i>biomimetic insects, Johanna Schründer, 2023</i></p>
</div>
</div>