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

This week was an introduction to the six months journey ahead and to our documentation site (this one ;)).
On this page I will give you a sneak peek on my research and inspiration for my final project. I will also walk you through the steps I took to build my documentation site.

Let's begin...

First, Project Management¶

Research and Inspiration¶

Muqarnas is a three-dimensional form whose visual function is the gradual transition between two levels, two sizes, two shapes, and two spaces. It is one of the most original inventions of Islamic architecture and continued to evolve over one thousand years. It adorned major buildings from the Alhambra in the west to Samarkanad in the east.
Muqarnas is an ornamental structure meaning it had both structural & aesthetical features. It can either be carved into the structure of a wall and ceiling, or it can be added on and hung purely as a decorative surface.
Muqarnas was ignored gradually starting from the 18th century onward, but before that, it portrayed a complex process of evolution throughout time.
The complexity of the Muqarnas lies in two essential factors; the first being the variety of the units / modules used. Secondly, the algorithms that govern the curves the muqarnas sits on.

Project¶

A methodology of reinterpting and developing the traditional muqarnas form to accomodate the modernity of our times and the latest technologies, to design for shade and shadow and for the experience. The project proposes the design of a pavilion that will serve as a shaded area for bus stops using the ideas behind the historical muqarnas only developing them to provide a new identity using natural materials, taking into consideration the sustainable needs of Jordan and manipulating light and shadow to create memorable experiences. The ideas behind this proposal could also be applied on a smaller scale (i.g. furniture pieces, or acustical units).

Why?¶

The need to redefine public places in Jordan to be meaningful and interactive.
Reconnecting with our roots and an open invitation to every artist, designer to rethink past accomplishments and take them one step furhter.
Creating meaningful experiences through Shade and Shadow Manipulation.

How?¶

Using different materials with different properties for the modules each repeated along a shape using the algothrims used to produce Muqarnas.
These materials will vary in apperance, method of production, and opacity, producing a minimal yet sophisticated form. (Pictures below are examples of materials that could be used).

More on Muqarnas:¶

Ahmed, O.M. Analytical Study of Muqarnas Formations in Islamic Architecture According to Digital Simulation.
Tabaa, Y. The Muqarnas Dome: Its Origin And Meaning
Yaghan, M.A. Self-Supporting “Genuine” Muqarnas Units. Architectural Science Review, 48(3), pp.245-55.
Yaghan, M.A., 2001a. The Muqarnas Pre-Designed Erecting Units: Analysis, Definition of the Generic Set of Units, and a System of Unit-Creation as a New Evolutionary Step. Architectural Science Review, 44, pp.296-318.

Second, Documentation¶

This site is built using GitLab and Markdown language, let me show you how I made mine.

GitLab¶

GitLab is like Github but it's open source and free for public projects. Also, it provides built-in continuous integration, we'll discuss it further later on.
More about GitLab on their official website

Markdown¶

Markdown is a markup language that you use to define the different parts of a document, such as the header, body, picture,...,etc.

Markdown Basics¶

Text & Paragraphs¶

In the table below some basic paragraph formats

Shortcut	Effect
`*`	Italic
`**`	Bold
`#`	Header

Freebies!

To create an indentation at the begining of a paragraph I used the following HTML notation  . (nbsp stands for non-breaking space in case you are curious :P).
There are 6 different headers varying in height.
Of course you can always mix two styles at the same time, you just need to be pay attention to the order bold & italic.

A decent Markdown tutorial here

Customization¶

Styles¶

Rather than using ready HTML templates I stuck with the one provided but I did customize the color palette using CSS. (See the code below)
You can access the CSS file from the stylesheets folder.

[data-md-color-scheme="shahdfarran"] {
  --md-primary-fg-color:        #9fa179;
  --md-primary-fg-color--light: #f4f5f0;
  --md-primary-fg-color--dark:  #90030C;
}

Working Offline¶

I wanted to work locally on my laptop rather than online and here's how I did it:
- First, I downloaded git from here.
- I cloned the repository with SSH Key.

I created a folder on my computer and inside the folder I right-clicked and chose "git bash here"

Then in the git command I typed " git clone " and then pasted the SSH key cloned earlier.

Voila! I can work locally now!

But how?¶

I used visual studio to edit the markdown and .yml files. You can download Visual Studio here

about editing the .yml file

.yml is not as tolerant and forgiving as markdown, meaning that any slight change in indentation can render the file invaild. So, be careful when you edit it.
Also, use an online validator before commiting any changes to the .yml file. This website was a life savor.

Uploading to the remote repo¶

Here's how you can push everything to the cloud repository when you're done editing:
- Right-mouse click inside the local folder and choose " git bash here"
- Then type " git add . " to upload all of the changes. - Then type "add commit -m (type in your comment) "
- Then type " git push"
And that's it, your files are being uploaded!

summary of how to push to the repository

Something went wrong? no problem

You can also use the command " git status " in the git command to double-check things are going okay or to understand the errors, if any, and fix them.

Last update: 2022-09-27