From 844a41d67a51a718eb99bafd96215e32473f660d Mon Sep 17 00:00:00 2001
From: Arien Shibani <aaari94@gmail.com>
Date: Wed, 3 Jul 2024 17:32:17 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20Add=20imagekit=20URL=20quer?=
 =?UTF-8?q?ries=20to=20enhance=20performance=20/=20reduce=20load=20times?=
 =?UTF-8?q?=20of=20images.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json       | 91 ++++++++++++++++++++++++++++++++++++++
 package.json            |  1 +
 src/routes/+page.svelte | 98 +++++++++++++++++++++++------------------
 3 files changed, 147 insertions(+), 43 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dbf1b93..9f86500 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
 			"name": "photo-portfolio",
 			"version": "0.0.1",
 			"dependencies": {
+				"axios": "^1.7.2",
 				"imagekit-javascript": "^3.0.1"
 			},
 			"devDependencies": {
@@ -1061,6 +1062,21 @@
 				"dequal": "^2.0.3"
 			}
 		},
+		"node_modules/asynckit": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+		},
+		"node_modules/axios": {
+			"version": "1.7.2",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+			"integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+			"dependencies": {
+				"follow-redirects": "^1.15.6",
+				"form-data": "^4.0.0",
+				"proxy-from-env": "^1.1.0"
+			}
+		},
 		"node_modules/axobject-query": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
@@ -1198,6 +1214,17 @@
 			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
 			"dev": true
 		},
+		"node_modules/combined-stream": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+			"dependencies": {
+				"delayed-stream": "~1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1271,6 +1298,14 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/delayed-stream": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
 		"node_modules/dequal": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -1652,6 +1687,38 @@
 			"integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
 			"dev": true
 		},
+		"node_modules/follow-redirects": {
+			"version": "1.15.6",
+			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+			"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://github.com/sponsors/RubenVerborgh"
+				}
+			],
+			"engines": {
+				"node": ">=4.0"
+			},
+			"peerDependenciesMeta": {
+				"debug": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/form-data": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+			"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+			"dependencies": {
+				"asynckit": "^0.4.0",
+				"combined-stream": "^1.0.8",
+				"mime-types": "^2.1.12"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/fs.realpath": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1988,6 +2055,25 @@
 				"@jridgewell/sourcemap-codec": "^1.4.15"
 			}
 		},
+		"node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dependencies": {
+				"mime-db": "1.52.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/min-indent": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -2346,6 +2432,11 @@
 				"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
 			}
 		},
+		"node_modules/proxy-from-env": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+			"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/package.json b/package.json
index a40d3c3..31fe267 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"axios": "^1.7.2",
 		"imagekit-javascript": "^3.0.1"
 	}
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cf6670c..f681ebd 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,28 +1,64 @@
 <script>
-  import { writable } from 'svelte/store';
+import { writable } from "svelte/store";
 
-  let photos = [
-    { src: 'https://ik.imagekit.io/ari/2022ischia001.JPG?updatedAt=1719499287997.jpg', alt: 'Photo 1' },
-    { src: 'https://ik.imagekit.io/ari/2022ischia02?updatedAt=1719498858408.jpg', alt: 'Photo 2' },
-    { src: 'https://ik.imagekit.io/ari/2022ischia03?updatedAt=1719498886685.jpg', alt: 'Photo 3' },
-  ];
+let photos = [
+	{ src: "https://ik.imagekit.io/ari/2022ischia001", alt: "Ischia 01" },
+	{ src: "https://ik.imagekit.io/ari/2022ischia02", alt: "Ischia 02" },
+	{ src: "https://ik.imagekit.io/ari/2022ischia03", alt: "Ischia 03" },
+	{ src: "https://ik.imagekit.io/ari/2014bergen03", alt: "Bergen 03" },
+	{ src: "https://ik.imagekit.io/ari/2014bergen02", alt: "Bergen 02" },
+	{ src: "https://ik.imagekit.io/ari/2014berlin01", alt: "Berlin 01" },
+	{ src: "https://ik.imagekit.io/ari/2014bergen01", alt: "Bergen 04" },
+	{ src: "https://ik.imagekit.io/ari/2014dublin02", alt: "Dublin 02" },
+];
 
-  // Shuffle array
-  photos.sort(() => Math.random() - 0.5);
+// Shuffle array
+photos.sort(() => Math.random() - 0.5);
 
+// Reactive variable for the current main image
+let currentPhoto = writable(photos[0]);
+
+/**
+ * @param {{ src: string; alt: string; }} photo
+ */
+const updateMainPhoto = (photo) => {
+	currentPhoto.set(photo);
+};
 
-  // Reactive variable for the current main image
-  let currentPhoto = writable(photos[0]);
 
-  /**
-	 * @param {{ src: string; alt: string; }} photo
-	 */
-  const updateMainPhoto = (photo) => {
-    currentPhoto.set(photo);
-  }
 
 </script>
 
+
+<main>
+  <div class="main-image-container">
+    <a href="/about">
+      <p>Arien Shibani</p>
+    </a>
+    {#if $currentPhoto}
+      <img
+        class="main-image"
+        src={$currentPhoto.src + "?tr=h-1032,w-1032"}
+        alt={$currentPhoto.alt}
+        fetchpriority="high"
+        loading="eager"
+      />
+    {/if}
+  </div>
+
+  <div class="thumbnail-strip" >
+    {#each photos as photo}
+      <button type="button" on:click={() => updateMainPhoto(photo)}>
+        <img
+          class="thumbnail"
+          src={photo.src + "?tr=h-100,w-100"}
+          alt={photo.alt}
+          />
+      </button>
+    {/each}
+  </div>
+</main>
+
 <style>
   main {
     display: flex;
@@ -38,8 +74,8 @@
     flex: 1;
     justify-content: center;
     align-items: center;
-    max-width: 100%;
-    max-height: 80vh; /* Ensure the image does not exceed 80% of the viewport height */
+    max-width: 1062px;
+    max-height: 1062px; /* Ensure the image does not exceed 80% of the viewport height */
     overflow: hidden;
   }
 
@@ -53,7 +89,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-top: 1em;
+    margin-top: 20px;
     overflow-x: auto; /* Allow horizontal scrolling on small screens */
     white-space: nowrap; /* Prevent line break and keep thumbnails in a row */
     width: 80vw;
@@ -106,27 +142,3 @@ a{
   color: white;
 }
 </style>
-
-<main>
-
-  <!-- Main image container -->
-  <div class="main-image-container">
-
-    <a href="/about">
-      <p>Arien Shibani</p>
-    </a>
-
-    {#if $currentPhoto}
-      <img src={$currentPhoto.src} alt={$currentPhoto.alt} class="main-image" />
-    {/if}
-  </div>
-
-  <!-- Thumbnail strip -->
-  <div class="thumbnail-strip">
-    {#each photos as photo}
-      <button type="button"  on:click={() => updateMainPhoto(photo)}>
-        <img class="thumbnail" src={photo.src} alt={photo.alt} />
-      </button>
-    {/each}
-  </div>
-</main>