Caeden.dev

I recently met a friend of a friend named Caeden. He is a backend developer who’s worked on projects like

Caeden117 • Updated Sep 20, 2023

and

Atlas-Rhythm • Updated Jan 23, 2023

. He mentioned that his portfolio site was unresponsive, so I decided to take a crack at fixing some of the issues. Here are the changes I made to improve his portfolio website: caeden.dev.

Major Improvements

Fixed “Click or tap to expand images”

Previously, images would expand and then contract when clicked on. They would only stay expanded if long clicked inside the window and then clicked outside the window.

This worked by setting CSS styles when the image is :active, meaning only when the user is clicking on the image.

Now they work as expected with the use of a little JavaScript.

We can achieve the same effect as a long press with a single click by toggling the :active CSS styles through the utilization of the expanded class. This enables us to activate the effect with one click and deactivate it with another, providing a simple and interactive experience.

Copy code from the image


// Toggles the 'expanded' class on an HTML image element.
function expandImage(event) {
	// Get the clicked image element from the event object
	const clickedImage = event. target;
	// Toggle the 'expanded' class on the clicked image element
	clickedImage.classList.toggle('expanded');
}

The problem with this method is you can only contract the image if you click on the image again. In other words, clicking outside of the image does nothing. This results in a poor user experience. To fix this, we’ll write a new JavaScript function that will detect clicks on the body.

Copy code from the image


// Keep track of the currently expanded image
let expandedImage = null;

function expandImage(event) {
    // Get the clicked element from the event object
    const clickedElement = event.target;

    // Check if the clicked element is an image with the 'expandable' class
    const isExpandable =
        clickedElement.tagName === "IMG" &&
        clickedElement.classList.contains("expandable");

    if (isExpandable) {
        // If the clicked image is the same as the currently expanded image, toggle the 'expanded' class and update the reference
        if (clickedElement === expandedImage) {
            clickedElement.classList.toggle("expanded");
            expandedImage = clickedElement.classList.contains("expanded")
                ? clickedElement
                : null;
        } else {
            // If there is an expanded image, shrink it
            if (expandedImage) {
                expandedImage.classList.remove("expanded");
            }

            // Expand the clicked image and update the reference
            clickedElement.classList.add("expanded");
            expandedImage = clickedElement;
        }

        // Stop the event propagation to prevent shrinking the image immediately when expanding
        event.stopPropagation();
    } else {
        // If an element other than an expandable is clicked, shrink the expanded image
        if (expandedImage) {
            expandedImage.classList.remove("expanded");
            expandedImage = null;
        }
    }
}

Warning/Disclaimer: The gifs below cause a flash when expanding the images. This doesn’t actually happen when using the website.