feat: Created base set of components
This commit is contained in:
2
.gitignore
vendored
2
.gitignore
vendored
@@ -12,3 +12,5 @@
|
|||||||
# Built Visual Studio Code Extensions
|
# Built Visual Studio Code Extensions
|
||||||
*.vsix
|
*.vsix
|
||||||
|
|
||||||
|
# ---> Node.js
|
||||||
|
node_modules/
|
||||||
20
package.json
Normal file
20
package.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "component-lib",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"package": "svelte-package",
|
||||||
|
"build": "pnpm run package",
|
||||||
|
"release": "pnpm run build && npm publish"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"packageManager": "pnpm@10.15.1",
|
||||||
|
"devDependencies": {
|
||||||
|
"@sveltejs/package": "^2.5.1",
|
||||||
|
"svelte": "^5.38.10",
|
||||||
|
"typescript": "^5.9.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
266
pnpm-lock.yaml
generated
Normal file
266
pnpm-lock.yaml
generated
Normal file
@@ -0,0 +1,266 @@
|
|||||||
|
lockfileVersion: '9.0'
|
||||||
|
|
||||||
|
settings:
|
||||||
|
autoInstallPeers: true
|
||||||
|
excludeLinksFromLockfile: false
|
||||||
|
|
||||||
|
importers:
|
||||||
|
|
||||||
|
.:
|
||||||
|
devDependencies:
|
||||||
|
'@sveltejs/package':
|
||||||
|
specifier: ^2.5.1
|
||||||
|
version: 2.5.1(svelte@5.38.10)(typescript@5.9.2)
|
||||||
|
svelte:
|
||||||
|
specifier: ^5.38.10
|
||||||
|
version: 5.38.10
|
||||||
|
typescript:
|
||||||
|
specifier: ^5.9.2
|
||||||
|
version: 5.9.2
|
||||||
|
|
||||||
|
packages:
|
||||||
|
|
||||||
|
'@jridgewell/gen-mapping@0.3.13':
|
||||||
|
resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
|
||||||
|
|
||||||
|
'@jridgewell/remapping@2.3.5':
|
||||||
|
resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
|
||||||
|
|
||||||
|
'@jridgewell/resolve-uri@3.1.2':
|
||||||
|
resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
|
||||||
|
engines: {node: '>=6.0.0'}
|
||||||
|
|
||||||
|
'@jridgewell/sourcemap-codec@1.5.5':
|
||||||
|
resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
|
||||||
|
|
||||||
|
'@jridgewell/trace-mapping@0.3.31':
|
||||||
|
resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
|
||||||
|
|
||||||
|
'@sveltejs/acorn-typescript@1.0.5':
|
||||||
|
resolution: {integrity: sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==}
|
||||||
|
peerDependencies:
|
||||||
|
acorn: ^8.9.0
|
||||||
|
|
||||||
|
'@sveltejs/package@2.5.1':
|
||||||
|
resolution: {integrity: sha512-n0XRW7H7rD2AbdDsTD1KjXBztU96eMMuxPYwL9C+ZS8H8M1mS5NgmqFaSe8wKR40RU1KjLsqSWMnzsxRfG2j+A==}
|
||||||
|
engines: {node: ^16.14 || >=18}
|
||||||
|
hasBin: true
|
||||||
|
peerDependencies:
|
||||||
|
svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1
|
||||||
|
|
||||||
|
'@types/estree@1.0.8':
|
||||||
|
resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
|
||||||
|
|
||||||
|
acorn@8.15.0:
|
||||||
|
resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
|
||||||
|
engines: {node: '>=0.4.0'}
|
||||||
|
hasBin: true
|
||||||
|
|
||||||
|
aria-query@5.3.2:
|
||||||
|
resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
|
||||||
|
engines: {node: '>= 0.4'}
|
||||||
|
|
||||||
|
axobject-query@4.1.0:
|
||||||
|
resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
|
||||||
|
engines: {node: '>= 0.4'}
|
||||||
|
|
||||||
|
chokidar@4.0.3:
|
||||||
|
resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
|
||||||
|
engines: {node: '>= 14.16.0'}
|
||||||
|
|
||||||
|
clsx@2.1.1:
|
||||||
|
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
|
||||||
|
engines: {node: '>=6'}
|
||||||
|
|
||||||
|
dedent-js@1.0.1:
|
||||||
|
resolution: {integrity: sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==}
|
||||||
|
|
||||||
|
esm-env@1.2.2:
|
||||||
|
resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
|
||||||
|
|
||||||
|
esrap@2.1.0:
|
||||||
|
resolution: {integrity: sha512-yzmPNpl7TBbMRC5Lj2JlJZNPml0tzqoqP5B1JXycNUwtqma9AKCO0M2wHrdgsHcy1WRW7S9rJknAMtByg3usgA==}
|
||||||
|
|
||||||
|
is-reference@3.0.3:
|
||||||
|
resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
|
||||||
|
|
||||||
|
kleur@4.1.5:
|
||||||
|
resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
|
||||||
|
engines: {node: '>=6'}
|
||||||
|
|
||||||
|
locate-character@3.0.0:
|
||||||
|
resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
|
||||||
|
|
||||||
|
lower-case@2.0.2:
|
||||||
|
resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
|
||||||
|
|
||||||
|
magic-string@0.30.19:
|
||||||
|
resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
|
||||||
|
|
||||||
|
mri@1.2.0:
|
||||||
|
resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
|
||||||
|
engines: {node: '>=4'}
|
||||||
|
|
||||||
|
no-case@3.0.4:
|
||||||
|
resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
|
||||||
|
|
||||||
|
pascal-case@3.1.2:
|
||||||
|
resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
|
||||||
|
|
||||||
|
readdirp@4.1.2:
|
||||||
|
resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
|
||||||
|
engines: {node: '>= 14.18.0'}
|
||||||
|
|
||||||
|
sade@1.8.1:
|
||||||
|
resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
|
||||||
|
engines: {node: '>=6'}
|
||||||
|
|
||||||
|
semver@7.7.2:
|
||||||
|
resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
|
||||||
|
engines: {node: '>=10'}
|
||||||
|
hasBin: true
|
||||||
|
|
||||||
|
svelte2tsx@0.7.43:
|
||||||
|
resolution: {integrity: sha512-TtxMuk520th4ZEvUQrhbDAyyQ1I+kc5dZCA4ChOLlbVXZfqenrY45iTH27DpLyx/u4STEz8O3hkGm5goTS8JhQ==}
|
||||||
|
peerDependencies:
|
||||||
|
svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
|
||||||
|
typescript: ^4.9.4 || ^5.0.0
|
||||||
|
|
||||||
|
svelte@5.38.10:
|
||||||
|
resolution: {integrity: sha512-UY+OhrWK7WI22bCZ00P/M3HtyWgwJPi9IxSRkoAE2MeAy6kl7ZlZWJZ8RaB+X4KD/G+wjis+cGVnVYaoqbzBqg==}
|
||||||
|
engines: {node: '>=18'}
|
||||||
|
|
||||||
|
tslib@2.8.1:
|
||||||
|
resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
|
||||||
|
|
||||||
|
typescript@5.9.2:
|
||||||
|
resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
|
||||||
|
engines: {node: '>=14.17'}
|
||||||
|
hasBin: true
|
||||||
|
|
||||||
|
zimmerframe@1.1.4:
|
||||||
|
resolution: {integrity: sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==}
|
||||||
|
|
||||||
|
snapshots:
|
||||||
|
|
||||||
|
'@jridgewell/gen-mapping@0.3.13':
|
||||||
|
dependencies:
|
||||||
|
'@jridgewell/sourcemap-codec': 1.5.5
|
||||||
|
'@jridgewell/trace-mapping': 0.3.31
|
||||||
|
|
||||||
|
'@jridgewell/remapping@2.3.5':
|
||||||
|
dependencies:
|
||||||
|
'@jridgewell/gen-mapping': 0.3.13
|
||||||
|
'@jridgewell/trace-mapping': 0.3.31
|
||||||
|
|
||||||
|
'@jridgewell/resolve-uri@3.1.2': {}
|
||||||
|
|
||||||
|
'@jridgewell/sourcemap-codec@1.5.5': {}
|
||||||
|
|
||||||
|
'@jridgewell/trace-mapping@0.3.31':
|
||||||
|
dependencies:
|
||||||
|
'@jridgewell/resolve-uri': 3.1.2
|
||||||
|
'@jridgewell/sourcemap-codec': 1.5.5
|
||||||
|
|
||||||
|
'@sveltejs/acorn-typescript@1.0.5(acorn@8.15.0)':
|
||||||
|
dependencies:
|
||||||
|
acorn: 8.15.0
|
||||||
|
|
||||||
|
'@sveltejs/package@2.5.1(svelte@5.38.10)(typescript@5.9.2)':
|
||||||
|
dependencies:
|
||||||
|
chokidar: 4.0.3
|
||||||
|
kleur: 4.1.5
|
||||||
|
sade: 1.8.1
|
||||||
|
semver: 7.7.2
|
||||||
|
svelte: 5.38.10
|
||||||
|
svelte2tsx: 0.7.43(svelte@5.38.10)(typescript@5.9.2)
|
||||||
|
transitivePeerDependencies:
|
||||||
|
- typescript
|
||||||
|
|
||||||
|
'@types/estree@1.0.8': {}
|
||||||
|
|
||||||
|
acorn@8.15.0: {}
|
||||||
|
|
||||||
|
aria-query@5.3.2: {}
|
||||||
|
|
||||||
|
axobject-query@4.1.0: {}
|
||||||
|
|
||||||
|
chokidar@4.0.3:
|
||||||
|
dependencies:
|
||||||
|
readdirp: 4.1.2
|
||||||
|
|
||||||
|
clsx@2.1.1: {}
|
||||||
|
|
||||||
|
dedent-js@1.0.1: {}
|
||||||
|
|
||||||
|
esm-env@1.2.2: {}
|
||||||
|
|
||||||
|
esrap@2.1.0:
|
||||||
|
dependencies:
|
||||||
|
'@jridgewell/sourcemap-codec': 1.5.5
|
||||||
|
|
||||||
|
is-reference@3.0.3:
|
||||||
|
dependencies:
|
||||||
|
'@types/estree': 1.0.8
|
||||||
|
|
||||||
|
kleur@4.1.5: {}
|
||||||
|
|
||||||
|
locate-character@3.0.0: {}
|
||||||
|
|
||||||
|
lower-case@2.0.2:
|
||||||
|
dependencies:
|
||||||
|
tslib: 2.8.1
|
||||||
|
|
||||||
|
magic-string@0.30.19:
|
||||||
|
dependencies:
|
||||||
|
'@jridgewell/sourcemap-codec': 1.5.5
|
||||||
|
|
||||||
|
mri@1.2.0: {}
|
||||||
|
|
||||||
|
no-case@3.0.4:
|
||||||
|
dependencies:
|
||||||
|
lower-case: 2.0.2
|
||||||
|
tslib: 2.8.1
|
||||||
|
|
||||||
|
pascal-case@3.1.2:
|
||||||
|
dependencies:
|
||||||
|
no-case: 3.0.4
|
||||||
|
tslib: 2.8.1
|
||||||
|
|
||||||
|
readdirp@4.1.2: {}
|
||||||
|
|
||||||
|
sade@1.8.1:
|
||||||
|
dependencies:
|
||||||
|
mri: 1.2.0
|
||||||
|
|
||||||
|
semver@7.7.2: {}
|
||||||
|
|
||||||
|
svelte2tsx@0.7.43(svelte@5.38.10)(typescript@5.9.2):
|
||||||
|
dependencies:
|
||||||
|
dedent-js: 1.0.1
|
||||||
|
pascal-case: 3.1.2
|
||||||
|
svelte: 5.38.10
|
||||||
|
typescript: 5.9.2
|
||||||
|
|
||||||
|
svelte@5.38.10:
|
||||||
|
dependencies:
|
||||||
|
'@jridgewell/remapping': 2.3.5
|
||||||
|
'@jridgewell/sourcemap-codec': 1.5.5
|
||||||
|
'@sveltejs/acorn-typescript': 1.0.5(acorn@8.15.0)
|
||||||
|
'@types/estree': 1.0.8
|
||||||
|
acorn: 8.15.0
|
||||||
|
aria-query: 5.3.2
|
||||||
|
axobject-query: 4.1.0
|
||||||
|
clsx: 2.1.1
|
||||||
|
esm-env: 1.2.2
|
||||||
|
esrap: 2.1.0
|
||||||
|
is-reference: 3.0.3
|
||||||
|
locate-character: 3.0.0
|
||||||
|
magic-string: 0.30.19
|
||||||
|
zimmerframe: 1.1.4
|
||||||
|
|
||||||
|
tslib@2.8.1: {}
|
||||||
|
|
||||||
|
typescript@5.9.2: {}
|
||||||
|
|
||||||
|
zimmerframe@1.1.4: {}
|
||||||
23
src/components/Cards/Card.svelte
Normal file
23
src/components/Cards/Card.svelte
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
// Allows additional styling to be applied to the Card component's outer wrapping
|
||||||
|
export let containerStyle: string = "";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class={containerStyle}>
|
||||||
|
<div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
|
||||||
|
<div class="text-red-400 font-bold flex flex-row justify-between items-center mb-4">
|
||||||
|
<slot name="headerLeft" class="text-2xl md:text-3xl truncate"></slot>
|
||||||
|
<slot name="headerRight" class="max-md:hidden text-xl md:text-2xl truncate"></slot>
|
||||||
|
</div>
|
||||||
|
<hr class="border-1" />
|
||||||
|
<div class="flex-1 flex flex-col justify-center mt-4 mb-8">
|
||||||
|
<slot name="content"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="border-1" />
|
||||||
|
<div class="flex flex-row justify-between items-center mt-4 text-base opacity-90">
|
||||||
|
<slot name="footerLeft"/>
|
||||||
|
<slot name="footerRight"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
33
src/components/Collapsible.svelte
Normal file
33
src/components/Collapsible.svelte
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let open = false;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="w-full">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex items-center justify-between w-full px-2 py-2 text-left rounded hover:font-bold transition group"
|
||||||
|
on:click={() => open = !open}
|
||||||
|
aria-expanded={open}
|
||||||
|
>
|
||||||
|
<span><slot name="label"/></span>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 ml-2 transition-transform duration-200"
|
||||||
|
style="transform: rotate({open ? 90 : 0}deg)"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
class="overflow-hidden transition-all duration-300"
|
||||||
|
style="max-height: {open ? '1000px' : '0'}"
|
||||||
|
aria-hidden={!open}
|
||||||
|
>
|
||||||
|
<div class="pt-2">
|
||||||
|
<slot name="content"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
91
src/components/Gallery.svelte
Normal file
91
src/components/Gallery.svelte
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { spring } from 'svelte/motion';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
|
export let items: any[] = []; // Array of components/items to display
|
||||||
|
|
||||||
|
let container: HTMLElement;
|
||||||
|
let isDragging = false;
|
||||||
|
let startX: number;
|
||||||
|
let scrollLeft: number;
|
||||||
|
|
||||||
|
const centerOffset = spring(0);
|
||||||
|
|
||||||
|
function handleMouseDown(e: MouseEvent) {
|
||||||
|
isDragging = true;
|
||||||
|
startX = e.pageX - container.offsetLeft;
|
||||||
|
scrollLeft = container.scrollLeft;
|
||||||
|
container.style.cursor = 'grabbing';
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMouseMove(e: MouseEvent) {
|
||||||
|
if (!isDragging) return;
|
||||||
|
e.preventDefault();
|
||||||
|
const x = e.pageX - container.offsetLeft;
|
||||||
|
const walk = (x - startX) * 2;
|
||||||
|
container.scrollLeft = scrollLeft - walk;
|
||||||
|
updateItemScales();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMouseUp() {
|
||||||
|
isDragging = false;
|
||||||
|
container.style.cursor = 'grab';
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateItemScales() {
|
||||||
|
const containerCenter = container.offsetWidth / 2;
|
||||||
|
$centerOffset = container.scrollLeft + containerCenter;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
container.addEventListener('scroll', updateItemScales);
|
||||||
|
return () => container.removeEventListener('scroll', updateItemScales);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="gallery-container"
|
||||||
|
bind:this={container}
|
||||||
|
on:mousedown={handleMouseDown}
|
||||||
|
on:mousemove={handleMouseMove}
|
||||||
|
on:mouseup={handleMouseUp}
|
||||||
|
on:mouseleave={handleMouseUp}>
|
||||||
|
|
||||||
|
{#each items as item, i}
|
||||||
|
<div class="gallery-item"
|
||||||
|
style="
|
||||||
|
--scale: {Math.max(0.6, 1 - Math.abs($centerOffset - (i * 300 + 150)) / 1000)};
|
||||||
|
--opacity: {Math.max(0.3, 1 - Math.abs($centerOffset - (i * 300 + 150)) / 1000)};
|
||||||
|
">
|
||||||
|
<svelte:component this={item} />
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.gallery-container {
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: scroll;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 2rem;
|
||||||
|
cursor: grab;
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-container::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item {
|
||||||
|
min-width: 300px;
|
||||||
|
height: 400px;
|
||||||
|
transform: scale(var(--scale, 1));
|
||||||
|
opacity: var(--opacity, 1);
|
||||||
|
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
7
src/components/GridGallery.svelte
Normal file
7
src/components/GridGallery.svelte
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- GridGallery.svelte -->
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
73
src/components/Loading.svelte
Normal file
73
src/components/Loading.svelte
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
<style>
|
||||||
|
.loader {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50% - 32px);
|
||||||
|
left: calc(50% - 32px);
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
border-radius: 50%;
|
||||||
|
perspective: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner.one {
|
||||||
|
left: 0%;
|
||||||
|
top: 0%;
|
||||||
|
animation: rotate-one 1s linear infinite;
|
||||||
|
border-bottom: 3px solid gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner.two {
|
||||||
|
right: 0%;
|
||||||
|
top: 0%;
|
||||||
|
animation: rotate-two 1s linear infinite;
|
||||||
|
border-right: 3px solid gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner.three {
|
||||||
|
right: 0%;
|
||||||
|
bottom: 0%;
|
||||||
|
animation: rotate-three 1s linear infinite;
|
||||||
|
border-top: 3px solid gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate-one {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate-two {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate-three {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="loader">
|
||||||
|
<div class="inner one"></div>
|
||||||
|
<div class="inner two"></div>
|
||||||
|
<div class="inner three"></div>
|
||||||
|
</div>
|
||||||
9
src/components/PageIcon.svelte
Normal file
9
src/components/PageIcon.svelte
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<script>
|
||||||
|
export let iconClass = 'devicon-htmx-plain';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="fixed lg:top-4 bottom-4 left-4 text-5xl z-[1000] text-grey"
|
||||||
|
>
|
||||||
|
<i class={iconClass}></i>
|
||||||
|
</span>
|
||||||
26
src/components/Section.svelte
Normal file
26
src/components/Section.svelte
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let label: string = "";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id={label} class="relative flex flex-row w-full min-h-[300px] mt-5 mb-25">
|
||||||
|
<!-- Sticky/Sliding Label -->
|
||||||
|
<div class="hidden md:flex flex-col items-center mr-6">
|
||||||
|
<div class="sticky top-24 left-0 z-10">
|
||||||
|
<span class="text-2xl font-bold text-blue-400 tracking-widest"
|
||||||
|
style="writing-mode: vertical-rl; text-orientation: mixed;">
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div class="flex-1 flex flex-col">
|
||||||
|
<!-- Label for mobile -->
|
||||||
|
<div class="md:hidden mb-2">
|
||||||
|
<span class="text-2xl font-bold text-blue-400">{label}</span>
|
||||||
|
</div>
|
||||||
|
<hr class="border-blue-400 mb-6" />
|
||||||
|
<div>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
17
src/components/SkillProgress.svelte
Normal file
17
src/components/SkillProgress.svelte
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let value: number = 0; // 0 to 100
|
||||||
|
export let skillColour: string = 'bg-orange-400'; // Default color
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="w-full mt-3">
|
||||||
|
<div class="flex justify-between mb-1">
|
||||||
|
<span class="text-sm font-medium">Competency Level</span>
|
||||||
|
<span class="text-sm font-medium">{value}%</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-gray-800 rounded-full h-5">
|
||||||
|
<div
|
||||||
|
class="{skillColour} h-5 rounded-full transition-all duration-500"
|
||||||
|
style="width: {value}%"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
29
src/components/Timeline.svelte
Normal file
29
src/components/Timeline.svelte
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import Collapsible from "./Collapsible.svelte";
|
||||||
|
|
||||||
|
export let timelineData: Array<{
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
duration: string;
|
||||||
|
}>;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-center justify-center">
|
||||||
|
<div class="max-w-4xl w-full">
|
||||||
|
{#each timelineData as entry, i}
|
||||||
|
<div class="relative border-l border-gray-700 pl-8 pb-12">
|
||||||
|
{#if i == 0}
|
||||||
|
<div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">♦</div>
|
||||||
|
{:else}
|
||||||
|
<div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">⋄</div>
|
||||||
|
{/if}
|
||||||
|
<p class="text-sm opacity-70">{entry.duration}</p>
|
||||||
|
|
||||||
|
<Collapsible open={i==0}>
|
||||||
|
<span slot="label" class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition">{entry.title}</span>
|
||||||
|
<span slot="content">{@html entry.description}</span>
|
||||||
|
</Collapsible>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
9
src/index.ts
Normal file
9
src/index.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
export { default as Timeline } from './components/Timeline.svelte';
|
||||||
|
export { default as SkillProgress } from './components/SkillProgress.svelte';
|
||||||
|
export { default as Section } from './components/Section.svelte';
|
||||||
|
export { default as PageIcon } from './components/PageIcon.svelte';
|
||||||
|
export { default as Loading } from './components/Loading.svelte';
|
||||||
|
export { default as GridGallery } from './components/GridGallery.svelte';
|
||||||
|
export { default as Gallery } from './components/Gallery.svelte';
|
||||||
|
export { default as Collapsible } from './components/Collapsible.svelte';
|
||||||
|
export { default as Card } from './components/Cards/Card.svelte';
|
||||||
13
svelte.config.js
Normal file
13
svelte.config.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
preprocess: vitePreprocess(),
|
||||||
|
kit: {
|
||||||
|
package: {
|
||||||
|
dir: 'dist',
|
||||||
|
emitTypes: true,
|
||||||
|
// only export index.ts
|
||||||
|
exports: (filepath) => filepath === 'index.ts'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user