Week 1

This week's assignment

1. Plan and sketch a potential final project.
2. Model (as an image, 2D, 3D, render, animation, or simulation) your final project.
3. Compress your images and videos (reduce file size).
4. Place the description and images on your web pages:
   • Include a brief profile about yourself.
   • Include a section about your final project.
   • Prepare sections (links) for each individual assignment.

My own pages

1. I followed the assignment instructions provided here to get started.
2. Asked Copilot for help with the HTML structure and CSS styling. After like a few back and forths, I got the layout I wanted. Pretty painless
3. Edited some parts of the website to be more of my own style. I added a floating menu to the side for easier navigation. I also tried to add functionality for mobile users. It doesnt work yet, but I will continue to work on it when I have the time. Animations of menus involved some JavaScript, which is I have never done before so yet again, Copilot to the rescue.
JavaScript /public/src/main.js

let lastScrollY = window.scrollY;
const header = document.getElementById("mainHeader");

window.addEventListener("scroll", () => {
    const currentScrollY = window.scrollY;

    if (currentScrollY > lastScrollY) {
        // Scrolling down
        header.style.transform = "translateY(-100%)";
    } else {
        // Scrolling up
        header.style.transform = "translateY(0)";
    }

    lastScrollY = currentScrollY;
});

// Get the trigger area and the floating menu
const menuTrigger = document.querySelector('.menu-trigger');
const floatingMenu = document.querySelector('.floating-menu');

// Show the floating menu when hovering over the trigger area
menuTrigger.addEventListener('mouseenter', () => {
    floatingMenu.style.left = '20px'; // Slide the menu in from the left
});

// Hide the floating menu when the mouse leaves both the trigger area and the menu
floatingMenu.addEventListener('mouseleave', () => {
    floatingMenu.style.left = '-200px'; // Slide the menu out to the left
}); 

Results

You are browsing the result of my effort right now. You can see an outline of the final project here. I drew a sketch and wrote some general info.

Conclusion

Website making is a tedious process. Because for example in my case, you always need to experiment, commit the changes, push them to the server, and then check the result. It is a lot of work. But with the help of Copilot, I was able to make this website in a few hours. I am pretty happy with the result and I hope you are too.