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

Introduction¶

Hi, I’m Ola! I’m a fashion designer based in Amman, Jordan, and the founder of Ash Studio, a brand specializing in slow fashion and tailored power suits for women. I’ve always been passionate about creating designs that celebrate body diversity and individuality, drawing inspiration from the world around me—especially architecture and the city life that never sleeps.

visit Ash Studio's website, and follow us on Instagram!

Research & Ideation¶

Steps to Start the Website¶

Cloning the Website

First, I cloned the website repository from Gitlab I copied the URL in HTTPS form from the repository.

Downloaded and installed Gitlab on my laptop, created a folder for the website on my desktop, and Opened Git Bash and navigated to the newly created folder.

Ran the following command to clone the website:

Configuring the Environment

Installed Visual Studio Code on my laptop and opened the cloned website project in Visual Studio Code

Started experimenting with the code by adding images, text, and other customizations.

Customizing the Website with MKDocs Customized the website further using MKDocs, where I changed the color and font of the website: Edited the > mkdocs.yml file to change the theme colors and fonts.

Example of theme customization:

The Primary color: Black

Text: Quicksand

Created a GIF

I created most of my visuals through CANVA. I also used canva to create a GIF,the coding process was similar to the image uploading

![Alt Text](path/to/gif.gif)

Aligning Images and Text To place an image on the right with text on the left, I used a flexbox approach in HTML:

<div style="display: flex; align-items: center; justify-content: space-between;">
  <p>Text on the left side.</p>
  <figure>
    <img src="path/to/image.jpg" alt="Alt Text" style="width: 400px;">
    <figcaption>Image Caption</figcaption>
  </figure>
</div>

Alternatively, I also tried floating the image to the right:

<img src="path/to/image.jpg" alt="Alt Text" style="float: right; width: 400px;">
<p>Text on the left side...</p>

Added Captions to Images

<figure style="text-align: center;">
  <img src="./images/home/tatreez.png" alt="Jazz Image" style="width:500px;">
  <figcaption>Palestinian Embroidery</figcaption>
</figure>