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, it is a beginner friendly platform for graphic design! it's my go to platform when I want to create a photo collage or a quick design!

what makes it so great that you can choose the file type and the photo's size! so you won't have to worry about reducing the images sizes later on!

I also used canva to create a GIF,the coding process was similar to the image uploading

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

an alternate way to insert GIFs without consuming so much storage is by using GIPFY

you can have all the GIFs saved in the platform! and the process is super easy and straightforward! you only copy and paste the code into VScode!

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>