Skip to content

1. State of the art, project management and documentation

Why is it so important to document all our processes?

For six months, I will be working on many projects, and documenting every step, tool, experiment, and lesson learned allows us to preserve that knowledge and record our progress and setbacks. This will enable me to have a broader and more sustained creative and practical process that I can refer back to later, and in turn, others will be able to consult it, creating bonds and a community of shared knowledge.

Motivation

I have always been interested in the world of textiles and fashion, and I learned about this Fabricademy project at the annual Fabs conference held in Puebla, Mexico, in August 2024. I was captivated by all the projects presented on the catwalk, and it gave me a broader vision of what I could do with digital manufacturing technology and tools, thereby increasing my skills and knowledge to create.

Fab24/reference

References and inspiration

The world of biomaterials has always fascinated me, and I am captivated by how, little by little, haute couture designs are being created with these materials in combination with new digital manufacturing technologies.

Images from Pinterest

One of the projects that captivated me was Eduardo Loreto's final project, Heterotopia, a collection of garments created as a reflection of the process of exploring these materials and applying the techniques seen during his Fabricademy journey. I consider this project to be a great example of a project that brings together everything seen in Fabricademy and complies with the principles of circular economy in the fashion industry.

Heterotopia by EDuardo Loreto

Browsing through the pages of participants in recent editions of this program, the profiles that caught my attention the most were those that had consistency and sequence in the design of their pages and contrasting styles, such as Raúl Babines, who has two contrasting colors, and I also liked that he had images for the title at the beginning of each task. One thing that really caught my attention on other pages such as Neyla Coronel was that they could put their own logo and a blurred header, so I decided that's what I wanted for my page.

References for my page

Research & Ideation

Open Source System for documentation

MARKDOWN

As is well known, in the world of programming, various languages are used, such as HTML and JavaScript, which are the best known and most widely used for web and software development, among other things. Personally, programming is a completely new area for me, so there are other languages that are easier to understand and replicate, such as Markdown, which is what we will use for documentation on our pages. This language is characterized by allowing content to be created in a simpler way to write, while also maintaining a readable design with plain text. To understand a little more about Markdown syntax, I consulted this Basic guide to code in MarkDown and learned the basic things such as adding formats such as bold, italics, or links.

This is an example for bold and italic text

**BOLD**
*ITALIC*

This is an example of text for headings

 ## TITLE
 ### SUBTITLE

This is an example of text that introduces a generic list of items:

- Item 1
- Item 2
- Item 3

This is an example of text that introduces a numbered list:

1. Item 1
2. Item 2
3. Item 3

This is an example of a table

|Title|Title|Title|Title|
|:-----------------|:---------------:| ---------------:| ---------------:|
|Text align left|Text align center|Text align center|Text align right|

GITLAB

To document course activities, it is necessary to use GitLab, an open-source Git repository platform that helps store project databases and code in a centralized location, making it easier and more practical to track. It is a practical platform for web development projects. Being open source, it allows us to directly modify the code to change the characteristics of this platform or integrate it with internal services that are incompatible by default. This will help us customize and adapt our pages to what we want to communicate with our footprint.

Main GitLab profile

MATTERMOST

Mattermost will be fabricademy's central communication platform. As an international program, it will allow us to stay connected across the entire network, fostering a space for collaboration and community support among students, instructors, and mentors.

Main Mattermost view

NUEVAL ACADEMANY

NueVal will be the central platform where instructors evaluate the progress and management of the assignments of program participants.

Main evaluation portal

TOOLS

Documentation Workflow

To start with the documentation it is important to know the GitLab platform and the menu, i was able to navigate over the functions and folders to upload images and files.

Once I learned a little more about GitLab, I opened the "Web IDE" part to start to document

Once you push "commit" you can see the changes you made in the part bellow commit, and the changes appear in a differente color.

Also, you can have a preview of the page, this can help to see in a more real view the information and content you add.

Step by Step

To start my page, I decided to edit first the index with my info and all related with personal and professional info, I reduce the size of most of the pictures with TinyPNG

How to add an image

![](../images/folder_name/file_name){ width=300 align=left }

How to add a gradient header

Open the "stylesheets" tab and then open the # extra.css and add this next code with the RGB code that you want for your page.

/** Add your extra/custom CSS classes below */
.md-header {
    background: linear-gradient(to right, rgb(90, 123, 138), rgb(235, 155, 170));
}

.md-header .md-title, 
.md-header .md-nav__link { 
    color: white;
}

and don´t forget to add this next line to the mkdocs.yml tab

extra_css:
  - stylesheets/extra.css

icon:
  # Read about icons at https://squidfunk.github.io/mkdocs-material/setup/changing-the-logo-and-icons/
  logo: images/week01/logo_white.png
  repo: material/gitlab
features:
  - navigation.tabs
  - navigation.footer
logo: images/week01/logo_white.png
favicon: images/week01/logo_white.png

How to upload Youtube videos

Always use the Embed code that you can find in the share options, and just copy and paste