Week 01 - Intro and web pages

Task #01

The task for the first week is to get familiar with GitLab pages, create our own website and fill in the "About me" section. On top of that we should think about our final project and sketch it.

Web pages

To deploy my personal web pages I logged into the provided faculty GitLab, entered my repository and created README.md file. Before moving on, I set up my VS Code editor for easier development. For clarity, I am using Windows Subsystem for Linux 2 (WSL 2) running in Ubuntu and with installed Git.

First, I had to  generate a SSH key using the command 

ssh-keygen -t rsa -b 2048 -C "your_email@example.com"
Then, set my passphrase, upload the public part of the key to GitLab and clone the repository into my local directory using 
git clone git@gitlab.com:your_username/your_repository.git
From now on I can edit my web pages in VS Code and upload changes using commands 
git add .
git commit -m "message"
git push

In my local directory I created folder named public and inside of it an HTML script index.html with simple code 

<!DOCTYPE html>
<html>
                
<title>Hello world</title>
                
<body>
                
    <h1>Hi, nice to see you!</h1>
    <p>My first paragraph.</p>
                
                
</body>
</html>
💡Tip: Live Preview extension
And with higly recommended extension of VS Code "Live Preview" you can see the preview (after right clicking and choosing the option "Show Preview") of the page right next to your code in real time without the need to upload changes.

No image

The final step is to make my pages automatically deploy after a commit. To achieve that, I will create .gitlab-ci.yml file in the root directory. 

pages:
    stage: deploy
    environment: production
    script:
        - echo 'Nothing to do...'
    artifacts:
        paths:
        - public
    rules:
        - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

I wanted my web pages to look modern and clean. For that I will use Bootstrap library and the help of ChatGPT, because I am not deeply familiar with the syntax. From a simple ChatGPT generated template I started to create individual pages for "Weekly projects", "Final project" and "About me". I organised my folder as follows 

.
├── README.md
└── public
    ├── aboutme.html
    ├── final_project.html
    ├── images
    │   ├── about_me
    │   ├── home
    │   └── week_1
    ├── index.html
    ├── week_1.html
    ├── week_10.html
    ├── week_2.html
    ├── week_3.html
    ├── week_4.html
    ├── week_5.html
    ├── week_6.html
    ├── week_7.html
    ├── week_8.html
    ├── week_9.html
    └── week_projects.html
I filled in the "About me" section created navigation bar, and made all the buttons/navigation texts clickable and redirecting to the desired pages using href="page.html".

Initial idea of the final project

I am not entirely certain about my final project, so, it will most likely change or adjust. I also want to get inspired during the course, I want see and try different fabrication techniques, and based on that create intersting yet challenging final project.

However, the initial idea was to create small home security system consisting of multiple cameras, processing hub and possibly other features. The cameras would be small sensors with high IR sensitivity connected to a wi-fi module. The module would send the data to a hub - probably Raspberry Pi, where a server would be running. The server would process the image, possibly running an object detection task using an accelerator such as Coral USB. Based on the detected objects/people and time of the day, the system could warn the owner and send a message or similar.

The individual electronics part would be housed in a 3D printed case, the cameras could also be mounted on a moveable platform and the motor would be remotely controlled. To achieve sufficient lighting specially at night, IR LED lights would be used.

No image