1. State of the art, project management and documentation¶

goals of the week & contents¶

Build a website that documents my background, motivation for the program, and previous work.
Include references and research related to my interests.
Learn to upload images, videos, and references, and how to use Markdown and GitLab.
Document the process.

During our initial week, we were provided with tutorials emphasizing the art of crafting our documentation and imbuing it with our unique essence. These tutorials introduced us to a diverse array of tools and platforms that help us to transform our website into a true reflection of our individuality.

Mattermost: a chat platform to communicate with each other locally and globally.
NuEval: this is where we receive feedback after our work is self-evaluated, and evaluated by our local and global instructors.
FabLabs.io: main platform, that holds all the resources of the fab lab, including the handbook and a list of all members and former participants.
GitLab & Markdown: is an open-source service that hosts our documentation websites. We can publish and build our sites through this platform with Markdown, a simpler coding language.

Websites of previous participants that were informative and inspiring:

curent inspiration & references¶

textile and material search¶

VACSOM, jewellery made from upcycled materials
PRADA FW24
PRADA FW24
FW24 LÙCHEN upcycled former plastic garment protectors.
CÉLINE BRETON hand knitwear studio
SIMONE ROCHA
IVAN HUNGA GARCIA biotic leather
PRADA SS25
WRETCHED FLOWERS beaded chainmail tapestry
VICTOR CLAVELLY
FREDDY COOMES flocked scarf and flocked coat
SHAINA BELCOURT molded raw edge leather
FABRICS & FABRICS geometric guipure lace
TRINE NIELSEN laser cutting
LOIS WALL hand painted glass

art(ists) I love¶

JEFF COWEN.

jeffcowen

Jeff Cowen is a contemporary American photographer known for his painterly and abstract approach to photography. His work blends influences from painting, sculpture, and street photography, and innovative manipulation of photographic prints. He manipulates this prints with techniques like tearing, bleaching, or painting over them. The way he manipulates his photos, make them feel more like paintings or collages, is really distinctive.

I believe the uniqueness of his work lies in its raw, imperfect nature and timeless. I am interested in adapting his techniques for sustainable textile printing.

Even his early work, with unaltered photography, was fantastic! His photos are captured with an extraordinary technique.

All images are from Jeff Cowen Oficial Website.

"Photography is not about capturing what we see, but about transforming reality into something more reflective of our inner world. Every photograph is a painting waiting to be discovered. - Jeff Cowen"

SZILVESZTER MAKÓ.

mako

Szilveszter Makó is a contemporary artist and photographer. His work blends elements of photography with conceptual art, allowing him to create pieces that invite viewers to engage with his world.

His photography feels like a deep dive into the human experience. What I love about his work is how he blurs the lines between reality and artifice. He make us question not just what we see, but what it means to us personally.

He does an amazing work in exploring cultural and personal identity. He studies how our backgrounds and experiences shape who we are, using visual storytelling.

All images are from Szilveszter Makó Instagram.

I also recommend you to watch HERO 24: Our God of Sorrows.

VIVIENNE WESTWOOD.

Vivienne

Vivienne Westwood is one of the fashion designers I admire the most. She created wearable art that challenges norms and pushes boundaries. Her work is all about combining punk aesthetics, which I love, with high fashion.

She was also an activist. Her collections always reflected, and still do, her strong beliefs in environmentalism and social justice. So each piece is supporting a cause. Coming from the punk era, she aimed to enable people to stand out and express their individuality through her fashion.

I especially admire her earlier collections, where she would present theatrical shows as runways and the most beautiful scenarios and music. These are some of the boxes I'd like to check as a fashion designer, especially in our time.

Even before that, I was obsessed with the Sex Pistols' era when Vivienne had her store, SEX, and dressed the band. There's something about punk that has always made me feel a fearless in spirit. It's all about expressing individuality most unapologetically.

image references: 1 | 2 | 3 | 4 | 5 | 6

"Buy less, choose well, make it last." - Vivienne Westood"

SS 1994 "Café Society", Vivienne Westwood

ANNAELLE REUDINK, Master student at Royal Academy of Fine Arts Antwerp. Mix of bold patterns and colors.
JEWELLERY
KIAN GHASSEMI, 3d sculpting and ceramics.
PETER BANKOV, graphic design and posters.
FRANK CONNET, tapestry, weaving and textiles.
ART NOUVEAU, human-insect metamorphosis.
XI SCORPII, intersection between textiles and technology.
ANNE-LAURE DJABALLAH, abstract art.
EMMA LARSSON, flowers motifs.
TARTAN, from Vivienne Westwood. Tradicional prints.
PAULA VAN DYCK, Master student at Royal Academy of Fine Arts Antwerp. 3d printing.

documentation workflow¶

plan

cheat code sheet¶

To change the font-size of a specific phrase/titles:                    To keep a text bold and aligned at the same time: <p align=right><b>Text</b></p>
<h1 style=“font-size=10px;”>Text</h1>

To underline text:                      To highlight (and change color) text:
<u>Text</u>                             <mark style="background-color: #e7ff90;">Text</mark>

To make it italic:      
<em>Text</em>

To make comments/ notes on Gitlab without showing on your website:
<!-- Text -->

For captions:
<p style="text-align: right;">
<font size=1>
TEXT
</font>
</p>

Images:
![](images/text.jpg){ width=150 align:right }

Change Favicon and Logo:
- Start by uploading a square image with transparent background (or not).
- Change at mkdocs.yml:
theme:
favicon: images/logo2.png
theme:
logo: images/logo2.png

Two images side-by-side
![](../images/home.jpg){ width=300 align=left }
![](../images/home.jpg){ width=300 align=right }

Brainstorming ideas for website customization.

This wasn't my first time creating a website, but it was my first time using a coding language. I didn't expect to enjoy it as much as I did. It's a complex process, but once you start understanding and experimenting with it, you don't lose your mind that easily :D.

I will share some advice that I think is important for everyone and future me.

It's essential to start by organizing all your images in different folders, and also resize and optimize them, I used Photoshop for that. You should aim to use only 25MB per assignment!
Once you start building your website, it is important to always write a message when you Commit. Doing so is crucial because if your commit fails, it will be difficult to find what went wrong.
Always be meticulous, if you put a tab, a space, a hashtag (literally anything) where you shouldn’t, the commit will fail, and sometimes it's time-consuming to look for these tiny mistakes.
I also advise you to write your texts on a different app first, and then bring them to GitLab. I normally use Pages, you can use Microsoft Word, Notes on your phone, or even hand write it.
You should create a plan for how you want your website to look, sketch it out, make a layout, write it down, or use whatever method you prefer, but it's better to have something to follow.
Try different things and search for HTML codes or CSS styles on the internet. Even your issues can be resolved with a quick online search.
Create moodboards, or use platforms like Pages or Canva to make panels with images you want to share. It's easier to upload images that way than uploading images individually, and you can control better the amount of storage space you're using.
The final piece of advice is to have fun with it. Remember that you can change anything you want, whenever you want! And to always share your knowledge with others. The more details you give, the better! <3

tools¶

adding media¶

adding a video on youtube. Search for the youtube video you want to upload. Press Share> Press Embed> Copy and paste the link into this code and adjust it to your taste:
```
<iframe width="560" height="315" src="EMBED LINK" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
```

adding a video on vimeo. Upload a video> Press Share> Press Copy embed code> Paste the link into this code and ajdust it to your taste:

Note: If you want to add a video from other person, it's the same process. You will find a share and a embed option.

<iframe src="EMBED LINK" width="640" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

adding a gif. For making gifs i use Ezgif. (You can also use Photoshop). Press on Gif Maker> Upload Files (max. total size 200MB)> If needed, resize, optimize and change the delay> Press Make a Gif!> Save it> Upload it to Gitlab> Use this code (same as image):
```
![gifpersonal](./images/home/personal.gif){ width=300 align=left }
```

adding a Google Slide from Google Drive. Start by making a pdf with whatever you want to share. Upload it to Google Drive> Press the three dots> Press Share> Press Get Link> Paste the link to Iframely, so that you can get your embed link. Copy and paste it into this code and ajdust it to your taste:

Note: Don't forget to make the file on Google Drive public!

    <iframe src="EMBED LINK" width="500" height="380" allow="autoplay"></iframe>

tricks¶

trick or treat!!

If you really want to take the h1 "HOME" on your homepage. Start by changing the title to something else, example: "ABOUT ME". Use the font-size code to make it disappear by changing its size to 0px:

<h1 style= "font-size=0px;">About Me</h1>

To center an image I used a CSS class, so go to stylesheets> #extra.css> write this code:

    .centerImage {
        margin: 0 auto;
    }

Now just copy this before and after your image:

<figure markdown class="centerImage">
![](../images/week01/stars.png)
</figure>

If you desire to change your headings font-style. Start by going to Google Fonts and choose the font you like the most> Press Get Font> Press Get embed code> Select the @import option> Extract this section and paste it to #extra.css:

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@500&family=Red+Hat+Display:ital,wght@0,600;1,600&display=swap');

Do the same thing with the CSS class, sometimes fonts have more than one option (normal, bold, thin, etc), copy the one you want:

h1 {
    font-family: "Noto Sans Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

Now you can also play with colors, just add this to the CSS class:

color: darkblue;

If you upload a video from vimeo this how you can resize it. Open the video on vimeo> Press the share icon> Press Embed> Press Costumize> Press Set custom dimensions> Choose the dimensions you want and copy the embed link> Do the process I show on "adding a video on vimeo".
To change your text font-size, excluding the headings, copy this CSS class to #extra.css:

.md-typeset {
    font-size: .7rem;
}

stars