flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

✨ Finish and animate About page

Browse Source
This commit is contained in:
Félix Péault
2022-09-12 12:43:49 +02:00
parent 8251bd4b78
commit 6494e622ba
8 changed files with 234 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -33,7 +33,7 @@
"@typescript-eslint/parser": "^5.36.2", "@typescript-eslint/parser": "^5.36.2",
"browserslist": "^4.21.3", "browserslist": "^4.21.3",
"cssnano": "^5.1.13", "cssnano": "^5.1.13",
"eslint": "^8.23.0", "eslint": "^8.23.1",
"eslint-plugin-svelte3": "^4.0.0", "eslint-plugin-svelte3": "^4.0.0",
"postcss": "^8.4.16", "postcss": "^8.4.16",
"postcss-focus-visible": "^7.1.0", "postcss-focus-visible": "^7.1.0",

84
pnpm-lock.yaml generated
View File

@@ -12,7 +12,7 @@ specifiers:
cssnano: ^5.1.13 cssnano: ^5.1.13
dayjs: ^1.11.5 dayjs: ^1.11.5
embla-carousel: ^7.0.2 embla-carousel: ^7.0.2
eslint: ^8.23.0 eslint: ^8.23.1
eslint-plugin-svelte3: ^4.0.0 eslint-plugin-svelte3: ^4.0.0
focus-visible: ^5.2.0 focus-visible: ^5.2.0
motion: ^10.14.2 motion: ^10.14.2
@@ -48,12 +48,12 @@ devDependencies:
'@sveltejs/adapter-node': 1.0.0-next.89 '@sveltejs/adapter-node': 1.0.0-next.89
'@sveltejs/adapter-vercel': 1.0.0-next.73 '@sveltejs/adapter-vercel': 1.0.0-next.73
'@sveltejs/kit': 1.0.0-next.480_svelte@3.50.1+vite@3.1.0 '@sveltejs/kit': 1.0.0-next.480_svelte@3.50.1+vite@3.1.0
'@typescript-eslint/eslint-plugin': 5.36.2_2l2r3i3lm6jysqd4ac3ql4n2mm '@typescript-eslint/eslint-plugin': 5.36.2_wxqvmnl3i4rbvz4ixyoiufmx3e
'@typescript-eslint/parser': 5.36.2_itqs5654cmlnjraw6gjzqacppi '@typescript-eslint/parser': 5.36.2_irgkl5vooow2ydyo6aokmferha
browserslist: 4.21.3 browserslist: 4.21.3
cssnano: 5.1.13_postcss@8.4.16 cssnano: 5.1.13_postcss@8.4.16
eslint: 8.23.0 eslint: 8.23.1
eslint-plugin-svelte3: 4.0.0_jtvgu4usxe4xoavzb5jpyaoyje eslint-plugin-svelte3: 4.0.0_rhh4tpcyg7zwtq6pdnkzw5gxma
postcss: 8.4.16 postcss: 8.4.16
postcss-focus-visible: 7.1.0_postcss@8.4.16 postcss-focus-visible: 7.1.0_postcss@8.4.16
postcss-normalize: 10.0.1_mu2kzpkteq3ketk6piffleamkq postcss-normalize: 10.0.1_mu2kzpkteq3ketk6piffleamkq
@@ -251,8 +251,8 @@ packages:
dev: true dev: true
optional: true optional: true
/@eslint/eslintrc/1.3.1: /@eslint/eslintrc/1.3.2:
resolution: {integrity: sha512-OhSY22oQQdw3zgPOOwdoj01l/Dzl1Z+xyUP33tkSN+aqyEhymJCcPHyXt+ylW8FSe0TfRC2VG+ROQOapD0aZSQ==} resolution: {integrity: sha512-AXYd23w1S/bv3fTs3Lz0vjiYemS08jWkI3hYyS9I1ry+0f+Yjs1wm+sU0BS8qDOPrBIkp4qHYC16I8uVtpLajQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies: dependencies:
ajv: 6.12.6 ajv: 6.12.6
@@ -549,7 +549,7 @@ packages:
'@types/node': 18.7.16 '@types/node': 18.7.16
dev: true dev: true
/@typescript-eslint/eslint-plugin/5.36.2_2l2r3i3lm6jysqd4ac3ql4n2mm: /@typescript-eslint/eslint-plugin/5.36.2_wxqvmnl3i4rbvz4ixyoiufmx3e:
resolution: {integrity: sha512-OwwR8LRwSnI98tdc2z7mJYgY60gf7I9ZfGjN5EjCwwns9bdTuQfAXcsjSB2wSQ/TVNYSGKf4kzVXbNGaZvwiXw==} resolution: {integrity: sha512-OwwR8LRwSnI98tdc2z7mJYgY60gf7I9ZfGjN5EjCwwns9bdTuQfAXcsjSB2wSQ/TVNYSGKf4kzVXbNGaZvwiXw==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
@@ -560,12 +560,12 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/parser': 5.36.2_itqs5654cmlnjraw6gjzqacppi '@typescript-eslint/parser': 5.36.2_irgkl5vooow2ydyo6aokmferha
'@typescript-eslint/scope-manager': 5.36.2 '@typescript-eslint/scope-manager': 5.36.2
'@typescript-eslint/type-utils': 5.36.2_itqs5654cmlnjraw6gjzqacppi '@typescript-eslint/type-utils': 5.36.2_irgkl5vooow2ydyo6aokmferha
'@typescript-eslint/utils': 5.36.2_itqs5654cmlnjraw6gjzqacppi '@typescript-eslint/utils': 5.36.2_irgkl5vooow2ydyo6aokmferha
debug: 4.3.4 debug: 4.3.4
eslint: 8.23.0 eslint: 8.23.1
functional-red-black-tree: 1.0.1 functional-red-black-tree: 1.0.1
ignore: 5.2.0 ignore: 5.2.0
regexpp: 3.2.0 regexpp: 3.2.0
@@ -576,7 +576,7 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@typescript-eslint/parser/5.36.2_itqs5654cmlnjraw6gjzqacppi: /@typescript-eslint/parser/5.36.2_irgkl5vooow2ydyo6aokmferha:
resolution: {integrity: sha512-qS/Kb0yzy8sR0idFspI9Z6+t7mqk/oRjnAYfewG+VN73opAUvmYL3oPIMmgOX6CnQS6gmVIXGshlb5RY/R22pA==} resolution: {integrity: sha512-qS/Kb0yzy8sR0idFspI9Z6+t7mqk/oRjnAYfewG+VN73opAUvmYL3oPIMmgOX6CnQS6gmVIXGshlb5RY/R22pA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
@@ -590,7 +590,7 @@ packages:
'@typescript-eslint/types': 5.36.2 '@typescript-eslint/types': 5.36.2
'@typescript-eslint/typescript-estree': 5.36.2_typescript@4.8.3 '@typescript-eslint/typescript-estree': 5.36.2_typescript@4.8.3
debug: 4.3.4 debug: 4.3.4
eslint: 8.23.0 eslint: 8.23.1
typescript: 4.8.3 typescript: 4.8.3
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
@@ -604,7 +604,7 @@ packages:
'@typescript-eslint/visitor-keys': 5.36.2 '@typescript-eslint/visitor-keys': 5.36.2
dev: true dev: true
/@typescript-eslint/type-utils/5.36.2_itqs5654cmlnjraw6gjzqacppi: /@typescript-eslint/type-utils/5.36.2_irgkl5vooow2ydyo6aokmferha:
resolution: {integrity: sha512-rPQtS5rfijUWLouhy6UmyNquKDPhQjKsaKH0WnY6hl/07lasj8gPaH2UD8xWkePn6SC+jW2i9c2DZVDnL+Dokw==} resolution: {integrity: sha512-rPQtS5rfijUWLouhy6UmyNquKDPhQjKsaKH0WnY6hl/07lasj8gPaH2UD8xWkePn6SC+jW2i9c2DZVDnL+Dokw==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
@@ -615,9 +615,9 @@ packages:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/typescript-estree': 5.36.2_typescript@4.8.3 '@typescript-eslint/typescript-estree': 5.36.2_typescript@4.8.3
'@typescript-eslint/utils': 5.36.2_itqs5654cmlnjraw6gjzqacppi '@typescript-eslint/utils': 5.36.2_irgkl5vooow2ydyo6aokmferha
debug: 4.3.4 debug: 4.3.4
eslint: 8.23.0 eslint: 8.23.1
tsutils: 3.21.0_typescript@4.8.3 tsutils: 3.21.0_typescript@4.8.3
typescript: 4.8.3 typescript: 4.8.3
transitivePeerDependencies: transitivePeerDependencies:
@@ -650,7 +650,7 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@typescript-eslint/utils/5.36.2_itqs5654cmlnjraw6gjzqacppi: /@typescript-eslint/utils/5.36.2_irgkl5vooow2ydyo6aokmferha:
resolution: {integrity: sha512-uNcopWonEITX96v9pefk9DC1bWMdkweeSsewJ6GeC7L6j2t0SJywisgkr9wUTtXk90fi2Eljj90HSHm3OGdGRg==} resolution: {integrity: sha512-uNcopWonEITX96v9pefk9DC1bWMdkweeSsewJ6GeC7L6j2t0SJywisgkr9wUTtXk90fi2Eljj90HSHm3OGdGRg==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
@@ -660,9 +660,9 @@ packages:
'@typescript-eslint/scope-manager': 5.36.2 '@typescript-eslint/scope-manager': 5.36.2
'@typescript-eslint/types': 5.36.2 '@typescript-eslint/types': 5.36.2
'@typescript-eslint/typescript-estree': 5.36.2_typescript@4.8.3 '@typescript-eslint/typescript-estree': 5.36.2_typescript@4.8.3
eslint: 8.23.0 eslint: 8.23.1
eslint-scope: 5.1.1 eslint-scope: 5.1.1
eslint-utils: 3.0.0_eslint@8.23.0 eslint-utils: 3.0.0_eslint@8.23.1
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
- typescript - typescript
@@ -777,15 +777,15 @@ packages:
resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==} resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
dev: true dev: true
/autoprefixer/10.4.8_postcss@8.4.16: /autoprefixer/10.4.9_postcss@8.4.16:
resolution: {integrity: sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==} resolution: {integrity: sha512-Uu67eduPEmOeA0vyJby5ghu1AAELCCNSsLAjK+lz6kYzNM5sqnBO36MqfsjhPjQF/BaJM5U/UuFYyl7PavY/wQ==}
engines: {node: ^10 || ^12 || >=14} engines: {node: ^10 || ^12 || >=14}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
postcss: ^8.1.0 postcss: ^8.1.0
dependencies: dependencies:
browserslist: 4.21.3 browserslist: 4.21.3
caniuse-lite: 1.0.30001393 caniuse-lite: 1.0.30001397
fraction.js: 4.2.0 fraction.js: 4.2.0
normalize-range: 0.1.2 normalize-range: 0.1.2
picocolors: 1.0.0 picocolors: 1.0.0
@@ -831,8 +831,8 @@ packages:
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
hasBin: true hasBin: true
dependencies: dependencies:
caniuse-lite: 1.0.30001393 caniuse-lite: 1.0.30001397
electron-to-chromium: 1.4.246 electron-to-chromium: 1.4.247
node-releases: 2.0.6 node-releases: 2.0.6
update-browserslist-db: 1.0.7_browserslist@4.21.3 update-browserslist-db: 1.0.7_browserslist@4.21.3
dev: true dev: true
@@ -850,13 +850,13 @@ packages:
resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==} resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
dependencies: dependencies:
browserslist: 4.21.3 browserslist: 4.21.3
caniuse-lite: 1.0.30001393 caniuse-lite: 1.0.30001397
lodash.memoize: 4.1.2 lodash.memoize: 4.1.2
lodash.uniq: 4.5.0 lodash.uniq: 4.5.0
dev: true dev: true
/caniuse-lite/1.0.30001393: /caniuse-lite/1.0.30001397:
resolution: {integrity: sha512-N/od11RX+Gsk+1qY/jbPa0R6zJupEa0lxeBG598EbrtblxVCTJsQwbRBm6+V+rxpc5lHKdsXb9RY83cZIPLseA==} resolution: {integrity: sha512-SW9N2TbCdLf0eiNDRrrQXx2sOkaakNZbCjgNpPyMJJbiOrU5QzMIrXOVMRM1myBXTD5iTkdrtU/EguCrBocHlA==}
dev: true dev: true
/chalk/4.1.2: /chalk/4.1.2:
@@ -1163,8 +1163,8 @@ packages:
domhandler: 4.3.1 domhandler: 4.3.1
dev: true dev: true
/electron-to-chromium/1.4.246: /electron-to-chromium/1.4.247:
resolution: {integrity: sha512-/wFCHUE+Hocqr/LlVGsuKLIw4P2lBWwFIDcNMDpJGzyIysQV4aycpoOitAs32FT94EHKnNqDR/CVZJFbXEufJA==} resolution: {integrity: sha512-FLs6R4FQE+1JHM0hh3sfdxnYjKvJpHZyhQDjc2qFq/xFvmmRt/TATNToZhrcGUFzpF2XjeiuozrA8lI0PZmYYw==}
dev: true dev: true
/embla-carousel/7.0.2: /embla-carousel/7.0.2:
@@ -1611,13 +1611,13 @@ packages:
engines: {node: '>=10'} engines: {node: '>=10'}
dev: true dev: true
/eslint-plugin-svelte3/4.0.0_jtvgu4usxe4xoavzb5jpyaoyje: /eslint-plugin-svelte3/4.0.0_rhh4tpcyg7zwtq6pdnkzw5gxma:
resolution: {integrity: sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==} resolution: {integrity: sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==}
peerDependencies: peerDependencies:
eslint: '>=8.0.0' eslint: '>=8.0.0'
svelte: ^3.2.0 svelte: ^3.2.0
dependencies: dependencies:
eslint: 8.23.0 eslint: 8.23.1
svelte: 3.50.1 svelte: 3.50.1
dev: true dev: true
@@ -1637,13 +1637,13 @@ packages:
estraverse: 5.3.0 estraverse: 5.3.0
dev: true dev: true
/eslint-utils/3.0.0_eslint@8.23.0: /eslint-utils/3.0.0_eslint@8.23.1:
resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==} resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0} engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
peerDependencies: peerDependencies:
eslint: '>=5' eslint: '>=5'
dependencies: dependencies:
eslint: 8.23.0 eslint: 8.23.1
eslint-visitor-keys: 2.1.0 eslint-visitor-keys: 2.1.0
dev: true dev: true
@@ -1657,12 +1657,12 @@ packages:
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true dev: true
/eslint/8.23.0: /eslint/8.23.1:
resolution: {integrity: sha512-pBG/XOn0MsJcKcTRLr27S5HpzQo4kLr+HjLQIyK4EiCsijDl/TB+h5uEuJU6bQ8Edvwz1XWOjpaP2qgnXGpTcA==} resolution: {integrity: sha512-w7C1IXCc6fNqjpuYd0yPlcTKKmHlHHktRkzmBPZ+7cvNBQuiNjx0xaMTjAJGCafJhQkrFJooREv0CtrVzmHwqg==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
hasBin: true hasBin: true
dependencies: dependencies:
'@eslint/eslintrc': 1.3.1 '@eslint/eslintrc': 1.3.2
'@humanwhocodes/config-array': 0.10.4 '@humanwhocodes/config-array': 0.10.4
'@humanwhocodes/gitignore-to-minimatch': 1.0.2 '@humanwhocodes/gitignore-to-minimatch': 1.0.2
'@humanwhocodes/module-importer': 1.0.1 '@humanwhocodes/module-importer': 1.0.1
@@ -1673,7 +1673,7 @@ packages:
doctrine: 3.0.0 doctrine: 3.0.0
escape-string-regexp: 4.0.0 escape-string-regexp: 4.0.0
eslint-scope: 7.1.1 eslint-scope: 7.1.1
eslint-utils: 3.0.0_eslint@8.23.0 eslint-utils: 3.0.0_eslint@8.23.1
eslint-visitor-keys: 3.3.0 eslint-visitor-keys: 3.3.0
espree: 9.4.0 espree: 9.4.0
esquery: 1.4.0 esquery: 1.4.0
@@ -1681,7 +1681,6 @@ packages:
fast-deep-equal: 3.1.3 fast-deep-equal: 3.1.3
file-entry-cache: 6.0.1 file-entry-cache: 6.0.1
find-up: 5.0.0 find-up: 5.0.0
functional-red-black-tree: 1.0.1
glob-parent: 6.0.2 glob-parent: 6.0.2
globals: 13.17.0 globals: 13.17.0
globby: 11.1.0 globby: 11.1.0
@@ -1690,6 +1689,7 @@ packages:
import-fresh: 3.3.0 import-fresh: 3.3.0
imurmurhash: 0.1.4 imurmurhash: 0.1.4
is-glob: 4.0.3 is-glob: 4.0.3
js-sdsl: 4.1.4
js-yaml: 4.1.0 js-yaml: 4.1.0
json-stable-stringify-without-jsonify: 1.0.1 json-stable-stringify-without-jsonify: 1.0.1
levn: 0.4.1 levn: 0.4.1
@@ -2045,6 +2045,10 @@ packages:
resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
dev: true dev: true
/js-sdsl/4.1.4:
resolution: {integrity: sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==}
dev: true
/js-yaml/4.1.0: /js-yaml/4.1.0:
resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==} resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
hasBin: true hasBin: true
@@ -2913,7 +2917,7 @@ packages:
'@csstools/postcss-text-decoration-shorthand': 1.0.0_postcss@8.4.16 '@csstools/postcss-text-decoration-shorthand': 1.0.0_postcss@8.4.16
'@csstools/postcss-trigonometric-functions': 1.0.2_postcss@8.4.16 '@csstools/postcss-trigonometric-functions': 1.0.2_postcss@8.4.16
'@csstools/postcss-unset-value': 1.0.2_postcss@8.4.16 '@csstools/postcss-unset-value': 1.0.2_postcss@8.4.16
autoprefixer: 10.4.8_postcss@8.4.16 autoprefixer: 10.4.9_postcss@8.4.16
browserslist: 4.21.3 browserslist: 4.21.3
css-blank-pseudo: 3.0.3_postcss@8.4.16 css-blank-pseudo: 3.0.3_postcss@8.4.16
css-has-pseudo: 3.0.4_postcss@8.4.16 css-has-pseudo: 3.0.4_postcss@8.4.16

2
src/components/SmoothScroll.svelte
View File

@@ -11,7 +11,7 @@
if (browser) { if (browser) {
$smoothScroll = new Lenis({ $smoothScroll = new Lenis({
duration: 1.2, duration: 1.2,
easing: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)), // https://easings.net/ easing: (t: number) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)), // https://easings.net/
smooth: true, smooth: true,
direction: 'vertical', direction: 'vertical',
}) })

2
src/components/molecules/ProcessStep.svelte
View File

@@ -54,7 +54,7 @@
</div> </div>
{/if} {/if}
<div class="text text-normal"> <div class="text text-xsmall">
{@html text} {@html text}
</div> </div>
</div> </div>

58
src/components/organisms/Banner.svelte
View File

@@ -3,70 +3,12 @@
</style> </style>
<script lang="ts"> <script lang="ts">
import { navigating } from '$app/stores'
import { onMount } from 'svelte'
import { stagger, timeline } from 'motion'
import { DELAY } from '$utils/contants'
import { quartOut } from '$animations/easings'
// Components // Components
import Image from '$components/atoms/Image.svelte' import Image from '$components/atoms/Image.svelte'
export let type: string = undefined export let type: string = undefined
export let title: string export let title: string
export let image: any export let image: any
onMount(() => {
/**
* Animations
*/
// const animation = timeline([
// // Hero image
// ['.shop-page__background', {
// scale: [1.06, 1],
// opacity: [0, 1],
// }, {
// at: 0.4,
// duration: 2.4,
// }],
// // Intro top elements
// ['.shop-page__intro .top > *', {
// y: [-100, 0],
// opacity: [0, 1],
// }, {
// at: 0.4,
// delay: stagger(0.25),
// }],
// // Hero title
// ['.shop-page__title h1', {
// y: [32, 0],
// opacity: [0, 1],
// }, {
// at: 0.5,
// }],
// // Intro navbar
// ['.shop-page__nav .container > *, .shop-page__intro .button-cart', {
// y: [100, 0],
// opacity: [0, 1],
// }, {
// at: 0.7,
// delay: stagger(0.25),
// }]
// ], {
// delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
// defaultOptions: {
// duration: 1.6,
// easing: quartOut,
// },
// })
// animation.stop()
// // Run animation
// requestAnimationFrame(animation.play)
})
</script> </script>
<section class="banner"> <section class="banner">

1
src/components/organisms/ShopBanner.svelte
View File

@@ -45,6 +45,7 @@
['.shop-page__background', { ['.shop-page__background', {
scale: [1.06, 1], scale: [1.06, 1],
opacity: [0, 1], opacity: [0, 1],
z: 0,
}, { }, {
at: 0.4, at: 0.4,
duration: 2.4, duration: 2.4,

203
src/routes/about/+page.svelte
View File

@@ -8,7 +8,7 @@
import { quartOut as quartOutSvelte } from 'svelte/easing' import { quartOut as quartOutSvelte } from 'svelte/easing'
import { fade, fly } from 'svelte/transition' import { fade, fly } from 'svelte/transition'
import type { PageData } from './$types' import type { PageData } from './$types'
import { scroll, animate, inView, timeline } from 'motion' import { animate, inView, stagger, timeline } from 'motion'
import { map } from '$utils/functions' import { map } from '$utils/functions'
import { getAssetUrlKey } from '$utils/api' import { getAssetUrlKey } from '$utils/api'
import { DELAY } from '$utils/contants' import { DELAY } from '$utils/contants'
@@ -19,7 +19,6 @@
import Image from '$components/atoms/Image.svelte' import Image from '$components/atoms/Image.svelte'
import Button from '$components/atoms/Button.svelte' import Button from '$components/atoms/Button.svelte'
import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte' import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
import Heading from '$components/molecules/Heading.svelte'
import ProcessStep from '$components/molecules/ProcessStep.svelte' import ProcessStep from '$components/molecules/ProcessStep.svelte'
import Banner from '$components/organisms/Banner.svelte' import Banner from '$components/organisms/Banner.svelte'
@@ -65,62 +64,126 @@
/** /**
* Animations * Animations
*/ */
// const animation = timeline([ const animation = timeline([
// // Heading // Banner
// ['.heading .text', { ['.banner picture', {
// y: [24, 0], scale: [1.06, 1],
// opacity: [0, 1], opacity: [0, 1],
// z: 0, z: 0,
// }, { }, {
// at: 0.5, at: 0.4,
// }], duration: 2.4,
}],
['.banner h1', {
y: [32, 0],
opacity: [0, 1],
}, {
at: 0.5,
}],
['.banner__top > *', {
y: [-100, 0],
opacity: [0, 1],
}, {
at: 0.4,
delay: stagger(0.25),
}],
// // First photo // Intro elements
// [photoFirstEl, { ['.about__introduction .container > *', {
// y: ['10%', 0], y: ['20%', 0],
// rotate: [0, getComputedStyle(photoFirstEl).getPropertyValue('--rotate')], opacity: [0, 1],
// opacity: [0, 1], z: 0,
// z: 0, }, {
// }, { at: 0.75,
// at: 0.75, delay: stagger(0.25),
// opacity: { }],
// duration: 1 ['.first-photo', {
// } y: ['10%', 0],
// }], opacity: [0, 1],
z: 0,
}, {
at: 1.2,
}],
['.first-photo img', {
scale: [1.06, 1],
opacity: [0, 1],
z: 0,
}, {
at: 1.5,
duration: 2.4,
}],
], {
delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
defaultOptions: {
duration: 1.6,
easing: quartOut,
},
})
animation.stop()
// // Portrait photo // Sections
// [photoUsEl, { inView('[data-reveal]', ({ target }) => {
// y: ['10%', 0], animate(target, {
// x: [0, '5%'], opacity: [0, 1],
// rotate: [0, 5], y: ['20%', 0],
// opacity: [0, 1], z: 0,
// z: 0, }, {
// }, { delay: 0.2,
// at: 1, duration: 1.6,
// opacity: { easing: quartOut,
// duration: 1 })
// } })
// }],
// // Text // Global images
// ['.about__introduction .text', { inView('[data-reveal-image] img', ({ target }) => {
// y: [32, 0], animate(target, {
// opacity: [0, 1], scale: [1.06, 1],
// z: 0, opacity: [0, 1],
// }, { z: 0,
// at: 1.2, }, {
// }], delay: 0.3,
// ], { duration: 2.4,
// delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0, easing: quartOut,
// defaultOptions: { })
// duration: 1.6, })
// easing: quartOut,
// },
// })
// animation.stop()
// // Run animation // Process
// requestAnimationFrame(animation.play) const processTimeline = timeline([
// Step links
['.about__process li a', {
y: [16, 0],
opacity: [0, 1],
z: 0,
}, {
at: 0,
delay: stagger(0.15),
}],
// First step
['.about__process .step', {
scale: [1.1, 1],
opacity: [0, 1],
x: [20, 0]
}, {
at: 0.6,
duration: 1,
}]
], {
defaultOptions: {
duration: 1.6,
easing: quartOut,
}
})
processTimeline.stop()
inView('.about__process', () => {
requestAnimationFrame(processTimeline.play)
}, {
amount: 0.35,
})
// Run animation
requestAnimationFrame(animation.play)
}) })
@@ -165,7 +228,7 @@
<div class="container grid"> <div class="container grid">
<figure class="first-photo"> <figure class="first-photo">
<Image <Image
class="shadow-box-dark" class="picture shadow-box-dark"
id={about.intro_firstphoto.id} id={about.intro_firstphoto.id}
alt={about.intro_firstphoto.title} alt={about.intro_firstphoto.title}
sizeKey="photo-list" sizeKey="photo-list"
@@ -186,16 +249,18 @@
</figcaption> </figcaption>
</figure> </figure>
<h2 class="title-small">{about.creation_title}</h2> <h2 class="title-small" data-reveal>{about.creation_title}</h2>
<div class="heading text-huge"> <div class="heading text-huge" data-reveal>
{@html about.creation_heading} {@html about.creation_heading}
</div> </div>
<div class="text text-small"> <div class="text text-small" data-reveal>
{@html about.creation_text} {@html about.creation_text}
</div> </div>
<figure class="picture portrait-photo" data-reveal-image>
<Image <Image
class="portrait-photo shadow-box-dark" class="shadow-box-dark"
id={about.creation_portrait.id} id={about.creation_portrait.id}
alt={about.creation_portrait.title} alt={about.creation_portrait.title}
sizeKey="photo-list" sizeKey="photo-list"
@@ -205,6 +270,7 @@
}} }}
ratio={1.425} ratio={1.425}
/> />
</figure>
<span class="portrait-photo__caption text-info"> <span class="portrait-photo__caption text-info">
{about.creation_portrait_caption} {about.creation_portrait_caption}
</span> </span>
@@ -213,6 +279,7 @@
<section class="about__present"> <section class="about__present">
<div class="container grid"> <div class="container grid">
<figure class="picture" data-reveal-image>
<Image <Image
class="shadow-box-dark" class="shadow-box-dark"
id={about.present_image.id} id={about.present_image.id}
@@ -225,16 +292,18 @@
}} }}
ratio={1.5} ratio={1.5}
/> />
</figure>
<h2 class="title-small">{about.present_title}</h2> <h2 class="title-small" data-reveal>{about.present_title}</h2>
<div class="text text-small" data-reveal>
<div class="text text-small">
<p>{about.present_text}</p> <p>{about.present_text}</p>
</div> </div>
<div class="heading text-big">
<div class="heading text-big" data-reveal>
{@html about.present_heading} {@html about.present_heading}
</div> </div>
<div class="conclusion text-small">
<div class="conclusion text-small" data-reveal>
<p>{about.present_conclusion}</p> <p>{about.present_conclusion}</p>
</div> </div>
</div> </div>
@@ -261,7 +330,7 @@
<aside> <aside>
<div class="heading"> <div class="heading">
<h2 class="title-medium">{about.process_title}</h2> <h2 class="title-medium">{about.process_title}</h2>
<p class="text-normal">{about.process_subtitle}</p> <p class="text-xsmall">{about.process_subtitle}</p>
</div> </div>
<ol> <ol>
@@ -312,7 +381,9 @@
{#each about.contact_blocks as { title, text, link, button }} {#each about.contact_blocks as { title, text, link, button }}
<div class="block"> <div class="block">
<h3 class="text-label">{title}</h3> <h3 class="text-label">{title}</h3>
<p class="text-normal">{text}</p> <div class="text text-normal">
{@html text}
</div>
<div class="button-container"> <div class="button-container">
{#if link} {#if link}
{#key emailCopied === link} {#key emailCopied === link}

38
src/style/pages/_about.scss
View File

@@ -1,3 +1,15 @@
:global(.about) {
:global(.picture) {
overflow: hidden;
background: $color-primary-tertiary20;
border-radius: 8px;
@include bp (md) {
border-radius: 16px;
}
}
}
.about { .about {
/* /*
** Introduction ** Introduction
@@ -86,12 +98,6 @@
// Figures // Figures
:global(picture) { :global(picture) {
width: 100%; width: 100%;
border-radius: 8px;
overflow: hidden;
@include bp (md) {
border-radius: 16px;
}
:global(img) { :global(img) {
display: block; display: block;
@@ -239,14 +245,12 @@
background-color: $color-cream; background-color: $color-cream;
// Poster image // Poster image
:global(picture) { figure {
grid-column: 1 / -1; grid-column: 1 / -1;
height: 100vw; height: 100vw;
max-height: 486px; max-height: 486px;
overflow: hidden;
margin-top: -64px; margin-top: -64px;
margin-bottom: 72px; margin-bottom: 72px;
border-radius: 8px;
@include bp (sm) { @include bp (sm) {
grid-column: 3 / -6; grid-column: 3 / -6;
@@ -371,7 +375,7 @@
// Heading text // Heading text
.heading { .heading {
max-width: 400px; max-width: 280px;
margin-bottom: 40px; margin-bottom: 40px;
@include bp (sm) { @include bp (sm) {
@@ -403,6 +407,7 @@
li { li {
display: block; display: block;
margin: 4px 0; margin: 4px 0;
overflow: hidden;
@include bp (sm) { @include bp (sm) {
margin: 6px 0; margin: 6px 0;
@@ -603,13 +608,24 @@
color: $color-secondary-light; color: $color-secondary-light;
font-weight: 600; font-weight: 600;
} }
p { :global(.text) {
margin-bottom: 24px; margin-bottom: 24px;
font-weight: 300; font-weight: 300;
@include bp (sm) { @include bp (sm) {
margin-bottom: 32px; margin-bottom: 32px;
} }
:global(a) {
color: currentColor;
text-decoration: none;
border-bottom: 1px solid rgba($color-tertiary, 0.3);
transition: color 0.3s;
&:hover {
color: $color-secondary-light;
}
}
} }
// Button // Button