Index: Added photo button for switching to other photos.

src/lib/css/base.css

@@ -44,6 +44,7 @@ h2 {
     --background-dark: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(224, 217, 217, 1) 100%);
     --background-purple: linear-gradient(to right, #241d25c4 0%, #3d2b47c4 100%);
     --shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
+    --shadow-strong: 0px 8px 18px -1px rgba(52, 42, 58, 0.2);
     --shadow-hover: rgba(43, 33, 48, 0.5) 0px 22px 70px 4px;
     --shadow-active: #2c1235a0 0px 20px 30px -10px;
     --z-index-last: -1;

src/lib/css/button-slider.css

@@ -5,7 +5,7 @@
     background: var(--background-dark);
     border-radius: 3rem;
     padding: 0 !important;
-    box-shadow: 0px 8px 18px -1px rgba(52, 42, 58, 0.2);
+    box-shadow: var(--shadow-strong);
 }
 
 .button-slider-active {

src/lib/css/photo.css

@@ -0,0 +1,31 @@
+.photo-button-container {
+    display: flex;
+    width: 6rem;
+    height: 3rem;
+    background: var(--background-dark);
+    border-radius: 3rem;
+    box-shadow: var(--shadow-strong);
+    margin-top: 1.5rem;
+}
+
+.photo-button-container button {
+    background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
+    box-shadow: var(--shadow);
+    color: var(--color-background);
+    border-radius: 100%;
+    display: flex;
+    align-items: center;
+    margin: 0.5rem;
+    border: none;
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.photo-button-container button:hover {
+    box-shadow: var(--shadow-hover);
+}
+
+.photo-button-container button:active {
+    box-shadow: var(--shadow-active);
+    transform: translateY(4px);
+}

src/lib/css/pill.css

@@ -5,7 +5,7 @@
     font-weight: 600;
     background-color: #00000000;
     border-radius: 3rem;
-    box-shadow: 0px 8px 18px -1px rgba(52, 42, 58, 0.2);
+    box-shadow: var(--shadow-strong);
     margin: 0.5rem;
 }
 

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script>
 	import "$lib/css/base.css";
 	import "$lib/css/main.css";
+	import "$lib/css/photo.css";
 
 	import CoverImg from "$lib/components/cover-img.svelte";
 	import Person from "$lib/components/person.svelte";
@@ -14,18 +15,19 @@
 
 	import hubjson from "$lib/json/hub.json";
 	import { onMount } from "svelte";
+	import SvgIcon from "@jamescoyle/svelte-icon/src/svg-icon.svelte";
+	import { mdiChevronRight, mdiChevronLeft } from "@mdi/js";
 
 	let photoList = filterPhotos(hubjson.photos);
 	$: index = 0;
 	let photoDiv;
 	let tempPhotoDiv;
 
-	function updateIndex(advance) {
+	function canAdvance(advance) {
-		if (advance && index < photoList.length - 1) {
+		return !(
-			index++;
+			(advance && index < photoList.length - 1) ||
-		} else if (!advance && index >= 1) {
+			(!advance && index >= 1)
-			index--;
+		);
-		}
 	}
 
 	function swipeCanva(advance) {
@@ -33,8 +35,7 @@
 		const animTranslate = advance ? [-width, width] : [width, -width];
 
 		// Checking if we can play the animation
-		if (!((advance && index < photoList.length - 1) || (!advance && index >= 1)))
+		if (canAdvance(advance)) return;
-			return;
 
 		anime({
 			targets: photoDiv,
@@ -43,7 +44,7 @@
 			duration: 300,
 			easing: "easeInQuad",
 			complete: function () {
-				updateIndex(advance);
+				index = advance ? index + 1 : index - 1;
 				photoDiv.style.transform = `translateX(${animTranslate[1]}px)`;
 				anime({
 					targets: photoDiv,
@@ -125,6 +126,20 @@
 			<img alt="nothing" src={photo.urlcompressed} />
 		{/each}
 	</div>
-	<button on:click={() => swipeCanva(false)}>&lt;</button>
+	<div class="flex w-100 justify-center">
-	<button on:click={() => swipeCanva(true)}>&gt;</button>
+		<div class="photo-button-container">
+			<button
+				class={canAdvance(false) ? "disabled" : ""}
+				on:click={() => swipeCanva(false)}
+			>
+				<SvgIcon type="mdi" path={mdiChevronLeft} />
+			</button>
+			<button
+				class={canAdvance(true) ? "disabled" : "flex-end"}
+				on:click={() => swipeCanva(true)}
+			>
+				<SvgIcon type="mdi" path={mdiChevronRight} />
+			</button>
+		</div>
+	</div>
 </div>