diff --git a/index.pug b/index.pug index aa72d42..f291240 100644 --- a/index.pug +++ b/index.pug @@ -9,3 +9,25 @@ html.scroll-smooth(lang=lang) include src/components/Professional include src/components/Academia include src/components/Footer + + script. + const footerEl = document.querySelector("#footer"); + const footerObserver = new IntersectionObserver((payload) => { + const hasScrolltedTo = payload.pop().isIntersecting; + if (hasScrolltedTo && window.hasOwnProperty("umami")) { + umami.track("scrolled to", {position: "footer", id: "footer"}); + console.debug("scrolled to footer"); + } + }); + footerObserver.observe(footerEl); + + const sections = document.querySelectorAll("section"); + const sectionObserver = (id) => + new IntersectionObserver((payload) => { + const hasScrolltedTo = payload.pop().isIntersecting; + if (hasScrolltedTo && window.hasOwnProperty("umami")) { + umami.track("scrolled to", {position: "section", id}); + console.debug("scrolled to section with id", id); + } + }); + sections.forEach((section) => sectionObserver(section.id).observe(section)); diff --git a/src/components/Academia.pug b/src/components/Academia.pug index 86f7992..7011b04 100644 --- a/src/components/Academia.pug +++ b/src/components/Academia.pug @@ -1,6 +1,6 @@ include Collapsable -section.bg-nls-black.text-white +section#academia.bg-nls-black.text-white .p-8(class="sm:p-20 min-h-[120vh]") .max-w-screen-md.mx-auto // region Computer Science diff --git a/src/components/Footer.pug b/src/components/Footer.pug index 0e685e5..bf122d1 100644 --- a/src/components/Footer.pug +++ b/src/components/Footer.pug @@ -10,7 +10,7 @@ mixin Svg svg.w-8.h-8(aria-hidden="true", fill="currentColor", viewbox="0 0 24 24") block -footer.bg-nls-black.text-white +footer#footer.bg-nls-black.text-white .p-8(class="sm:p-20 min-h-[120vh]") .max-w-screen-md.mx-auto // region Contact @@ -40,9 +40,9 @@ footer.bg-nls-black.text-white d="M18.188 0c-.517 0-.741.325-.927.66 0 0-7.455 13.224-7.702 13.657.015.024 4.919 9.023 4.919 9.023.17.308.436.66.967.66h3.454c.211 0 .375-.078.463-.22.089-.151.089-.346-.009-.536l-4.879-8.916c-.004-.006-.004-.016 0-.022L22.139.756c.095-.191.097-.387.006-.535C22.056.078 21.894 0 21.686 0h-3.498zM3.648 4.74c-.211 0-.385.074-.473.216-.09.149-.078.339.02.531l2.34 4.05c.004.01.004.016 0 .021L1.86 16.051c-.099.188-.093.381 0 .529.085.142.239.234.45.234h3.461c.518 0 .766-.348.945-.667l3.734-6.609-2.378-4.155c-.172-.315-.434-.659-.962-.659H3.648v.016z", style="fill: currentColor" ) - a.transition-colors.text-white( + a.transition-colors.text-white.uppercase.font-semibold( href=footer.emailLink, - class="hover:text-amber-300 uppercase font-semibold", + class="hover:text-amber-300", rel="noopener noreferrer", onclick="umami.track('email clicked', { position: 'footer' })" ) #{footer.emailText} diff --git a/src/components/Professional.pug b/src/components/Professional.pug index 54b4089..d6b0845 100644 --- a/src/components/Professional.pug +++ b/src/components/Professional.pug @@ -1,4 +1,4 @@ -section.bg-nls-black.text-white +section#professional.bg-nls-black.text-white .p-8(class="sm:p-20 min-h-[120vh]") .max-w-screen-md.mx-auto h2.text-2xl.mb-4 #{professional.title}