ABOUT ASSIGNMENTS

WEEK 1

Week 1 assignment was to plan and sketch a potential final project, learn the basics of Git, and build my personal website in the class archive introducing myself and my final project.


FINAL PROJECT IDEAS

1.FX-E : Wearable Mechatronics


- Now, this is an iron man inspired helmet.
- Visor detects hand movements to control opening and closing.
- Includes eye-tracking to monitor eye movement andDisplays a pixelated visual output based on eye movement.
- Has inbuilt headphones for audio output.
- Bluetooth-enabled for wireless connectivity.

2.Archy : Wearable Desktop Companion


- A small wearable desk companion robot, Designed with a friendly, expressive form.
- Uses a pixel display to show facial expressions.
- Can read tarots.
- Has a detachable body, Includes a chain/neckband for wearing or carrying.
- Features moving legs that allow simple walking motion
- Focuses on interaction, expression, and companionship

3. TICO: Biomic Butterfly


- A bionic butterfly inspired by natural wing Movement.
- Features flapping wings controlled using a mechanism.
- Designed with a lightweight structure for smooth motion.
- Wings mimic the natural motion of a butterfly.
- Remote controlled for movement and interaction.
- Focuses on biomimicry and motion design.

4. N.J : Mini Nano Jammer


- A compact handheld mini disc player.
- Features a pixelated display on the back.
- Supports hand-controlled games like Flappy Bird.
- Includes an on/off button for power control.
- Has physical buttons for play, pause, next, and fast-forward.
- Designed with a front disc interface.
- Focuses on retro-inspired interaction and compact design.
- Explores the blend of hardware controls and digital display.

DESIGNING AND INITIAL WEBSITE SETUP

I started by building my very own Fab Academy journal(Assignment/portfolio Website) First, get a code Editor. I already had VS Code installed, so didn’t need to install one. I started with designing the webpage in Figma, and was going for a sketch/notebook feel. This is my Figma file Link click here
Archita sketch
Completed the design and considered adding an animation or hover effect, so I prototyped it.
Now we have gotten an idea/feel of how the website should be. Next we move on to the coding part. First, I made an initial layout of the website, then asked ChatGPT how to build from there. Towards the end, I have attached all the prompts used for this week's assignment.
Code for the hovering effect:
Now I am creating another page for the “Student agreement” to be stored and linked to the homepage. Here, I faced an issue with the anchor tag. When I clicked “Student Agreement” it was not taking me to the next page.
This is what it kept showing. Went back checked and turns out i was copying the path of my computer and not the live link’s, it’s a classic rookie mistake. Final Output - i would say looks pretty neat. Similarly made a webpage for Assignments

Setting up git

Since i’m a very recent mac owner, Hate whatever the OS is doing, even though people keep telling me i’ll eventully get the hang of it . i dont think so. Install Home brew. This is the only way (i think) through which you can install/update git or any command-line tool in iOS . I referred to WebX Learners Install Git on Mac | Configure Git and GitHub on Mac (2026) video for the installation process.

After the installation of HomeBrew, you install git. After the installation of HomeBrew, you install git. Go to link then copy the link and paste it in the terminal. Enter the following as seen in the screenshot, you’ll get the latest version of git :

Tadaa….. Your Git is now installed. Got the access to my repo for FABLAB today, a day before the submission day so sprinting to update everything that i did + documentation of how i’m doing it. yay. Opened Gitlab using the link, need to set up a password, now i need to clone the project. I referred this guy’s Video for the entire process on “How to clone and set up an ssh key - Mac users”

This is the text used for setting up the ssh key — source GitHub Docs

Next, need to add the ssh key to my gitlab. gitlab profile → ssh keys → new ssh → paste the key from the terminal → add now the ssh is configured. For more information check this Docs Mission - adding SSH Key succesful. Now, we have to clone an existing repository to your device. You copy the “Clone with SSH” and paste in in the example url The repository is cloned to the user folder.

Next, we can replace the code in folder with our already created webpage code and push it to gitlab.

GIT COMMANDS

git add and git push Adding changes done in local repository and pushing to GitLab.[remote repository]
git pull command is used when making changes on other systems. It will update all work across all systems. All the files from the remote repository can be pulled back.
To push the changes from local repository to remote repository , the following commands should be given :
git add -A
git commit -m “Any message”
git push




We've pushed the Code to Gitlab and our Webpage is up and running. Wohoo!

PS : If you liked the new look of my journal go to Reactbits webpage, they have many cool effects along with their code. And if you're keen on learning about UI, check out Motion Zajno's site they have a clean detailed explanation on various effects. Have Fun.