Week 1: Principles, Practices & Project Management

What i have learnt?

This week, i learnt how to document assignments with Gitlab, VS code, practiced basic coding with html and css, started ideating for final project. I also realised need to work on structuring and my time management. As i started with blank canvas now it has few strokes of learning, doing, iterating.

Final Project Conceptualizing

Design for rest and relaxation

Are you someone who usually falls asleep on bus or car rides?
That gentle rocking, the low engine vibration, the continuous movement inducing sleep in you, these motion stimulates parasympathetic nerves which is responsible for rest and digest. A rocking-chair-inspired furniture system that integrates engine-like micro-vibrations and slow motion. Designed either as a standalone sleep pod or as an attachable module for existing office chairs, for quality rest and sleep time.

FUN FACT: the Hong Kong Sleeping Bus Tour — a five-hour bus ride created with one simple purpose: to help people sleep. Passengers are given: eye masks, earplugs, comfortable reclining seats, a long, quiet, scenic route with minimal interruptions.

Puppet show

The project focuses on bringing back the essence of storytelling through a puppet show experience. The device comes with ready-made stories that can be played using story cards. At the same time, it allows users to create their own stories using the provided characters and elements.

The stage is built in layers, with the background arranged in multiple levels to create depth. This layered setup makes the storytelling experience more immersive and lively.

Users can also record their own voice and save their stories, making the experience personal and creative. The idea is not just to give people something to watch, but to provide a platform to become storytellers — encouraging imagination, creativity, and bonding across generations.

Pocket Power

This idea is to create a small, portable emergency charger that can store power and generate a small amount of electricity using renewable sources like a hand crank, small solar panel, or energy from simple physical activities. It can be useful not only during floods or cyclones when electricity is unavailable, but also while camping or staying outdoors. The device would help people charge their phones anytime, ensuring they stay connected and safe in emergency or remote situations.

1

Installing GIT

I've windows, downloaded the windows version. Download and run the installer.Click "Next" to accept the recommended settings.This will install Git and Git Bash.

2

GIT Bash

After installing Git, you can find Git Bash in your Start menu.
You can use Git Bash just like the Command Prompt.

3

Gitlab login

Gitlab login: use fablab account and login there, in "Projects" you can find your repository.
Remote repository is a version of your project hosted on the internet.

Next we need to securely connect your computer to GitLab using SSH.

SSH Key Generation

1

SSH key

Used for authentication, way to securely connect to local computers.

Public key(like a lock) and a Private key(like your own key). Only someone with the private key can access what is locked by public key.

Share the public key with the server, but keep the private key safe on your computer.

2

For creating ssh key:

$ ssh-keygen -t ed25519 -C "[email]"

3

For adding the public key:

for adding the generated key go to gitlab profile >> preference>> ssh key then paste generated public key on clipboard and fill rest. Once done, it will be looking like this:

Cloning Repository

1

Git Cloning

Means downloading full copy of a global repository into your local computer.

Now you can use this repository and make changes in codes and later push this modified file to server.

2

Clone with ssh

home>> project>> member - you can see your repo >> from their blue bottom named “code”

Click on the code and copy clone with ssh url

3

command

git clone [Paste the copied URL]

A zip file of global repository copy will be downloaded in your computer.

How to configure Git?

1. $ git config --global user.name "[username]"

2. $ git config --global user.email "[email]"

Linking Students Agreement with my fablab website

Open students agreement(/students.md) in VS code, read and sign them with your name. Also make sure the file type is MD file (or .markdown file) format. Afterwards link it with website and add it to footer section using anchor tag:

 <a href="students.md> 

For updating the changes made in VS code into the gitlab:

git add .

Add all new modified files to index (staging area). The staging area is like a waiting room for your changes.

git commit -m 
“message”

Records snapshot of the staged changes into the repository history with a message. Message should describe what you did.

git push

uploads your local commits to a global repository.

Website development and Designing(HTML, CSS)

As each student is provided with basic website for documentation purpose with a possibility of endless stuffs to create based on their own creativity and knowledge.

I used the w3 school as main resourse to learn html and css, later on used figma for designing and ideating UI of “about me “ page, further used reference images of table of contents layout from pinterest and uploaded it on ai tools and prompted to make html and css code (to learn how it can be coded using html and css). From that information, used the html tags and attributes, css styling, iterated it accordingly for my UI layout requirements.

About Me:

I used Figma to design the hero section of my “About Me” page. The background illustration was originally created in Photoshop. I had used a cracked version earlier, so I can no longer open the original file. Luckily, I had already saved each layer of the sketch as separate PNG files.

The illustration was initially made for my academic portfolio's landing page back then, but now I decided to reuse it here. I imported the saved PNG layers into Figma, arranged them properly, and added my photo.

Using Figma's Draw (Brush) tool, I wrote the text in my own handwriting to give it a more personal and expressive feel. After finalizing the design, I exported it as a PNG file and added it to my website using the <img> tag in my HTML code.

Index:

I didn't want my index page to be just a simple list of links to weekly assignments. I wanted it to feel more creative and interactive, like puzzle pieces or press-fit boxes arranged randomly and layered over each other.

First, I sketched the idea in my sketchbook to explore and ideate the layout. Then I designed the index page in Figma. I used the brush tool to give it a handmade look and added text using the fonts Rachelya, Satoshi, and Pistacho.

I have finished designing the index page and exported in svg fromat from figma, and I plan to implement it on my website using the <svg> </svg>tag, but I haven't done that yet.

Navbar:

Navbar Hover State:

                
            <div class="navbar">
              <div class="navbar-inner">
                <a href="../index.html">Weekly Assignments</a>
                <a href="../final-project.html">Final Project</a>
                <a href="../about.html">About me</a>
              </div>
            </div>
                
              

            .navbar {
                font-family:Rachelya;
                width: 100%;
                border-radius: 2px;
                position: fixed;
                z-index: 10;
                top: 0;
                background-color: #ffffff;
              }

              .navbar-inner {
                max-width: 1280px;
                margin: 0 auto;
                padding: 10px 30px;
              }

              .navbar a {
                color: #6211e4;
                display: inline-block;
                font-size: 15px;
                padding: 10px;
                text-decoration: none;
              }

              .navbar a:hover {
                color: #f4ec13;
              }

              

  <div> 

  <li> 

  <p> 

  <pre> 

  <header> 

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);}
            

display: grid;
grid-template-columns:250px 1fr;
            

Other tool used

flameshot

Used for taking screenshot + simultaneously you can edit with many built-in feauture.

for instance, you can add an arrow mark, highlight text, blur a section, draw rectangle and many more.

SQUOOSH

Used to compress the image file size.

Reference