Getting Setup on GitLab

Getting started with GitLab was fairly easy. When the email from FabAcademy came in, I followed the steps for proper log in from the email and set up my GitLab repo. I downloaded VS Code and set that up. Initially, I was a bit confused about how to log into VS Code and my repo since we use a different type of log in. A few times in the beginning, while setting everything up, I'd get confused between GitLab and GitHub. This confusion caused me to look up solutions for problems I had that didn't apply. Once my VS Code was set up, I began the linking process to my repo which felt straight forward, until I got to the SSH key portion.

Setting up my SSH Key

I really struggled with this at first. I used several different resources online, and the more places I looked the more confused about the process I got. I needed to download a bash, so I used the Git for Windows as it was suggested on one of the pages I had looked at while researching how to set up the SSH key. I continued to try and work my way through the SSH process with little success. Working in the bash was a new process for me. I found it to be very frustrating at times and not really straight forward. Which led me to feel very accomplished when I finally generated my passphrase.
Once I had the passphrase though, I didn't know how to copy it correctly. I first tried copying the ascii type image it generated and I closed the bash. I didn't know how to find the passphrase again so I generated a new one. I tried a couple times and I think I generated 3 passcodes while working through the process.

br> I really struggled, until I finally found this amazing Youtube video and successfully worked alongside the video to set up my SSH key! The content creator used a different bash then I had downloaded, but it all worked basically the same. Thankfully, the video broke down the process and by the end of the video I had my Repo up, my VS Code connected, my Repo Cloned, and my SSH key applied!

Starting my Site

One of the first things I did was set up my site. Even before setting up my SSH key and VS Code I was already planning my site and practicing my HTML and CSS. I used an online code site called CodePen which allows me to code HTML, CSS, and Java right in my browser for free. It auto generates a preview of the site every time a change is made, which I loved because I can explore and change things to see how to interact and affect each other in real time. When following code examples or pulling samples from W3 Schools , I find being able to make live changes really gives me a better understanding of what the code is doing.
I knew from the beginning that I wanted my page to stand out and have a scrolling effect. Initially I wanted to attempt a parallax style effect, but realized my current skills with building a website is a bit lacking. The plan was to have the background have a simple animation of my robot being built on an assembly type line. As the person scrolls the page, the robot would move into the next portion of the assembly line that matched the week's theme. Each section would have a pop up/floating style box with a brief paragraph about the week and a link to the weeks page.
I still love this vision, but it is beyond my current levels of html and css.
I still wanted a scrolling effect, but I needed to simplify it for my rusty skills.

During my research, I found this interesting animation effect Scroll Magic, which I wanted to attempt to recreate. However, I also wanted to try and keep my page design with just HTML and CSS and the Scroll Magic would need a whole java package to work. I plan to go back to this package in the future, when time allows, because based on this example site made with Scroll Magic, I am certain I can create my initial vision.
In the end, I researched and reviewed some more basic HTML based template sites to see what was possible with my simpler vision in mind. I found a few samples that had individual elements that I liked, but none with everything I was hoping for. For example, I liked the scrolling effect and floating box style of Big Picture from the site HTML 5 Up. I attempted to download and use the site as a starting point, but couldn't find the CSS style sheet in the template download. This is when I reached out to my friendly ChatGPT and asked, "how can I create a cool scrolling effect in a github page like the one on this website: https://scrollmagic.io/". Chat gave me four different methods to try and recreate the Magic Scroll effect, and I settled on trying Option 4: Pure CSS scroll effects.

Creating the Robot Animation

Option 4 became my jumping point for robot eye animation. When I first started I didn't have my robot image designed yet, so I used resources from W3 Schools to help me create a basic shape for the body and eyes using CSS and then played around with the code in Codepen to see how making different changes affected the outcome. The animation effect didn't work every time I made changes, looking online I read that some animation effects like scroll wheel effects don't work on every browser. Due to this I almost scrapped the idea, until I realised the issue was not a browser compatibility issue, it was me having a spelling mistake in my code.
Animation vs Animatoin
After correcting all the glaring red line issues when I copy and pasted my code into Google Docs, I retested the code and the eyes moved! The small movement width I started with, -6px and +6px, was very fine and almost not noticeable. So I went back in and adjusted the eye movement to +/- 20px.
Then I worked on the hello speech bubble. It was not fading in like I thought it would, instead the Hello remained permanently. I used a resource from W3 Schools and went back into the code to do a force invisible on the Hello until a certain scroll action was met to make it appear. Setting the visibility to hidden however, forced the text to remain hidden. The trigger command to fade in never responded so I had to change the code again. This time, instead of doing hidden I decreased the opacity to 0 at start and set it to raise the opacity upon scroll.
Once I had a setup I liked, I pushed it to my site and eventually updated the site with my robot design instead of the css shapes.

Pushing my First Commit

Pushing content from VS Code to my GitLab Report had me a bit confused since this is the first time I have used VS Code to connect to Git. I went into the Source Control, saw my pages that I worked on, and hit the commit button. When I did that, I would get a pop up that said I didn't stage anything.

Since I was unfamiliar with this, and wasn't sure what staging meant I did not want to just blindly press accept. I looked up staging in VS Code online and found this great website that has clear images of the commit process.
I followed the steps and attempted my first commit and Unfortunately I was met with an error about configuring my user.name and user.email. I clicked the Learn More button on the error and did some research online to determine what the error meant. Once I knew what the issue was, I tried to find a solution, which lead me to this helpful page by Virtual Geek. Based on the article, to solve this issue I needed to update my username and email in the command prompt terminal. I used the instructions and video in the article to help walk me through the process and successfully pushed my first commit!

For the first several commits I referenced the steps from the site mentioned above, until it became second nature.

Creating my Site Buttons

To create the buttons on my site I referenced the basic button code from W3Schools which was:
button type="button">Click Me!
Click Me!
I then added a section in my css style sheet to customize the button. I spent about 15-20 minutes trying to figure out why my style effects were not changing my buttons. After some digging, I realized that by using:
type="button"

I was generating a default button which ignored my css styling. To reference my css I needed to use:
class="button"
Click Me!

Creating my Site Favicon

While browsing W3Schools for a resource on creating a sidebar for my site, I noticed a section on Favicons. A favicon is the little image that sits next to your website name in the URL bar. I decided I wanted to attempt to add this to my site using my main robot image.
I opened my robot design in Paint.net but realized it couldn't natively export a .ico file which the favicon code referenced. I looked online for an alternative software to do the conversion and in my search found that someone had made a simple plugin for paint.net to be able to export .ico files. After installing the .dll in my paint.net folder, I reloaded the app, and attempted to save the file again. There was still no option to save as a .ico file.

I went back to the plugin repo and realized I read the instructions too quickly and missed that I needed to place the .dll in the FileTypes folder not the main folder. After moving the file, and a quick reload of the program, I was able to save my robot image as a .ico!

Unfortunately, It does not seem to be supported, as I am unable to see the Favicon on any browser I have tried. I plan to try again in the future to see if I can get it working.

Fixing my Broken Image Links

After successfully setting up my site and pages, I started to add my written and visual content to the About me and Week 1 page.
Everything seemed to be going well until I tried to view the site online. Just about any time I added an image to the site, I had issues. Starting with my robot head design not showing, then the image of myself on my about me page, ALL of my images on the Week 1 page, and even the image on my Final Page. I would get one page's worth of images working, and the next page would all break. It felt like it was never ending.
The robot image was my own mistake, I was using the wrong pathway. I had ../images instead of just images. This was a quick and easy fix. After finding my error and fixing it, I started to add my other images for the Week 1 page.
I had created a folder called Week1 within the Images folder as a way to organize my weekly image collection. I used camelCase for all of my image file naming conventions and committed a handful of images. This is where the headache started. Not one of the images I added would show up. My first thought was to try and change the file pathway like I did with the robot image. I tried several attempts to fix the broken images with little to no success.

I tried the following pathways:

../images/Week1/vsCode.jpg

../../images/Week1/vsCode.jpg

public/images/Week1/vsCode.jpg

images/Week1/vsCode.jpg

None of these pathways were successful.

Oddly enough though, during this process I also updated my About me page with an image of myself. The About Me page was working fine, I could see the image of myself after a quick fix, and overall I was happy with the start of it. So I tried to use that image on the Week1 page as a known working image. I directly copy and pasted the working image code and it worked on the About Me page, but broke on the Week1 page.
I asked my coworker David Taylor if he had any suggestions and we reviewed the file locations in Git and found a really strange thing. Some of the picture files were showing incorrect pathways when you open the image location. This left more questions than answers and led me to try ChatGPT for suggestions.
The conversation with Chat started with assuming it was a bad pathway and chat suggested trying many of the same pathways I had already tried. It gave me a web link to test to see if I could pull up the image directly, which I could. Then we discussed file locations for the Images and the HTML file. We checked my header for a base tag to see if that could be overriding my images. It suggested I try an absolute file path, which I avoided.
At one point, in my conversation with Chat we discussed folder pathways and naming conventions. This led me to try changing the name of the folder from Week1 to week1, this may have actually caused more issues because now it was the same name as my week1 html page name. I eventually changed the folder name to week01 so it was different from the html file name.

After hours of trying different things one at a time, I started getting creative. I would try multiple solutions at once, but doing something different on each image such as changing the pathways and the locations of the images. This allowed me to test more than one solution to see if any solution worked.
Finally, I gave up completely on the folder the images were in and created a completely new folder which I named week-1 and moved all the images to the new folder and updated all of the code to match. At the same time, I tested a few different image pathways to see which one worked for the new folder. After all was said and done, the images worked in the new folder.

Feeling relieved from all the image frustrations, and assuming I solved the issue, I added my picture for the final project page to the new week-1 folder. Just like the others did on the week1 page, this image was broken on the Final Project page. After trying a few different pathways, the solution, again, was making a new folder for my final project images and moving the image to the new folder.
I still don't entirely know what the issue was, and I don't know if this will continue to be an issue for every page.

Other Site Updates

Other formatting I have added to the site not listed above:

Separating the scrolling robot animation from the main css style sheet.

Creating a two robot animation style sheet

Creating a side bar on the main homescreen

Creating a 3 box side by side template for the weekly pages