diff --git a/package-lock.json b/package-lock.json index fc72c2b..13b1b84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "svelte": "^4.2.7", "svelte-check": "^3.6.0", "svelte-highlight": "^7.6.0", + "svelte-parallax": "^0.6.0", "typescript": "^5.0.0", "vite": "^5.0.3" } @@ -897,6 +898,12 @@ "node": ">=8.0" } }, + "node_modules/focus-options-polyfill": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/focus-options-polyfill/-/focus-options-polyfill-1.6.0.tgz", + "integrity": "sha512-uyrAmLZrPnUItQY5wTdg31TO9GGZRGsh/jmohUg9oLmLi/sw5y7LlTV/mwyd6rvbxIOGwmRiv6LcTS8w7Bk9NQ==", + "dev": true + }, "node_modules/fs-constants": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz", @@ -1794,6 +1801,15 @@ "resolved": "https://registry.npmjs.org/svelte-media-queries/-/svelte-media-queries-1.6.2.tgz", "integrity": "sha512-SMz6od/vIeZEGlc4P0HKJK4G0fZotuwFhCSpBQaPqh75h6sL6sNf+4+IjbegFKXbP7b+SOfyzVOIMXTr8jynkA==" }, + "node_modules/svelte-parallax": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/svelte-parallax/-/svelte-parallax-0.6.0.tgz", + "integrity": "sha512-W2dGPNmK274AmL8Ibzr96luh24jr3u2MfAmAJTpnhAZwxkRws5MKgCxfxBBPvpRUc2GpGGIGanhTYXoHV6DcBw==", + "dev": true, + "dependencies": { + "focus-options-polyfill": "^1.6.0" + } + }, "node_modules/svelte/node_modules/@ampproject/remapping": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz", diff --git a/package.json b/package.json index 85b0370..bffde61 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "svelte": "^4.2.7", "svelte-check": "^3.6.0", "svelte-highlight": "^7.6.0", + "svelte-parallax": "^0.6.0", "typescript": "^5.0.0", "vite": "^5.0.3" }, diff --git a/src/comps/Utils/HorizonalStack.svelte b/src/comps/Utils/HorizonalStack.svelte index 2fa1931..54f96b4 100644 --- a/src/comps/Utils/HorizonalStack.svelte +++ b/src/comps/Utils/HorizonalStack.svelte @@ -1,10 +1,12 @@ -
+
\ No newline at end of file diff --git a/src/comps/Utils/VerticalStack.svelte b/src/comps/Utils/VerticalStack.svelte index 474252a..7b9e06d 100644 --- a/src/comps/Utils/VerticalStack.svelte +++ b/src/comps/Utils/VerticalStack.svelte @@ -1,4 +1,4 @@ -
+
\ No newline at end of file diff --git a/src/comps/Utils/ZSpacer.svelte b/src/comps/Utils/ZSpacer.svelte new file mode 100644 index 0000000..8de2124 --- /dev/null +++ b/src/comps/Utils/ZSpacer.svelte @@ -0,0 +1,8 @@ +
+ + \ No newline at end of file diff --git a/src/comps/timeline/timeline.svelte b/src/comps/timeline/timeline.svelte index 95405ac..bb1dfca 100644 --- a/src/comps/timeline/timeline.svelte +++ b/src/comps/timeline/timeline.svelte @@ -1,12 +1,15 @@ -
    - {#each {length: 3} as _, i} -
  • - -
    • - {/each} -
\ No newline at end of file + + + + + \ No newline at end of file diff --git a/src/comps/timeline/timelineItem.svelte b/src/comps/timeline/timelineItem.svelte index 3cdf13d..e9b81af 100644 --- a/src/comps/timeline/timelineItem.svelte +++ b/src/comps/timeline/timelineItem.svelte @@ -2,26 +2,99 @@ import HorizonalStack from "../Utils/HorizonalStack.svelte"; import Img from '@zerodevx/svelte-img' import VerticalStack from "../Utils/VerticalStack.svelte"; + import ZSpacer from "../Utils/ZSpacer.svelte"; + import MediaQuery from 'svelte-media-queries'; // Set these when using the component export let date: string = "null"; export let imagePath: string = "null"; export let title: string = "null"; export let desc: string = "null"; + + const timelineCollapseThreshhold : string = '1000px'; + let timelineCollaped: boolean = false; -
- {title} - + + +
+
{#if imagePath !== "null"} - +
+ nothing +
{/if} - - - - +
+
+
+
{@html title}
+
{@html date}
+
{@html desc}
+
\ No newline at end of file diff --git a/src/routes/zhen/+page.svelte b/src/routes/zhen/+page.svelte index f21056c..3fb590a 100644 --- a/src/routes/zhen/+page.svelte +++ b/src/routes/zhen/+page.svelte @@ -1,5 +1,13 @@ - + + + + + + + \ No newline at end of file diff --git a/src/routes/zhen/Comps/AboutMe.svelte b/src/routes/zhen/Comps/AboutMe.svelte new file mode 100644 index 0000000..36e7adf --- /dev/null +++ b/src/routes/zhen/Comps/AboutMe.svelte @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/routes/zhen/Comps/TopAnimatedBackground.svelte b/src/routes/zhen/Comps/TopAnimatedBackground.svelte index 9ccc3d9..95cc0b0 100644 --- a/src/routes/zhen/Comps/TopAnimatedBackground.svelte +++ b/src/routes/zhen/Comps/TopAnimatedBackground.svelte @@ -4,6 +4,8 @@ import TopNameTextPlate from "./TopNameTextPlate.svelte"; //import { throttle } from "./../Utils/Throttle"; + import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax"; + // Params let mouseMoveScale: number = 0.25; let targetTextLenght: number = 100; @@ -52,24 +54,32 @@ windowRef.addEventListener("resize", updateDimensions); const RevertToOrigin = () => { - if(navigator.userAgent.search(/gecko/i)>0 && StartPageAnimated !== null){ - StartPageAnimated.classList.add('FirefoxSmoothTranition'); + if ( + navigator.userAgent.search(/gecko/i) > 0 && + StartPageAnimated !== null + ) { + StartPageAnimated.classList.add("FirefoxSmoothTranition"); } - updateAnimation(new Vector2(windowWidth/2, windowHeight/2)); + updateAnimation(new Vector2(windowWidth / 2, windowHeight / 2)); }; - document.documentElement.addEventListener('mouseleave', RevertToOrigin) + document.documentElement.addEventListener("mouseleave", RevertToOrigin); const RemoveFirefoxSmoothTranition = () => { - if(navigator.userAgent.search(/gecko/i)>0 && StartPageAnimated !== null){ - StartPageAnimated.classList.remove('FirefoxSmoothTranition'); + if ( + navigator.userAgent.search(/gecko/i) > 0 && + StartPageAnimated !== null + ) { + StartPageAnimated.classList.remove("FirefoxSmoothTranition"); } }; - document.documentElement.addEventListener('mouseenter', RemoveFirefoxSmoothTranition) + document.documentElement.addEventListener( + "mouseenter", + RemoveFirefoxSmoothTranition, + ); return () => { windowRef.removeEventListener("resize", updateDimensions); }; - }); const programmingLanguages: string[] = [ @@ -81,27 +91,48 @@ "JAVASCRIPT", "TYPESCRIPT", "HTML", - "CSS" + "CSS", ]; function getRandomInt(max: number) { return Math.floor(Math.random() * max); } - function GrabRandomString(){ + function GrabRandomString() { let outString: string = ""; while (outString.length < targetTextLenght) { - outString += programmingLanguages[getRandomInt(programmingLanguages.length)] + " "; + outString += + programmingLanguages[ + getRandomInt(programmingLanguages.length) + ] + " "; } return outString; // At about target size } - -
+ + +
+ {#each { length: 100 } as _, i} + + {GrabRandomString()} + + {/each} +
+ + + + + + + -
+