Endless scroll for homepage

Hi!

I'm trying to make my homepage scroll endlessly, cycling through the content. Meaning when the user gets to the end of the page content (the bottom) the content from the beginning fills in and essentially the page never stops filling with content...if that makes sense. If not, here is a great example of what I'm talking about: https://ryanstrzok.com/. 

This is my site: hkportfolio.com

Again, I only want this on my homepage no other pages on the site. Any help is greatly appreciated!

@hilary Yea this is a cool setup. It looks like they have the first section on the site duplicated at the bottom. Then when the user gets there and scrolls that into view it moves them back up to the top and slips the original top section into place. Lots of javascript to do this, i dont think there's a simple free solution out there.

Thanks for getting back to me! Bummer...yeah I asked "that-AI-tool-that-shall-not-be-named" and it gave me the following JS, it didn't seem too bad, but you'd have to have access to the Squarespace stylesheet to make it work and I can't figure out how to export that either. Oh well, nice idea!

<style>
body, html {
  height: 100%;
  margin: 0;
  overflow: hidden; /* Prevents scrollbars */
}

.content, .duplicate-content {
  position: absolute; /* Absolute positioning to stack them */
  width: 100%;
}

.content {
  top: 0;
}

.duplicate-content {
  top: 100%; /* Starts below the original content */
}
</style>

<script>
let content = document.querySelector('.content');
let duplicateContent = document.querySelector('.duplicate-content');

function appendDuplicateContent() {
  // Clone the original content
  let clonedContent = content.cloneNode(true);
  // Append the cloned content to the duplicate content container
  duplicateContent.appendChild(clonedContent);
}

// Initially append a duplicate of the content
appendDuplicateContent();

window.addEventListener('scroll', function() {
  const contentHeight = content.offsetHeight;
  const scrollPosition = window.innerHeight + window.scrollY;

  if (scrollPosition >= contentHeight) {
    // When scrolled to the end, append another duplicate
    appendDuplicateContent();
  }
});
</script>

Hmm yea, im not sure this is exactly going to do it. This looks like it'll just keep trying to duplicate content as you scroll. This other site moves you back to the top after you see the duplicated top section it just replaces it with the original one and moves you up to start at 0 again so you're not constantly duplicating, you just need one extra copy of your top section to do it like your example.