01. State of the Art¶

Week 01 | Our first week consisted of beginning to develop our website page on GitLab, learning how to use Markdown and thinking about what direction our final project was going to go in.

• • •

Introduction¶

Assignment

- Build a documentation website describing yourself and your motivation for the textile-academy, including your previous work

- Upload the documentation to your project page on class.textile-academy.org

- Add references and research based on the topic of your interest

- Learn how to upload images, videos, references and how to use markdown and gitlab

- EXTRA POINT Customize your website and document how you did it

- Create your personal webpage on Gitlab and add your portfolio, interests and project ideas at your landing page

I am not completely new to coding as I learnt Python and C++ during my undergraduate degree however, GitLab and HTML are platforms I haven't used yet. So far I've found them pretty simple and satisfying to learn. I aim to create a website which is clean and bright, interactive, crafty and personal with colourful elements showing my creative processes. I also hope to learn how to input an HTML template into GitLab to design my own version of the layout.

Inspiration¶

Previous Fabricademy Alumni websites that I like the look of because of their originality, style and documentation process!

Louise Massacrier | Elsa Gill | Eireen Hayhow - personal website | Silvia Llugo

Once I have got to grips with this software, in the long term I would love to create a 3D interactive website which engages the user to be playful and explore my work.

Such like: Chrono Threads | Frost | Noomo Labs

Tools Used¶

Here are some links to sites that helped me complete this week!

GitLab¶

I decided on a structure which I wanted to achieve in each assignment to keep the page neat and consistent.

Introduction
Inspiration
Tools Used
Research
Overview and Results

• • •

Customising My Site¶

I first began by editing the mkdocs.yml file and played around with colours and fonts. The document here is useful. I chose the font 'Play' which is readily available on Google Fonts. I also started playing around with the 'logo and icons' section and for the moment have chosen an icon which is available on github called 'earth' while I create my own. Using an online drawing and note taking software called 'Good Notes', I drew out some mindmaps and compressed them using TinyPNG so that they would be the right size for this document. Rasterizing these photos though did not work as they removed the colour and made them quite blotchy.

gitlab

I also added some funky little emojis from Emoji Combos ⍤⃝

✷ 　　　　 · 　 ˚ * . 　　　 *　　 * ⋆ 　 . · 　　 ⋆ 　　　 ˚ ˚ 　　 ✦ 　 ⋆ · 　 * 　　　　 ⋆ ✧　　 · 　 ✧　✵ 　 · ✵

And finally, Neyla helped me customise my header bar to have a gradient colour and specific text colours :)

.md-header {
  background: linear-gradient(to right, rgb(179, 237, 241), rgb(65, 195, 218), rgb(4, 115, 129));
}

.md-header .md-title,
.md-header .md-nav__link {
  color:black;

}

.md-title {
  color:black;
}

.md-tabs {
  background-color:ghostwhite ;
  color:black;
}

• • •

Skills For The Coming Weeks¶

When designing my site I found the Markdown Guide helpful for basic code editing. It helped me learn how to do the following in preparation for the weeks ahead:

Call a piece of code from the editor to the script using backticks (`) or double backticks (``) before and after your code. For larger chunks of code use triple backticks (```)

_{→ this snippet creates subscript text and a right arrow. ^[1]}

Change the colour of my text ^[2]
Create tables for when I do experiments

_{→ Use ^[3] which makes creating the tables less tedious. Copy the generated table into your code.}

_{→ Use ^[4] to separate paragraphs within a table cell.}

I also realised when I tried to render this list each number was 1 instead of 1, 2, 3, etc, the solution is available here ^[5] .

_{→ Markdown automatically adds the list numbers, you don't have to include them in your text. Also make sure you are indenting correctly!}

Create a dropdown bar such as 'Assignment' at the top of this page ^[6]

• • •

TIP!

Adding information like this is good to break sections and highlight important points!

??? tip "TIP!"

For some reason when generating this list the source code example and link for each point did not render so I have added them below.

^[1]  → this snippet creates subscript text and a right arrow. 

^[2]  [your text] 

^[3] Markdown Tables Generator

^[4]  

^[5] Markdown List Cheat Sheet

^[6]

<details>
<summary>Assignment</summary>
<!--All you need is a blank line-->

    - Your note 

</details>