Skip to content

Commit

Permalink
simplify and add js
Browse files Browse the repository at this point in the history
  • Loading branch information
@jochemloedeman
jochemloedeman committed Sep 1, 2024
1 parent f6fa196 commit 207baad
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 28 deletions.
36 changes: 8 additions & 28 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,17 +48,17 @@
</script>
</head>

<body class="bg-white h-screen text-black opacity-0 animate-fade-in transition duration-500">
<body class="bg-white h-screen text-black opacity-0 animate-fade-in transition duration-500 mx-auto w-3/4">
<!-- Navbar -->
<header class="flex w-full overflow-hidden pt-16 pb-12">
<!-- Navbar -->
<nav id="nav" x-data="{ open: false }" role="navigation" class="w-full pb-5">
<div class="container mx-auto flex px-8 md:px-12 lg:px-24 2xl:36">
<div class="containerflex text-3xl sm:text-4xl font-semibold font-poppins whitespace-nowrap">
<div class="flex">
<div class="text-3xl sm:text-4xl font-semibold font-poppins whitespace-nowrap">
JOCHEM LOEDEMAN
</div>
<div class="container flex justify-end invisible sm:visible">
<div class="flex space-x-6 text-gray-600">
<div class="flex space-x-5 text-gray-600 items-center">
<a class="transition duration-300 hover:opacity-75" href="https://www.instagram.com"
target="_blank" rel="noreferrer">
<span class="sr-only"> Instagram </span>
Expand All @@ -76,8 +76,8 @@
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
</svg>
</a>
<a class="transition duration-300 hover:opacity-75" href="https://www.github.com/jochemloedeman"
target="_blank" rel="noreferrer">
<a class="transition duration-300 hover:opacity-75"
href="https://www.github.com/jochemloedeman" target="_blank" rel="noreferrer">
<span class="sr-only">GitHub</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
<path
Expand All @@ -92,28 +92,7 @@
</nav>
</header>
<!-- Content -->
<div class="container mx-auto px-8 md:px-12 lg:px-24 2xl:36">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-5">
<div class="flex flex-col gap-y-5">
<img src="/assets/images/P1070346-Enhanced-RD Large.jpeg">
<img src="/assets/images/P1070333-Enhanced-RD Large.jpeg">
<img src="/assets/images/P1070384-Enhanced-RD Large.jpeg">
<img src="/assets/images/P1070378-Enhanced-RD Large.jpeg">
</div>
<div class="flex flex-col gap-y-5">
<img src="/assets/images/P1070347-Enhanced-RD Large.jpeg">
<img src="/assets/images/P1070311-Enhanced-RD Large.jpeg">
<img src="/assets/images/P1070358-Enhanced-RD Large.jpeg">
<img src="/assets/images/P1070355-Enhanced-RD Large.jpeg">
</div>
<div class="flex flex-col gap-y-5">
<img src="/assets/images/P1070351-Enhanced-RD Large.jpeg">
<img src="/assets/images/P1070365-Enhanced-RD Large.jpeg">
<img src="/assets/images/P1070381-Enhanced-RD Large.jpeg">
<img src="/assets/images/P1070396-Enhanced-RD Large.jpeg">
<img src="/assets/images/P1070303-Enhanced-RD Large.jpeg">
</div>
</div>
<div id="gallery" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-5">
</div>

<!-- Footer -->
Expand All @@ -127,6 +106,7 @@
</footer>
<script src="scripts/fade_in.js"></script>
<script src="scripts/menu.js"></script>
<script src="scripts/distribute_images.js"></script>
</body>

</html>
56 changes: 56 additions & 0 deletions scripts/distribute_images.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
// Array of image sources
const images = [
"/assets/images/P1070346-Enhanced-RD Large.jpeg",
"/assets/images/P1070333-Enhanced-RD Large.jpeg",
"/assets/images/P1070384-Enhanced-RD Large.jpeg",
"/assets/images/P1070378-Enhanced-RD Large.jpeg",
"/assets/images/P1070347-Enhanced-RD Large.jpeg",
"/assets/images/P1070311-Enhanced-RD Large.jpeg",
"/assets/images/P1070358-Enhanced-RD Large.jpeg",
"/assets/images/P1070355-Enhanced-RD Large.jpeg",
"/assets/images/P1070351-Enhanced-RD Large.jpeg",
"/assets/images/P1070365-Enhanced-RD Large.jpeg",
"/assets/images/P1070381-Enhanced-RD Large.jpeg",
"/assets/images/P1070396-Enhanced-RD Large.jpeg",
"/assets/images/P1070303-Enhanced-RD Large.jpeg"
];

const twoColumnThreshold = 768;
const threeColumnThreshold = 1024;

// Function to distribute images into columns
function distributeImages() {
const gallery = document.getElementById('gallery');

gallery.innerHTML = ''; // Clear existing content
// Get the number of columns based on the current screen size
let columnCount = 1;
if (window.innerWidth >= threeColumnThreshold) {
columnCount = 3;
}
else if (window.innerWidth >= twoColumnThreshold) {
columnCount = 2;
}

// Create columns
const columns = [];
for (let i = 0; i < columnCount; i++) {
const column = document.createElement('div');
column.classList.add("flex", "flex-col", "gap-y-5");
columns.push(column);
gallery.appendChild(column);
}

images.forEach((src, index) => {
const img = document.createElement('img');
img.src = src;
columns[index % columnCount].appendChild(img);
});
}


// Initial distribution
distributeImages();

// Redistribute images on window resize
window.addEventListener('resize', distributeImages);

0 comments on commit 207baad

Please sign in to comment.