feat: add interactivity with alpinejs (#34)
* first stages of implementing alpinejs * add link to projects slideshow * begin adding nav bar * inpired hero from flaco theme * fix posts showcase fixed to publish current work to latest * revert docker action * update astro version
This commit is contained in:
GitHub
parent
37f4fa17b8
commit
8df8272d6d
22 changed files with 379 additions and 320 deletions
|
|
@ -4,11 +4,12 @@ import rehypeExternalLinks from "rehype-external-links";
|
|||
import mdx from "@astrojs/mdx";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import icon from "astro-icon";
|
||||
import alpinejs from "@astrojs/alpinejs";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://troylusty.com",
|
||||
integrations: [sitemap(), mdx(), icon()],
|
||||
integrations: [sitemap(), mdx(), icon(), alpinejs()],
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
|
|
|
|||
57
bun.lock
57
bun.lock
|
|
@ -4,23 +4,26 @@
|
|||
"": {
|
||||
"name": "troylusty.com",
|
||||
"dependencies": {
|
||||
"@astrojs/alpinejs": "^0.4.3",
|
||||
"@astrojs/check": "0.9.4",
|
||||
"@astrojs/mdx": "^4.0.8",
|
||||
"@astrojs/rss": "^4.0.11",
|
||||
"@astrojs/sitemap": "3.2.1",
|
||||
"@fontsource-variable/outfit": "^5.1.1",
|
||||
"@fontsource-variable/red-hat-mono": "^5.1.1",
|
||||
"@fontsource/borel": "^5.1.1",
|
||||
"@tailwindcss/vite": "^4.0.5",
|
||||
"@fontsource/instrument-serif": "^5.1.1",
|
||||
"@tailwindcss/vite": "^4.0.6",
|
||||
"@types/alpinejs": "^3.13.11",
|
||||
"alpinejs": "^3.14.8",
|
||||
"astro": "^5.2.5",
|
||||
"astro-icon": "^1.1.5",
|
||||
"rehype-external-links": "^3.0.0",
|
||||
"tailwindcss": "^4.0.5",
|
||||
"tailwindcss": "^4.0.6",
|
||||
"typescript": "^5.7.3",
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/mdi": "^1.2.3",
|
||||
"@iconify-json/simple-icons": "^1.2.23",
|
||||
"@iconify-json/simple-icons": "^1.2.24",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@types/bun": "^1.2.2",
|
||||
"prettier": "^3.5.0",
|
||||
|
|
@ -34,6 +37,8 @@
|
|||
|
||||
"@antfu/utils": ["@antfu/utils@0.7.10", "", {}, "sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww=="],
|
||||
|
||||
"@astrojs/alpinejs": ["@astrojs/alpinejs@0.4.3", "", { "peerDependencies": { "@types/alpinejs": "^3.0.0", "alpinejs": "^3.0.0" } }, "sha512-Us4nqkjcn5FUK/0OcZPN9eRjT8IQVBJxPdZ5JlzScy1F6+twYThBy29lyM8rYwI2kNZFde+V6mSws2w4Vqv7uw=="],
|
||||
|
||||
"@astrojs/check": ["@astrojs/check@0.9.4", "", { "dependencies": { "@astrojs/language-server": "^2.15.0", "chokidar": "^4.0.1", "kleur": "^4.1.5", "yargs": "^17.7.2" }, "peerDependencies": { "typescript": "^5.0.0" }, "bin": { "astro-check": "dist/bin.js" } }, "sha512-IOheHwCtpUfvogHHsvu0AbeRZEnjJg3MopdLddkJE70mULItS/Vh37BHcI00mcOJcH1vhD3odbpvWokpxam7xA=="],
|
||||
|
||||
"@astrojs/compiler": ["@astrojs/compiler@2.10.3", "", {}, "sha512-bL/O7YBxsFt55YHU021oL+xz+B/9HvGNId3F9xURN16aeqDK9juHGktdkCSXz+U4nqFACq6ZFvWomOzhV+zfPw=="],
|
||||
|
|
@ -134,11 +139,11 @@
|
|||
|
||||
"@fontsource-variable/red-hat-mono": ["@fontsource-variable/red-hat-mono@5.1.1", "", {}, "sha512-yeZTpCFFU+fJwlhDrMdQROva42Kuaj1KjCp2HSHziT0FE+BPEL90oS0yAAdDZqwjgI77wDp2I6kgnZoHFV95AQ=="],
|
||||
|
||||
"@fontsource/borel": ["@fontsource/borel@5.1.1", "", {}, "sha512-FkQy7EqFdnDuDXIekP3bYLu/UhoCxhrJ+3cg71OgR3M4AgInLgPUKcsOI+OLuQ24GlThLVtEXWnEkgf/0apJEA=="],
|
||||
"@fontsource/instrument-serif": ["@fontsource/instrument-serif@5.1.1", "", {}, "sha512-DZ+ho/lr8PIqilsGjh5jc0o9oT1BR8UHaBMzCdC4r4MmMqopMzS8uEFGuKwNCd7cDSoAiVXEigaRgnzdi1uv1g=="],
|
||||
|
||||
"@iconify-json/mdi": ["@iconify-json/mdi@1.2.3", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg=="],
|
||||
|
||||
"@iconify-json/simple-icons": ["@iconify-json/simple-icons@1.2.23", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-ySyZ0ZXdNveWnR71t7XGV7jhknxSlTtpM2TyIR1cUHTUzZLP36hYHTNqb2pYYsCzH5ed85KTTKz7vYT33FyNIQ=="],
|
||||
"@iconify-json/simple-icons": ["@iconify-json/simple-icons@1.2.24", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-06ZWXZx3PHCE+02zn+iIGOKKNgE3kyPd0Yh7IUEIa0bCYI6UmGlsYYghRx8As9TnTNYMCEiy5V0zI4Jb6EY6XA=="],
|
||||
|
||||
"@iconify/tools": ["@iconify/tools@4.1.1", "", { "dependencies": { "@iconify/types": "^2.0.0", "@iconify/utils": "^2.2.0", "@types/tar": "^6.1.13", "axios": "^1.7.9", "cheerio": "1.0.0", "domhandler": "^5.0.3", "extract-zip": "^2.0.1", "local-pkg": "^0.5.1", "pathe": "^1.1.2", "svgo": "^3.3.2", "tar": "^6.2.1" } }, "sha512-Hybu/HGhv6T8nLQhiG9rKx+ekF7NNpPOEQAy7JRSKht3s3dcFSsPccYzk24Znc9MTxrR6Gak3cg6CPP5dyvS2Q=="],
|
||||
|
||||
|
|
@ -250,40 +255,42 @@
|
|||
|
||||
"@shikijs/vscode-textmate": ["@shikijs/vscode-textmate@10.0.1", "", {}, "sha512-fTIQwLF+Qhuws31iw7Ncl1R3HUDtGwIipiJ9iU+UsDUwMhegFcQKQHd51nZjb7CArq0MvON8rbgCGQYWHUKAdg=="],
|
||||
|
||||
"@tailwindcss/node": ["@tailwindcss/node@4.0.5", "", { "dependencies": { "enhanced-resolve": "^5.18.0", "jiti": "^2.4.2", "tailwindcss": "4.0.5" } }, "sha512-ffTz4DX1cgr4XPuqjhm32YV6Lyx58R1CxAAnSFTamg6wXwfk3oWdb6exgAbGesPzvUgicTO0gwUdQGSsg4nNog=="],
|
||||
"@tailwindcss/node": ["@tailwindcss/node@4.0.6", "", { "dependencies": { "enhanced-resolve": "^5.18.0", "jiti": "^2.4.2", "tailwindcss": "4.0.6" } }, "sha512-jb6E0WeSq7OQbVYcIJ6LxnZTeC4HjMvbzFBMCrQff4R50HBlo/obmYNk6V2GCUXDeqiXtvtrQgcIbT+/boB03Q=="],
|
||||
|
||||
"@tailwindcss/oxide": ["@tailwindcss/oxide@4.0.5", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.0.5", "@tailwindcss/oxide-darwin-arm64": "4.0.5", "@tailwindcss/oxide-darwin-x64": "4.0.5", "@tailwindcss/oxide-freebsd-x64": "4.0.5", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.5", "@tailwindcss/oxide-linux-arm64-gnu": "4.0.5", "@tailwindcss/oxide-linux-arm64-musl": "4.0.5", "@tailwindcss/oxide-linux-x64-gnu": "4.0.5", "@tailwindcss/oxide-linux-x64-musl": "4.0.5", "@tailwindcss/oxide-win32-arm64-msvc": "4.0.5", "@tailwindcss/oxide-win32-x64-msvc": "4.0.5" } }, "sha512-iWGyOCu0TuzvCBisWbGv2K9+7QCfE0ztgtrZOvb9iF7V7ChVkD15Obe3HevZrhjngAc34jDA+OMSuSvkrpTy4A=="],
|
||||
"@tailwindcss/oxide": ["@tailwindcss/oxide@4.0.6", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.0.6", "@tailwindcss/oxide-darwin-arm64": "4.0.6", "@tailwindcss/oxide-darwin-x64": "4.0.6", "@tailwindcss/oxide-freebsd-x64": "4.0.6", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.6", "@tailwindcss/oxide-linux-arm64-gnu": "4.0.6", "@tailwindcss/oxide-linux-arm64-musl": "4.0.6", "@tailwindcss/oxide-linux-x64-gnu": "4.0.6", "@tailwindcss/oxide-linux-x64-musl": "4.0.6", "@tailwindcss/oxide-win32-arm64-msvc": "4.0.6", "@tailwindcss/oxide-win32-x64-msvc": "4.0.6" } }, "sha512-lVyKV2y58UE9CeKVcYykULe9QaE1dtKdxDEdrTPIdbzRgBk6bdxHNAoDqvcqXbIGXubn3VOl1O/CFF77v/EqSA=="],
|
||||
|
||||
"@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.0.5", "", { "os": "android", "cpu": "arm64" }, "sha512-kK/ik8aIAKWDIEYDZGUCJcnU1qU5sPoMBlVzPvtsUqiV6cSHcnVRUdkcLwKqTeUowzZtjjRiamELLd9Gb0x5BQ=="],
|
||||
"@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.0.6", "", { "os": "android", "cpu": "arm64" }, "sha512-xDbym6bDPW3D2XqQqX3PjqW3CKGe1KXH7Fdkc60sX5ZLVUbzPkFeunQaoP+BuYlLc2cC1FoClrIRYnRzof9Sow=="],
|
||||
|
||||
"@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.0.5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-vkbXFv0FfAEbrSa5NBjFEE+xi06ha7mxuxjY8LRn7d7/tBGrAZOEJnnsEbB6M1+x2pGRTjjei0XyTIXdVCglJA=="],
|
||||
"@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.0.6", "", { "os": "darwin", "cpu": "arm64" }, "sha512-1f71/ju/tvyGl5c2bDkchZHy8p8EK/tDHCxlpYJ1hGNvsYihZNurxVpZ0DefpN7cNc9RTT8DjrRoV8xXZKKRjg=="],
|
||||
|
||||
"@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.0.5", "", { "os": "darwin", "cpu": "x64" }, "sha512-PedA64rHBXEa4e6abBWE4Yj4gHulfPb5T+rBNnX+WGkjjge5Txa2oS99TLmJ5BPDkXXqz/Ba7oweWIDDG7i5NQ=="],
|
||||
"@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.0.6", "", { "os": "darwin", "cpu": "x64" }, "sha512-s/hg/ZPgxFIrGMb0kqyeaqZt505P891buUkSezmrDY6lxv2ixIELAlOcUVTkVh245SeaeEiUVUPiUN37cwoL2g=="],
|
||||
|
||||
"@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.0.5", "", { "os": "freebsd", "cpu": "x64" }, "sha512-silz3nuZdEYDfic3v/ooVUQChj9hbxDSee43GCQNwr/iD9L4K/JsZtoNqr0w69pUkvWcKINOGOG0r7WqUqkAeg=="],
|
||||
"@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.0.6", "", { "os": "freebsd", "cpu": "x64" }, "sha512-Z3Wo8FWZnmio8+xlcbb7JUo/hqRMSmhQw8IGIRoRJ7GmLR0C+25Wq+bEX/135xe/yEle2lFkhu9JBHd4wZYiig=="],
|
||||
|
||||
"@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.0.5", "", { "os": "linux", "cpu": "arm" }, "sha512-ElneG75XS64B9I2G83A/Hc7EtNVOD5xahs7avq0aeW7mEX6CtMc8m8RCXMn3jGhz8enFE52l6QU0wO7iVkEtXQ=="],
|
||||
"@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.0.6", "", { "os": "linux", "cpu": "arm" }, "sha512-SNSwkkim1myAgmnbHs4EjXsPL7rQbVGtjcok5EaIzkHkCAVK9QBQsWeP2Jm2/JJhq4wdx8tZB9Y7psMzHYWCkA=="],
|
||||
|
||||
"@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.0.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-8yoXpWTeIFaByUaKy2qRAppznLVaDHP9xYCAbS3FG7+uUwHi8CHE4TcomM7eyamo0U7dbUIDgKMGoAX5s2iVrA=="],
|
||||
"@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.0.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-tJ+mevtSDMQhKlwCCuhsFEFg058kBiSy4TkoeBG921EfrHKmexOaCyFKYhVXy4JtkaeeOcjJnCLasEeqml4i+Q=="],
|
||||
|
||||
"@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.0.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-BDlVSiiJ08GRz9KKnXgaPFs2fkukPF3pym6uK3oWEKW45jKlVGgybLqulcV5nLEqREOuyq4Rn4vnZss4/bbQ/g=="],
|
||||
"@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.0.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-IoArz1vfuTR4rALXMUXI/GWWfx2EaO4gFNtBNkDNOYhlTD4NVEwE45nbBoojYiTulajI4c2XH8UmVEVJTOJKxA=="],
|
||||
|
||||
"@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.0.5", "", { "os": "linux", "cpu": "x64" }, "sha512-DYgieNDRkTy69bWPgdsc47nAXa74P63P/RetUwYM9vYj5USyOfHCEcqIthkCuYw3dXKBhjgwe697TmL2g2jpAw=="],
|
||||
"@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.0.6", "", { "os": "linux", "cpu": "x64" }, "sha512-QtsUfLkEAeWAC3Owx9Kg+7JdzE+k9drPhwTAXbXugYB9RZUnEWWx5x3q/au6TvUYcL+n0RBqDEO2gucZRvRFgQ=="],
|
||||
|
||||
"@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.0.5", "", { "os": "linux", "cpu": "x64" }, "sha512-z2RzUvOQl0ZqrZqmCFP53tJbBXQ3UmLD/E6J7+q0e+4VaFnXCcIYTfQbHgI8f3fash+q6gK80Ko/ywEQ+bvv6Q=="],
|
||||
"@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.0.6", "", { "os": "linux", "cpu": "x64" }, "sha512-QthvJqIji2KlGNwLcK/PPYo7w1Wsi/8NK0wAtRGbv4eOPdZHkQ9KUk+oCoP20oPO7i2a6X1aBAFQEL7i08nNMA=="],
|
||||
|
||||
"@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.0.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-ho1dJ4o5Q8nAOxdMkbfBu5aSqI+/bzQ0jEeHcXaEdEJzf2fSWs3HY7bIKtE6vQS8c4SmSBvls7IhGPuJxNg+2Q=="],
|
||||
"@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.0.6", "", { "os": "win32", "cpu": "arm64" }, "sha512-+oka+dYX8jy9iP00DJ9Y100XsqvbqR5s0yfMZJuPR1H/lDVtDfsZiSix1UFBQ3X1HWxoEEl6iXNJHWd56TocVw=="],
|
||||
|
||||
"@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.0.5", "", { "os": "win32", "cpu": "x64" }, "sha512-yjw6JhtyDXr+G0aZrj3L3NlEV7CobSqOdPyfo6G3d91WEZ5b8PyGm86IAreX08Jp9DChGXEd53gWysVpWCTs+w=="],
|
||||
"@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.0.6", "", { "os": "win32", "cpu": "x64" }, "sha512-+o+juAkik4p8Ue/0LiflQXPmVatl6Av3LEZXpBTfg4qkMIbZdhCGWFzHdt2NjoMiLOJCFDddoV6GYaimvK1Olw=="],
|
||||
|
||||
"@tailwindcss/typography": ["@tailwindcss/typography@0.5.16", "", { "dependencies": { "lodash.castarray": "^4.4.0", "lodash.isplainobject": "^4.0.6", "lodash.merge": "^4.6.2", "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA=="],
|
||||
|
||||
"@tailwindcss/vite": ["@tailwindcss/vite@4.0.5", "", { "dependencies": { "@tailwindcss/node": "^4.0.5", "@tailwindcss/oxide": "^4.0.5", "lightningcss": "^1.29.1", "tailwindcss": "4.0.5" }, "peerDependencies": { "vite": "^5.2.0 || ^6" } }, "sha512-/i4hjLTUYVjUG0MTUviQP3HR/hzwyzv8Sq4sz2pnsNuf+FIjjhJB0vcnIMH1KIX0k8ozD6CBv2Dl76tlm/JFFA=="],
|
||||
"@tailwindcss/vite": ["@tailwindcss/vite@4.0.6", "", { "dependencies": { "@tailwindcss/node": "^4.0.6", "@tailwindcss/oxide": "^4.0.6", "lightningcss": "^1.29.1", "tailwindcss": "4.0.6" }, "peerDependencies": { "vite": "^5.2.0 || ^6" } }, "sha512-O25vZ/URWbZ2JHdk2o8wH7jOKqEGCsYmX3GwGmYS5DjE4X3mpf93a72Rn7VRnefldNauBzr5z2hfZptmBNtTUQ=="],
|
||||
|
||||
"@trysound/sax": ["@trysound/sax@0.2.0", "", {}, "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="],
|
||||
|
||||
"@types/acorn": ["@types/acorn@4.0.6", "", { "dependencies": { "@types/estree": "*" } }, "sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ=="],
|
||||
|
||||
"@types/alpinejs": ["@types/alpinejs@3.13.11", "", {}, "sha512-3KhGkDixCPiLdL3Z/ok1GxHwLxEWqQOKJccgaQL01wc0EVM2tCTaqlC3NIedmxAXkVzt/V6VTM8qPgnOHKJ1MA=="],
|
||||
|
||||
"@types/bun": ["@types/bun@1.2.2", "", { "dependencies": { "bun-types": "1.2.2" } }, "sha512-tr74gdku+AEDN5ergNiBnplr7hpDp3V1h7fqI2GcR/rsUaM39jpSeKH0TFibRvU0KwniRx5POgaYnaXbk0hU+w=="],
|
||||
|
||||
"@types/cookie": ["@types/cookie@0.6.0", "", {}, "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="],
|
||||
|
|
@ -334,12 +341,18 @@
|
|||
|
||||
"@vscode/l10n": ["@vscode/l10n@0.0.18", "", {}, "sha512-KYSIHVmslkaCDyw013pphY+d7x1qV8IZupYfeIfzNA+nsaWHbn5uPuQRvdRFsa9zFzGeudPuoGoZ1Op4jrJXIQ=="],
|
||||
|
||||
"@vue/reactivity": ["@vue/reactivity@3.1.5", "", { "dependencies": { "@vue/shared": "3.1.5" } }, "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg=="],
|
||||
|
||||
"@vue/shared": ["@vue/shared@3.1.5", "", {}, "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="],
|
||||
|
||||
"acorn": ["acorn@8.14.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA=="],
|
||||
|
||||
"acorn-jsx": ["acorn-jsx@5.3.2", "", { "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="],
|
||||
|
||||
"ajv": ["ajv@8.17.1", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g=="],
|
||||
|
||||
"alpinejs": ["alpinejs@3.14.8", "", { "dependencies": { "@vue/reactivity": "~3.1.1" } }, "sha512-wT2fuP2DXpGk/jKaglwy7S/IJpm1FD+b7U6zUrhwErjoq5h27S4dxkJEXVvhbdwyPv9U+3OkUuNLkZT4h2Kfrg=="],
|
||||
|
||||
"ansi-align": ["ansi-align@3.0.1", "", { "dependencies": { "string-width": "^4.1.0" } }, "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w=="],
|
||||
|
||||
"ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
|
||||
|
|
@ -358,7 +371,7 @@
|
|||
|
||||
"astring": ["astring@1.9.0", "", { "bin": { "astring": "bin/astring" } }, "sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg=="],
|
||||
|
||||
"astro": ["astro@5.2.5", "", { "dependencies": { "@astrojs/compiler": "^2.10.3", "@astrojs/internal-helpers": "0.5.1", "@astrojs/markdown-remark": "6.1.0", "@astrojs/telemetry": "3.2.0", "@oslojs/encoding": "^1.1.0", "@rollup/pluginutils": "^5.1.4", "@types/cookie": "^0.6.0", "acorn": "^8.14.0", "aria-query": "^5.3.2", "axobject-query": "^4.1.0", "boxen": "8.0.1", "ci-info": "^4.1.0", "clsx": "^2.1.1", "common-ancestor-path": "^1.0.1", "cookie": "^0.7.2", "cssesc": "^3.0.0", "debug": "^4.4.0", "deterministic-object-hash": "^2.0.2", "devalue": "^5.1.1", "diff": "^5.2.0", "dlv": "^1.1.3", "dset": "^3.1.4", "es-module-lexer": "^1.6.0", "esbuild": "^0.24.2", "estree-walker": "^3.0.3", "fast-glob": "^3.3.3", "flattie": "^1.1.1", "github-slugger": "^2.0.0", "html-escaper": "3.0.3", "http-cache-semantics": "^4.1.1", "js-yaml": "^4.1.0", "kleur": "^4.1.5", "magic-string": "^0.30.17", "magicast": "^0.3.5", "micromatch": "^4.0.8", "mrmime": "^2.0.0", "neotraverse": "^0.6.18", "p-limit": "^6.2.0", "p-queue": "^8.1.0", "preferred-pm": "^4.1.1", "prompts": "^2.4.2", "rehype": "^13.0.2", "semver": "^7.7.1", "shiki": "^1.29.2", "tinyexec": "^0.3.2", "tsconfck": "^3.1.4", "ultrahtml": "^1.5.3", "unist-util-visit": "^5.0.0", "unstorage": "^1.14.4", "vfile": "^6.0.3", "vite": "^6.0.11", "vitefu": "^1.0.5", "which-pm": "^3.0.1", "xxhash-wasm": "^1.1.0", "yargs-parser": "^21.1.1", "yocto-spinner": "^0.2.0", "zod": "^3.24.1", "zod-to-json-schema": "^3.24.1", "zod-to-ts": "^1.2.0" }, "optionalDependencies": { "sharp": "^0.33.3" }, "bin": { "astro": "astro.js" } }, "sha512-AYXyYkc+c5xbKTm48FyQA91y81nXyNPAaoyafR0LUugE4lAwuvIUcXDBfMzmbuP1lGRvsE33G2oypv6gbGaPFg=="],
|
||||
"astro": ["astro@5.2.6", "", { "dependencies": { "@astrojs/compiler": "^2.10.3", "@astrojs/internal-helpers": "0.5.1", "@astrojs/markdown-remark": "6.1.0", "@astrojs/telemetry": "3.2.0", "@oslojs/encoding": "^1.1.0", "@rollup/pluginutils": "^5.1.4", "@types/cookie": "^0.6.0", "acorn": "^8.14.0", "aria-query": "^5.3.2", "axobject-query": "^4.1.0", "boxen": "8.0.1", "ci-info": "^4.1.0", "clsx": "^2.1.1", "common-ancestor-path": "^1.0.1", "cookie": "^0.7.2", "cssesc": "^3.0.0", "debug": "^4.4.0", "deterministic-object-hash": "^2.0.2", "devalue": "^5.1.1", "diff": "^5.2.0", "dlv": "^1.1.3", "dset": "^3.1.4", "es-module-lexer": "^1.6.0", "esbuild": "^0.24.2", "estree-walker": "^3.0.3", "fast-glob": "^3.3.3", "flattie": "^1.1.1", "github-slugger": "^2.0.0", "html-escaper": "3.0.3", "http-cache-semantics": "^4.1.1", "js-yaml": "^4.1.0", "kleur": "^4.1.5", "magic-string": "^0.30.17", "magicast": "^0.3.5", "micromatch": "^4.0.8", "mrmime": "^2.0.0", "neotraverse": "^0.6.18", "p-limit": "^6.2.0", "p-queue": "^8.1.0", "preferred-pm": "^4.1.1", "prompts": "^2.4.2", "rehype": "^13.0.2", "semver": "^7.7.1", "shiki": "^1.29.2", "tinyexec": "^0.3.2", "tsconfck": "^3.1.4", "ultrahtml": "^1.5.3", "unist-util-visit": "^5.0.0", "unstorage": "^1.14.4", "vfile": "^6.0.3", "vite": "^6.0.11", "vitefu": "^1.0.5", "which-pm": "^3.0.1", "xxhash-wasm": "^1.1.0", "yargs-parser": "^21.1.1", "yocto-spinner": "^0.2.0", "zod": "^3.24.1", "zod-to-json-schema": "^3.24.1", "zod-to-ts": "^1.2.0" }, "optionalDependencies": { "sharp": "^0.33.3" }, "bin": { "astro": "astro.js" } }, "sha512-CrTuJMwpWF9kmOhX+cl6uPqNbTRrHO7eXggFP9SK7+Bsen/7FpJtA6k1p/ALleuV5ndJLqn/9tpmP3qACHPjYA=="],
|
||||
|
||||
"astro-icon": ["astro-icon@1.1.5", "", { "dependencies": { "@iconify/tools": "^4.0.5", "@iconify/types": "^2.0.0", "@iconify/utils": "^2.1.30" } }, "sha512-CJYS5nWOw9jz4RpGWmzNQY7D0y2ZZacH7atL2K9DeJXJVaz7/5WrxeyIxO8KASk1jCM96Q4LjRx/F3R+InjJrw=="],
|
||||
|
||||
|
|
@ -1034,7 +1047,7 @@
|
|||
|
||||
"svgo": ["svgo@3.3.2", "", { "dependencies": { "@trysound/sax": "0.2.0", "commander": "^7.2.0", "css-select": "^5.1.0", "css-tree": "^2.3.1", "css-what": "^6.1.0", "csso": "^5.0.5", "picocolors": "^1.0.0" }, "bin": "./bin/svgo" }, "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw=="],
|
||||
|
||||
"tailwindcss": ["tailwindcss@4.0.5", "", {}, "sha512-DZZIKX3tA23LGTjHdnwlJOTxfICD1cPeykLLsYF1RQBI9QsCR3i0szohJfJDVjr6aNRAIio5WVO7FGB77fRHwg=="],
|
||||
"tailwindcss": ["tailwindcss@4.0.6", "", {}, "sha512-mysewHYJKaXgNOW6pp5xon/emCsfAMnO8WMaGKZZ35fomnR/T5gYnRg2/yRTTrtXiEl1tiVkeRt0eMO6HxEZqw=="],
|
||||
|
||||
"tapable": ["tapable@2.2.1", "", {}, "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="],
|
||||
|
||||
|
|
|
|||
13
package.json
13
package.json
|
|
@ -11,23 +11,26 @@
|
|||
"format:write": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/alpinejs": "^0.4.3",
|
||||
"@astrojs/check": "0.9.4",
|
||||
"@astrojs/mdx": "^4.0.8",
|
||||
"@astrojs/rss": "^4.0.11",
|
||||
"@astrojs/sitemap": "3.2.1",
|
||||
"@fontsource-variable/outfit": "^5.1.1",
|
||||
"@fontsource-variable/red-hat-mono": "^5.1.1",
|
||||
"@fontsource/borel": "^5.1.1",
|
||||
"@tailwindcss/vite": "^4.0.5",
|
||||
"astro": "^5.2.5",
|
||||
"@fontsource/instrument-serif": "^5.1.1",
|
||||
"@tailwindcss/vite": "^4.0.6",
|
||||
"@types/alpinejs": "^3.13.11",
|
||||
"alpinejs": "^3.14.8",
|
||||
"astro": "^5.2.6",
|
||||
"astro-icon": "^1.1.5",
|
||||
"rehype-external-links": "^3.0.0",
|
||||
"tailwindcss": "^4.0.5",
|
||||
"tailwindcss": "^4.0.6",
|
||||
"typescript": "^5.7.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/mdi": "^1.2.3",
|
||||
"@iconify-json/simple-icons": "^1.2.23",
|
||||
"@iconify-json/simple-icons": "^1.2.24",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@types/bun": "^1.2.2",
|
||||
"prettier": "^3.5.0",
|
||||
|
|
|
|||
BIN
public/assets/icon.png
Normal file
BIN
public/assets/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
public/troy-lusty-cv.pdf
Normal file
BIN
public/troy-lusty-cv.pdf
Normal file
Binary file not shown.
|
|
@ -2,5 +2,6 @@
|
|||
pkgs.mkShell {
|
||||
nativeBuildInputs = with pkgs.buildPackages; [
|
||||
bun
|
||||
nodejs
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
|
|||
updated={article.data.updated}
|
||||
tags={article.data.tags}
|
||||
>
|
||||
<div class="mx-auto mb-8">
|
||||
<div class="mx-auto mb-8 max-w-[65ch]">
|
||||
<h1
|
||||
class="animate-reveal text-start text-2xl font-semibold break-words opacity-0"
|
||||
>
|
||||
|
|
@ -79,7 +79,9 @@ const listFormatter = new Intl.ListFormat("en-GB", {
|
|||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]">
|
||||
<div
|
||||
class="animate-reveal mx-auto max-w-[65ch] opacity-0 [animation-delay:0.2s]"
|
||||
>
|
||||
<Prose>
|
||||
<Content />
|
||||
</Prose>
|
||||
|
|
|
|||
|
|
@ -2,15 +2,18 @@
|
|||
type Props = {
|
||||
href: String;
|
||||
link: String;
|
||||
class?: string;
|
||||
};
|
||||
|
||||
const { href, link } = Astro.props;
|
||||
const { href, link, class: additionalClasses } = Astro.props;
|
||||
|
||||
const baseClasses =
|
||||
"bg-tertiary text-primary hover:bg-accent flex w-fit flex-row items-center gap-1 justify-self-center rounded-md px-2 py-1 text-center text-sm font-medium text-nowrap capitalize";
|
||||
const combinedClasses = `${baseClasses} ${additionalClasses || ""}`;
|
||||
---
|
||||
|
||||
<a href={`${href}`}>
|
||||
<div
|
||||
class="animate-reveal bg-tertiary text-primary hover:bg-accent m-4 flex w-fit flex-row items-center gap-1 justify-self-center rounded-full px-2 py-1 text-center text-sm font-medium text-nowrap capitalize opacity-0 transition-colors [animation-delay:0.1s]"
|
||||
>
|
||||
<div class={combinedClasses}>
|
||||
{link}
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
97
src/components/Carousel.astro
Normal file
97
src/components/Carousel.astro
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
---
|
||||
interface Props {
|
||||
data: string;
|
||||
}
|
||||
|
||||
const { data } = Astro.props;
|
||||
---
|
||||
|
||||
<div
|
||||
class="pt-6"
|
||||
data-slides={data}
|
||||
x-data="{
|
||||
// Sets the time between each slides in milliseconds
|
||||
autoplayIntervalTime: 5000,
|
||||
init() {
|
||||
this.slides = JSON.parse(this.$el.dataset.slides);
|
||||
},
|
||||
currentSlideIndex: 1,
|
||||
isPaused: false,
|
||||
autoplayInterval: null,
|
||||
previous() {
|
||||
if (this.currentSlideIndex > 1) {
|
||||
this.currentSlideIndex = this.currentSlideIndex - 1
|
||||
} else {
|
||||
// If it's the first slide, go to the last slide
|
||||
this.currentSlideIndex = this.slides.length
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (this.currentSlideIndex < this.slides.length) {
|
||||
this.currentSlideIndex = this.currentSlideIndex + 1
|
||||
} else {
|
||||
// If it's the last slide, go to the first slide
|
||||
this.currentSlideIndex = 1
|
||||
}
|
||||
},
|
||||
autoplay() {
|
||||
this.autoplayInterval = setInterval(() => {
|
||||
if (! this.isPaused) {
|
||||
this.next()
|
||||
}
|
||||
}, this.autoplayIntervalTime)
|
||||
},
|
||||
// Updates interval time
|
||||
setAutoplayInterval(newIntervalTime) {
|
||||
clearInterval(this.autoplayInterval)
|
||||
this.autoplayIntervalTime = newIntervalTime
|
||||
this.autoplay()
|
||||
},
|
||||
}"
|
||||
x-init="autoplay"
|
||||
class="relative w-full overflow-hidden"
|
||||
>
|
||||
<div class="relative min-h-[50svh] w-full">
|
||||
<template x-for="(slide, index) in slides">
|
||||
<div
|
||||
x-cloak
|
||||
x-show="currentSlideIndex == index + 1"
|
||||
class="absolute inset-0"
|
||||
x-transition.opacity.duration.1000ms
|
||||
>
|
||||
<img
|
||||
class="absolute inset-0 h-full w-full rounded-md object-cover"
|
||||
x-bind:src="slide.data.image.url.src"
|
||||
x-bind:alt="slide.data.image.alt"
|
||||
/>
|
||||
<a
|
||||
class="absolute inset-0 z-20"
|
||||
x-bind:aria-label="slide.data.title"
|
||||
x-bind:href="'/' + slide.collection + '/' + slide.slug"></a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
<template x-for="(slide, index) in slides">
|
||||
<div
|
||||
x-show="currentSlideIndex == index + 1"
|
||||
class="text-secondary flex justify-end pt-1 text-right font-serif text-lg"
|
||||
>
|
||||
<div class="flex w-full flex-col items-end">
|
||||
<h3
|
||||
x-text="slide.data.title"
|
||||
x-bind:aria-describedby="'slide' + (index + 1) + 'Description'"
|
||||
class="border-tertiary/30 w-fit border-t italic"
|
||||
>
|
||||
</h3>
|
||||
<p
|
||||
class="text-tertiary w-fit text-sm text-pretty lg:w-1/2"
|
||||
x-text="slide.data.description"
|
||||
x-bind:id="'slide' + (index + 1) + 'Description'"
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,54 +4,22 @@ import Link from "@components/Link.astro";
|
|||
import { Icon } from "astro-icon/components";
|
||||
---
|
||||
|
||||
<footer class="mx-auto mt-auto mb-8 w-full max-w-prose space-y-6 pt-12">
|
||||
<div class="md:flex md:justify-between">
|
||||
<div class="text-secondary mb-6 md:mb-0">
|
||||
<a class="group inline-flex items-center" href="#top" title="Back to top">
|
||||
<Icon
|
||||
name="icon"
|
||||
title={SITE.TITLE}
|
||||
class="group-hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
|
||||
/>
|
||||
<div
|
||||
class="group-hover:text-tertiary ml-2 hidden flex-none text-sm font-bold capitalize transition-colors duration-500 md:visible lg:block"
|
||||
>
|
||||
Troy Lusty
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-left sm:gap-6 md:text-right">
|
||||
<ul class="text-tertiary font-medium">
|
||||
{
|
||||
SITE.NAVLINKS.map((i) => (
|
||||
<li class="mb-1 last:mb-0">
|
||||
<a
|
||||
data-navlink
|
||||
href={i.href}
|
||||
class="hover:text-secondary capitalize transition-colors"
|
||||
>
|
||||
{i.name}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<span class="text-tertiary text-sm sm:text-center"
|
||||
<footer class="mx-auto mt-auto mb-6 w-full max-w-prose pt-12">
|
||||
<div class="flex flex-col items-center justify-between md:flex-row">
|
||||
<span class="text-tertiary text-center text-sm font-medium"
|
||||
>© {new Date().getFullYear()}
|
||||
<a href="/" class="hover:text-secondary transition-colors">{SITE.TITLE}</a
|
||||
>. All Rights Reserved.
|
||||
<a href="/" class="hover:text-secondary transition-colors duration-300"
|
||||
>{SITE.TITLE}</a
|
||||
>. All rights reserved.
|
||||
</span>
|
||||
<div class="mt-4 flex gap-2 sm:mt-0 sm:justify-center">
|
||||
<div class="mt-4 flex gap-3 sm:mt-0 sm:justify-center">
|
||||
{
|
||||
SITE.LINKS.map((i) => (
|
||||
<Link href={i.href}>
|
||||
<Icon
|
||||
name={i.icon}
|
||||
title={i.name}
|
||||
class="text-tertiary hover:text-secondary h-5 w-5 transition-colors"
|
||||
class="text-tertiary hover:text-secondary h-5 w-auto transition-colors duration-300"
|
||||
/>
|
||||
</Link>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
---
|
||||
import { SITE } from "@consts";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import Button from "@components/Button.astro";
|
||||
---
|
||||
|
||||
<header class="mx-auto mb-8 w-full max-w-prose space-y-6 pt-12">
|
||||
<div
|
||||
class="text-secondary group flex h-12 items-center justify-between leading-[0px]"
|
||||
<header class="mx-auto mb-8 w-full max-w-6xl space-y-6 px-4 pt-4">
|
||||
<nav
|
||||
x-data="{ mobileMenuIsOpen: false }"
|
||||
x-on:click.away="mobileMenuIsOpen = false"
|
||||
class="flex h-12 items-center justify-between"
|
||||
>
|
||||
<a class="inline-flex items-center" href="/" title={SITE.TITLE}>
|
||||
<a class="group inline-flex items-center" href="/" title={SITE.TITLE}>
|
||||
<Icon
|
||||
name="icon"
|
||||
title={SITE.TITLE}
|
||||
|
|
@ -19,5 +22,87 @@ import { Icon } from "astro-icon/components";
|
|||
Troy Lusty
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="hidden items-center gap-4 sm:flex">
|
||||
{
|
||||
SITE.NAVLINKS.map((i) => (
|
||||
<li class="mb-1 last:mb-0">
|
||||
<a
|
||||
data-navlink
|
||||
href={i.href}
|
||||
class="text-secondary hover:text-secondary decoration-tertiary font-medium capitalize decoration-wavy underline-offset-2 focus:underline focus:outline-hidden"
|
||||
aria-current="page"
|
||||
>
|
||||
{i.name}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
<li>
|
||||
<a href={`mailto:${SITE.EMAIL}`}>
|
||||
<span
|
||||
class="rounded-full bg-blue-500/10 px-3 py-2 text-sm leading-6 font-medium text-blue-400 ring-1 ring-blue-500/20 ring-inset"
|
||||
>Hire me</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen"
|
||||
x-bind:aria-expanded="mobileMenuIsOpen"
|
||||
x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-99' : null"
|
||||
type="button"
|
||||
class="text-secondary flex sm:hidden"
|
||||
aria-label="mobile menu"
|
||||
aria-controls="mobileMenu"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:menu"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
x-cloak
|
||||
x-show="!mobileMenuIsOpen"
|
||||
/>
|
||||
<Icon
|
||||
name="mdi:window-close"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
x-cloak
|
||||
x-show="mobileMenuIsOpen"
|
||||
/>
|
||||
</button>
|
||||
<ul
|
||||
x-cloak
|
||||
x-show="mobileMenuIsOpen"
|
||||
x-transition:enter="transition motion-reduce:transition-none ease-out duration-300"
|
||||
x-transition:enter-start="-translate-y-full"
|
||||
x-transition:enter-end="translate-y-0"
|
||||
x-transition:leave="transition motion-reduce:transition-none ease-out duration-300"
|
||||
x-transition:leave-start="translate-y-0"
|
||||
x-transition:leave-end="-translate-y-full"
|
||||
id="mobileMenu"
|
||||
class="bg-primary fixed inset-x-0 top-0 z-98 flex max-h-svh flex-col overflow-y-auto rounded-b-md px-6 pt-20 pb-6 sm:hidden"
|
||||
>
|
||||
{
|
||||
SITE.NAVLINKS.map((i) => (
|
||||
<li class="py-4">
|
||||
<a
|
||||
data-navlink
|
||||
href={i.href}
|
||||
class="text-secondary w-full text-lg font-medium capitalize focus:underline"
|
||||
aria-current="page"
|
||||
>
|
||||
{i.name}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
<li class="mt-4 w-full border-none">
|
||||
<Button
|
||||
href={`mailto:${SITE.EMAIL}`}
|
||||
link="Hire me"
|
||||
class="block w-full justify-center"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,33 @@
|
|||
---
|
||||
import borel from "@fontsource/borel/files/borel-latin-400-normal.woff2?url";
|
||||
import instrument from "@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff2?url";
|
||||
---
|
||||
|
||||
<link
|
||||
rel="preload"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
href={borel}
|
||||
href={instrument}
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
|
||||
<section class="mt-6 overflow-clip">
|
||||
<h1
|
||||
class="--translate-y-full animate-logo text-4xl font-bold text-pretty md:text-6xl"
|
||||
>
|
||||
Digital designer based in the <span
|
||||
class="animate-gradient-x bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% bg-clip-text px-1 font-['Borel'] text-3xl text-transparent md:text-5xl"
|
||||
>United Kingdom</span
|
||||
>.
|
||||
</h1>
|
||||
<section>
|
||||
<div class="mx-auto px-8 py-32">
|
||||
<div
|
||||
class="animate-reveal mx-auto max-w-xl text-center text-4xl tracking-tight text-balance text-white md:text-6xl"
|
||||
>
|
||||
<div
|
||||
class="text-secondary flex items-center justify-center gap-3 font-semibold"
|
||||
>
|
||||
Hi, I'm Troy,
|
||||
<img
|
||||
src="/assets/icon.png"
|
||||
class="size-12 rounded-xl md:size-16"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="text-tertiary font-serif font-light tracking-wide italic">
|
||||
digital designer.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@ type Props = {
|
|||
const { collection } = Astro.props;
|
||||
---
|
||||
|
||||
<li>
|
||||
<li class="border-tertiary/30 border-l">
|
||||
<a
|
||||
class="group hover:bg-tertiary/30 bg-none"
|
||||
href={`/${collection.collection}/${collection.slug}`}
|
||||
>
|
||||
<article class="flex flex-col">
|
||||
<article class="ml-2 flex flex-col">
|
||||
<h3 class="mb-1 font-semibold text-balance">
|
||||
<span class="text-secondary">{collection.data.title}</span><span
|
||||
class="text-tertiary group-hover:text-accent ml-2 transition-colors"
|
||||
|
|
|
|||
|
|
@ -10,39 +10,31 @@ const { collection } = Astro.props;
|
|||
---
|
||||
|
||||
<li>
|
||||
<article
|
||||
class="group relative isolate mx-auto flex h-full w-full flex-col justify-end overflow-hidden rounded px-8 pt-40 pb-8"
|
||||
>
|
||||
<Image
|
||||
src={collection.data.image.url}
|
||||
alt={collection.data.image.alt}
|
||||
title={collection.data.title}
|
||||
loading="eager"
|
||||
class="absolute inset-0 h-full w-full object-cover transition-all duration-300 group-hover:brightness-50"
|
||||
fit="cover"
|
||||
/>
|
||||
|
||||
<a
|
||||
class="absolute inset-0 z-20"
|
||||
href={`/${collection.collection}/${collection.slug}`}
|
||||
aria-label={collection.data.title}></a>
|
||||
<h3
|
||||
class="z-10 w-fit text-xl font-semibold text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
||||
>
|
||||
{collection.data.title}
|
||||
</h3>
|
||||
<div
|
||||
class="z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 text-neutral-400 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
|
||||
>
|
||||
{
|
||||
collection.data.collection ? (
|
||||
<span>
|
||||
<FormattedDate date={collection.data.date} /> (Collection)
|
||||
</span>
|
||||
) : (
|
||||
<FormattedDate date={collection.data.date} />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<article class="flex-col overflow-clip">
|
||||
<a href={`/${collection.collection}/${collection.slug}`} class="group">
|
||||
<div class="overflow-hidden rounded-md">
|
||||
<Image
|
||||
src={collection.data.image.url}
|
||||
alt={collection.data.image.alt}
|
||||
title={collection.data.title}
|
||||
loading="eager"
|
||||
class="aspect-square object-cover transition-transform duration-300 ease-in-out group-hover:scale-102"
|
||||
fit="cover"
|
||||
/>
|
||||
</div>
|
||||
<article class="flex flex-col">
|
||||
<h3 class="mb-1 font-semibold text-balance">
|
||||
<span class="text-secondary">{collection.data.title}</span><span
|
||||
class="text-tertiary group-hover:text-accent ml-2 transition-colors"
|
||||
>{collection.data.description}</span
|
||||
>
|
||||
</h3>
|
||||
<time class="text-accent block text-sm"
|
||||
><time>
|
||||
<FormattedDate date={collection.data.date} />
|
||||
</time></time
|
||||
>
|
||||
</article>
|
||||
</a>
|
||||
</article>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
<div
|
||||
class="mx-auto mt-2 mb-8 w-full max-w-[60ch] p-4 pb-16 md:mt-16 md:mb-32 md:p-5"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -39,11 +39,21 @@ export const SITE: Site = {
|
|||
href: "mailto:hello@troylusty.com",
|
||||
icon: "mdi:email",
|
||||
},
|
||||
{
|
||||
name: "CV",
|
||||
href: "/troy-lusty-cv.pdf",
|
||||
icon: "mdi:certificate",
|
||||
},
|
||||
{
|
||||
name: "itch.io",
|
||||
href: "https://troylusty.itch.io",
|
||||
icon: "simple-icons:itchdotio",
|
||||
},
|
||||
{
|
||||
name: "LinkedIn",
|
||||
href: "https://linkedin.com/in/troylusty",
|
||||
icon: "mdi:linkedin",
|
||||
},
|
||||
{
|
||||
name: "GitHub",
|
||||
href: "https://github.com/troylusty",
|
||||
|
|
@ -56,10 +66,6 @@ export const SITE: Site = {
|
|||
},
|
||||
],
|
||||
NAVLINKS: [
|
||||
{
|
||||
name: "home",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
name: "projects",
|
||||
href: "/projects",
|
||||
|
|
@ -68,10 +74,6 @@ export const SITE: Site = {
|
|||
name: "posts",
|
||||
href: "/posts",
|
||||
},
|
||||
{
|
||||
name: "curriculum vitae",
|
||||
href: "/cv",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -27,11 +27,11 @@ const { title, description, image, date, updated, tags } = Astro.props;
|
|||
tags={tags}
|
||||
/>
|
||||
<body
|
||||
class="bg-primary text-secondary flex min-h-screen flex-col justify-start p-8 pt-0 md:pt-8"
|
||||
class="bg-primary text-secondary flex min-h-screen flex-col justify-start p-4 pt-0 md:pt-4"
|
||||
>
|
||||
<Header />
|
||||
<main
|
||||
class="mx-auto w-full max-w-prose space-y-6"
|
||||
class="mx-auto w-full max-w-[1344px] space-y-6"
|
||||
transition:animate="fade"
|
||||
>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -1,91 +0,0 @@
|
|||
---
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import { CV } from "@consts";
|
||||
import Work from "@components/Work.astro";
|
||||
import Education from "@components/Education.astro";
|
||||
import Skills from "@components/Skills.astro";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import Link from "@components/Link.astro";
|
||||
---
|
||||
|
||||
<Layout title={CV.TITLE} description={CV.DESCRIPTION}>
|
||||
<section>
|
||||
<div
|
||||
class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center"
|
||||
>
|
||||
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
|
||||
Troy Lusty
|
||||
</h1>
|
||||
<div
|
||||
class="text-tertiary mt-4 flex flex-col items-start gap-2 md:flex-row"
|
||||
>
|
||||
<div class="animate-reveal flex items-center gap-2 opacity-0">
|
||||
<div
|
||||
class="text-tertiary hover:text-accent flex flex-row items-center gap-2 transition-colors"
|
||||
>
|
||||
<Icon name="mdi:email" />
|
||||
<Link href="mailto:hello@troylusty.com">
|
||||
<p>hello@troylusty.com</p>
|
||||
</Link>
|
||||
</div>
|
||||
<div
|
||||
class="text-tertiary hover:text-accent flex flex-row items-center gap-2 transition-colors"
|
||||
>
|
||||
<Icon name="mdi:web" />
|
||||
<Link href="/">
|
||||
<p>troylusty.com</p>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="animate-reveal opacity-0 [animation-delay:0.1s]">
|
||||
<h2 class="mb-4 text-2xl font-semibold break-words capitalize">About me</h2>
|
||||
<p class="mb-2">
|
||||
Hi, my name is Troy and I’m a student 3D artist studying on a BA (Hons)
|
||||
Game Arts and Design course in the UK.
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
In 2019 I began experimenting with Blender after having used various 2D
|
||||
art applications such as Adobe Photoshop for over 5 years. After making
|
||||
this change, I realised that I have a huge interest in creating 3D
|
||||
graphics for video games and TV. At the moment I am working on expanding
|
||||
my skillset to encompass other areas with a focus on lighting and
|
||||
rendering techniques in relation to environment art.
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
My current portfolio of work can be found on my website at:
|
||||
<a
|
||||
class="text-secondary decoration-tertiary underline decoration-wavy"
|
||||
href="/projects">troylusty.com/projects</a
|
||||
>.
|
||||
</p>
|
||||
</section>
|
||||
<section class="animate-reveal opacity-0 [animation-delay:0.2s]">
|
||||
<h2 class="mb-4 text-2xl font-semibold break-words capitalize">
|
||||
Education
|
||||
</h2>
|
||||
<Education />
|
||||
</section>
|
||||
<section class="animate-reveal opacity-0 [animation-delay:0.3s]">
|
||||
<h2 class="mb-4 text-2xl font-semibold break-words capitalize">Skills</h2>
|
||||
<p class="mb-4">
|
||||
My specific chosen area of focus is design, lighting, and rendering
|
||||
focusing on 3D environments within software such as Blender and Unreal
|
||||
Engine. Using either real-time or offline rendering techniques. In
|
||||
addition to this I am also very interested in web development, with this
|
||||
site's <Link
|
||||
class="text-secondary decoration-tertiary underline decoration-wavy"
|
||||
href="https://github.com/troylusty/troylusty.com">source code</Link
|
||||
> being public.
|
||||
</p>
|
||||
<Skills />
|
||||
</section>
|
||||
<section class="animate-reveal opacity-0 [animation-delay:0.4s]">
|
||||
<h2 class="mb-4 text-2xl font-semibold break-words capitalize">
|
||||
Experience
|
||||
</h2>
|
||||
<Work />
|
||||
</section>
|
||||
</Layout>
|
||||
|
|
@ -2,10 +2,11 @@
|
|||
import Layout from "@layouts/Layout.astro";
|
||||
import { HOME } from "@consts";
|
||||
import { getCollection } from "astro:content";
|
||||
import ShowcaseProject from "@components/ShowcaseProject.astro";
|
||||
import ShowcasePost from "@components/ShowcasePost.astro";
|
||||
import Hero from "@components/Hero.astro";
|
||||
import Button from "@components/Button.astro";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import Carousel from "@components/Carousel.astro";
|
||||
|
||||
const allPosts = await getCollection("posts");
|
||||
|
||||
|
|
@ -20,35 +21,43 @@ const projects = allProjects
|
|||
.filter((project) => !project.data.draft && project.data.featured)
|
||||
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
|
||||
.slice(0, HOME.HOMESETTINGS?.NUM_PROJECTS_ON_HOMEPAGE);
|
||||
|
||||
const projectsJSON = JSON.stringify(projects);
|
||||
---
|
||||
|
||||
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
|
||||
<Hero />
|
||||
<section aria-labelledby="featured-projects">
|
||||
<div class="group flex w-fit flex-row items-center">
|
||||
<a href="/projects">
|
||||
<h2
|
||||
class="animate-reveal group-hover:text-tertiary text-2xl font-semibold break-words capitalize opacity-0 transition-colors duration-500"
|
||||
id="featured-projects"
|
||||
>
|
||||
Featured projects
|
||||
</h2>
|
||||
</a>
|
||||
</div>
|
||||
<ol
|
||||
class="animate-reveal mt-8 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
|
||||
<section aria-labelledby="featured-projects" class="container">
|
||||
<div
|
||||
class="mx-auto flex flex-col items-start justify-between sm:flex-row sm:items-center"
|
||||
>
|
||||
{projects.map((project) => <ShowcaseProject collection={project} />)}
|
||||
</ol>
|
||||
{
|
||||
allProjects.length > HOME.HOMESETTINGS!.NUM_PROJECTS_ON_HOMEPAGE ? (
|
||||
<div class="flex justify-center">
|
||||
<Button href="/projects" link="View all" />
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
<h2
|
||||
class="animate-reveal text-2xl font-semibold break-words capitalize opacity-0"
|
||||
id="featured-projects"
|
||||
>
|
||||
Featured projects
|
||||
</h2>
|
||||
{
|
||||
allProjects.length > HOME.HOMESETTINGS!.NUM_PROJECTS_ON_HOMEPAGE ? (
|
||||
<div class="group">
|
||||
<a
|
||||
href="/projects"
|
||||
class="group text-tertiary flex items-center justify-center gap-1 transition-colors duration-300 group-hover:text-sky-500"
|
||||
>
|
||||
View all
|
||||
<Icon
|
||||
name="mdi:chevron-right"
|
||||
class="transition-all duration-300 group-hover:translate-x-2 group-hover:text-sky-500"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
<Carousel data={projectsJSON} />
|
||||
</section>
|
||||
<section aria-labelledby="recent-posts">
|
||||
|
||||
<section aria-labelledby="recent-posts" class="container max-w-[65ch]">
|
||||
<div class="group flex w-fit flex-row items-center">
|
||||
<a href="/posts">
|
||||
<h2
|
||||
|
|
|
|||
|
|
@ -10,12 +10,14 @@ const posts = (await getCollection("posts"))
|
|||
---
|
||||
|
||||
<Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
|
||||
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
|
||||
{POSTS.TITLE}
|
||||
</h1>
|
||||
<ol
|
||||
class="animate-reveal grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
|
||||
>
|
||||
{posts.map((article: any) => <ShowcasePost collection={article} />)}
|
||||
</ol>
|
||||
<div class="mx-auto max-w-[65ch]">
|
||||
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
|
||||
{POSTS.TITLE}
|
||||
</h1>
|
||||
<ol
|
||||
class="animate-reveal mt-8 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
|
||||
>
|
||||
{posts.map((article: any) => <ShowcasePost collection={article} />)}
|
||||
</ol>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -10,12 +10,14 @@ const projects = (await getCollection("projects"))
|
|||
---
|
||||
|
||||
<Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
|
||||
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
|
||||
{PROJECTS.TITLE}
|
||||
</h1>
|
||||
<ol
|
||||
class="animate-reveal grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
|
||||
>
|
||||
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
|
||||
</ol>
|
||||
<div class="mx-auto max-w-[65ch]">
|
||||
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
|
||||
{PROJECTS.TITLE}
|
||||
</h1>
|
||||
<ol
|
||||
class="animate-reveal mt-8 grid grid-cols-2 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3"
|
||||
>
|
||||
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
|
||||
</ol>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "@fontsource-variable/red-hat-mono";
|
||||
@import "@fontsource-variable/outfit";
|
||||
@import "@fontsource/borel";
|
||||
@import "@fontsource/instrument-serif";
|
||||
|
||||
@import "tailwindcss";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
|
@ -14,13 +14,10 @@
|
|||
|
||||
@theme {
|
||||
--font-sans: "Outfit Variable", "sans-serif";
|
||||
--font-serif: "Instrument Serif", "serif";
|
||||
--font-mono: "Red Hat Mono Variable", "monospace";
|
||||
|
||||
--animate-reveal: reveal 0.3s forwards ease-in-out;
|
||||
--animate-logo: logo 0.5s forwards ease-out;
|
||||
--animate-gradient-x: gradient-x 6s ease infinite;
|
||||
--animate-gradient-y: gradient-y 6s ease infinite;
|
||||
--animate-gradient-xy: gradient-xy 6s ease infinite;
|
||||
|
||||
@keyframes reveal {
|
||||
0% {
|
||||
|
|
@ -34,49 +31,6 @@
|
|||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
@keyframes logo {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
color: var(--primary);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
@keyframes gradient-x {
|
||||
0%,
|
||||
100% {
|
||||
background-size: 200% 200%;
|
||||
background-position: left center;
|
||||
}
|
||||
50% {
|
||||
background-size: 200% 200%;
|
||||
background-position: right center;
|
||||
}
|
||||
}
|
||||
@keyframes gradient-y {
|
||||
0%,
|
||||
100% {
|
||||
background-size: 400% 400%;
|
||||
background-position: center top;
|
||||
}
|
||||
50% {
|
||||
background-size: 200% 200%;
|
||||
background-position: center center;
|
||||
}
|
||||
}
|
||||
@keyframes gradient-xy {
|
||||
0%,
|
||||
100% {
|
||||
background-size: 400% 400%;
|
||||
background-position: left center;
|
||||
}
|
||||
50% {
|
||||
background-size: 200% 200%;
|
||||
background-position: right center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
|
|
@ -98,6 +52,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@utility container {
|
||||
margin-inline: auto;
|
||||
padding-inline: 2rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
background: none;
|
||||
|
|
@ -113,3 +73,7 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue