Skip to content

1. State of the art, project management and documentation

I. The Start of Fabricademy

The first week at Fabricademy was an interesting start, a mix of introductions and overwhelming emotions. I got an overview of the program structure and what to expect in the coming weeks, followed by a tour around the makerspace where I explored some of the machines and digital fabrication tools. I also began learning how to use Markdown for programming and documentation, understanding how important it is to keep track of every step in the creative process with the journey ahead.

II. Inspiration and Research

Architecture and fashion are intimately connected in many ways, both having sprung from the same point in history. Theorist Gottfried Semper believed that they originated from the same human impulses, his theory of Bekleidung describes how creative arts that emerged from basic needs such as shelter, clothing, or food are all linked through craft. Early nomadic tribes lived in tents made of cloth or animal furs, the same materials used for clothing, making The Weaver both builder and tailor. Semper also noted that in German, the word DIE WAND (the visible part of the wall) and GE WAND (the garment) share the same linguistic roots, both tied to the idea of covering.

Architects like Frank Lloyd Wright later expanded on these ideas, designing dresses to complement his homes and describing architecture itself as a kind of weaving, where materials behave like cloth using this in most of his architectural work.

Just as in Semper’s time, Architecture and Fashion continue to evolve through politics, society, and technology. Movements such as Art Nouveau and Bauhaus show how ideas move freely between both fields, from organic forms to industrial functionality, while Modernism and Brutalism sought structural honesty, and Postmodernism revived color, play, and ornamentation.

I see this ongoing exchange as a major source of inspiration for how my project will grow. In our time, modularity, in architecture and in fashion, plays a defining role, and I aim to explore it across both garment and building unit scales.

A video I found really inspiring explaining further the correlation between Fashion and Architecture:

III. Documentation and Website Personalization Workflow

After being introduced to coding with Markdown, I was tasked with documenting each week's assignment using Markdown as the main language in addition to html, css and yml. The first week unfolded as follows:

I. Starting with Gitlab

II. Coding Languages Introduction

In the first week we got a brief introduction to coding languages and we learnt some basics as follows:

1. Markdown

Markdown was hands down my first rodeo in the world of coding, but it was rather smooth and got me to slowly understand and incorporate the use of other languages in my documentation such as html for adding additional features and css for styling. There where many references for Markdown such as Markdown Cheat Sheet and Markdown Guide.

Markdown Basics: Headers

H1 = # H1

H2 = ## H2

H3 = ### H3

H4 = #### H4

H5 = ##### H5
H6 = ###### H6
Markdown Basics: Emphasis

Italics, with *asterisks* or _underscores_

Strong emphasis, aka bold, with **asterisks** or __underscores__

Combined emphasis with **asterisks and _underscores_**

Strikethrough uses two tildes ~~Scratch this.~~

Markdown Basics: Add an Image

Add existing image in the repository: ![Name of the image](./Directrory/Directory/image.jpg)

Add clickable image: [![Title](Image Directory inside Repository)](link Path)

Add image from the internet: [Title](Path)

2. HTML

Html could be used to add the same features that could be added with Markdown or different. A good reference we've been adviced to use for html is W3 Schools.

Html Basics: How to add line or space?

To add line: <hr>

To add space: <br>

3. CSS

CSS is a language used for styling web pages, W3 Schools is also concidered a good reference for learning it.

4. YMl

MkDocs is a fast static site generator that's geared towards building project documentation. Documentation source files are written in Markdown, and configured with a single YAML configuration file customizing your theme and/or installing some plugins. Modifying Markdown's behavior with Markdown extensions. Many configuration options are available. MK Docs to learn more.

III. Website Personalization Steps

Step 1: Structuring out the content for Homepage and Week 1

I started with a schematic sketch for what I planned to do.

Step 2: Online to Offline

Stepping from online to offline coding was a significant shift that truly streamlined my workflow. The steps from online to offline goes as follows:

How to copy from repository
  1. Go to your Fabricademy GitLab repository online.
  2. Click Clone → Copy the HTTPS link (e.g. https://gitlab.fabcloud.org/...).

  • Clone it to your computer
How to Clone to Computer
  1. Open a folder where you want your project to live (e.g. "Documents/Fabricademy")
  2. Right-click inside the folder → "Git Bash Here" (or open Terminal)
  3. Run: git clone https://gitlab.fabcloud.org/your-repo-link.git
  • Open it with VS Code
Open with VS Code Process
  1. Go into the folder that was downloaded
  2. Right click → Open with VS Code
  3. Or from terminal: code your-repo-folder
  • Edit the website offline
Step 3: Start from Scratch

I saved a copy of the original code in a text note as a backup in case I needed to refer to it later, then removed it from the code page to start clean and adding my content accordingly.

Step 4: Arrange Images with Illustrator

I use illustrator to arrange my images, uploading multiple images within one.

Image Setups

Image output: JPEG, 170 ppi (for multiple images arrangement)

Screen Width for image arrangement: 800px

Step 5: Change the Banner Color

The primary color is used for the header, the sidebar, text links and several other components. In order to change the primary color, set the following value in mkdocs.yml to a valid color name:

Step 6: Change the Font

The regular font is used for all body copy, headlines, and essentially everything that does not need to be monospaced. It can be set to any valid Google Font you might find suitable via mkdocs.yml:

Step 7: Change the Logo and Favicon

IV. Additional Features

1. Poleroid Pictures

The html code below brings the poleroid images to life.

Make sure you include the below css style in the stylesheet to give it class

2. Portfolio Embedded

How to embed a PDF in the Webpage
  1. Upload the Pdf on google drive.
  2. Get the Embed Link from Google Drive
  3. Embed it in Markdown using HTML <iframe src="https://drive.google.com/file/d/1AbCDeFGhijKLMNOPqrstuVWxyz/preview" width="100%" height="600"> </iframe>

V. Tools