Principles and Practices & Project Management
This week I built and customized my personal website for Fab Academy and learned how to document my work properly. I explored templates, chose a visual style that represents me, and modified the HTML files to structure my site. I also learned the basics of Git, how to manage versions locally, and how to push updates to the Remote Repository. Overall, I set up the foundation for my documentation and now I'm ready for the upcoming weeks.
For my final project, I plan to design and prototype an intelligent menstrual care dispenser intended for personal use, aimed at improving the menstrual experience by combining physical interaction, embedded electronics, sensors, and mobile connectivity. The objective is not only to create a dispenser, but a smart companion device that supports, informs, and empowers users throughout their menstrual cycle. The system promotes hygiene, accessibility, and menstrual health, while actively contributing to the reduction of stigma surrounding menstruation.
Click each section to expand the details:
The front features an elegant enclosure with an LCD screen displaying notifications such as period reminders, low product alerts, and motivational messages. A yellow accent line and warm lighting enhance visibility and create a friendly user experience.
Contains product output openings designed to dispense one sanitary item at a time, ensuring controlled and safe distribution.
Shows the refilling mechanism — users push and open the front door to access the internal storage area for easy restocking and maintenance.
Presents two design options. Option A uses spiral strips (like vending machines) with motion sensors for higher capacity and multiple openings. Option B simplifies with buttons instead of sensors, providing more internal space and one output hole per product. Both include a lower circuit box with motor, microcontroller, power supply, and a dedicated space for menstrual pain relief pills.
Complements the dispenser with period tracking, notifications, reminders, and interaction messages, keeping users informed and emotionally supported.
Signed by committing this file in my repository,
Micaela Lucrecia Córdova Carmelino
Despite having zero experience with terminals, this process went smoothly by following Fab Academy's Git Extended Cheat Sheet alongside my instructor.
Some minor complications I ran into:
Before starting, it was important to understand what Git actually is. Git is a version control system that saves changes over time — letting you work locally, stage your changes, commit them as snapshots, and push them to a remote repository that everyone can see. Pulling brings the latest version back to your local machine.
Install GitBash for Windows from https://git-scm.com/install/windows and open it inside the general folder.
Add your Git username and set your email address:
git config --global user.name "YOUR_USERNAME"
git config --global user.email "jSmith@mail.com"
Check if you have an SSH key already:
cat ~/.ssh/id_rsa.pub
If you don't have an SSH key, generate it with ssh-keygen -t rsa -C "$your_email". Since I already had one, I just used cat ~/.ssh/id_rsa.pub to display it.
Copy your SSH key — use clip < ~/.ssh/id_rsa.pub (Ctrl + C does not work in Git Bash).
Log in to your GitLab account (provided by Fab Academy) and go to your profile.
Navigate to Edit Profile → User Settings → SSH Keys to reach the key configuration page.
Add the copied SSH key to your GitLab profile — follow these four steps inside GitLab:
Enter your GitLab account provided by Fab Academy
Go to your profile and click on Edit profile
Go to User Settings → SSH Keys
Add a new key and paste the SSH key copied from Git Bash
Create a folder on your local computer (I recommend Desktop — short path).
Open GitBash inside that folder (Right-click → "Open Git Bash Here").
Clone the site using your repository link:
git clone git@gitlab.fabcloud.org:academy/fabacademy/[My link]
After making all desired changes in your editor and saving them, follow these three steps to push them to the remote repository:
git add .
Stages everything in the current directory and all subfolders
git add index.html
Stages only that specific file, even if you changed 10 others
git add public/name
Used to add a specific folder or file (HTMLs or images)
git commit -m "Nombre"
Creates a named version snapshot with your staged changes
git push
Uploads your committed versions to the remote repository
Means choosing which changes are ready to be saved as a version.
Avoid saving files with spaces in their names.
cd\ — Takes you to the top of the directory tree (C: drive)cd windows\systems32\ — Navigate to a specific foldercd.. — Go back one folder levelgit pull — Download the latest copy of the repositorygit merge — Merge a working copygit rm — Remove a tracked filegit mv — Move or rename a filegit status — See what changed or current statusdir — View contents of a directoryls — View files as a listcd — Know which directory you're incd Name — Move between directoriesmkdir — Create a new directoryIf the push fails due to file size, reset Git to delete the commit history. First check status: git status
Two types of reset:
git reset --soft — Resets the last commit without touching local files.git reset --hard — Resets to a specific commit and discards all uncommitted changes.During Week 5, I encountered an issue in my repository. By accident, I had uploaded a PDF file larger than 10MB. When trying to push the changes to GitHub, the platform rejected the upload due to the file size limit.
Fortunately, I had already studied Git history management and repository cleanup commands during Week 1, so I applied those concepts step by step to solve the problem.
First, I confirmed which file was exceeding the size limit using:
find . -type f -size +10MThis command searches the current directory and lists all files larger than 10MB. It helped me quickly identify the problematic PDF file inside the images folder.
Once I located the file, I removed it from Git tracking without deleting it from my local machine:
git rm --cached images/apuntesfisicauniversidaddelpacifico.pdfThe --cached option ensures that the file is no longer tracked by Git but remains in the project folder.
Since the file had already been committed, simply removing it was not enough. I needed to remove it from the entire commit history:
git filter-branch --force --index-filter \
'git rm --cached --ignore-unmatch images/apuntesfisicauniversidaddelpacifico.pdf' \
--prune-empty --tag-name-filter cat -- --allThis command rewrites the repository history and removes all traces of the large file.
Before finalizing everything, I reviewed my recent commits and reorganized them using:
git reset --soft HEAD~3This allowed me to move back three commits while keeping my changes staged, giving me the opportunity to clean up and recommit properly.
Because the history was rewritten, I needed to force push the updated repository:
git push origin --force --allCreating my personal website as a portfolio was exciting, but I soon realized I had to build everything from scratch. Even though I had experience with Python and other tools, it felt like starting over again — especially since I hadn't built a website since I was 15.
To begin, I sketched the layout of the different pages to define the structure, navigation, and main sections. My goal was to create a clear template so I could easily upload weekly progress. The reason for this is that I wanted to have everything ready so that each week, as I worked on assignments and made progress on my project, I could just enter the template and write the information.
For inspiration, I looked at Ofelia Sevilla's 2025 Fab Academy repository, which influenced how I organized and structured my own site in a clean and professional way.
I chose Visual Studio Code as my editor — I had used it before for data analysis and I appreciated how it has Copilot integrated, which helped guide me while building the site.
To learn the fundamentals, I visited W3Schools. The three pillars of any webpage are simple: HTML defines the structure and content, CSS controls the visual appearance, and JavaScript adds interactivity and animations. Understanding how these three work together made everything click.
The philosophy is simple: less is more, but with human warmth. Spacious layouts, a restrained color palette, soft shadows, and subtle animations — everything designed to feel approachable and clean without being cold.
My main references were Apple/macOS for its spacious minimalism, Notion for clear structure, and the YouTuber Scott Yu-jan — a front-end designer whose warm, polished style aligned perfectly with what I wanted to achieve.
<!DOCTYPE html><html lang="en"><html><head><title><body><h1><p><img src="images/photo.jpg" alt="description"><li><a href="final.html">Final Project</a></li>