Imported tailwind libraries, started to re-write main page

This commit is contained in:
Luke Else 2025-05-12 00:43:28 +01:00
parent d9e8b4b56c
commit fc642a4ecd
Signed by: luke-else
GPG Key ID: B44FAF5CD3964A56
11 changed files with 488 additions and 412 deletions

View File

@ -26,5 +26,9 @@
"typescript": "5.8.3",
"vite": "6.3.5"
},
"type": "module"
"type": "module",
"dependencies": {
"@tailwindcss/vite": "^4.1.6",
"tailwindcss": "^4.1.6"
}
}

414
pnpm-lock.yaml generated
View File

@ -7,22 +7,29 @@ settings:
importers:
.:
dependencies:
'@tailwindcss/vite':
specifier: ^4.1.6
version: 4.1.6(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2))
tailwindcss:
specifier: ^4.1.6
version: 4.1.6
devDependencies:
'@rollup/plugin-json':
specifier: ^6.0.0
version: 6.1.0(rollup@4.40.2)
'@sveltejs/adapter-auto':
specifier: 6.0.0
version: 6.0.0(@sveltejs/kit@2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5))(svelte@5.28.2)(vite@6.3.5))
version: 6.0.0(@sveltejs/kit@2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2)))
'@sveltejs/adapter-node':
specifier: 5.2.12
version: 5.2.12(@sveltejs/kit@2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5))(svelte@5.28.2)(vite@6.3.5))
version: 5.2.12(@sveltejs/kit@2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2)))
'@sveltejs/kit':
specifier: 2.20.8
version: 2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5))(svelte@5.28.2)(vite@6.3.5)
version: 2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2))
'@sveltejs/vite-plugin-svelte':
specifier: ^5.0.0
version: 5.0.3(svelte@5.28.2)(vite@6.3.5)
version: 5.0.3(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2))
prettier:
specifier: 3.5.3
version: 3.5.3
@ -43,7 +50,7 @@ importers:
version: 5.8.3
vite:
specifier: 6.3.5
version: 6.3.5
version: 6.3.5(jiti@2.4.2)(lightningcss@1.29.2)
packages:
@ -201,6 +208,10 @@ packages:
cpu: [x64]
os: [win32]
'@isaacs/fs-minipass@4.0.1':
resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
engines: {node: '>=18.0.0'}
'@jridgewell/gen-mapping@0.3.8':
resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
engines: {node: '>=6.0.0'}
@ -397,6 +408,96 @@ packages:
svelte: ^5.0.0
vite: ^6.0.0
'@tailwindcss/node@4.1.6':
resolution: {integrity: sha512-ed6zQbgmKsjsVvodAS1q1Ld2BolEuxJOSyyNc+vhkjdmfNUDCmQnlXBfQkHrlzNmslxHsQU/bFmzcEbv4xXsLg==}
'@tailwindcss/oxide-android-arm64@4.1.6':
resolution: {integrity: sha512-VHwwPiwXtdIvOvqT/0/FLH/pizTVu78FOnI9jQo64kSAikFSZT7K4pjyzoDpSMaveJTGyAKvDjuhxJxKfmvjiQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [android]
'@tailwindcss/oxide-darwin-arm64@4.1.6':
resolution: {integrity: sha512-weINOCcqv1HVBIGptNrk7c6lWgSFFiQMcCpKM4tnVi5x8OY2v1FrV76jwLukfT6pL1hyajc06tyVmZFYXoxvhQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
'@tailwindcss/oxide-darwin-x64@4.1.6':
resolution: {integrity: sha512-3FzekhHG0ww1zQjQ1lPoq0wPrAIVXAbUkWdWM8u5BnYFZgb9ja5ejBqyTgjpo5mfy0hFOoMnMuVDI+7CXhXZaQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
'@tailwindcss/oxide-freebsd-x64@4.1.6':
resolution: {integrity: sha512-4m5F5lpkBZhVQJq53oe5XgJ+aFYWdrgkMwViHjRsES3KEu2m1udR21B1I77RUqie0ZYNscFzY1v9aDssMBZ/1w==}
engines: {node: '>= 10'}
cpu: [x64]
os: [freebsd]
'@tailwindcss/oxide-linux-arm-gnueabihf@4.1.6':
resolution: {integrity: sha512-qU0rHnA9P/ZoaDKouU1oGPxPWzDKtIfX7eOGi5jOWJKdxieUJdVV+CxWZOpDWlYTd4N3sFQvcnVLJWJ1cLP5TA==}
engines: {node: '>= 10'}
cpu: [arm]
os: [linux]
'@tailwindcss/oxide-linux-arm64-gnu@4.1.6':
resolution: {integrity: sha512-jXy3TSTrbfgyd3UxPQeXC3wm8DAgmigzar99Km9Sf6L2OFfn/k+u3VqmpgHQw5QNfCpPe43em6Q7V76Wx7ogIQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@tailwindcss/oxide-linux-arm64-musl@4.1.6':
resolution: {integrity: sha512-8kjivE5xW0qAQ9HX9reVFmZj3t+VmljDLVRJpVBEoTR+3bKMnvC7iLcoSGNIUJGOZy1mLVq7x/gerVg0T+IsYw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@tailwindcss/oxide-linux-x64-gnu@4.1.6':
resolution: {integrity: sha512-A4spQhwnWVpjWDLXnOW9PSinO2PTKJQNRmL/aIl2U/O+RARls8doDfs6R41+DAXK0ccacvRyDpR46aVQJJCoCg==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@tailwindcss/oxide-linux-x64-musl@4.1.6':
resolution: {integrity: sha512-YRee+6ZqdzgiQAHVSLfl3RYmqeeaWVCk796MhXhLQu2kJu2COHBkqlqsqKYx3p8Hmk5pGCQd2jTAoMWWFeyG2A==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@tailwindcss/oxide-wasm32-wasi@4.1.6':
resolution: {integrity: sha512-qAp4ooTYrBQ5pk5jgg54/U1rCJ/9FLYOkkQ/nTE+bVMseMfB6O7J8zb19YTpWuu4UdfRf5zzOrNKfl6T64MNrQ==}
engines: {node: '>=14.0.0'}
cpu: [wasm32]
bundledDependencies:
- '@napi-rs/wasm-runtime'
- '@emnapi/core'
- '@emnapi/runtime'
- '@tybys/wasm-util'
- '@emnapi/wasi-threads'
- tslib
'@tailwindcss/oxide-win32-arm64-msvc@4.1.6':
resolution: {integrity: sha512-nqpDWk0Xr8ELO/nfRUDjk1pc9wDJ3ObeDdNMHLaymc4PJBWj11gdPCWZFKSK2AVKjJQC7J2EfmSmf47GN7OuLg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
'@tailwindcss/oxide-win32-x64-msvc@4.1.6':
resolution: {integrity: sha512-5k9xF33xkfKpo9wCvYcegQ21VwIBU1/qEbYlVukfEIyQbEA47uK8AAwS7NVjNE3vHzcmxMYwd0l6L4pPjjm1rQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
'@tailwindcss/oxide@4.1.6':
resolution: {integrity: sha512-0bpEBQiGx+227fW4G0fLQ8vuvyy5rsB1YIYNapTq3aRsJ9taF3f5cCaovDjN5pUGKKzcpMrZst/mhNaKAPOHOA==}
engines: {node: '>= 10'}
'@tailwindcss/vite@4.1.6':
resolution: {integrity: sha512-zjtqjDeY1w3g2beYQtrMAf51n5G7o+UwmyOjtsDMP7t6XyoRMOidcoKP32ps7AkNOHIXEOK0bhIC05dj8oJp4w==}
peerDependencies:
vite: ^5.2.0 || ^6
'@types/cookie@0.6.0':
resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
@ -423,6 +524,10 @@ packages:
resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
engines: {node: '>= 14.16.0'}
chownr@3.0.0:
resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
engines: {node: '>=18'}
clsx@2.1.1:
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
engines: {node: '>=6'}
@ -447,9 +552,17 @@ packages:
resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
engines: {node: '>=0.10.0'}
detect-libc@2.0.4:
resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
engines: {node: '>=8'}
devalue@5.1.1:
resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
enhanced-resolve@5.18.1:
resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
engines: {node: '>=10.13.0'}
esbuild@0.25.4:
resolution: {integrity: sha512-8pgjLUcUjcgDg+2Q4NYXnPbo/vncAY4UmyaCm0jZevERqCHZIaWwdJHkf8XQtu4AxSKCdvrUbT0XUr1IdZzI8Q==}
engines: {node: '>=18'}
@ -480,6 +593,9 @@ packages:
function-bind@1.1.2:
resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
graceful-fs@4.2.11:
resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
hasown@2.0.2:
resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
engines: {node: '>= 0.4'}
@ -500,16 +616,97 @@ packages:
is-reference@3.0.3:
resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
jiti@2.4.2:
resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
hasBin: true
kleur@4.1.5:
resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
engines: {node: '>=6'}
lightningcss-darwin-arm64@1.29.2:
resolution: {integrity: sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [darwin]
lightningcss-darwin-x64@1.29.2:
resolution: {integrity: sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [darwin]
lightningcss-freebsd-x64@1.29.2:
resolution: {integrity: sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [freebsd]
lightningcss-linux-arm-gnueabihf@1.29.2:
resolution: {integrity: sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==}
engines: {node: '>= 12.0.0'}
cpu: [arm]
os: [linux]
lightningcss-linux-arm64-gnu@1.29.2:
resolution: {integrity: sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
lightningcss-linux-arm64-musl@1.29.2:
resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
lightningcss-linux-x64-gnu@1.29.2:
resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
lightningcss-linux-x64-musl@1.29.2:
resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
lightningcss-win32-arm64-msvc@1.29.2:
resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [win32]
lightningcss-win32-x64-msvc@1.29.2:
resolution: {integrity: sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [win32]
lightningcss@1.29.2:
resolution: {integrity: sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==}
engines: {node: '>= 12.0.0'}
locate-character@3.0.0:
resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
magic-string@0.30.17:
resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
minipass@7.1.2:
resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
engines: {node: '>=16 || 14 >=14.17'}
minizlib@3.0.2:
resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
engines: {node: '>= 18'}
mkdirp@3.0.1:
resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
engines: {node: '>=10'}
hasBin: true
mri@1.2.0:
resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
engines: {node: '>=4'}
@ -596,6 +793,17 @@ packages:
resolution: {integrity: sha512-FbWBxgWOpQfhKvoGJv/TFwzqb4EhJbwCD17dB0tEpQiw1XyUEKZJtgm4nA4xq3LLsMo7hu5UY/BOFmroAxKTMg==}
engines: {node: '>=18'}
tailwindcss@4.1.6:
resolution: {integrity: sha512-j0cGLTreM6u4OWzBeLBpycK0WIh8w7kSwcUsQZoGLHZ7xDTdM69lN64AgoIEEwFi0tnhs4wSykUa5YWxAzgFYg==}
tapable@2.2.1:
resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
engines: {node: '>=6'}
tar@7.4.3:
resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
engines: {node: '>=18'}
tinyglobby@0.2.13:
resolution: {integrity: sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==}
engines: {node: '>=12.0.0'}
@ -660,6 +868,10 @@ packages:
vite:
optional: true
yallist@5.0.0:
resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
engines: {node: '>=18'}
zimmerframe@1.1.2:
resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
@ -745,6 +957,10 @@ snapshots:
'@esbuild/win32-x64@0.25.4':
optional: true
'@isaacs/fs-minipass@4.0.1':
dependencies:
minipass: 7.1.2
'@jridgewell/gen-mapping@0.3.8':
dependencies:
'@jridgewell/set-array': 1.2.1
@ -864,22 +1080,22 @@ snapshots:
dependencies:
acorn: 8.14.1
'@sveltejs/adapter-auto@6.0.0(@sveltejs/kit@2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5))(svelte@5.28.2)(vite@6.3.5))':
'@sveltejs/adapter-auto@6.0.0(@sveltejs/kit@2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2)))':
dependencies:
'@sveltejs/kit': 2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5))(svelte@5.28.2)(vite@6.3.5)
'@sveltejs/kit': 2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2))
import-meta-resolve: 4.1.0
'@sveltejs/adapter-node@5.2.12(@sveltejs/kit@2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5))(svelte@5.28.2)(vite@6.3.5))':
'@sveltejs/adapter-node@5.2.12(@sveltejs/kit@2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2)))':
dependencies:
'@rollup/plugin-commonjs': 28.0.3(rollup@4.40.2)
'@rollup/plugin-json': 6.1.0(rollup@4.40.2)
'@rollup/plugin-node-resolve': 16.0.1(rollup@4.40.2)
'@sveltejs/kit': 2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5))(svelte@5.28.2)(vite@6.3.5)
'@sveltejs/kit': 2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2))
rollup: 4.40.2
'@sveltejs/kit@2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5))(svelte@5.28.2)(vite@6.3.5)':
'@sveltejs/kit@2.20.8(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2))':
dependencies:
'@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.28.2)(vite@6.3.5)
'@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2))
'@types/cookie': 0.6.0
cookie: 0.6.0
devalue: 5.1.1
@ -892,30 +1108,101 @@ snapshots:
set-cookie-parser: 2.7.1
sirv: 3.0.1
svelte: 5.28.2
vite: 6.3.5
vite: 6.3.5(jiti@2.4.2)(lightningcss@1.29.2)
'@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5))(svelte@5.28.2)(vite@6.3.5)':
'@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2))':
dependencies:
'@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.28.2)(vite@6.3.5)
'@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2))
debug: 4.4.0
svelte: 5.28.2
vite: 6.3.5
vite: 6.3.5(jiti@2.4.2)(lightningcss@1.29.2)
transitivePeerDependencies:
- supports-color
'@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5)':
'@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2))':
dependencies:
'@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5))(svelte@5.28.2)(vite@6.3.5)
'@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.28.2)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2))
debug: 4.4.0
deepmerge: 4.3.1
kleur: 4.1.5
magic-string: 0.30.17
svelte: 5.28.2
vite: 6.3.5
vitefu: 1.0.6(vite@6.3.5)
vite: 6.3.5(jiti@2.4.2)(lightningcss@1.29.2)
vitefu: 1.0.6(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2))
transitivePeerDependencies:
- supports-color
'@tailwindcss/node@4.1.6':
dependencies:
'@ampproject/remapping': 2.3.0
enhanced-resolve: 5.18.1
jiti: 2.4.2
lightningcss: 1.29.2
magic-string: 0.30.17
source-map-js: 1.2.1
tailwindcss: 4.1.6
'@tailwindcss/oxide-android-arm64@4.1.6':
optional: true
'@tailwindcss/oxide-darwin-arm64@4.1.6':
optional: true
'@tailwindcss/oxide-darwin-x64@4.1.6':
optional: true
'@tailwindcss/oxide-freebsd-x64@4.1.6':
optional: true
'@tailwindcss/oxide-linux-arm-gnueabihf@4.1.6':
optional: true
'@tailwindcss/oxide-linux-arm64-gnu@4.1.6':
optional: true
'@tailwindcss/oxide-linux-arm64-musl@4.1.6':
optional: true
'@tailwindcss/oxide-linux-x64-gnu@4.1.6':
optional: true
'@tailwindcss/oxide-linux-x64-musl@4.1.6':
optional: true
'@tailwindcss/oxide-wasm32-wasi@4.1.6':
optional: true
'@tailwindcss/oxide-win32-arm64-msvc@4.1.6':
optional: true
'@tailwindcss/oxide-win32-x64-msvc@4.1.6':
optional: true
'@tailwindcss/oxide@4.1.6':
dependencies:
detect-libc: 2.0.4
tar: 7.4.3
optionalDependencies:
'@tailwindcss/oxide-android-arm64': 4.1.6
'@tailwindcss/oxide-darwin-arm64': 4.1.6
'@tailwindcss/oxide-darwin-x64': 4.1.6
'@tailwindcss/oxide-freebsd-x64': 4.1.6
'@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.6
'@tailwindcss/oxide-linux-arm64-gnu': 4.1.6
'@tailwindcss/oxide-linux-arm64-musl': 4.1.6
'@tailwindcss/oxide-linux-x64-gnu': 4.1.6
'@tailwindcss/oxide-linux-x64-musl': 4.1.6
'@tailwindcss/oxide-wasm32-wasi': 4.1.6
'@tailwindcss/oxide-win32-arm64-msvc': 4.1.6
'@tailwindcss/oxide-win32-x64-msvc': 4.1.6
'@tailwindcss/vite@4.1.6(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2))':
dependencies:
'@tailwindcss/node': 4.1.6
'@tailwindcss/oxide': 4.1.6
tailwindcss: 4.1.6
vite: 6.3.5(jiti@2.4.2)(lightningcss@1.29.2)
'@types/cookie@0.6.0': {}
'@types/estree@1.0.7': {}
@ -932,6 +1219,8 @@ snapshots:
dependencies:
readdirp: 4.1.2
chownr@3.0.0: {}
clsx@2.1.1: {}
commondir@1.0.1: {}
@ -944,8 +1233,15 @@ snapshots:
deepmerge@4.3.1: {}
detect-libc@2.0.4: {}
devalue@5.1.1: {}
enhanced-resolve@5.18.1:
dependencies:
graceful-fs: 4.2.11
tapable: 2.2.1
esbuild@0.25.4:
optionalDependencies:
'@esbuild/aix-ppc64': 0.25.4
@ -991,6 +1287,8 @@ snapshots:
function-bind@1.1.2: {}
graceful-fs@4.2.11: {}
hasown@2.0.2:
dependencies:
function-bind: 1.1.2
@ -1011,14 +1309,69 @@ snapshots:
dependencies:
'@types/estree': 1.0.7
jiti@2.4.2: {}
kleur@4.1.5: {}
lightningcss-darwin-arm64@1.29.2:
optional: true
lightningcss-darwin-x64@1.29.2:
optional: true
lightningcss-freebsd-x64@1.29.2:
optional: true
lightningcss-linux-arm-gnueabihf@1.29.2:
optional: true
lightningcss-linux-arm64-gnu@1.29.2:
optional: true
lightningcss-linux-arm64-musl@1.29.2:
optional: true
lightningcss-linux-x64-gnu@1.29.2:
optional: true
lightningcss-linux-x64-musl@1.29.2:
optional: true
lightningcss-win32-arm64-msvc@1.29.2:
optional: true
lightningcss-win32-x64-msvc@1.29.2:
optional: true
lightningcss@1.29.2:
dependencies:
detect-libc: 2.0.4
optionalDependencies:
lightningcss-darwin-arm64: 1.29.2
lightningcss-darwin-x64: 1.29.2
lightningcss-freebsd-x64: 1.29.2
lightningcss-linux-arm-gnueabihf: 1.29.2
lightningcss-linux-arm64-gnu: 1.29.2
lightningcss-linux-arm64-musl: 1.29.2
lightningcss-linux-x64-gnu: 1.29.2
lightningcss-linux-x64-musl: 1.29.2
lightningcss-win32-arm64-msvc: 1.29.2
lightningcss-win32-x64-msvc: 1.29.2
locate-character@3.0.0: {}
magic-string@0.30.17:
dependencies:
'@jridgewell/sourcemap-codec': 1.5.0
minipass@7.1.2: {}
minizlib@3.0.2:
dependencies:
minipass: 7.1.2
mkdirp@3.0.1: {}
mri@1.2.0: {}
mrmime@2.0.1: {}
@ -1125,6 +1478,19 @@ snapshots:
magic-string: 0.30.17
zimmerframe: 1.1.2
tailwindcss@4.1.6: {}
tapable@2.2.1: {}
tar@7.4.3:
dependencies:
'@isaacs/fs-minipass': 4.0.1
chownr: 3.0.0
minipass: 7.1.2
minizlib: 3.0.2
mkdirp: 3.0.1
yallist: 5.0.0
tinyglobby@0.2.13:
dependencies:
fdir: 6.4.4(picomatch@4.0.2)
@ -1136,7 +1502,7 @@ snapshots:
typescript@5.8.3: {}
vite@6.3.5:
vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2):
dependencies:
esbuild: 0.25.4
fdir: 6.4.4(picomatch@4.0.2)
@ -1146,9 +1512,13 @@ snapshots:
tinyglobby: 0.2.13
optionalDependencies:
fsevents: 2.3.3
jiti: 2.4.2
lightningcss: 1.29.2
vitefu@1.0.6(vite@6.3.5):
vitefu@1.0.6(vite@6.3.5(jiti@2.4.2)(lightningcss@1.29.2)):
optionalDependencies:
vite: 6.3.5
vite: 6.3.5(jiti@2.4.2)(lightningcss@1.29.2)
yallist@5.0.0: {}
zimmerframe@1.1.2: {}

1
src/app.css Normal file
View File

@ -0,0 +1 @@
@import "tailwindcss";

View File

@ -11,120 +11,6 @@
%sveltekit.head%
<style>
:root {
--font: Consolas, 'Cascadia Code', Monaco, 'SF Mono', 'DejaVu Sans Mono', 'Roboto Mono';
background: var(--bg);
color: var(--fg);
font-family: var(--font);
font-size: 110%;
margin: 2rem;
transition: all 0.3s;
}
h1, h2, h3 {
color: var(--header);
border: 0;
}
hr {
border: .12em solid var(--accent);
border-radius: 5em;
width: 100%;
}
*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb {
width: 26px;
border-radius: 13px;
background-clip: padding-box;
border: 10px solid transparent;
color: var(--fg);
}
*::-webkit-scrollbar-thumb:hover{
color: var(--link);
}
*::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 10px;
}
@media (max-width:600px) {
.not-required {
display: none;
}
}
a {
text-decoration: none;
position: relative;
color: var(--link);
white-space: nowrap;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 2px solid var(--fg);
transition: 0.4s;
}
a:hover:after {
width: 100%;
color: var(--glow);
}
a:hover {
color: var(--glow);
}
a:active {
color: var(--header);
}
.container {
max-width: 90%;
margin: auto;
}
.cards {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 3em 3em;
padding: 2em 0em 2em 0em;
transition: all 0.2s;
}
@keyframes animationName {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@-o-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@-moz-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@-webkit-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
.elementToFadeInAndOut {
-webkit-animation: animationName 1.5s infinite;
-moz-animation: animationName 1.5s infinite;
-o-animation: animationName 1.5s infinite;
animation: animationName 1.5s infinite;
}
</style>
</head>
<body data-sveltekit-preload-data="hover">

View File

@ -8,62 +8,21 @@
}
</script>
<style>
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
flex: 2 1 15em;
padding: .5em 2.5em 2em 2.5em;
background: var(--bg-secondary);
border-radius: .5em;
scroll-snap-align: start;
transition: all 0.2s;
box-shadow: .25em .25em .5em var(--hover);
}
.card:hover, .card:focus-within {
box-shadow: .5em .5em .5em var(--hover);
transform: scale(1.02);
}
.card .card-header :global(div) {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0em;
width: 100%;
}
.card .card-content :global(div) {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
}
.card .card-footer :global(div){
margin-bottom: 1em;
display: flex;
gap: 1em;
max-width: 100%;
justify-content: space-between;
}
</style>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="card" on:click={onClick}>
<div class="card-header">
<div
class="flex flex-col justify-between p-6 bg-secondary rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl hover:scale-[1.02] snap-start"
on:click={onClick}
>
<div class="card-header flex items-center justify-between w-full mb-0">
<slot name="header"></slot>
</div>
<hr />
<div class="card-content">
<div class="card-content flex items-center justify-center w-full max-w-full">
<slot name="content"></slot>
</div>
<hr class="not-required"/>
<div class="card-footer">
<hr class="not-required" />
<div class="card-footer flex gap-4 w-full max-w-full justify-between mb-4">
<slot name="footer"></slot>
</div>
</div>

View File

@ -8,95 +8,31 @@
}
</script>
<style>
.sliding-card {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
flex: 2 1 15em;
padding: 0.5em 2.5em 2em 2.5em;
background: var(--bg-secondary);
border-radius: 0.5em;
scroll-snap-align: start;
transition: all 0.3s ease-in-out;
overflow: hidden;
position: relative;
}
.sliding-card:hover {
box-shadow: .5em .5em .5em var(--hover);
}
.sliding-card .sliding-card-header :global(div) {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0em;
}
.content-wrapper {
position: relative;
width: 100%;
overflow: hidden; /* Ensure smooth sliding */
}
.sliding-card-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 100%;
flex-grow: 1;
z-index: 1; /* Keep it below the sliding content */
}
.sliding-content {
position: absolute; /* Now it sits on top */
top: 0;
left: 0;
width: 100%;
height: 100%; /* Cover entire content */
background: var(--bg-secondary);
transform: translateY(100%); /* Start hidden */
transition: transform 0.3s ease-in-out;
z-index: 2; /* Now above main content */
}
.sliding-card:hover .sliding-content {
transform: translateY(0);
}
.sliding-card .sliding-card-footer :global(div){
margin-bottom: 1em;
display: flex;
gap: 1em;
max-width: 100%;
justify-content: space-between;
}
</style>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="sliding-card" on:click={onClick}>
<div class="sliding-card-header">
<div
class="sliding-card flex flex-col justify-between flex-wrap flex-[2_1_15em] p-2 bg-secondary rounded-lg snap-start transition-all duration-300 overflow-hidden relative hover:shadow-lg"
on:click={onClick}
>
<div class="sliding-card-header w-full flex items-center justify-between mb-0">
<slot name="header"></slot>
</div>
<hr />
<!-- Wrapper to stack sliding-card-content and sliding-content -->
<div class="content-wrapper">
<div class="sliding-card-content">
<div class="content-wrapper relative w-full overflow-hidden">
<div class="sliding-card-content flex flex-col items-center justify-center max-w-full flex-grow z-[1]">
<slot name="content"></slot>
</div>
<div class="sliding-content">
<div
class="sliding-content absolute top-0 left-0 w-full h-full bg-secondary translate-y-full transition-transform duration-300 z-[2] pointer-events-none group-hover:translate-y-0 sliding-card:hover:translate-y-0"
>
<slot name="sliding-content"></slot>
</div>
</div>
<hr class="not-required"/>
<div class="sliding-card-footer">
<hr class="not-required" />
<div class="sliding-card-footer flex gap-4 max-w-full justify-between mb-4">
<slot name="footer"></slot>
</div>
</div>

View File

@ -10,73 +10,30 @@
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
<dialog
bind:this={dialog}
on:close={() => (showModal = false)}
on:click|self={() => dialog.close()}
bind:this={dialog}
on:close={() => (showModal = false)}
on:click|self={() => dialog.close()}
class="max-w-[70vw] rounded-md border-0 p-0 shadow-lg bg-bg text-fg relative animate-[zoom_0.5s_cubic-bezier(0.34,1.56,0.64,1)]"
style="box-shadow: 0.5em 0.5em 0.5em var(--header);"
>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click|stopPropagation>
<slot name="header" />
<hr />
<slot />
<hr />
</div>
<button class="close" on:click={() => dialog.close()}>
<CloseIcon width="0.8em" />
</button>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click|stopPropagation class="p-4">
<slot name="header" />
<hr class="my-2 border-accent" />
<slot />
<hr class="my-2 border-accent" />
</div>
<button
class="close absolute top-4 right-6 text-fg bg-transparent border-0 p-0 m-0 leading-none text-[1.2em] hover:text-accent"
on:click={() => dialog.close()}
>
<CloseIcon width="0.8em" />
</button>
</dialog>
<style>
dialog {
max-width: 70%;
border-radius: 0.2em;
border: none;
padding: 0em 2em 2em 2em;
border-left: 2em;
border-right: 2em;
background: var(--bg);
color: var(--fg);
box-shadow: .5em .5em .5em var(--header);
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.7);
}
dialog > div {
padding: 1em;
}
dialog[open] {
animation: zoom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes zoom {
from {
transform: scale(0.95);
}
to {
transform: scale(1);
}
}
dialog[open]::backdrop {
animation: fade 0.3s ease-out;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.close {
position: absolute;
top: 1em;
right: 1.5em;
color: var(--fg);
background: transparent;
border: 0 none;
padding: 0;
margin: 0 0 0 auto;
line-height: 1;
font-size: 1.2em;
from { transform: scale(0.95); }
to { transform: scale(1); }
}
</style>

View File

@ -12,42 +12,40 @@
{#await getJson('/json/me.json')}
<Loading />
{:then info}
<div class="main-card">
<div class="card-header">
<h1>{info.name}</h1>
<h3 class="not-required">{info.job_title}</h3>
<div class="bg-secondary rounded-xl p-8 pb-12 shadow-lg mb-16">
<div class="flex items-center justify-between mb-0">
<h1 class="text-3xl font-bold">{info.name}</h1>
<h3 class="not-required text-xl font-semibold">{info.job_title}</h3>
</div>
<hr />
<div class="flex-container">
<img class="profile not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
<p class="about">{@html info.about}</p>
<hr class="my-4 border-accent" />
<div class="flex items-center gap-8 flex-wrap md:flex-nowrap">
<img class="rounded-full h-32 w-32 p-4 border-4 border-accent not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
<p class="about text-lg md:text-xl px-4 md:px-12 flex-1">{@html info.about}</p>
</div>
</div>
<div class="container">
<h1>Skills</h1>
<hr />
<div class="cards">
<Skills skills="{info.skills}"></Skills>
</div>
<div class="container mx-auto mb-12">
<h1 class="text-2xl font-bold">Skills</h1>
<hr class="my-2 border-accent" />
<Skills skills={info.skills}></Skills>
</div>
<div class="container">
<h1>Experience</h1>
<hr />
<!-- https://github.com/K-Sato1995/svelte-vertical-timeline -->
<Timeline timelineData="{info.timeline}"></Timeline>
<div class="container mx-auto mb-12">
<h1 class="text-2xl font-bold">Experience</h1>
<hr class="my-2 border-accent" />
<Timeline timelineData={info.timeline}></Timeline>
</div>
<div style="display: none;">{addToast(new Toast("Click on a skill to open a prompt", ToastType.Info, true, 8_000))}</div>
<div style="display: none;">{addToast(new Toast("Welcome!", ToastType.Success, true, 7_000))}</div>
<div class="hidden">{addToast(new Toast("Click on a skill to open a prompt", ToastType.Info, true, 8_000))}</div>
<div class="hidden">{addToast(new Toast("Welcome!", ToastType.Success, true, 7_000))}</div>
{:catch}
<div class="card">
<div class="card-header">
<h1>Unable to load portfolio overview data</h1>
<div class="bg-secondary rounded-xl p-8 shadow-lg mb-8">
<div class="flex items-center justify-between mb-0">
<h1 class="text-3xl font-bold">Unable to load portfolio overview data</h1>
</div>
</div>
<div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
<div class="hidden">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
{/await}
<style>

View File

@ -1,6 +1,7 @@
<script lang="ts">
import Toasts from "$lib/components/Toasts/Toasts.svelte";
import ThemeSwitcher from "$lib/components/ThemeSwitcher.svelte";
import "../app.css";
</script>
<nav>
@ -10,51 +11,7 @@
<ThemeSwitcher />
</nav>
<div class="main-container fade">
<div class="container mx-auto">
<Toasts />
<slot />
</div>
<style>
.main-container {
margin-left: 10%;
margin-right: 10%;
padding-top: 2em;
}
@media (max-width: 800px) {
.main-container {
margin: 0em;
padding-top: 1em;
}
}
nav {
position: relative;
font-weight: bold;
font-size: 110%;
overflow: visible;
display: flex;
justify-content: center;
gap: 1.5em;
padding: 0em 0em 1.5em 0em;
z-index: 2;
height: 1.5em;
border-radius: 4px;
}
.fade {
-webkit-animation: fadeinout 1s linear forwards;
animation: fadeinout 1s linear forwards;
}
@-webkit-keyframes fadeinout {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeinout {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>

View File

@ -8,22 +8,26 @@
let activeModal: any = null;
</script>
{#each skills as skill}
<Card on:click={() => {showModal = true; activeModal = skill}}>
<div slot="header">
<h2>{skill.skill}</h2>
<i class="{skill.logo} logo"></i>
<div class="flex flex-wrap gap-6 align-center justify-center">
{#each skills as skill}
<div class="w-full md:w-1/2 lg:w-1/3 bg-secondary">
<Card on:click={() => {showModal = true; activeModal = skill}}>
<div slot="header">
<h2>{skill.skill}</h2>
<i class="{skill.logo} logo"></i>
</div>
<div slot="content">
<p class="not-required">{@html skill.usage}</p>
</div>
<div slot="footer">
<!-- svelte-ignore a11y-invalid-attribute -->
<a href="#">View More</a>
<a href="/repos">Repos</a>
</div>
</Card>
</div>
<div slot="content">
<p class="not-required">{@html skill.usage}</p>
</div>
<div slot="footer">
<!-- svelte-ignore a11y-invalid-attribute -->
<a href="#">View More</a>
<a href="/repos">Repos</a>
</div>
</Card>
{/each}
{/each}
</div>
<!--Modal to be displayed on click-->
{#if activeModal != null}

View File

@ -1,6 +1,10 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [sveltekit()]
plugins: [
tailwindcss(),
sveltekit(),
]
});