1. State of the art, project management and documentation¶
INSPIRATION OF MY PRACTICE.¶
I have always been drawn to nature, physically and visually. The sculptures and installations I was making had the purpose to shine a light on the beauty of nature and encourage people to stop and think about their actions. However in the back of my mind I never really felt I was having that much of an impact and wasn’t satisfied.
That wasn’t until I came across Zena Holloway’s, Rootful which completely transformed my practise. Sparking my interest in regenerative design, I began exploring her process of growing textile from wheatgrass roots. I loved this concept and found it so beautiful, inside and out. Whilst I explored making my own root textile installations, it opened my eyes to all the other biomaterials and i felt the most inspired I had ever felt. Ranging from ancient indigenous traditions from the Inuit’s to Bioplastic recipes from Fab Lab Barcelona, I found something that was satisfying my passion for purpose. This was when my practise transformed from being Set Design focused to Textile. Biofabrication not only shines a light on nature, it physically proves it’s capabilities, and that is why I love it. Attached below is a collection of textiles that have inspired me the most so far.
- Seed fabric and compostable textile by Apurva Srihari.
- Biocouture Bag by Emma van der Leest
- Fish Skin Leather by Maëlis Bekkouche
- Root textile by Zena Holloway, Rootfull
- Bio-textile by Jaroslava Frajová
MY MOTIVATION FOR FABRICADEMY.¶
I feel extremely honoured to be in a space filled with so many like-minded people from around the wordl. All my previous work within Biobafrication has all been self-taught, online and I have always felt my practise is very different to from the people around me. I am very excited to be taught by all the talented proffesionals and peers within fabricademy, and get hands-on experience with advanced technlogies. My aim is to push my practise and keep on building on it, incorporating a collaboration between nature and technology so they work hand in hand to support eachother for the greater good. I can't wait to see where this path will take me.
PROJECT MANAGEMENT.¶
This is my notebook where I will organise all of my projects. This is an example of how I've used it to organise instructions and markdown codes.
INSPIRATION FOR MY WEBSITE¶
- Cargo Demo Template. Image by Gustav Peichl.
- Cargo Demo Template. Images Joseph Beuys, Root 2 and Fat Chair
- Screenshots from my Personal Website
I initially started taking inspiration from sites I came across on Cargo Templates. I inspected the sites coding but soon realised I was way out of my depth. This led me to look closer at Fabricademy Alumini sites, taking particular inspiration from Riley Cox’s site layout.
I really liked the minimalist, gentle, white style and did lots of experimenting with colours, fonts and layouts. My personal website has always had a black background, so I began to consider adapting this style again, taking inspiration from my personal site to add coherency.
DOCUMENTATION¶
LEARNING HOW TO COMPRESS IMAGES¶
: The first important thing I learnt was how to compress images and insert them so they didn’t take up too much space on my site. I followed the process demonstrated by Claudia and took it step by step.
The main rules I followed were :
- keep width between 600 - 800px
- always make the resolution 72.0000
- save it as a .jpg. as I learnt this keeps the KB lower.
- if still not under or around 100 KB, adjust the quality dial when exporting.
ADDING THE IMAGES USING MARKDOWN¶
: Initially I used the markdown demonstrated within the template to insert images. However, as I tried to align it in the centre it wasn't working. I asked ChatGPT why this wasn't working and it suggested a different technique, using a paragraph in HTML code instead of markdown. This worked and I have now adopted this.
CUSTOMISING MY WEBSITE USING EXTRA.CSS¶
I was pretty happy with the general layout of the material theme, it was primarily stylistic changes I wanted to make. As mentioned prior, I experimented with background colour as well as font styles. As markdown was very new to me, I had everything to learn. I discovered that the majority of stylistic changes were made within mkdocs.ymkl so I played around with google fonts and colours there.
I felt no matter what I did, the coloured text and white background never felt right. This led me to try and find a way to make my mkdocs background black. This would then conform with my artist profile and allow consistency between all of my platforms. When it got to making my background black, the closest I could get using mkdocs.yml was a Slate colour.
palette:
scheme: slate
primary: black
accent: white
I didn't like this because it wasn't tidy and coherent with the background of my images. After researching alternatives, I learnt that within the stylesheets folder, you could add extra.css styles.
This is what chatgpt taught me to do:
/* Force a pure black background */
body,
.md-main,
.md-content,
.md-content__inner,
.md-typeset {
background-color: #000000 !important;
color: #ffffff !important;
}
/* Headings */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
color: #ffffff !important;
}
/* Navigation (sidebar + header) */
.md-nav,
.md-header,
.md-sidebar {
background-color: #000000 !important;
color: #ffffff !important;
}
/* Links */
a,
.md-typeset a {
color: #ffffff !important; /* neon green accent (change if you want) */
}
/* Code blocks */
code, pre {
background-color: #111111 !important;
color: #ffffff !important;
}
You also need to make the configuration file aware of extra styling you have done, so you need to add the following code in your mkdocs.yml file:
extra_css:
- stylesheets/extra.css
This was successful and I was happy with the outcome. From this I also learnt that you can insert any colour by using HTML Colour Codes. Although I decided to stick to pure black and white colours, this is a great piece of information to know for the future.
MY COMMUNICATION WITH CHATGPT¶
CHANGING THE STYLE OF MY ASSIGNMENTS¶
Following my research of fellow Fabricants websites, I decided I really liked the style of Asli Aydın Aksan's↗ grid layout. I copied the HTML code on Asli's page in my index.md file under assignments and adapted it to my folder system. Asli took this from Diane Wakim's site.
<div class="assignments-grid">
<div class="row">
<a href="week01" class="assignment-link" style="background-image: url('../images/week01/week01-title-page.JPG')">
<span>1. STATE OF THE ART</span>
</a>
<a href="week02" class="assignment-link" style="background-image: url('../images/home/tbc-title.jpg')">
<span>2. DIGITAL BODIES</span>
</a>
<a href="week03" class="assignment-link" style="background-image: url('../images/home/tbc-title.jpg')">
<span>3. CIRCULAR FASHION</span>
</a>
</div>
<div class="row">
<a href="week04" class="assignment-link" style="background-image: url('../images/home/tbc-title.jpg')">
<span>4. BIOCHROMES</span>
</a>
<a href="week05" class="assignment-link" style="background-image: url('../images/home/tbc-title.jpg')">
<span>5. E-TEXTILES</span>
</a>
<a href="week06" class="assignment-link" style="background-image: url('../images/home/tbc-title.jpg')">
<span>6. BIOFABRICATION</span>
</a>
</div>
<div class="row">
<a href="week07" class="assignment-link" style="background-image: url('../images/home/tbc-title.jpg')">
<span>7. COMPUTATUIONAL COUTURE</span>
</a>
<a href="week08" class="assignment-link" style="background-image: url('../images/home/tbc-title.jpg')">
<span>8. OPEN SOURCE HARDWARE</span>
</a>
<a href="week09" class="assignment-link" style="background-image: url('../images/home/tbc-title.jpg')">
<span>9. TEXTILE AS SCAFFOLD</span>
</a>
</div>
<div class="row">
<a href="week10" class="assignment-link" style="background-image: url('../images/home/tbc-title.jpg')">
<span>10. WEARABLES</span>
</a>
<a href="week11" class="assignment-link" style="background-image: url('../images/home/tbc-title.jpg')">
<span>11. IMPLICATIONS AND APPLICATIONS</span>
</a>
<a href="week12" class="assignment-link" style="background-image: url('../images/home/tbc-title.jpg')">
<span>12. SOFT ROBOTICS</span>
</a>
</div>
<div class="row">
<a href="week13" class="assignment-link" style="background-image: url('../images/home/tbc-title.jpg')">
<span>13. SKIN ELECTRONICS</span>
</a>
</div>
</div>
Then, I copied the CSS code for the grid and added it to my extra.css file in stylesheet.
/* Assignments page */
.assignments-grid .row{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 1em;
}
.assignment-link{
position: relative;
width: 32%;
background-size: cover;
background-position: center;
min-height: 200px;
}
.assignment-link:hover{
opacity: 0.7;
}
.assignment-link img{
width: 100%;
}
.assignment-link span{
position: absolute;
left: 0;
padding: 6px;
bottom: 0;
width: 100%;
font-weight: bold;
color: white;
background: #12121261;
}
CHANGING TO WIDE VIEW.
Once I had the grid layout changed, I didn't liked the columned style so in order to get rid of the navigation, Johanna Schründer taught me to add the markdown below, to the top of the assignments page. I felt this wide view worked much better, functionally and aesthetically.
---
hide: toc
navigation
---