diff --git a/public/static/images/beize.png b/public/static/images/beize.png deleted file mode 100644 index ceadedd..0000000 Binary files a/public/static/images/beize.png and /dev/null differ diff --git a/public/static/images/beize.svg b/public/static/images/beize.svg new file mode 100644 index 0000000..a1bcb2a --- /dev/null +++ b/public/static/images/beize.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/static/images/pho.png b/public/static/images/pho.png deleted file mode 100644 index bc6f49c..0000000 Binary files a/public/static/images/pho.png and /dev/null differ diff --git a/public/static/images/pho.svg b/public/static/images/pho.svg new file mode 100644 index 0000000..e815fcd --- /dev/null +++ b/public/static/images/pho.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/phrasey.png b/public/static/images/phrasey.png deleted file mode 100644 index 6325f9a..0000000 Binary files a/public/static/images/phrasey.png and /dev/null differ diff --git a/public/static/images/phrasey.svg b/public/static/images/phrasey.svg new file mode 100644 index 0000000..9c3470f --- /dev/null +++ b/public/static/images/phrasey.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/static/images/symphony.png b/public/static/images/symphony.png deleted file mode 100644 index 36bb4cd..0000000 Binary files a/public/static/images/symphony.png and /dev/null differ diff --git a/public/static/images/symphony.svg b/public/static/images/symphony.svg new file mode 100644 index 0000000..cdb8490 --- /dev/null +++ b/public/static/images/symphony.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/static/images/upright-quotes.png b/public/static/images/upright-quotes.png deleted file mode 100644 index ce47327..0000000 Binary files a/public/static/images/upright-quotes.png and /dev/null differ diff --git a/src/assets/scripts/home.ts b/src/assets/scripts/home.ts index 27bec88..0f8f5e4 100644 --- a/src/assets/scripts/home.ts +++ b/src/assets/scripts/home.ts @@ -6,7 +6,9 @@ interface HeroElements { } const enableHeroElements = (heroElements: HeroElements) => { - if (heroElements.enabled) return; + if (heroElements.enabled) { + return; + } heroElements.enabled = true; heroElements.texts.forEach((x) => { const index = parseInt(x.getAttribute("data-index")!); @@ -19,7 +21,9 @@ const enableHeroElements = (heroElements: HeroElements) => { }; const disableHeroElements = (heroElements: HeroElements) => { - if (!heroElements.enabled) return; + if (!heroElements.enabled) { + return; + } heroElements.enabled = false; heroElements.texts.forEach((x) => { x.style.transitionDelay = "0"; @@ -50,21 +54,53 @@ const attachHero = () => { }, 200); }; +const onProjectsScroll = ( + projectElement: HTMLElement, + projectItemElements: HTMLElement[], + scrollingElement: Element, +) => { + const snapIndexAttribute = "data-snapped-index"; + const snapThreshold = scrollingElement.clientHeight * 0.15; + const { scrollTop } = scrollingElement; + if ( + scrollTop < projectItemElements[0]!!.offsetTop - snapThreshold || + scrollTop > + projectItemElements[projectItemElements.length - 1]!!.offsetTop + + snapThreshold + ) { + projectElement.removeAttribute(snapIndexAttribute); + return; + } + const snappedIndex = parseInt( + projectElement.getAttribute(snapIndexAttribute) ?? "-1", + ); + for (let i = projectItemElements.length - 1; i >= 0; i--) { + const x = projectItemElements[i]!!; + if (Math.abs(x.offsetTop - scrollTop) < snapThreshold) { + if (snappedIndex === i) { + break; + } + scrollingElement.scroll({ + top: x.offsetTop, + behavior: "smooth", + }); + projectElement.setAttribute(snapIndexAttribute, `${i}`); + break; + } + } +}; + const attachProjects = () => { + const projectElement = document.getElementById("projects")!; const projectItemElements = [ ...document.querySelectorAll("#project-item"), ]; - projectItemElements.forEach((x) => { - x.addEventListener("mouseenter", () => { - projectItemElements.forEach((y) => { - y.setAttribute("data-active", x === y ? "true" : "false"); - }); - }); - x.addEventListener("mouseleave", () => { - projectItemElements.forEach((y) => { - y.setAttribute("data-active", ""); - }); - }); + document.addEventListener("scrollend", () => { + const { scrollingElement } = document; + if (!scrollingElement) { + return; + } + onProjectsScroll(projectElement, projectItemElements, scrollingElement); }); }; diff --git a/src/components/base/NavBar.astro b/src/components/base/NavBar.astro index e2b71ba..1e8da1d 100644 --- a/src/components/base/NavBar.astro +++ b/src/components/base/NavBar.astro @@ -13,11 +13,7 @@ const isCurrentPage = (route: string) => class="u-flex !flex-col md:!flex-row !justify-around gap-4 md:gap-8" >
- - { - zyrouge - } - + zyrouge
diff --git a/src/components/home/ProjectItem.astro b/src/components/home/ProjectItem.astro index 6c77bf5..0f41ab6 100644 --- a/src/components/home/ProjectItem.astro +++ b/src/components/home/ProjectItem.astro @@ -1,4 +1,5 @@ --- +import { Icon } from "astro-icon/components"; import { Utils } from "~/core/utils"; interface Props { @@ -7,62 +8,42 @@ interface Props { link: string; image: string; tags: string[]; + backgroundColor: string; } -const { name, description, link, image, tags } = Astro.props; +const { name, description, link, image, tags, backgroundColor } = Astro.props; --- -
+ - - diff --git a/src/components/home/Projects.astro b/src/components/home/Projects.astro index bfcf44f..464e93f 100644 --- a/src/components/home/Projects.astro +++ b/src/components/home/Projects.astro @@ -3,30 +3,30 @@ import { StaticAssets } from "~/core/urls"; import Item from "~/components/home/ProjectItem.astro"; --- -
+
-
diff --git a/src/core/urls.ts b/src/core/urls.ts index cd18e0e..4b6e2a9 100644 --- a/src/core/urls.ts +++ b/src/core/urls.ts @@ -35,14 +35,13 @@ export class StaticAssets { static git = `${images}/git.png`; static vscode = `${images}/vscode.png`; static figma = `${images}/figma.png`; - static symphony = `${images}/symphony.png`; - static beize = `${images}/beize.png`; - static phrasey = `${images}/phrasey.png`; - static uprightQuotes = `${images}/upright-quotes.png`; + static symphony = `${images}/symphony.svg`; + static beize = `${images}/beize.svg`; + static phrasey = `${images}/phrasey.svg`; static go = `${images}/go.png`; static bash = `${images}/bash.png`; static podman = `${images}/podman.png`; - static pho = `${images}/pho.png`; + static pho = `${images}/pho.svg`; } export class ExternalAssets {} diff --git a/src/pages/index.astro b/src/pages/index.astro index 575f61e..3058171 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -22,10 +22,15 @@ const head: HeadMetadata = {
-
-

Some of my projects

+
+
+

Some of my projects

+
+

+ 🎉 Whoo Hoo! You scrolled to the end! +