From 7e97ddccee4fc41ff15e9c37739635481e1b6f6b Mon Sep 17 00:00:00 2001 From: Christofer Date: Sat, 22 Jul 2023 20:44:24 +0200 Subject: [PATCH] feature cards, hall of fame --- .eslintrc.cjs | 7 +- README.md | 3 +- pnpm-lock.yaml | 14 --- src/lib/Helper.mjs | 57 +++++++++ src/lib/components/Button.svelte | 6 +- src/lib/components/Footer.svelte | 3 + src/routes/+layout.svelte | 5 +- src/routes/+page.svelte | 20 ++- src/routes/Community.svelte | 9 ++ src/routes/FeatureCard.svelte | 171 ++++++++++++++++++++++++++ src/routes/FeaturesSlice.svelte | 92 ++++++++++++++ src/routes/Firefly.svelte | 2 +- src/routes/HallOfFameSlice.svelte | 87 +++++++++++++ src/routes/Hero.svelte | 76 +++--------- src/routes/Navbar.svelte | 2 +- src/routes/PreviewRiceSlice.svelte | 41 ++++++ src/routes/styles.css | 3 - static/imgs/404.png | Bin 0 -> 17722 bytes static/imgs/env_4 novelknock-10.png | Bin 0 -> 1858844 bytes static/imgs/hyprland.png | Bin 0 -> 78188 bytes static/imgs/img1.png | Bin 0 -> 1003308 bytes static/imgs/img2.png | Bin 0 -> 924919 bytes static/imgs/img3.png | Bin 0 -> 609183 bytes static/imgs/img4.png | Bin 0 -> 606792 bytes static/imgs/img5.png | Bin 0 -> 1734787 bytes static/imgs/img6.png | Bin 0 -> 2442550 bytes static/imgs/ricingcomp1/amadeus.png | Bin 0 -> 1748999 bytes static/imgs/ricingcomp1/flafy.png | Bin 0 -> 2495837 bytes static/imgs/ricingcomp1/flicko.png | Bin 0 -> 836250 bytes static/imgs/ricingcomp1/lauroro.jpg | Bin 0 -> 621628 bytes static/imgs/ricingcomp1/lyasm.png | Bin 0 -> 3274861 bytes static/imgs/ricingcomp2/day-night.png | Bin 0 -> 644335 bytes static/imgs/ricingcomp2/end_4.jpg | Bin 0 -> 657731 bytes static/imgs/ricingcomp2/flafy.png | Bin 0 -> 1271357 bytes static/imgs/wall_4K.png | Bin 0 -> 49045 bytes views/rices.ejs | 26 ---- 36 files changed, 506 insertions(+), 118 deletions(-) create mode 100644 src/lib/Helper.mjs create mode 100644 src/lib/components/Footer.svelte create mode 100644 src/routes/Community.svelte create mode 100644 src/routes/FeatureCard.svelte create mode 100644 src/routes/FeaturesSlice.svelte create mode 100644 src/routes/HallOfFameSlice.svelte create mode 100644 src/routes/PreviewRiceSlice.svelte create mode 100644 static/imgs/404.png create mode 100644 static/imgs/env_4 novelknock-10.png create mode 100644 static/imgs/hyprland.png create mode 100644 static/imgs/img1.png create mode 100644 static/imgs/img2.png create mode 100644 static/imgs/img3.png create mode 100644 static/imgs/img4.png create mode 100644 static/imgs/img5.png create mode 100644 static/imgs/img6.png create mode 100644 static/imgs/ricingcomp1/amadeus.png create mode 100644 static/imgs/ricingcomp1/flafy.png create mode 100644 static/imgs/ricingcomp1/flicko.png create mode 100644 static/imgs/ricingcomp1/lauroro.jpg create mode 100644 static/imgs/ricingcomp1/lyasm.png create mode 100755 static/imgs/ricingcomp2/day-night.png create mode 100644 static/imgs/ricingcomp2/end_4.jpg create mode 100644 static/imgs/ricingcomp2/flafy.png create mode 100644 static/imgs/wall_4K.png delete mode 100644 views/rices.ejs diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 29c1d31..9e546e4 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -3,12 +3,15 @@ module.exports = { extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'], parserOptions: { sourceType: 'module', - ecmaVersion: 2020, + ecmaVersion: 'latest', extraFileExtensions: ['.svelte'] }, env: { browser: true, es2017: true, node: true + }, + rules: { + 'no-unused-vars': ['off', { varsIgnorePattern: '.*' }] } -}; +} diff --git a/README.md b/README.md index 2a9424b..bb1d010 100644 --- a/README.md +++ b/README.md @@ -10,8 +10,9 @@ feel free ## Requirements -Install [ `Git LFS` ](https://git-lfs.com) on your system. +`pnpm` for package management. ## Credits +[VDawg](https://github.com/Visual-Dawg) - for the updated site and design [System-x64](https://github.com/System-x64) - for the original site code diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dadc73b..fc6932f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,18 +5,12 @@ settings: excludeLinksFromLockfile: false dependencies: - '@chriscourses/perlin-noise': - specifier: ^1.0.5 - version: 1.0.5 clsx: specifier: ^1.2.1 version: 1.2.1 simplex-noise: specifier: ^4.0.1 version: 4.0.1 - svelte-intersection-observer-action: - specifier: ^0.0.4 - version: 0.0.4 svelte-inview: specifier: ^4.0.1 version: 4.0.1(svelte@4.0.1) @@ -112,10 +106,6 @@ packages: resolution: {integrity: sha512-dlR6LdS+0SzOAPx/TPRhnoi7hE251OVeT2Snw0RguNbBSbjUHdWr0l3vcUUDg26rEysT89kCbtw1lVorBXLLCg==} dev: false - /@chriscourses/perlin-noise@1.0.5: - resolution: {integrity: sha512-AjIAlGT1M1Pc4/P3MkztzETXRI/LyGMl/fRglbY/Vgdb8Sl6Rn/yOd1XiHQD5ftiUev6i33UbReVWI95wtntpg==} - dev: false - /@esbuild/android-arm64@0.17.19: resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==} engines: {node: '>=12'} @@ -1846,10 +1836,6 @@ packages: svelte: 4.0.1 dev: true - /svelte-intersection-observer-action@0.0.4: - resolution: {integrity: sha512-Q2ukfmZI+6Ho7XHwwTq2Z/JLLE7o61cY7DRkW3nGntEkgnlT9ZiaPccm4MI1uYiRMfrYEMYPmB4+U16bJp56Uw==} - dev: false - /svelte-inview@4.0.1(svelte@4.0.1): resolution: {integrity: sha512-8NuT/DKFiZAccDw1Z16cIsdZ7K6/BGxrUfDaFaWTCEdn3YqMj1TUAkfmQ08FQ1+INl1G+TQS+ImXIBiiISgXog==} peerDependencies: diff --git a/src/lib/Helper.mjs b/src/lib/Helper.mjs new file mode 100644 index 0000000..7d50134 --- /dev/null +++ b/src/lib/Helper.mjs @@ -0,0 +1,57 @@ +import { inview } from 'svelte-inview' + +// const mappingAnimate = { +// slide: 'translate', +// zoom: 'scale', +// duration: 'transition', +// fade: 'opacity' +// } + +/** + * Fade: The initial opacity from 0 to 1. + * + * Zoom: The scale from 0 to 1. + * + * Slide: Slide in in pixels. + * + * @param {{fade?: number, zoom?: number, slide?: number, duration?: number, threshold?: number}} options + * @param { HTMLElement } node + * @returns + */ +export function animateIn(node, options) { + const observer = inview(node, { unobserveOnEnter: true, threshold: options.threshold ?? 0.4 }) + + options.duration ??= 840 + + const style = Object.entries(options) + .map(([effect, value], _, all) => { + if (effect === 'slide') return `translate: 0px ${value}px` + + if (effect === 'fade') return `opacity: ${value}` + + if (effect === 'zoom') return `scale: ${value} ${value}` + + if (effect === 'duration') { + return `transition: all ${value}ms` + } + }) + .join(';') + + node.style = style + + node.addEventListener('inview_enter', callback) + + function callback() { + console.log('Callbacked!!') + node.style.opacity = '1' + node.style.scale = '1 1' + node.style.translate = '0 0' + } + + return { destroy: observer.destroy } +} + +// export function animateIn(styles) { +// const inview = inview() +// // return ({ details: { invView, scrollDirection: vertical, node } }) => {} +// } diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte index 2945236..e3f500e 100644 --- a/src/lib/components/Button.svelte +++ b/src/lib/components/Button.svelte @@ -43,11 +43,9 @@ transition: transform 180ms cubic-bezier(0.1, -0, 0.42, 1.8); } - /*!!! FIREFLIES IN THE BACKGROUND */ - .fancy { - /* background: rgba(theme(colors.black), 0.8); */ - background-clip: padding-box; + background: theme(colors.black / 50%); + /* background-clip: padding-box; */ outline: 2px theme(colors.primary) solid; } diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte new file mode 100644 index 0000000..4c71990 --- /dev/null +++ b/src/lib/components/Footer.svelte @@ -0,0 +1,3 @@ + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index cec679f..16f2e51 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,4 +1,5 @@ @@ -10,7 +11,5 @@ -
-

Footer

-
+