\ No newline at end of file
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index e965d7f..b8e319e 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,9 +1,14 @@
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- {#if isAtTop}
-
-
-
- {/if}
-
-
\ No newline at end of file
+ #header {
+ grid-template-areas: '. . .'
+ '. . .'
+ '. . .';
+ }
+
\ No newline at end of file
diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
index 1585cb9..21d5ea3 100644
--- a/src/lib/components/Hero.svelte
+++ b/src/lib/components/Hero.svelte
@@ -6,12 +6,18 @@
import MdiDiscord from '~icons/mdi/discord';
import MdiLinkedin from '~icons/mdi/linkedin';
import CibGitea from '~icons/cib/gitea';
+ let personal = true;
\ 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..ad3f7c3
--- /dev/null
+++ b/src/lib/components/navigation-items/Down.svelte
@@ -0,0 +1,13 @@
+
+
+
+
+
\ 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..58fd0fc
--- /dev/null
+++ b/src/lib/components/navigation-items/Left.svelte
@@ -0,0 +1,14 @@
+
+
+
+
+
\ 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..cc40462
--- /dev/null
+++ b/src/lib/components/navigation-items/Right.svelte
@@ -0,0 +1,13 @@
+
+
+
+
+
\ 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..6f25c53
--- /dev/null
+++ b/src/lib/components/navigation-items/Up.svelte
@@ -0,0 +1,13 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b0d1a15..62cc333 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,93 +6,138 @@
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);
+
+ const itemAtCoords = layout[newCoords[0]][newCoords[1]];
+ if (itemAtCoords == null)
+ return;
+
+ const sectionId = layout[newCoords[0]][newCoords[1]];
+ selectedId = sectionId;
+ scrollToSection(document.getElementById(sectionId), true);
+ }
+
+ let keys = {
+ "up": [
+ "ArrowUp",
+ "w"
+ ],
+ "down": [
+ "ArrowDown",
+ "s"
+ ],
+ "left": [
+ "ArrowLeft",
+ "a"
+ ],
+ "right": [
+ "ArrowRight",
+ "d"
+ ]
+ };
+
+ onMount(() => {
+ scrollToSection(document.getElementById("header"));
+
+ window.addEventListener("resize", e => {
+ console.log(selectedId)
+ scrollToSection(document.getElementById(selectedId));
+ });
+
+ document.addEventListener("keydown", e => {
+ const directionArr = Object.entries(keys).filter(([_, values]) => values.some(v => v == e.key));
+ if (!directionArr || directionArr.length == 0)
+ return;
+ const direction = directionArr[0][0];
+ switch (direction) {
+ case "up":
+ scrollInDirection([-1, 0]);
+ break;
+ case "down":
+ scrollInDirection([1, 0]);
+ break;
+ case "left":
+ scrollInDirection([0, -1]);
+ break;
+ case "right":
+ scrollInDirection([0, 1]);
+ break;
}
});
- };
+ });
-