State of the Art, Project Management and Documentation¶
Process¶
In the first week's global session, we were introduced to the tools we'll use for our documentation: Markdown, Zensical (a website builder) and GitLab. All the boilerplate code was already waiting in our GitLab space, so I cloned it to my computer and started installing the packages I needed.
Installing Zensical¶
Next, I installed the Zensical package using the latest version of Python.
research¶
Once the technical setup was done, I read through the Zensical documentation and some Markdown guides. I made a few changes to the Zensical configuration and CSS files to customize the appearance of my website. I adjusted the colours, fonts, and heading styles to give the site a look that fits my personal style.Then I started thinking about how to introduce myself, and looked for a good photo of me in my national dress. I played around with the theme and tried to bring in a bit of Bhutanese culture, while keeping the design as simple as possible.
Click to show the updated CSS file
:root { /* Main blue */ --md-primary-fg-color: #6FA8C4;
/* Lighter blue */ --md-primary-fg-color--light: #8FC1D8;
/* Darker blue */ --md-primary-fg-color--dark: #4F849F;
/* Very light blue-white background */ --md-primary-bg-color: #F8FCFE; }
body { background-color: #F8FCFE;
/* Very subtle blue atmosphere */ background-image: radial-gradient( ellipse at top, rgba(79, 132, 159, 0.06), transparent 60% ), radial-gradient( ellipse at bottom, rgba(79, 132, 159, 0.04), transparent 60% );
background-attachment: fixed; background-repeat: no-repeat;
/* Main website font */ font-family: "Montserrat", sans-serif;
/* Light font */ font-weight: 300;
/* Main text */ color: #111111; }
.md-content { background-color: transparent; box-shadow: none; border-radius: 0; }
.md-header, .md-tabs { background: linear-gradient( 120deg, #6FA8C4 0%, #5E96B4 100% ); }
/* Header and tab text */ .md-header, .md-header .md-header__title, .md-tabs { color: #ffffff !important; letter-spacing: 0.08em; font-weight: 400; }
/* Website title */ .md-header__title { font-weight: 500; letter-spacing: 0.12em; }
/* ====================================================================== 5. NAVBAR LINKS ====================================================================== */
.md-header a, .md-tabs a, .md-tabs__link { color: #ffffff !important; transition: color 0.25s ease, opacity 0.25s ease; }
/* Navbar hover */ .md-header a:hover, .md-header__button:hover, .md-tabs__link:hover { color: #17384A !important; opacity: 1; }
.md-tabs__link { text-transform: uppercase; font-size: 0.7rem; position: relative; }
/* Animated underline */ .md-tabs__link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0%; height: 2px; background-color: #ffffff; transition: width 0.25s ease; }
/* Hover and active underline */ .md-tabs__link:hover::after, .md-tabs__link--active::after { width: 100%; }
.md-search__input { color: #ffffff !important; letter-spacing: 0.03em; }
/* Search placeholder */ .md-search__input::placeholder { color: rgba(255, 255, 255, 0.85) !important; }
/* Search icon */ .md-search__icon { color: #ffffff !important; }
/* Search button */ .md-search__button { color: #ffffff !important; }
.md-nav__link { transition: color 0.2s ease, background-color 0.2s ease; border-radius: 4px; }
/* Sidebar hover */ .md-nav__link:hover { color: #4F849F !important; background-color: rgba(111, 168, 196, 0.12); }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 { font-weight: 300; text-transform: uppercase; letter-spacing: 0.2em; color: #111111; border-bottom: none; }
/* Main H1 */ .md-typeset h1 { letter-spacing: 0.25em; font-size: 1.8rem; }
/* H2 */ .md-typeset h2 { letter-spacing: 0.2em; font-size: 1.3rem; }
.md-typeset p, .md-typeset li { text-align: justify; letter-spacing: 0.02em; line-height: 2; font-weight: 300; color: #111111; }
.md-typeset a { color: #4F849F; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.25s ease, color 0.25s ease; }
/* Link hover */ .md-typeset a:hover { color: #35677F; border-bottom-color: #4F849F; }
.md-typeset code, .md-typeset pre { font-family: "Montserrat", sans-serif; letter-spacing: normal; text-align: left; }
.md-typeset blockquote { border-left: 3px solid #6FA8C4; background-color: rgba(111, 168, 196, 0.06); }
.md-typeset table:not([class]) th { background-color: #DCEEF7; color: #17384A; }
.md-typeset img { border-radius: 4px; }
Tools used¶
- Image Compressor: to compress my images before uploading them
Thoughts on the final project¶
I have been thinking about how to choose the best topic for my final project. I read a few articles and started drwaing a cloud diagram to organize my ideas. The big question I keep coming back to is: how can I bring technology into textiles? Most of my thoughts are around my national dress, the Gho. I would like to find a way to improve it and blend some tech into it. I'm still at the stage of thinking things through, but I'm slowly getting closer to a clearer idea.
