function showAvatar() {
    var pswpElement = document.querySelectorAll('.pswp')[0];
    
    let avatar = document.querySelector("main .avatar.image-frame img");
    
    // build items array
    var items = [
        {
            src : avatar.src,
            msrc : avatar.src,
            w   : avatar.naturalWidth,
            h   : avatar.naturalHeight
        },
    ];
    
    // https://photoswipe.com/documentation/options.html
    
    // define options (if needed)
    var options = {
        bgOpacity : 0.8,
        shareEl   : false,
        // showAnimationDuration : 0,
        // hideAnimationDuration  : 0,
        clickToCloseNonZoomable : false,
        getThumbBoundsFn: () => {
            let rect = avatar.getBoundingClientRect();
            let actualRect = {
                width: rect.width,
                height: rect.height,
                left: rect.left,
                right: rect.right,
                top: rect.top,
                bottom: rect.bottom,
            };
            let aspectRatio = avatar.naturalWidth / avatar.naturalHeight;
            if (aspectRatio > 1) {
                let actualHeight = actualRect.height / aspectRatio;
                let delta = actualRect.height - actualHeight;
                actualRect.height = actualHeight;
                actualRect.top += delta / 2;
                actualRect.bottom += delta / 2;
            }
            var pageYScroll = window.pageYOffset || document.documentElement.scrollTop; 
            return {x: actualRect.left, y: actualRect.top + pageYScroll, w: actualRect.width};
        },
    };
    
    // Initializes and opens PhotoSwipe
    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
}

ondomload(() => {
    let avatar = document.querySelector("main .avatar.image-frame img");
    if (avatar) avatar.addEventListener("click", showAvatar);
});