\ No newline at end of file
diff --git a/src/lib/components/navigation-items/Down.svelte b/src/lib/components/navigation-items/Down.svelte
new file mode 100644
index 0000000..57323bf
--- /dev/null
+++ b/src/lib/components/navigation-items/Down.svelte
@@ -0,0 +1,10 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/lib/components/navigation-items/Left.svelte b/src/lib/components/navigation-items/Left.svelte
new file mode 100644
index 0000000..67b5a87
--- /dev/null
+++ b/src/lib/components/navigation-items/Left.svelte
@@ -0,0 +1,10 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/lib/components/navigation-items/Right.svelte b/src/lib/components/navigation-items/Right.svelte
new file mode 100644
index 0000000..3262e4d
--- /dev/null
+++ b/src/lib/components/navigation-items/Right.svelte
@@ -0,0 +1,10 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/lib/components/navigation-items/Up.svelte b/src/lib/components/navigation-items/Up.svelte
new file mode 100644
index 0000000..f130151
--- /dev/null
+++ b/src/lib/components/navigation-items/Up.svelte
@@ -0,0 +1,10 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b0d1a15..6cd3640 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,93 +6,91 @@
import Contact from "$lib/components/Contact.svelte";
import TechStack from "$lib/components/TechStack.svelte";
import Projects from "$lib/components/Projects.svelte";
+ import { tableMapperValues } from "@skeletonlabs/skeleton";
- /* IMPORTANT */
- // Anything added into the page directly will likely break the page's scrolling behaviour
- // To properly add something to the main page, make it into a component and add it to the array.
- // This array is in order of how they are to be displayed, modifying their positions will modify them in page.
+ function scrollToSection(section, smooth) {
+ section.scrollIntoView({
+ behavior: smooth ? "smooth" : "instant",
+ block: "center",
+ });
+ }
- let slides = [
- Header,
- Projects,
- TechStack,
- Contact,
- // Media,
+ // by ID
+ let layout = [
+ [null, "media", null],
+ ["contact", "header", "techstack"],
+ [null, "projects", null],
];
+ let selectedId = "header";
- let currentSection = 0;
+ function getIndexPathOfSelected() {
+ for (let rowIndex = 0; rowIndex < layout.length; rowIndex++) {
+ const colIndex = layout[rowIndex].indexOf(selectedId);
- // Update the current section based on scroll position
- const handleScroll = () => {
- const sections = document.querySelectorAll(".section");
- const scrollTop = document.querySelector(".scroll-container").scrollTop;
- sections.forEach((section, index) => {
- if (section.offsetTop <= scrollTop + window.innerHeight / 2) {
- currentSection = index;
+ if (colIndex !== -1) {
+ return [rowIndex, colIndex];
}
- });
- };
+ }
+ return null;
+ }
+
+ function evaluateArrays(input, equationArr) {
+ let output = [];
+ if (input.length !== equationArr.length)
+ return null;
+ for (let index = 0; index < input.length; index++) {
+ output.push(input[index] + equationArr[index]);
+ }
+ return output;
+ }
+
+ function scrollInDirection(direction) {
+ const currentCoords = getIndexPathOfSelected();
+ const newCoords = evaluateArrays(currentCoords, direction);
+ console.log(currentCoords)
+ console.log(newCoords)
+ const sectionId = layout[newCoords[0]][newCoords[1]];
+ console.log(sectionId);
+ selectedId = sectionId;
+ scrollToSection(document.getElementById(sectionId), true);
+ }
+
+ onMount(() => {
+ scrollToSection(document.getElementById("header"));
+ });
-