W1 - Project management

Tasks

Task Breakdown

  1. Setting up GitLab
  2. Designing the website
  3. Coding the website
  4. Documentation
  5. What I want to improve Next Week

Issue: Puzzling Robots background

I drew a vision on how I wanted the background to look and it absolutely did not work. See "2. Designing the website" for more information

I also tried adding multiple layers, applying events, and asking a friend for help. I did not work.

Finally, I was able to solve the issue using separate test pages. Please go to W2 - Computer aided design, then "Alternative desinges" for more info.

Project Managaement

1. Setting up GitLab

I already had experience with GitHub and GitLab, so I was familiar with most of the setup process.

Account Setup: I created an account, set my preferred email address and username in GitBash following these tutorials:

  1. Set commit email address
  2. Set Git username

SSH Key Setup: My supervisor and I authorized our connection using an SSH key pair, as described in GitLab's SSH documentation. The lecture recommended using the ed25519-sk key pair, which I implemented successfully.

You may need to find your generated key in your files. To do this, follow the path described by Gitbash in your "Explore files" program. Open the .pub file and copy that into the "add new keygen" under "SSH" in your user account settings. Cloned the repository into a local directory via git clone.

Organizing Files:Organized local files to match the GitLab repository structure. Compressed images using this website to improve page loading time and reduce server memory overload.

Version Control Commands:

  • Check differences: git status
  • Update files: git add .
  • Commit changes: git commit -m "comment"
  • Push updates: git push
Since the project is still simple, I didn’t see the need for multiple branches.

2. Designing the website

From my previous project, I realized the importance of having a clear vision before starting the design to avoid rework and wasted time.

Design Approach:

Concept: I wanted the design to reflect the modularity of my final project. I settled on arranging cubes like a puzzle with changing colors.

Background Design: Created multiple background layers

3. Coding the website

Initial Tools:Started with CodePen for visual feedback. Switched to the W3Schools online editor, where I found a blog template for its layout.

Challenges:Online editors couldn’t display images. I solved this by watching this YouTube tutorial and downloading the LiveServer extension for VSCode The LiveServer extension enabled live previews, including image rendering.

Helpful Resources Used:

Sadly, it it seems like my layers are "cancelling each other out". As such, the current background of my website is white.

4. Documentation

This week, I finalized the official project proposal for the Puzzling Robots, which provided most of the content for my website documentation on the final project.

Steps Taken:

  1. Added a Week 1 documentation page using the pre-designed template.
  2. Text editing: Used "Bloc de notas", a lightweight app requiring minimal resources that was preiinstalled on my computer.
  3. Grammar check: Used Grammarly to correct errors and improve clarity and ChatGPT to structure it.
  4. Update the documentation by adding, committing, and pushing changes to Git.

5. What I Want to Improve Next Week

  1. Health: Recover from bronchitis, as it’s been holding me back significantly.
  2. Focus: Avoid working on too many unrelated projects at once. This week, I worked on four different projects simultaneously, some of which aren’t even due soon! To minimize waste, I added some of these under the "Other Projects" section on my website.
  3. Fix the background of this website.
  4. Make the navbar, about me, other projects, and footer cards modular