Skip to content

Week 1: Principles and Practices, Project Management

In this section you will find:

> How I created the Website 
> About Git and Gitlab
> My Final Project Idea (Proposal)

Assignment

- Work through a Git tutorial
- Create a website and document how I did it
- Plan and sketch a potential final project

Timetable for the week

Timetable

Link to my schedule

Creating my Website!

To build my website I will be using mkdocs, a static site generator. The site's source files will be written in Markdown and configured using a single YAML configuration file.

Why MkDocs?

I chose MkDocs because: - Write documentation in simple Markdown - Automatic conversion to HTML - Easy to maintain and update - Clean, professional look with Material theme

Installing MkDocs on Windows PC

We first need to make sure that we have the latest version of Python installed. As of January 2026, the latest stable version is Python 3.14.2.

image

When installing, make sure to check the box that says "Add Python to PATH" before clicking Install Now! This is crucial - if you forget this, Python commands won't work in your command prompt.

image

Install MkDocs and Plugins

Now that Python is installed, let's install MkDocs. To install mkdocs and other plugins open your Command prompt and enter the following commands and press enter. - pip install mkdocs - pip install mkdocs-material - pip install mkdocs-git-revision-date-localized-plugin

image

Yayy! we have installed mkdocs with required plugins to our document, now let's download Git.

### What is Git? Git is a version control system (VCS), which you can think of as a "time machine" for your project files. It is a free, open-source tool that helps you save and manage different versions of your code and other files on your computer. Here is the link to how I learned about Git.

Here is the link to download Git

image

After that we need to Configure Git. Configuring git means to tell Git who you are. You can use Git bash or command prompt, I have used command prompt. Configure it using these commands: - git config --global user.name "your_username" - git config --global user.email "your_email" Use - git config --global --list, to check your identity.

image

Generating SSH Key.

An SSH key is like a digital key that helps you log in to servers safely. The private key stays on your computer, and the public key is shared with GitLab so it knows it’s really you.

Generate your ssh key using the following commands: - ssh-keygen -t rsa -C "your.email@example.com" When it asks where to save the key, just press Enter to use the default location. When it asks for a passphrase, you can either press Enter twice to skip it (easier but less secure), or set a password for extra security (you’ll have to enter it each time).

image

- notepad %USERPROFILE%\.ssh\id_rsa.pub

This command opens your SSH key in Notepad so you can copy it easily.

image

Now let's add our ssh key to GitLab:

### What is GitLab? GitLab is a website where people work together on code. It stores code in one place, helps track changes using Git, and can automatically test and deploy projects. Basically, it’s a tool that helps teams collaborate and manage a project from start to finish.

Go to Gitlab and log in. Click your profile picture (top right), then click Preferences. From the left menu, click SSH Keys. Paste your key into the big “Key” box. Give it a simple title. Click Add key.

image

Now that your SSH key is ready, make a folder to save your repo. I called mine sonam-tshering.

Go to FabCloud on GitLab and copy the Clone with SSH link.

image

Now open your command prompt or git bash and enter the command below to clone it. - git clone "paste your gitlab link here" image

Now that you have cloned your repository, let's update and make your website. You can use any editor you like, but I'm sticking with VS Code because I'm more used to it.

image

After that you can make your necessary documents for website or use template. I have used the mkdocs template. During the process of editing the website I have learned about HTML and markdown Here is the link where I learned about markdown Here is the link from where I learned about HTML

Git Mantra

Once you’ve made some changes to your project, you can push it to your remote repository on GitLab. This lets you work on your own computer, make changes, and then sync them with GitLab. Git keeps track of all changes so you can undo them if needed. By syncing with GitLab, you and others can work together without messing up each other’s work.

Here’s the Git Mantra:

  • git status – Shows what changes you made and which ones are being tracked.
  • git add . – Tracks all the changes you made so they can be uploaded.
  • git commit -m "your commit message" – Saves your changes with a message. Make the message clear.
  • git push – Sends all your saved changes to GitLab.

image

My website is live yayyyy!

image

Final Project Proposal: Vision Voice

The Concept

Vision Voice is a wearable device that helps Deaf and Mute people communicate with others. Most people don’t understand Sign Language, so this device translates American Sign Language (ASL) gestures into speech you can hear and text you can see in real time.

image

The "Why"

Communication is a basic human right. Most current solutions use cameras, so the user has to stay in front of a laptop or phone. Vision Voice is a small wearable that works anywhere, letting the user communicate naturally with their hands.

image

Prior Art & Research

What has been done before?

Some similar ideas already exist, which give inspiration and help improve the design:

  • SignAloud (University of Washington): Gloves that won the Lemelson-MIT Student Prize. They used flex sensors but needed to be connected to a computer.
  • Sign-IO (Roy Allela): A smart glove that connects to a mobile app via Bluetooth.
  • Fab Academy Projects: Students have made “Data Gloves” for music or VR.

How my project is different: My glove does all processing on the wrist using the XIAO ESP32-S3. It doesn’t need a phone or laptop, so it works anywhere on its own.

Digital Prototyping & Simulation

Before making the actual glove, I will test the logic and connections using an online circuit simulators.

Tools: I will use Wokwi and tinkercad.

Goal: To check the pins and working of the components.

Benefit: This creates a “Digital Twin” of the project, so I can test and debug the translation code in software. It lowers the risk of damaging parts during assembly

Components

Components Function
XIAO ESP32-S3 The Brain. Controls everything.
Flex Sensor (4.5") Finger Sensing. Detects bending.
MPU6050 Hand Tilt. Detects rotation/gravity.
OLED Display (0.96") Visual Output. Shows text.
DFPlayer Mini Audio Player. Plays MP3 files.
Speaker (3W 4Ω) Sound Output. Voices the translation.
Push Button Controls. (Calibrate,Speak).
LiPo Battery Power Source.
Slide Switch On/Off.
Resistors Circuit Logic.
MicroSD Card Memory. Stores MP3 files.
Velcro Strap To hold the case.

Here is the link to details about the components I will be using for my Final Project

Visualize

To clearly visualize my final project, I have used canva to jot down the ideas and features of my project.

image

Here is the link to my canva for reference

Circuit

image

Here is the link to detailed connection.

*So, that’s it! I want to learn and build my project Vision Voice this year. Good luck to me!

Challenges I faced this week(week01)

  • Setting up SSH keys for the first time
  • Understanding the MkDocs folder structure
  • Learning Markdown syntax

Useful Resources