System-End/daydream-phoenix
1
0
Fork 0
mirror of https://github.com/System-End/daydream-phoenix.git synced 2026-04-19 16:28:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add full guide

Browse source
This commit is contained in:
Gus Ruben 2025-07-29 17:29:47 -04:00
parent 45eba2cf1b
commit d13ee92417
36 changed files with 932 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
bun.lock
View file

@ -13,6 +13,7 @@
"gsap": "^3.13.0",
"leaflet": "^1.9.4",
"lenis": "^1.3.4",
"shiki": "^3.8.1",
"winston": "^3.17.0",
},
"devDependencies": {
@ -152,6 +153,20 @@
"@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.44.2", "", { "os": "win32", "cpu": "x64" }, "sha512-3+QZROYfJ25PDcxFF66UEk8jGWigHJeecZILvkPkyQN7oc5BvFo4YEXFkOs154j3FTMp9mn9Ky8RCOwastduEA=="],
"@shikijs/core": ["@shikijs/core@3.8.1", "", { "dependencies": { "@shikijs/types": "3.8.1", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-uTSXzUBQ/IgFcUa6gmGShCHr4tMdR3pxUiiWKDm8pd42UKJdYhkAYsAmHX5mTwybQ5VyGDgTjW4qKSsRvGSang=="],
"@shikijs/engine-javascript": ["@shikijs/engine-javascript@3.8.1", "", { "dependencies": { "@shikijs/types": "3.8.1", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.3" } }, "sha512-rZRp3BM1llrHkuBPAdYAzjlF7OqlM0rm/7EWASeCcY7cRYZIrOnGIHE9qsLz5TCjGefxBFnwgIECzBs2vmOyKA=="],
"@shikijs/engine-oniguruma": ["@shikijs/engine-oniguruma@3.8.1", "", { "dependencies": { "@shikijs/types": "3.8.1", "@shikijs/vscode-textmate": "^10.0.2" } }, "sha512-KGQJZHlNY7c656qPFEQpIoqOuC4LrxjyNndRdzk5WKB/Ie87+NJCF1xo9KkOUxwxylk7rT6nhlZyTGTC4fCe1g=="],
"@shikijs/langs": ["@shikijs/langs@3.8.1", "", { "dependencies": { "@shikijs/types": "3.8.1" } }, "sha512-TjOFg2Wp1w07oKnXjs0AUMb4kJvujML+fJ1C5cmEj45lhjbUXtziT1x2bPQb9Db6kmPhkG5NI2tgYW1/DzhUuQ=="],
"@shikijs/themes": ["@shikijs/themes@3.8.1", "", { "dependencies": { "@shikijs/types": "3.8.1" } }, "sha512-Vu3t3BBLifc0GB0UPg2Pox1naTemrrvyZv2lkiSw3QayVV60me1ujFQwPZGgUTmwXl1yhCPW8Lieesm0CYruLQ=="],
"@shikijs/types": ["@shikijs/types@3.8.1", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-5C39Q8/8r1I26suLh+5TPk1DTrbY/kn3IdWA5HdizR0FhlhD05zx5nKCqhzSfDHH3p4S0ZefxWd77DLV+8FhGg=="],
"@shikijs/vscode-textmate": ["@shikijs/vscode-textmate@10.0.2", "", {}, "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="],
"@sveltejs/acorn-typescript": ["@sveltejs/acorn-typescript@1.0.5", "", { "peerDependencies": { "acorn": "^8.9.0" } }, "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ=="],
"@sveltejs/adapter-auto": ["@sveltejs/adapter-auto@6.0.1", "", { "peerDependencies": { "@sveltejs/kit": "^2.0.0" } }, "sha512-mcWud3pYGPWM2Pphdj8G9Qiq24nZ8L4LB7coCUckUEy5Y7wOWGJ/enaZ4AtJTcSm5dNK1rIkBRoqt+ae4zlxcQ=="],
@ -204,6 +219,8 @@
"@types/geojson": ["@types/geojson@7946.0.16", "", {}, "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="],
"@types/hast": ["@types/hast@3.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
"@types/leaflet": ["@types/leaflet@1.9.20", "", { "dependencies": { "@types/geojson": "*" } }, "sha512-rooalPMlk61LCaLOvBF2VIf9M47HgMQqi5xQ9QRi7c8PkdIe0WrIi5IxXUXQjAdL0c+vcQ01mYWbthzmp9GHWw=="],
"@types/mdast": ["@types/mdast@4.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA=="],
@ -216,6 +233,8 @@
"@types/unist": ["@types/unist@2.0.11", "", {}, "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="],
"@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
"abort-controller": ["abort-controller@3.0.0", "", { "dependencies": { "event-target-shim": "^5.0.0" } }, "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg=="],
"abortcontroller-polyfill": ["abortcontroller-polyfill@1.7.8", "", {}, "sha512-9f1iZ2uWh92VcrU9Y8x+LdM4DLj75VE0MJB8zuF1iUnroEptStw+DQ8EQPMUdfe5k+PkB1uUfDQfWbhstH8LrQ=="],
@ -230,6 +249,12 @@
"axobject-query": ["axobject-query@4.1.0", "", {}, "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="],
"ccount": ["ccount@2.0.1", "", {}, "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="],
"character-entities-html4": ["character-entities-html4@2.1.0", "", {}, "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA=="],
"character-entities-legacy": ["character-entities-legacy@3.0.0", "", {}, "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="],
"chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="],
"chownr": ["chownr@3.0.0", "", {}, "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g=="],
@ -246,6 +271,8 @@
"colorspace": ["colorspace@1.1.4", "", { "dependencies": { "color": "^3.1.3", "text-hex": "1.0.x" } }, "sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w=="],
"comma-separated-tokens": ["comma-separated-tokens@2.0.3", "", {}, "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="],
"commondir": ["commondir@1.0.1", "", {}, "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg=="],
"cookie": ["cookie@0.6.0", "", {}, "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw=="],
@ -256,10 +283,14 @@
"deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
"dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
"detect-libc": ["detect-libc@2.0.4", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],
"devalue": ["devalue@5.1.1", "", {}, "sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw=="],
"devlop": ["devlop@1.1.0", "", { "dependencies": { "dequal": "^2.0.0" } }, "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA=="],
"enabled": ["enabled@2.0.0", "", {}, "sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ=="],
"enhanced-resolve": ["enhanced-resolve@5.18.2", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" } }, "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ=="],
@ -290,6 +321,12 @@
"hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
"hast-util-to-html": ["hast-util-to-html@9.0.5", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "ccount": "^2.0.0", "comma-separated-tokens": "^2.0.0", "hast-util-whitespace": "^3.0.0", "html-void-elements": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "stringify-entities": "^4.0.0", "zwitch": "^2.0.4" } }, "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw=="],
"hast-util-whitespace": ["hast-util-whitespace@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw=="],
"html-void-elements": ["html-void-elements@3.0.0", "", {}, "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg=="],
"inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
"is-arrayish": ["is-arrayish@0.3.2", "", {}, "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="],
@ -348,8 +385,20 @@
"magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
"mdast-util-to-hast": ["mdast-util-to-hast@13.2.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "@ungap/structured-clone": "^1.0.0", "devlop": "^1.0.0", "micromark-util-sanitize-uri": "^2.0.0", "trim-lines": "^3.0.0", "unist-util-position": "^5.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA=="],
"mdsvex": ["mdsvex@0.12.6", "", { "dependencies": { "@types/mdast": "^4.0.4", "@types/unist": "^2.0.3", "prism-svelte": "^0.4.7", "prismjs": "^1.17.1", "unist-util-visit": "^2.0.1", "vfile-message": "^2.0.4" }, "peerDependencies": { "svelte": "^3.56.0 || ^4.0.0 || ^5.0.0-next.120" } }, "sha512-pupx2gzWh3hDtm/iDW4WuCpljmyHbHi34r7ktOqpPGvyiM4MyfNgdJ3qMizXdgCErmvYC9Nn/qyjePy+4ss9Wg=="],
"micromark-util-character": ["micromark-util-character@2.1.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q=="],
"micromark-util-encode": ["micromark-util-encode@2.0.1", "", {}, "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw=="],
"micromark-util-sanitize-uri": ["micromark-util-sanitize-uri@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-encode": "^2.0.0", "micromark-util-symbol": "^2.0.0" } }, "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ=="],
"micromark-util-symbol": ["micromark-util-symbol@2.0.1", "", {}, "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q=="],
"micromark-util-types": ["micromark-util-types@2.0.2", "", {}, "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA=="],
"minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],
"minizlib": ["minizlib@3.0.2", "", { "dependencies": { "minipass": "^7.1.2" } }, "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA=="],
@ -368,6 +417,10 @@
"one-time": ["one-time@1.0.0", "", { "dependencies": { "fn.name": "1.x.x" } }, "sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g=="],
"oniguruma-parser": ["oniguruma-parser@0.12.1", "", {}, "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w=="],
"oniguruma-to-es": ["oniguruma-to-es@4.3.3", "", { "dependencies": { "oniguruma-parser": "^0.12.1", "regex": "^6.0.1", "regex-recursion": "^6.0.2" } }, "sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg=="],
"path-parse": ["path-parse@1.0.7", "", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
"picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
@ -386,10 +439,18 @@
"prismjs": ["prismjs@1.30.0", "", {}, "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="],
"property-information": ["property-information@7.1.0", "", {}, "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ=="],
"readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
"readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
"regex": ["regex@6.0.1", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA=="],
"regex-recursion": ["regex-recursion@6.0.2", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg=="],
"regex-utilities": ["regex-utilities@2.3.0", "", {}, "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng=="],
"resolve": ["resolve@1.22.10", "", { "dependencies": { "is-core-module": "^2.16.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w=="],
"rollup": ["rollup@4.44.2", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.44.2", "@rollup/rollup-android-arm64": "4.44.2", "@rollup/rollup-darwin-arm64": "4.44.2", "@rollup/rollup-darwin-x64": "4.44.2", "@rollup/rollup-freebsd-arm64": "4.44.2", "@rollup/rollup-freebsd-x64": "4.44.2", "@rollup/rollup-linux-arm-gnueabihf": "4.44.2", "@rollup/rollup-linux-arm-musleabihf": "4.44.2", "@rollup/rollup-linux-arm64-gnu": "4.44.2", "@rollup/rollup-linux-arm64-musl": "4.44.2", "@rollup/rollup-linux-loongarch64-gnu": "4.44.2", "@rollup/rollup-linux-powerpc64le-gnu": "4.44.2", "@rollup/rollup-linux-riscv64-gnu": "4.44.2", "@rollup/rollup-linux-riscv64-musl": "4.44.2", "@rollup/rollup-linux-s390x-gnu": "4.44.2", "@rollup/rollup-linux-x64-gnu": "4.44.2", "@rollup/rollup-linux-x64-musl": "4.44.2", "@rollup/rollup-win32-arm64-msvc": "4.44.2", "@rollup/rollup-win32-ia32-msvc": "4.44.2", "@rollup/rollup-win32-x64-msvc": "4.44.2", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-PVoapzTwSEcelaWGth3uR66u7ZRo6qhPHc0f2uRO9fX6XDVNrIiGYS0Pj9+R8yIIYSD/mCx2b16Ws9itljKSPg=="],
@ -402,16 +463,22 @@
"set-cookie-parser": ["set-cookie-parser@2.7.1", "", {}, "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="],
"shiki": ["shiki@3.8.1", "", { "dependencies": { "@shikijs/core": "3.8.1", "@shikijs/engine-javascript": "3.8.1", "@shikijs/engine-oniguruma": "3.8.1", "@shikijs/langs": "3.8.1", "@shikijs/themes": "3.8.1", "@shikijs/types": "3.8.1", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-+MYIyjwGPCaegbpBeFN9+oOifI8CKiKG3awI/6h3JeT85c//H2wDW/xCJEGuQ5jPqtbboKNqNy+JyX9PYpGwNg=="],
"simple-swizzle": ["simple-swizzle@0.2.2", "", { "dependencies": { "is-arrayish": "^0.3.1" } }, "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg=="],
"sirv": ["sirv@3.0.1", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A=="],
"source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
"space-separated-tokens": ["space-separated-tokens@2.0.2", "", {}, "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q=="],
"stack-trace": ["stack-trace@0.0.10", "", {}, "sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg=="],
"string_decoder": ["string_decoder@1.3.0", "", { "dependencies": { "safe-buffer": "~5.2.0" } }, "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA=="],
"stringify-entities": ["stringify-entities@4.0.4", "", { "dependencies": { "character-entities-html4": "^2.0.0", "character-entities-legacy": "^3.0.0" } }, "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg=="],
"supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
"svelte": ["svelte@5.35.6", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "esm-env": "^1.2.1", "esrap": "^2.1.0", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-p7PVLQYrvCxJuxzGfOv/l71hVuHC6EZk5UDjbt/bndMYaBcUV5sFjDsj+PSIYvz1vcfbG6inX83/xIUeik1xGA=="],
@ -432,12 +499,16 @@
"tr46": ["tr46@0.0.3", "", {}, "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="],
"trim-lines": ["trim-lines@3.0.1", "", {}, "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg=="],
"triple-beam": ["triple-beam@1.4.1", "", {}, "sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg=="],
"typescript": ["typescript@5.8.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ=="],
"unist-util-is": ["unist-util-is@4.1.0", "", {}, "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg=="],
"unist-util-position": ["unist-util-position@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA=="],
"unist-util-stringify-position": ["unist-util-stringify-position@2.0.3", "", { "dependencies": { "@types/unist": "^2.0.2" } }, "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g=="],
"unist-util-visit": ["unist-util-visit@2.0.3", "", { "dependencies": { "@types/unist": "^2.0.0", "unist-util-is": "^4.0.0", "unist-util-visit-parents": "^3.0.0" } }, "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q=="],
@ -446,6 +517,8 @@
"util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
"vfile": ["vfile@6.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="],
"vfile-message": ["vfile-message@2.0.4", "", { "dependencies": { "@types/unist": "^2.0.0", "unist-util-stringify-position": "^2.0.0" } }, "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ=="],
"vite": ["vite@7.0.4", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.6", "picomatch": "^4.0.2", "postcss": "^8.5.6", "rollup": "^4.40.0", "tinyglobby": "^0.2.14" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-SkaSguuS7nnmV7mfJ8l81JGBFV7Gvzp8IzgE8A8t23+AxuNX61Q5H1Tpz5efduSN7NHC8nQXD3sKQKZAu5mNEA=="],
@ -464,6 +537,8 @@
"zimmerframe": ["zimmerframe@1.1.2", "", {}, "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w=="],
"zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
"@rollup/plugin-commonjs/is-reference": ["is-reference@1.2.1", "", { "dependencies": { "@types/estree": "*" } }, "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ=="],
"@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.4.4", "", { "dependencies": { "@emnapi/wasi-threads": "1.0.3", "tslib": "^2.4.0" }, "bundled": true }, "sha512-A9CnAbC6ARNMKcIcrQwq6HeHCjpcBZ5wSx4U01WXCqEKlrzB9F9315WDNHkrs2xbx7YjjSxbUYxuN6EQzpcY2g=="],
@ -478,6 +553,24 @@
"@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
"hast-util-to-html/@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
"mdast-util-to-hast/unist-util-visit": ["unist-util-visit@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg=="],
"unist-util-position/@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
"vfile/@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
"vfile/vfile-message": ["vfile-message@4.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw=="],
"@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime/@tybys/wasm-util": ["@tybys/wasm-util@0.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ=="],
"mdast-util-to-hast/unist-util-visit/@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
"mdast-util-to-hast/unist-util-visit/unist-util-is": ["unist-util-is@6.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw=="],
"mdast-util-to-hast/unist-util-visit/unist-util-visit-parents": ["unist-util-visit-parents@6.0.1", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0" } }, "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw=="],
"vfile/vfile-message/unist-util-stringify-position": ["unist-util-stringify-position@4.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ=="],
}
}

1
package.json
View file

@ -37,6 +37,7 @@
"gsap": "^3.13.0",
"leaflet": "^1.9.4",
"lenis": "^1.3.4",
"shiki": "^3.8.1",
"winston": "^3.17.0"
}
}

48
src/app.css
View file

@ -28,19 +28,61 @@
--color-light: #FCF7C4;
--color-pink: #E472AB;
--color-pink-dark: #A65A80;
--color-pink-strong: #e64596;
}
.prose {
--tw-prose-body: #15314a;
--tw-prose-headings: #214769;
--tw-prose-links: var(--color-pink);
--prose-border: rgba(47, 94, 136, 0.5);
--tw-prose-links: var(--color-pink-strong);
--tw-prose-bold: var(--tw-prose-body);
--tw-prose-td-borders: rgba(47, 94, 136, 0.5);
--tw-prose-th-borders: rgba(47, 94, 136, 0.5);
--tw-prose-td-borders: var(--prose-border);
--tw-prose-th-borders: var(--prose-border);
--tw-prose-bullets: var(--color-pink)
}
.prose h1 {
color: #2f5e88;
position: relative;
width: max-content;
}
.prose h1::after {
content: "";
position: absolute;
bottom: 0;
left: -5%;
right: -5%;
background: url(/underline.svg) no-repeat center;
background-size: cover;
height: 8px;
z-index: -1;
}
.prose code::before, .prose code::after {
display: none
}
.prose :not(.shiki) code {
font-weight: normal;
font-size: 0.89rem;
background: #ffffff;
padding: 0.5em 0.6rem;
border-radius: 0.375rem;
white-space: nowrap;
}
.prose blockquote p::before, .prose blockquote p::after {
display: none;
}
.prose blockquote {
font-style: normal;
opacity: 0.7;
border-color: var(--prose-border);
}
/* for the guide */
.notebook {
@apply bg-white bg-clip-padding p-8 mt-8;
border-top: 64px solid transparent;
border-image: url('/guide/notebook-border.png') 72 round;
}
@keyframes hover {

6
src/lib/components/CloudImage.svelte
View file

@ -3,7 +3,7 @@
export let alt: string = '';
</script>
<div class="cloud-wrapper">
<div class="cloud-wrapper max-sm:w-[120vw] max-sm:-translate-x-[calc(1rem+10vw)]">
<img {src} {alt} />
</div>
@ -96,11 +96,13 @@
mask-type: luminance;
mask-mode: luminance;
mask-composite: exclude, add, add, add, add, add, add, add, add;
height: 100%;
}
img {
max-width: 100%;
height: auto;
height: 100%;
object-fit: contain;
display: block;
margin: 0;
}

213
src/lib/components/MouseTrailer.svelte Normal file
View file

@ -0,0 +1,213 @@
<script lang="ts">
import { onMount } from 'svelte';
import { browser } from '$app/environment';
export let colorChangeSpeed = 400;
export let trailColorSpan = 25;
export let trailThicknessStart = 3;
export let trailThicknessEnd = 8;
export let maxTrailLength = 15;
export let blurIntensity = 10;
export let blurOpacity = 0.75;
export let mainOpacity = 0.25;
onMount(() => {
if (browser) {
let mouseTrailPoints: Array<{ x: number; y: number }> = [];
let animationId: number;
function getHueFromIndex(index: number): number {
return (index * 24) % 360;
}
function updateMouseTrail(e: MouseEvent) {
const svgs = [document.querySelector('#trail-svg-blur')];
if (svgs.find(svg => !svg)) return;
const x = e.clientX;
const y = e.clientY;
mouseTrailPoints.push({ x, y });
if (mouseTrailPoints.length > maxTrailLength) {
mouseTrailPoints.shift();
}
if (mouseTrailPoints.length > 1) {
svgs.forEach((svg: any) => {
const oldPaths = svg.querySelectorAll('.trail-segment');
const oldGradients = svg.querySelectorAll('.segment-gradient');
oldPaths.forEach((path: any) => path.remove());
oldGradients.forEach((grad: any) => grad.remove());
let defs = svg.querySelector('defs');
if (!defs) {
defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
svg.appendChild(defs);
}
});
for (let i = 0; i < mouseTrailPoints.length - 1; i++) {
const progress = i / (mouseTrailPoints.length - 1);
const nextProgress = (i + 1) / (mouseTrailPoints.length - 1);
const baseHue = getHueFromIndex(Date.now() / colorChangeSpeed);
const hue1 = baseHue - (progress * trailColorSpan);
const hue2 = baseHue - (nextProgress * trailColorSpan);
svgs.forEach((svg: any, svgIndex: number) => {
if (!svg) return;
const defs = svg.querySelector('defs');
if (!defs) return;
const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
gradient.classList.add('segment-gradient');
gradient.setAttribute('id', `segment-gradient-${svgIndex}-${i}`);
gradient.setAttribute('x1', '0%');
gradient.setAttribute('y1', '0%');
gradient.setAttribute('x2', '100%');
gradient.setAttribute('y2', '0%');
const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
stop1.setAttribute('offset', '0%');
stop1.setAttribute('stop-color', `hsl(${hue1}, 70%, 60%)`);
const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
stop2.setAttribute('offset', '100%');
stop2.setAttribute('stop-color', `hsl(${hue2}, 70%, 60%)`);
gradient.appendChild(stop1);
gradient.appendChild(stop2);
defs.appendChild(gradient);
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.classList.add('trail-segment');
path.setAttribute('d', `M${mouseTrailPoints[i].x},${mouseTrailPoints[i].y} L${mouseTrailPoints[i + 1].x},${mouseTrailPoints[i + 1].y}`);
path.setAttribute('stroke', `url(#segment-gradient-${svgIndex}-${i})`);
path.setAttribute('stroke-width', `${trailThicknessStart + (trailThicknessEnd - trailThicknessStart) * progress}`);
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'round');
path.setAttribute('fill', 'none');
svg.appendChild(path);
});
}
}
}
function clearMouseTrail() {
mouseTrailPoints = [];
const svgs = [document.querySelector('#trail-svg-blur')];
svgs.forEach((svg: any) => {
if (svg) {
const oldPaths = svg.querySelectorAll('.trail-segment');
oldPaths.forEach((path: any) => path.remove());
}
});
}
let frameCount = 0;
function animateTrail() {
frameCount++;
if (frameCount % 3 === 0 && mouseTrailPoints.length > 0) {
mouseTrailPoints.shift();
const svgs = [document.querySelector('#trail-svg-blur')];
if (mouseTrailPoints.length > 1 && !svgs.find(svg => !svg)) {
svgs.forEach((svg: any) => {
const oldPaths = svg.querySelectorAll('.trail-segment');
const oldGradients = svg.querySelectorAll('.segment-gradient');
oldPaths.forEach((path: any) => path.remove());
oldGradients.forEach((grad: any) => grad.remove());
let defs = svg.querySelector('defs');
if (!defs) {
defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
svg.appendChild(defs);
}
});
for (let i = 0; i < mouseTrailPoints.length - 1; i++) {
const progress = i / (mouseTrailPoints.length - 1);
const nextProgress = (i + 1) / (mouseTrailPoints.length - 1);
const baseHue = getHueFromIndex(Date.now() / colorChangeSpeed);
const hue1 = baseHue - (progress * trailColorSpan);
const hue2 = baseHue - (nextProgress * trailColorSpan);
svgs.forEach((svg: any, svgIndex: number) => {
if (!svg) return;
const defs = svg.querySelector('defs');
if (!defs) return;
const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
gradient.classList.add('segment-gradient');
gradient.setAttribute('id', `segment-gradient-${svgIndex}-${i}`);
gradient.setAttribute('x1', '0%');
gradient.setAttribute('y1', '0%');
gradient.setAttribute('x2', '100%');
gradient.setAttribute('y2', '0%');
const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
stop1.setAttribute('offset', '0%');
stop1.setAttribute('stop-color', `hsl(${hue1}, 70%, 60%)`);
const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
stop2.setAttribute('offset', '100%');
stop2.setAttribute('stop-color', `hsl(${hue2}, 70%, 60%)`);
gradient.appendChild(stop1);
gradient.appendChild(stop2);
defs.appendChild(gradient);
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.classList.add('trail-segment');
path.setAttribute('d', `M${mouseTrailPoints[i].x},${mouseTrailPoints[i].y} L${mouseTrailPoints[i + 1].x},${mouseTrailPoints[i + 1].y}`);
path.setAttribute('stroke', `url(#segment-gradient-${svgIndex}-${i})`);
path.setAttribute('stroke-width', `${trailThicknessStart + (trailThicknessEnd - trailThicknessStart) * progress}`);
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'round');
path.setAttribute('fill', 'none');
svg.appendChild(path);
});
}
}
}
animationId = requestAnimationFrame(animateTrail);
}
setTimeout(() => {
const svgs = [document.querySelector('#trail-svg-blur')];
if (!svgs.find(svg => !svg)) {
document.addEventListener('mousemove', updateMouseTrail);
document.addEventListener('mouseleave', clearMouseTrail);
animateTrail();
}
}, 100);
return () => {
document.removeEventListener('mousemove', updateMouseTrail);
document.removeEventListener('mouseleave', clearMouseTrail);
if (animationId) {
cancelAnimationFrame(animationId);
}
};
}
});
</script>
<!-- svelte-ignore component_name_lowercase -->
<svg id="trail-svg-blur" class="fixed top-0 left-0 w-full h-full pointer-events-none z-[9998]" style="filter: blur({blurIntensity}px); opacity: {blurOpacity}">
<!-- Individual path segments will be added here dynamically -->
</svg>
<!-- svelte-ignore component_name_lowercase -->
<svg id="trail-svg-main" class="fixed top-0 left-0 w-full h-full pointer-events-none z-[9999]" style="filter: blur(3px) saturate(0) brightness(1000); opacity: {mainOpacity}">
<!-- Individual path segments will be added here dynamically -->
</svg>

44
src/lib/components/Tooltip.svelte Normal file
View file

@ -0,0 +1,44 @@
<script lang="ts">
export let content: string;
let showTooltip = false;
let hoverTimeout: NodeJS.Timeout;
function handleMouseEnter() {
clearTimeout(hoverTimeout);
showTooltip = true;
}
function handleMouseLeave() {
hoverTimeout = setTimeout(() => {
showTooltip = false;
}, 100);
}
</script>
<div class="relative inline-block">
<!-- svelte-ignore a11y_no_static_element_interactions -->
<span
class="cursor-help"
style="border-bottom: 2px dotted #9ca3af;"
on:mouseenter={handleMouseEnter}
on:mouseleave={handleMouseLeave}
>
<slot />
</span>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 z-50 transition-opacity duration-200 ease-in-out"
class:opacity-0={!showTooltip}
class:opacity-100={showTooltip}
class:pointer-events-auto={showTooltip}
on:mouseenter={handleMouseEnter}
on:mouseleave={handleMouseLeave}
>
<div class="bg-black text-white text-sm rounded px-3 py-2 whitespace-nowrap shadow-lg">
{@html content}
</div>
<div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-black"></div>
</div>
</div>

6
src/routes/guide/+layout.svelte
View file

@ -33,11 +33,11 @@
<div class="min-h-screen bg-gradient-to-b from-[#CCF4FD] to-[#cce7fd] relative overflow-hidden">
<!-- Brushstroke texture overlay -->
<div bind:this={cloudBg} class="absolute inset-0 bg-[url('cloud-texture-bg.png')] bg-size-[auto_50vh] bg-repeat pointer-events-none opacity-20"></div>
<div class="absolute inset-0 bg-[url('brushstroking.png')] bg-repeat mix-blend-overlay opacity-60 pointer-events-none"></div>
<div bind:this={cloudBg} class="absolute inset-0 bg-[url('/cloud-texture-bg.png')] bg-size-[auto_50vh] bg-repeat pointer-events-none opacity-20"></div>
<div class="absolute inset-0 bg-[url('/brushstroking.png')] bg-repeat mix-blend-overlay opacity-60 pointer-events-none"></div>
<GuideSidebar />
<div class="lg:ml-90 prose prose-lg max-w-4xl mx-auto px-4 lg:px-16 lg:pl-24 py-16 prose-h1:font-serif prose-h1:not-first:mt-16 text-guide-text prose-bold relative z-10">
<div class="lg:ml-90 prose prose-lg max-w-4xl mx-auto px-4 lg:px-16 lg:pl-24 py-16 prose-h1:font-serif prose-h1:not-first:mt-16 text-guide-text prose-bold relative z-10 prose-li:my-1">
<slot />
</div>
</div>

127
src/routes/guide/+page.svx
View file

@ -1,7 +1,11 @@
<script>
import CloudImage from "$lib/components/CloudImage.svelte";
import Tooltip from "$lib/components/Tooltip.svelte";
import MouseTrailer from "$lib/components/MouseTrailer.svelte";
</script>
<MouseTrailer />
<CloudImage src="/guide/welcome.gif" alt="Welcome to Daydream" />
<i class="opacity-50 ">Welcome to Daydream 🫶</i>
@ -14,11 +18,13 @@ There’s no “perfect, by-the-book” way of organizing a hackathon. But there
This guide is, and will always be, a work-in-progress. Despite popular belief, I, Deven Jadhav, am not an omnipotent Hackathon Deity™. I’m drawing from caffeinated hours spent staring at screens, lessons learned from organizing “great” hackathons (Scrapyard, Counterspell, etc), and my countless mistakes.
DM the Daydream Team if you have any ideas to improve this guide\!
DM the <Tooltip content="<a target='_blank' href='https://hackclub.slack.com/archives/D07QJ7DLQA1'>Deven</a>, <a target='_blank' href='https://hackclub.slack.com/archives/D0945GN8QAC'>Augie</a>, <a target='_blank' href='https://hackclub.slack.com/archives/U07FCRNHS1J'>Renran</a>, & <a target='_blank' href='https://hackclub.slack.com/archives/D08HZQ4KL8H'>Meghana</a>!">Daydream Team</Tooltip> if you have any ideas to improve this guide\!
### **QUICKSTART GUIDE (very important\!\!)**
People ask me about hackathons a lot. They say *"Dev, how do I get started with running hackathons*" and I say *"hmmmmmmmm."* And then they say, "The f\*\*\* do you mean, Dev?" and then I say *"uhhhhhhhhhhhhh."*
People ask me about hackathons a lot. They say *"Dev, how do I run a hackathon?"* and I say *"hmmmmmmmm."* And then they say, *"The f\*\*\* you mean, Dev?"* and then I say *"uhhhhhhhhhhhhh."*
<CloudImage src="/guide/how.png" />
So… this is an attempt to write down my thoughts on how to get started.
@ -28,46 +34,49 @@ From the perspective of attendees, these are the things that make hackathons inc
* Adventures you go on (technical, physical, and emotional)
* The projects you build (what ties everything together)
<CloudImage src="/guide/three-things.png" />
However, there are some key tasks you need to complete before your hackathon:
# **PART ONE: SETTING UP**
### **1\) Join [\#daydream](https://hackclub.slack.com/archives/C094GLLH2RX) channel on Slack:**
### **1\) [JOIN THE HACK CLUB SLACK\!\!](https://join.slack.com/t/hackclub/shared_invite/zt-39038sx6p-Xoaw5C~bOqQCUGs2hC6KHA) And the [\#daydream](https://hackclub.slack.com/archives/C094GLLH2RX) channel:**
SUPER IMPORTANT\!\! Slack is how we communicate with organizers. Make a
channel for your city’s *Daydream* if it doesn’t exist already.
SUPER IMPORTANT\!\! Slack is how we communicate with organizers. If your city doesn’t have a Daydream channel yet, make one\!
###
###
<CloudImage src="/guide/slack.png" />
### **2\) Assemble… a team of 3-6 organizers\!**
Reach out to people you enjoy working with\! Start with a slack channel and a shared to-do list (including steps in this guide\!). Delegate tasks based on what people want to do.
<div class="max-w-lg mx-auto">
<CloudImage src="/guide/avengers.png" />
</div>
Reach out to people you enjoy working with\! Start with a Slack channel and a shared to-do list (including steps in this guide\!). Delegate tasks based on what people want to do.
| YES ✅ | AVOID ❌ |
| :---- | :---- |
| Diverse set of skills (ex: Sponsorship, Web Dev, Marketing, Game Dev for workshops) Good vibes and willing to put 100x enthusiasm for the day-of | Creating a large team (inefficient, clunky) Too small of a team (NOT 1 person) Trying to organize everything with fancy project management tools (dumb) |
| Diverse set of skills (ex: Sponsorship, Web Dev, Marketing, Game Dev for workshops) Good vibes and willing to put 100x enthusiasm for the day-of | Creating a large team (inefficient) Too small of a team (NOT 1 person) Trying to organize everything with fancy project management tools |
### **3\) Create an HCB account:**
I’d HIGHLY suggest meeting your team in-person to get to know everyone. Good vibes = happy team = fun organizing.
### **3\) Create a Hack Club Bank (HCB) account:**
<div class="flex flex-col md:flex-row md:items-stretch md:gap-6">
<div class="md:flex-1">
HCB is our very own money-handling platform. It gives you a 501(c)(3) nonprofit status *and* a bank account. That way, you can receive donations and get debit cards to spend money\!
We have partnered with HCB to offer you Daydream accounts—with no extra fees.
The PoC will receive a link to an HCB org for your Daydream event, and there’ll be an onboarding video so you can get started.
The PoC will get a link to your Daydream event’s HCB org, and an onboarding video to help you get started\!
</div>
<div class="md:flex-shrink-0 md:w-1/2 md:flex md:items-stretch">
<div class="md:h-[120%] md:-mt-[10%] md:-mx-[5%] max-sm:w-[120vw] flex items-center justify-center">
<CloudImage src="/guide/hcb.png"/>
</div>
</div>
</div>
###
###
###
###
###
###
### **4\) Get a custom email**
@ -75,40 +84,11 @@ Want a [city@daydream.hackclub.com](mailto:city@daydream.hackclub.com) email? Fi
(also, it’s kind of awesome)
<CloudImage src="/guide/email.png" />
### **5\) Setup YOUR Daydream website:**
You can either choose to make your own design with custom art, etc or clone our standard template.
#### Wanna Use Our Template? Here’s How:
First, fork the repository:
1. Go to [https://github.com/hackclub/daydream](https://github.com/hackclub/daydream)
2. Click “Fork” in the top right
3. Create the fork in your account
Then, clone your fork. In a terminal, run:
git clone [https://github.com/YOUR\_USERNAME/daydream.git](https://github.com/YOUR_USERNAME/daydream.git)
cd daydream
Once you have a local copy of the site, you need to duplicate the example site. In the src/routes folder, copy the folder called example, and rename the copy to whatever you want your URL to be. For example, if you want your site to be at [daydream.hackclub.com/vermont](http://daydream.hackclub.com/vermont), name the folder vermont.
Next, you need to configure your event. Open src/routes/yourcity/+page.svelte in a text editor, and look at the top. Change all the fields to the information for your event\!
*\[codeblock here\]*
Lastly, submit your site\! Use Git to push your changes:
git add .
git commit \-m "Add \[Your City\] event page"
git push
Then, go back to your repository, click "Contribute" → "Open pull request," and follow the instructions\!
#### Wanna make your own site?
If you want to make your own site, it needs to be another page on [daydream.hackclub.com](http://daydream.hackclub.com). The site is written in SvelteKit, but you can do anything else within those bounds\!
Note: If you choose to make your own site, it needs to be mobile responsive and high quality (vibecoded AI slop is not allowed).
You can either choose to make your own design with custom art, etc or clone our [standard template.](/guide/website)
### **6\) Make a Budget (template [here](https://docs.google.com/spreadsheets/d/1udOaDK_OYa_b8Y8myCHOrXVHrf6H45vZqmqqbhkiUBA/edit?usp=sharing))**
@ -122,27 +102,39 @@ A good hackathon budget generally only needs three things:
But a *great* hackathon needs:
* Good Food (Chipotle, CAVA, Bagels, etc. and snacks)
* Supplies (power strips, surprises, etc.)
* Good Food (Chipotle, CAVA, bagels, etc. and snacks)
* Supplies (power strips, tablecloths, surprises, etc.)
* Merch
* Decorations
* Prizes
Track your cost **<span class="text-pink">PER ATTENDEE</span>**. This will help prevent you from spending too much\!
Well-planned budgets have:
* “Cost per Attendee” column for each item.
* Must be done by **<span class="text-pink">SEPTEMBER 13, 2025.</span>** (but ideally finished AT LEAST two weeks earlier)
Estimate your attendees as **50% of total signups**. It might seem unintuitive, but from all our experience: half of the people who sign up show up\!
You will get $7.50 per sign-up from HQ (this number will depend on where you’re running your event) to spend on food. Spend wisely\!
# **PART TWO: Lock-In**
### **1\) Finding a home… (Venue)**
Your hackathon cannot happen if you don’t have a venue. You could have a million dollars in sponsors but none of it matters if you have nowhere to host your participants. Finding a venue is arguably the most important part of hosting a hackathon. **Lock in**.
Your hackathon <u>cannot</u> happen if you don’t have a venue. You could have a million dollars in sponsors but none of it matters if you have nowhere to host your participants. Finding a venue is arguably the most important part of hosting a hackathon. **Lock in**.
**<u>This should be your first priority.</u>**
Reach out to cafes, makerspaces, libraries, and even your school if you’re in a pinch.
What makes an awesome venue:
* It’s free\!\! Don’t drop $5000 on a venue that’s 2 rooms and a couch.
* Roomy (Minimum: One main space, two sleeping quarters, washrooms, please AV)
* Roomy (Minimum: One main space, two sleeping quarters, washrooms, TV/projector, speakers/PA)
* 24 hours space (Slumber party-esque\!)
Check out our [Venue Tab](?tab=t.2yya5jkyl23m) for more info.
Check out our [Venue Guide](/venue) for more info.
### **2\) Get Money**
@ -158,7 +150,7 @@ PLEASE check out our sponsorship guide.
### **3\) Outreach**
Outreach is an ESSENTIAL part of hackathons. No participants → No game jam. But how do you reach the ✨right people?✨
Outreach is an ESSENTIAL part of hackathons. No participants → No game jam. But how do you reach the *✨right people*?✨
* Email CS teachers: Make a video with your team and ask them to CC their students or post on Google Classroom\! Check out JPEG’s video ([**here)**](https://www.youtube.com/watch?v=DVTepenFeCI).
@ -189,9 +181,9 @@ Key rules for organizers (Please read OUT LOUD with your team\!):
* If you’ve made it this far, DM [@renran sun](https://hackclub.slack.com/archives/D096V6RDJ9E) for a custom sticker
* **No phones allowed\!** DO NOT use your phone in front of participants – no matter what. Go to the washrooms, organizers’ room, HQ’s basement…
* **EVERYONE has to ship**
\-If you have 10 teams at your hackathon, *all* 10 must have a project that’s visitable by anyone uploaded to [itch.io](http://itch.io).
\-If a team doesn’t “ship” a game (meaning Podium doesn’t approve it), then they can’t get ANY merch. No t-shirt, no hoodie, no beanie, no squishmallow (whatever you end up doing). Locking swag behind shipping is the best way to run an actual, successful event.
\-We are aiming for 100% ship rates. If your event has a ship rate less than 70%, you ran a subpar event and that reflects on you, the point of contact. We chose you because we trusted you to run a good event.
* If you have 10 teams at your hackathon, *all* 10 must have a project that’s visitable by anyone uploaded to [itch.io](http://itch.io).
* If a team doesn’t “ship” a game (meaning Podium doesn’t approve it), then they can’t get ANY merch. No t-shirt, no hoodie, no beanie, no squishmallow (whatever you end up doing). Locking swag behind shipping is the best way to run an actual, successful event.
* We are aiming for 100% ship rates. If your event has a ship rate less than 70%, you ran a subpar event and that reflects on you, the point of contact. We chose you because we trusted you to run a good event.
### **Resources \+ Support**
@ -201,13 +193,16 @@ That being said, Hack Club HQ is not organizing this event directly. We will do
| Contact method | Expected response time | When to use? |
| :---- | :---- | :---- |
| \#daydream-help in the Hack Club Slack | 24 hours or sooner | Any general questions\! Especially helpful for things that other organizers can answer for you. |
| [\#daydream](https://hackclub.slack.com/archives/C094GLLH2RX) in the Hack Club Slack | 24 hours or sooner | Any general questions\! Especially helpful for things that other organizers can answer for you. |
| Email [daydream@hackclub.com](mailto:daydream@hackclub.com) | 48 hours (Guaranteed response) | Anything that is high priority, involves personal information, or cannot be discussed publicly |
| Request a 30 minute call with a Daydream mentor (maximum of two calls a month) | You can usually book a call 3-4 days in advance\! | For more complicated situations that need context, or when you need advice from someone experienced in different situations\! |
### **I need help.**
And we’re here to give it to you. Reserve a 10 minute call with Meghana, RenRan, or Augie to talk about your event and any help you need\!
### **What’s next?**
You’re not just building a hackathon. You’re building a space where someone might code their very first game. Meet their best friend. Find their love ♥️ (for tech).
That’s our daydream. And we’re so, so excited to see what you’ll build.

66
src/routes/guide/branding/+page.svx
View file

File diff suppressed because one or more lines are too long

33
src/routes/guide/day-of/+page.svx
View file

@ -1,19 +1,30 @@
# Day-Of
## And… Action! 🎬
## Step \#1: Run of Show
Congrats\! Hours staring at screens, late nights answering emails, worsening dark circles… You’ve now made it.
A run of show is a fleshed-out schedule *for organizers* that detail everything that’s happening before, during, and after the hackathon in each room. You can check out the run of show for Assemble [here](https://docs.google.com/spreadsheets/d/1yzOWtqHE9J9zVvyj6X0cs0AGMFE4TH2jPIh_np9LWRg/edit?usp=sharing) and for Scrapyard Columbus [here](https://docs.google.com/spreadsheets/d/1Lvtz6dF1KCmgVFp2D4B9jL6W1okyHak4ZEsGKH81lu4/edit?usp=sharing).
But… To make your Daydream the best event possible, here are <u>THE&nbsp;THREE&nbsp;LAWS&nbsp;for&nbsp;Organizers</u>™.
## Step \#2: Submit Projects\!
### **Law \#1: Be 100x your usual friendliness. 😄**
PLEASE make this clear at the OPENING CEREMONY
We all know that one barista or server. Or ridiculously extroverted person. Today, YOU are *them*.
All teams need a SHIPPED project. But… What is a “Shipped” Project?
Put their needs above yours. Get to know at least 10 new people. Constantly ask for their progress.
| YES ✅ | NO ❌ |
| :---- | :---- |
| 1\. Published on [itch.io](http://itch.io) 2\. Playable on someone else’s computer | Youtube Video Link A private game (not public) Google Drive Link (yes, this happens) Website Local host link |
You may ask: “How would I start a convo without being weird?” Don’t worry, I *gotchu*. ✨ Here are some ideas:
i.e. The games are NOT youtube videos. They shouldn’t need Java Development Kits (JDK).
* Ask to take a polaroid/photo of the team
* Ask about their project → To film them later.
* Ask if they want to brainstorm / need help / how they like it so far
It is on **you** as the point of contact if people do not ship. We chose you to run a good event, and this is how we measure if you do a good job. We want to see incredible projects from all over the world, and this is your chance to make that happen.
### **Law \#2: NO phone in front of participants.**
You know that awkward moment when someone you want to talk to is glued to their phone?
Yes. Exactly. Participants need to feel like you’re approachable. So… DO NOT use your phone in front of them. Or any electronics (laptops, Ipad, etc.) It makes you look busy or unavailable or worse– uninterested.
Run to the washrooms. Hide behind a table. I don’t care. PHONES in POCKETS. Always.
### **Law \#3: Take Breaks**
You’re human. You will burn out. Take 10 min breaks in the organizer’s room, sleep 4-8 hours if it’s a 24 hour event.
The event depends on you running smoothly. But no one’s Superman. We need you rested and ready. Your teammates have your back.

64
src/routes/guide/logistics/+page.svx Normal file
View file

@ -0,0 +1,64 @@
# **It’s All in the Details… (Logistics) 🌱**
## **Step \#1: Run of Show**
A run of show is a fleshed-out schedule *for organizers* that detail everything that’s happening before, during, and after the hackathon in each room. You can check out the run of shows for Assemble [here](https://docs.google.com/spreadsheets/d/1yzOWtqHE9J9zVvyj6X0cs0AGMFE4TH2jPIh_np9LWRg/edit?usp=sharing) and for Scrapyard Columbus [here](https://docs.google.com/spreadsheets/d/1Lvtz6dF1KCmgVFp2D4B9jL6W1okyHak4ZEsGKH81lu4/edit?usp=sharing).
People you need the day of (please ask them early\!):
* Someone with a car to run errands (Two preferably, one stays overnight)
* Mentors with Game Dev or hackathon experience
* Adult supervisors (One for every \~35 attendees)
* Person trained in first-aid
## **Step \#2: All teams need a SHIPPED project**
PLEASE make this clear at the OPENING CEREMONY
What is a “Shipped” Project?
| YES ✅ | NO ❌ |
| :---- | :---- |
| 1\. Published on [itch.io](http://itch.io) 2\. Playable on someone else’s computer | Youtube Video Link A private game (not public) Google Drive Link (yes, this happens) Website Local host link |
i.e. The games are NOT youtube videos. They shouldn’t need Java Development Kits.
It is on **<u>you</u>**, Point of Contact, if people do not ship. We chose you to run a good event. This is how we measure if you do a good job.
The purpose of hackathons – and what makes it *great* for participants – is building awesome projects. And we want the world to see it.
So… Make it happen\!
## **Step \#3: Voting**
Submissions WILL be pushed back by 30 minutes (historically accurate fact). So take that into account.
Otherwise, voting is to be done through [podium.hackclub.com](http://podium.hackclub.com). Submitting their projects through podium automatically ensures their project is ✨shippable✨ (aka playable on another device).
Podium will check if someone’s link works and is viable, and once they’re approved you can give attendees’ their t-shirts\!
Podium allows peer-voting. We encourage you to set up a booth-like space and for participants to circulate and vote their favorite on Podium. Expo/science fair style. People will walk around to see demos of others’ projects and, once everyone has gone around, open voting on your event and let people choose their favorites\!
Meghana’s verified Best Way to Vote is like this:
Each team is given either A or B (write it on people’s hands), and when demos start all the As will stay behind and show other people their project while the Bs go out and see everyone else’s project. After 10 minutes, all the Bs will come back to their booth and show everyone their project while As go out and see other people’s. After all that, open voting and see who tops the leaderboard\!
## **Step \#4: Prizes**
Say it out loud: The point of a hackathon is not the prize.
I’ve been to nation-wide university hackathons with $500+ worth of prize. It was cool, sure, but 1\) not winning crushes other people’s spirit and 2\) it encourages competition instead of cooperation.
We want a helpful, encouraging environment. Not a competitive, Banking-esque one.
The prize for each person on the winning team should be less than $30 USD.
Giving a prize for the top 3 is usually the deal, but this can change depending on your event (and budget). Also, most events have “special categories” like Funniest or Best Design. These are organizer’s-pick, so that’ll have more logistics (organizers will have to gather in a room and talk, etc).
## **Step \#5: Getting Waivers Signed**
**Use the parent emails in the sign-up form**. Email all parents 3 weeks before the hackathon to remind them the event is happening, email them a week before the hackathon to remind them to sign their child’s waiver, and ask them to tell *other* parents so you can spread the word.
They’re parents, so they have sympathy towards kids (especially since they’re a parent of teenagers). Use it.

133
src/routes/guide/outreach/+page.svx
View file

@ -1,30 +1,73 @@
# Outreach
<script>
import CloudImage from "$lib/components/CloudImage.svelte";
</script>
# **The 5 Steps to *Outreach*** 📪
Outreach is an IMPORTANT part of hackathons. No participants → No game jam. But how do you reach the ✨right people? ✨
**NOTE:** Only \~50-55% of sign-ups show up. The amount of people who sign the waiver will be closer to your actual attendance number. Be sure to send out waivers and waiver reminders often (and like 3 times the day before the event)
**NOTE:** Only \~50% of sign-ups show up. The amount of people who sign the waiver will be closer to your actual attendance number. Be sure to send out waivers and waiver reminders often (and like 3 times the day before the event)!
## STEP \#1: Email teachers
1) Use google maps to find schools within a 30 mile radius and then visit their websites.
2) Search for a staff/faculty directory and email literally all of them (or all tech teachers\!).
3) Make the email applicable (for them).
1. Find schools within a 30 mile radius (through Google Maps) and visit their websites.
2. Search for a staff/faculty directory and email all STEM teachers / homerooms.
3. Make the email applicable (for them). Ex: Talk about game physics\!
*Ex: Math teachers – game physics and vectors. Art teachers – designing sprites in [aseprite](https://www.aseprite.org/).* GUIDANCE COUNSELORS can be great\!
Tip: Try to use “hackathon” instead of “game jam.” Most people know what a hackathon is but have NO idea what a game jam is.
Tip: Try to use “hackathon” instead of “game jam.” Most people know what a hackathon is but not a game jam.
Here’s an email template\!
| Hi Susanne, I’m RenRan, a 17-year-old OCDSB student. I’m also organizing Ottawa’s first all-girls hackathon\! July 5-6th, we’re organizing JPEG, a 25-hour high school hackathon for 70+ girls at Carleton University. JPEG is affiliated with Hack Club, a global nonprofit supported by Dell and GitHub. Learning to code through hackathons helped me make some of my best memories—and friends. But, there are very few opportunities for high schoolers in Ottawa, let alone girls. That’s why we’re reaching out. You’re my friend’s favorite physics teacher at Nepean HS\! Would you be open to helping us reach more students by posting a quick classroom post with our website ([jpeg.hackclub.com](http://jpeg.hackclub.com)) and/or showing [this video](https://drive.google.com/file/d/1Vbwb6L_aXmthB7Q3Jhid-NV00fSxb3PC/view?usp=sharing) to your classes? I've attached our Parent Guide and Poster below for more info\! RenRan [renran@hackclub.com](mailto:renran@hackclub.com) |
| :---- |
<div class="notebook">
Hi Susanne,
I’m RenRan, a 17-year-old OCDSB student. I’m also organizing Ottawa’s first all-girls hackathon!
July 5-6th, we’re organizing JPEG, a <strong>25-hour high school hackathon for 70+ girls at Carleton University.</strong> JPEG is affiliated with Hack Club, a global nonprofit supported by Dell and GitHub.
Learning to code through hackathons helped me make some of my best memories—and friends. But, there are very few opportunities for high schoolers in Ottawa, let alone girls. That’s why we’re reaching out.
You’re my friend’s favorite physics teacher at Nepean HS! Would you be open to helping us reach more students by <strong>posting a quick classroom post with our website (<a href="https://jpeg.hackclub.com">jpeg.hackclub.com</a>)</strong> and/or <strong>showing <a href="https://drive.google.com/file/d/1Vbwb6L_aXmthB7Q3Jhid-NV00fSxb3PC/view?usp=sharing">this video</a> to your classes?</strong>
I've attached our Parent Guide and Poster below for more info!
<small>
<a href="mailto:renran@hackclub.com">renran@hackclub.com</a>
<br>
[Phone Number]
</small>
</div>
No video? Here’s another one\!
| Subject: High school hackathon in Boston – Interested? Hi \[First Name of Teacher\] I’m Sofia, a junior at \[high school\], and I’m running a 24-hour hackathon on November 23\. Learning to code through hackathons *literally* changed my life. I’ve made some of my best memories and friends, and I want to change students' lives in Boston too. I'd love for your students at \[school\] to attend. Would you be open to forwarding the following email to them? Hey Coders and Artists\! I’m Sofia, a junior in high school. This year, I’m running a hackathon called Counterspell Boston. November 23-24, at the Microsoft NERD Center, you’ll have 24 hours to create a game from scratch. Check out [this video](https://youtu.be/3J1Rz-3N1WQ?si=gHZdM9WiMi4R1pVj) from another game jam\! Everything is free, including food, merch, and lodging. No prior experience needed. We would love for you to [sign up](https://forms.hackclub.com/t/sdMpoL7wK9us?city=rec0fAxwvWTwRv5M3)\! Check out [our website](https://counterspell.hackclub.com/boston/) for more info. See you there, The Counterspell Boston Team ![][image1] |
| :---- |
<div class="notebook">
<i>Subject: High school hackathon in Boston – Interested?</i>
EXTRA TIP: If your Director of Education has an email blast, ask them to include your event\! JPEG was included in our DOE’s monthly newsletter.
Hi [First Name of Teacher]
I’m Sofia, a junior at [high school], and I’m running a 24-hour hackathon on November 23.
Learning to code through hackathons <i>literally</i> changed my life. I’ve made some of my best memories and friends, and I want to change students' lives in Boston too.
I'd love for your students at [school] to attend. Would you be open to forwarding the following email to them?
Hey <span style="color: #ff4186; font-weight: bold">Coders</span> and <span style="color: #3bcbebff; font-weight: bold">Artists</span>!
I’m Sofia, a junior in high school. This year, I’m running a hackathon called <strong>Counterspell Boston.</strong>
<strong>November 23-24</strong>, at the Microsoft NERD Center, you’ll have 24 hours to <strong>create a game</strong> from scratch. Check out <a href="https://youtu.be/3J1Rz-3N1WQ">this video</a> from another game jam!
Everything is <strong>free</strong>, including food, merch, and lodging. No prior experience needed.
<strong>We would love for you to <a href="https://forms.hackclub.com/t/sdMpoL7wK9us?city=rec0fAxwvWTwRv5M3">sign up</a>!</strong> Check out <a href="https://counterspell.hackclub.com/boston/">our website</a> for more info.
See you there,
The Counterspell Boston Team
<img src="/guide/hack-club-flag.png" width="150" alt="Hack Club" style="margin: 0">
</div>
EXTRA TIP: If your Director of Education has an email blast, ask them to include your event\! JPEG was included in his monthly newsletter.
## Step \#2: Email Local Organizations
@ -40,7 +83,7 @@ For example:
* Student Council
* Local libraries / Community Centers
… Or any youth groups\!
… Or any youth groups\! (Cadets, Boys and Girls Club, DECA)
## Step \#3: Instagram / Discord / Social Media
@ -48,48 +91,60 @@ It is a truth universally acknowledged that Gen Z (and Gen Alpha) are glued to t
1. Make a 1st post. Here’s an example from Counterspell Ottawa\!
2. Follow people.
1. Go to schools, robotics teams, CS clubs, etc’s instagrams
2. Follow their followers.
3. Rinse, repeat.
<img src="/guide/counterspell-poster.png" width="250" alt="" style="margin-inline: auto; rotate: 2deg; --hover: 0.15rem" class="animate-hover">
3. Post regularly. Ex:
1. What to bring
2. FAQ
3. Is it beginner-friendly? (Yes, it is)
4. Teams of three
2. Follow people.
* Go to schools, robotics teams, CS clubs, etc’s instagrams
* Follow their followers.
* Rinse, repeat.
3. Post regularly. Ideas for posts:
* What to bring
* FAQ
* Is it beginner-friendly? (Yes, it is)
* Teams of three
Use Canva or Figma to make posts (it doesn’t matter – just post regularly)\!
## Step \#4: Parent Groups
## Step \#4: Reach the Parents
“Mom, can I go to an overnight event?” sounds like you’re going to rob a bank. But if it’s your parents’ idea… It goes from A Bad Influence to the Bestest Educational Idea Ever ™
“Mom, can I go to an overnight event?” sounds like you’re about to rob a bank. But if it’s your parents’ idea… It goes from A Bad Influence to the Bestest Educational Idea Ever ™
Doing this step right will get you 30% to 40% of your sign-ups (ESPECIALLY if your city hasn’t had many hackathons before).
**Use the parent emails in the sign-up form**. Email all parents 3 weeks before the hackathon to remind them the event is happening, email them a week before the hackathon to remind them to sign their child’s waiver, and ask them to tell *other* parents so you can spread the word.
They’re parents, so they have sympathy towards kids (especially since they’re a parent of teenagers). Use it.
You may ask: “Dev, how do I do this?” And the answer is: “I’m not your dad.”
Because this is where parents can help. A LOT.
1. Ask your parents if they can post a short bit in Facebook Groups / WeChat / Whatsapp / etc.
Because this is where parents can help. A LOT. Ask your parents if they can post a short bit in Facebook Groups / WeChat / Whatsapp / etc.
Example post:
| Your child interested in coding? July 5-6th, we're organizing a 25hrs ALL-GIRLS high school coding event for 70+ teens at Carleton University. The event is open to teens 14-18y old. They'll get to: Get into teams of three and create a game from scratch overnight. Have fun\! Everything is free, including meals, snacks, drinks, T-Shirts and more. Learn to code: developers there to help out\! For more information and sign up: [https://jpeg.hackclub.com/](https://jpeg.hackclub.com/?fbclid=IwZXh0bgNhZW0CMTAAYnJpZBExNFVaTFZnUWVnSnNYUklGaAEe5awJMsuG_ACRnFEvdD8WewAGe_ZLEj60V6kG1zuhUvC4Fq5IiXCAGTu9Aac_aem_7FQsjqEsCGOvpgdqYJneMg) Your child doesn't need any previous experience; all they'll need to bring is a laptop, a charger, toiletries, and a sleeping bag. |
| :---- |
<div class="w-full bg-white px-8 py-6 rounded-sm flex flex-col md:flex-row gap-6 items-center">
<div class="flex-1">
Your child interested in coding? July 5-6th, we're organizing a 25hrs ALL-GIRLS high school coding event for 70+ teens at Carleton University.
2. If they say no, post it yourself\!
The event is open to teens 14-18y old. They'll get to:
• Get into teams of three and create a game from scratch overnight.
• Have fun! Everything is free, including meals, snacks, drinks, T-Shirts and more.
• Learn to code: developers there to help out!
For more information and sign up: https://jpeg.hackclub.com/
Your child doesn't need any previous experience; all they'll need to bring is a laptop, a charger, toiletries, and a sleeping bag.
</div>
<div class="flex-shrink-0">
<img src="/guide/social-media-post.jpg" alt="" class="max-w-xs w-full h-auto">
</div>
</div>
1. If they say no, post it yourself\! Join Facebook Parent Groups, Private Groups, etc.
## Step \#5: Physical Poster
Finally: yes, people still touch grass. They do go outside.
Put physical posters up in schools (ask your friends). Put them on poles (with permission). Put them in gyms.
Put physical posters up in schools (ask your friends). Put them on poles (with permission). Put them in gyms. Here are some examples:
Customize this template\!
[image1]: <data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJMAAABKCAYAAAC/1GbyAAAJTklEQVR4Xu2df3AU5RnHbf+y02n/UHI5kssPgUAEokCRJBhTMnXUaaFTWjqK1F8IinakJiWjrToUxrbSAhFRaacpzfBLwo8CVRATU6WOZay2QTsVbTtUqECLQ01JIe1f233u7t199vvu3u3d7V7uyPOZ+Q53z/P+ePZ9v+ztLZtwySWCIAiCIAiCIAiCIAiCIAiCIAjCxUppaUWHKSMDDZWWljfgOMIIJRqtnIQm6bx6vvHP6x41jJYfaLowa6WxavJcNJWlSKS8EecQRgjKBGiaTLV72l2asUy14nwXG5FIxQ0YG5GYmz0YhJHcdGV5jcNYZWVlE3D+YidxbLF1GB+R0GJcMfoKzQhBi5vK/Jv8L6yj2DCP44I6HswFSugTBEQkEhuV8qykwHgO2vO5hcxYleewpkKH/6UgRaMV38Q2gcImuw9zhYSqEzc8rkd22mYauKDnd/0uZ6PxTcHaConLL4+V81rfm9lufND0cH7qpjVeseLxgl8oqu3Dpu9qmxwXkiqPOdKfPjSM1i163EV8o0aNqijDOocLXhfJrWbsEzh8nZubv5C/iTPAbYEcQrxytz6bui/mUsj5ERjX97HuMDHne4fPX+VxLdlSNSV/++lczQS8SGw/HFAd99S0aAtliXPhf9457Nf/gTM/7ym9jQ+BqUJZN/OabQvOMbF8vFYLitqZ10obcLxQcK6mE1b4R9gvX5hz76cacJEc8otXv8f3Jf5c+6J3G+KxXXoedOvYazVjMfWY3w6XRKPREvv4Sj9txsZGIpXXm/mtLn0c6qibp81pPN9vGO3P6fGWhJn4eoaKc7V0Dh7s4QdzBvuHjZobF8nSzjewZHcGh5z9zv83EX//dOI98XSvs40bOH8a7TU/DseMHqOZwo/W1n1NG88hBPMt7mdNVElJdRTXPSuwHi+OHHmbF/AHHCcsaD5cIM8F3ZHCWF796PUtzyRet27V88Q7f7dfYx7HzZdwfqLrN3o7D6m9xPXOCbsqf6xb97TD1ThekKg5cCEc4vD47DXeOYy90O/dBuOY/+Hzei4sEWf/Y78meA7beyi0vbOryoyhoSGHqcaPn7QNx84VGret9gZtMSwt3WwX9ORBZ27OWjtH8JwXKv/a+3oMpdjQp+eCEs6voNfLtiVeL/65HVc5D33cvDw8IxHOSrKjtvYqh7FMXY/zZIo5xtG0Z6WHtttFYO70gHuO7il5odq4xVCK23+aeP+XfyTev3lMb6v0JXa2xLGwrYrzb6fYl/OdHYk//+1y0zap5N6cx7UODGdFuXHy5Ek0FekWnNMPqj8uiG9xvOIItln1gj4utsExsZ3S19c72/G2BBkN+2C77/0y8X7NAfc8fdvk75O6qXp6fC0jkdhXcZ0Dxa4oWPr6fo2mInXi/G6Y7T6Rk5FIiu2H9dizL+sxAmM4phLdj3ID23EpvtJhGAs2ONsrvPp4xfqPO/M8l5Ra+2g0NgPXOXDsCsLjpZd60VSWsB5C5bTFzVUKtxhde2AM+2Oe88XVeju3PhhPlVOmTdUWYW1TrXEoYC1hoA6qs3OjFevu3sVN9QqviWIrJ82JL8jRmcuMtxtbPZ+kzFkKt5jXHXE3sA2KWPgzPc7Hw7hbLt17U7Vl9rNZfF1Dx64mHOiAJkyow7BFb2+fOvDDqiZmMl86P2ulvgl+NPfJRBFLfuGMc7DPw93OnIKeXMC2OKa6WEcpMI45+uZIbGMf3SC1JnRXne9zXrCrDR51YOno7z8Sb0f1qD5YJ1JaGqs3251FY5HomW9c5Ix0j30GtVA5xbnktyYOjsNFvPFXPU76c/KbIMZ5Xw7mTTVW1FnHj2uVN7DOoNi5c7cvIym4GbBGv5h9f4LGIm2depu2+GmlzgLEqY8TsT1v2THVju46Y8xNqdrQvwli7v4uvZ2H2LEuxDXJK/ZRBgsd3I03zsZwSnI1E2Ke6pehsUi4Gb6l8Bt3a7N8t57jeQ4+AQHix4THPixg/UGwdGlbYtMyJOyFiUQq3+Mb4PUMUMZSYJxr8+t2Ow6OQSzdpPdnOmJ+IWFr9Uk8zmHDeRTBQAe5ePF9GE7JwMCAUV1dY1RWjj2LNYaBWWMPNxbpj41t2sb50vqexEFgHIVk8FFGOnXdI7ze4f1IcwOPL1eeeOLHGZ2VasZdaWlmYzN//ybWGiZmzZ1orkU1s7QNHQ7xmkpKKpuw9oIBNzdX1EGno7fnZcs4yPHjJ+JxrDVf0MNraCzSmnTPFwWo3zd8C0wU0DNHYYIbmSt+jESQWdqXPYRhC2U0rHc4MI/py2gspeUTZ2tGyFbr6uZp42MtBQ1uYi7cffe9vsy0edMWx8cbqa213dFmz559BWMmJBaLfcr8pvgWbryXxpWNNT5fdXX8kd722puMFRPnGPUVk7V2SpddNu6zOGdR4NjBHKGFqKqqwXBKXn31kGWoHd32z7+tX/9MwZopFaNHVzRHo7FNaJA02ojjFCVsX3OGFiZT1ILitVMhfcwJPnHsYA68++7RrM104MDBuHGmTZ0Rjy25934xUjECe5s16gzjF7xmctFcrFUocHCTs4WMdOedizCsMXXKNZZhfvv6YSs+edIUORsVO2yfc8LPWalu8tS4YegpATeUybBGoUjADc0WP2ZSZvnRqtWYshAzFTG4mdng9/5SY0MTXhdhEzFTMYObmQ2ZXnzz2wFoKDFTEePYySwhY0yb1oBhT6h9NFoZN86hQ69ZcblmKnLYHmcNmWPjxi4Mu9LVtdk6iynzPPbocv7R9xmsUSgSYK+zgsxx6tRpDLuC10xcWJtQZOBmZ4Of66Xtz3Vbpvl2m/2PunTXOxkvx9qEIoPtd9akM9Pq1R1xw3xjwR2YiqMMhbUJRQZubDaQmU6cYL/DCFBnpL17f4UpCzHTRUC6s4ofaIz582/HsMXg4CA+kmssXrTE0SYZvwbrE4oIdc9nzJhax+Zmgt/7THJ/aQRgbnCD2mg/pkD6+l5J26+6eny8Dc1Hxqmfca2VU+bCuoQixtzsB7mpOjo8fnWMC9R+//7kT6YCDzzwoBoz/n+9mca5in/kiZEucripSPX1TegRB9OnN7qenY4d+5saYx/OIUYagZhGOIfmIt188wLjzJmPLOOouLqBydrehmMKQhzTHJk8MH8p9hcEQRAEQRAEQRAEQRAEQRAEQRCEEcj/AUsLr6AQaZsLAAAAAElFTkSuQmCC>
<div class="flex flex-col md:flex-row gap-6 mt-6 w-full">
<img src="/guide/poster1.png" alt="Poster example 1" class="flex-1 max-w-md w-full mx-auto my-0">
<img src="/guide/poster2.png" alt="Poster example 2" class="flex-1 max-w-md w-full mx-auto my-0">
</div>

86
src/routes/guide/sponsors/+page.svx
View file

@ -1,16 +1,17 @@
# Sponsorship
# **Getting Money** 💸
Welcome to the trenches of sponsorship. You’ll likely send a ridiculous number of emails over the next two months. No worries\! We got your back.
*Note: This resource heavily draws upon Karthik’s resource here. We highly recommend you check it out\!*
> *Note: This resource heavily draws upon Karthik’s resource [here](https://drive.google.com/file/d/1zjhcMq9gk8KOxpQVgQzLSCMUKRv-biJw/view?usp=sharing). We highly recommend you check it out\!*
More ✨Awesome✨resources:
1) Everything you need in one video: [Meginar: Learn how to secure high school hackathon sponsorship\!](https://www.youtube.com/watch?v=tOmXzA4reTY) It’s two hours but definitely worth your time.
1. Everything you need in one video: [Meginar: Learn how to secure high school hackathon sponsorship\!](https://www.youtube.com/watch?v=tOmXzA4reTY) It’s two hours but definitely worth your time.
2. A short segment from Hack Club's old hackathon organizing guide: [💸 Raising Money 💸](https://hackclub.com/how-to-organize-a-hackathon/#raising-money)
If you’re too lazy…
## OVERALL TIPS (applicable for everything):
## ✏️ OVERALL TIPS (applicable for everything):
The one secret to emailing ANYONE you’ll need: **be concise**.
@ -20,24 +21,29 @@ This is NOT an English Essay. Shorter → Better.
*DON’T BE TOO LINKEDIN-PILLED\!\!* Be put together and presentable, but not *too* professional. If they support teens, they’ll want to see your energy & enthusiasm.
## Before: Making a budget
## 💲Before: Making a budget
[This](https://docs.google.com/spreadsheets/d/1udOaDK_OYa_b8Y8myCHOrXVHrf6H45vZqmqqbhkiUBA/edit?usp=sharing) is a template budget you can make a copy of and use for your Daydream event (everyone thank Afonso). Keep track of *every single* item you plan to buy for your event, and make sure you update it after you make purchases (especially if taxes raise the cost).
Search up snack prices on Walmart and Costco (the example Costco list on the sheets has good examples of what and what not to buy), and make sure the price per person doesn’t get too high (buying VitaminWater for every partcipant is probably not the best use of Hack Club’s emergency funding).
Search up snack prices on Walmart and Costco, make sure the price per person doesn’t get too high.
Keep track of how much you’re spending per unit and per person. If a 36-pack of chips costs $50, each bag of chip costs \~$1.4, which is pretty good. This unit price helps keep things in perspective—and helps you decide what to keep and what to nix.
Keep track of how much you’re spending per unit and per person. If a 36-pack of chips costs $50, each bag of chips costs \~$1.4. This unit price helps keep things in perspective—and helps you decide what to keep and what to nix.
## Step \#1: Finding Companies
## 🏣 Step \#1: Finding Companies
Start small. One of the biggest mistakes first-time hackathon organizers make is to cold email the biggest companies they can think of (intel, microsoft, etc). This won’t work 99% of the time *unless* you have a good contact.
Start small. One of the BIGGEST mistakes first-time hackathon organizers make is to cold email the biggest companies they can think of (intel, microsoft, etc). This won’t work 99% of the time *unless* you have a good contact.
Chances are, there are a ton of local companies you’ve never heard of that would be more than happy to sponsor and have a surprising amount of money to spare. It also doesn’t just have to be tech companies\! Reach out to restaurants, small businesses, bakeries, and community-oriented businesses (though they are more likely to give you an in-kind sponsorship like food or groceries).
Chances are, there are a ton of local companies you’ve never heard of that would be more than happy to sponsor and have a surprising amount of money to spare. It also doesn’t just have to be tech companies\! Reach out to restaurants, small businesses, bakeries, and community-oriented businesses.
1. Companies you have connections to \- Start here\! (Parents’ work, your job, your friends’ work, etc. Every adult you know works at a company, use it.)
2. Companies that align with your mission \- If your event is about coding education, find edtech companies
3. Companies in your area \- Don't be scared\! CEOs are people too. You’ll have a better chance with decently-higher up people, so maybe don’t contact all the CEOs in San Francisco. Linkedin is great for finding names for the mid-range of important people.
4. Previous sponsors of similar events \- Look at Devpost, MLH, and even something like your school boosters
Where to start?
Companies you have
| CONNECTIONS&nbsp;TO&nbsp;✨ | Start here\! (Parents’ work, your job, your friends’ work, etc. Every adult you know works at a company, use it.) |
| :---- | :---- |
| **ALIGN&nbsp;WITH&nbsp;YOUR&nbsp;MISSION** | If your event is about coding education, find edtech companies |
| **IN&nbsp;YOUR&nbsp;AREA&nbsp;🌳** | Don't be scared\! CEOs are people too. You’ll have a better chance with decently-higher up people, so maybe don’t contact all the CEOs in San Francisco. Linkedin is great for finding names for the mid-range of important people. |
| **SPONSORED&nbsp;SIMILAR&nbsp;EVENTS** | Look at Devpost, MLH, and even something like your school boosters |
## Step \#2: Write your Prospectus
@ -64,12 +70,37 @@ DM [@renran sun](https://hackclub.slack.com/archives/D096V6RDJ9E) if you’d lik
## Step \#4: Write an email template.
| Subject: 100+ Teenage Hackers in City? Hi \[First Name of Employee from company\], I’m First Name, a 17-year-old student from City. I’m also organizing City’s \[what makes your Daydream special, ex: first 24 hour\] hackathon. September 27-28, we’re organizing [Daydream](https://daydream.hackclub.com/) \[City\], a 24-hour high school hackathon for 100 teens at \[Venue\]. Daydream is dreamed up by Hack Club, a global coding nonprofit supported by Dell and GitHub. Learning to code through hackathons helped me make some of my best memories—and friends. It changed my life, and I want to bring that experience to more students\! \[Company\] is incredible. \[IMPORTANT\! Why are you emailing this company? Be personal but 1-2 sentences. Ex: Your \[product\] changed the way we use xyz.\] I'd love to send you more information or schedule a call if you're interested. Let me know what you need and what time, and I'll make it happen\! [Renran Sun](mailto:renran@hackclub.com) \[phone number\] P-S: If you are the wrong person to reach out to, I apologize. It’d be great if you could direct me to the right department/person\! |
| :---- |
<div class="notebook">
<i>Subject: 100+ Teenage Hackers in [City]?</i>
Hi [First Name of Employee from company],
I’m [First Name], a 17-year-old student from [City]. I’m also organizing [City’s] \[what makes your Daydream special, ex: first 24 hour] hackathon.
September 27-28, we’re organizing <a href="https://daydream.hackclub.com/">Daydream</a> [City], a <strong>24-hour high school hackathon for 100 teens at [Venue]</strong>. Daydream is dreamed up by Hack Club, a global coding nonprofit supported by Dell and GitHub.
Learning to code through hackathons helped me make some of my best memories—and friends. It changed my life, and I want to bring that experience to more students\!
[Company] is incredible. [IMPORTANT\! Why are you emailing this company? Be personal but 1-2 sentences. Ex: Your [product] changed the way we use xyz.]
I'd love to send you more information or schedule a call if you're interested. Let me know what you need and what time, and I'll make it happen\!
RenRan Sun
<small>
<a href="mailto:renran@hackclub.com">renran@hackclub.com</a>
<br>
[Phone Number]
</small>
PS: If you are the wrong person to reach out to, I apologize. It’d be great if you could direct me to the right department/person\!
</div>
## Step \#5: Email\!
Send the prospectus/sponsorship package for the 2nd email\!
Send the prospectus/sponsorship package for the 2nd email\! REPLY QUICKLY. DO NOT leave them for more than three hours, reply WITHIN THE DAY.
Don’t overwhelm them with information. Try to jump on a call or meet them in person to explain everything. Emails are easy to refuse, but a puppy-eyed teen? Not as much.
## Step \#6: Follow-Up
@ -77,17 +108,20 @@ It is pretty common to get ghosted but being persistent can help a lot\! Keep it
Reply to the original email thread OR send a new email. Here’s an example.
| Hi Kyle, Just saw the podcast at Fullscript with Youth Ottawa and wanted to quickly follow up\! Please let me know if you have any questions. I'd love to jump in a call and discuss details/constraints\! If Fullscript can't host us, no worries. Thank you again for your consideration, RenRan |
| :---- |
<div class="notebook">
Hi Kyle,
Just saw the podcast at Fullscript with Youth Ottawa and wanted to quickly follow up\!
Please let me know if you have any questions. I'd love to jump in a call and discuss details/constraints\! If Fullscript can't host us, no worries.
Thank you again,
RenRan
</div>
## Step \#7: Repeat
## Extra: Tips & Advice
Make the highest tier up to half of your budget. **The lowest tier should be a significant contribution.**
FOLLOW-UP QUICKLY
Generally, do not take useless in-kinds that sound fancy but are useless and spammy in reality (“we’ll give you $50,000 in coupons to LawnMowingUltraPlus if you put our logo on everything”). WE WANT COLD HARD CASH\!\!\!\!
##
Make the highest tier more than half of your budget. **The lowest tier should also be a significant contribution.** For example: if your budget is $8k, make $5k your highest tier and $1.5k your lowest tier.

89
src/routes/guide/venue/+page.svx
View file

@ -1,32 +1,37 @@
# Venue
# **Venues: The Gathering 🪴**
Without a venue, you don’t have a hackathon. You *need* a venue. Lock in.
## Part One: Making a List
## 📋 Part One: Making The List™
Make a long, long list of potential venues. You’ll need to reach out to twenty venues to find one that says yes, but if you want to run the best hackathon you can, I’d recommend challenging yourself to reach out to as many as possible\! A dream venue is:
Make a LONG list of potential venues. **You** **need to reach out to 20 venues to find ONE that says yes**.
- **Roomy** \- Whatever space you find should be big enough to host attendees\! This might seem pretty apparent, but don’t forget: food is messy, so you might want a separate space for meals; if you’re hosting an overnight event you need *at least* two sleeping areas for gender separation; and if people are going to sleep, they’ll need enough space to lie down in a place where the lights can turn off\!
- **Welcoming** \- \[they should be excited to support all the teenagers, mention anecdote of google wanting 1:2 chaperone ratio\]
- **Overnight** \[find a better one-word here\]
- **Cool** \[maybe a better word for having the right vibe\]
If you want to run the best hackathon you can: reach out to AS MANY as you can. With personalized emails each. It will be rough but a great venue makes an amazing hackathon.
Here are a bunch of good ideas you can add to your list – use Google Maps to find nearby options within a 30-minute to 1-hour radius\!
A basic venue needs:
- **Makerspaces** \- Makerspaces are amazing sites for hackathons. They’re almost always welcoming, they often have multiple rooms, and they can sometimes even provide hardware or marketing for your event.
- **Startup Spaces** \- These fall into a similar bucket as makerspaces. They’re usually supportive of the mission and much less risk-averse than larger corporations. Startups also often have fancier offices with multiple comfortable rooms.
- **Corporate Offices**
- **Public Libraries**
- **Schools & Universities** \- be careful, these initially sound like a good option but schools have more restrictions around having minors overnight. If you get lucky, you might find a university that would be willing to provide a space overnight for free, though\!
* Audio/Visual (TV or projector, speakers, etc)
* Power strips
* Open space for sleeping, working, etc
* 2 separate *gender-separated* sleeping rooms
**Venue requirements:**
The best venue is:
- Audio/Visual (TV or projector, speakers, etc)
- Power strips
- Open space for sleeping, working, etc
- 2 separate *gender separated* sleeping rooms
| A&nbsp;BIG&nbsp;SPACE&nbsp;🏠 | Whatever space you find should be BIG\! Not a school-gym crammed. They’re spending the next 24 hours there – give them room to breathe. |
| :---: | :---- |
| **WELCOMING&nbsp;🫂** | Should be *exciting* for teens\! Github, Shopify, Figma. An awesome workspace&nbsp;→&nbsp;more ideas\! Big windows, couches, rolling chairs. |
| **OVERNIGHT&nbsp;💤** | 24-hour events are where the *✨magic✨* happens. People are too locked in for 12-hour events. We want them to have fun\! Try your best to find an overnight one. |
## Part Two: Reaching Out
Here are a bunch of good ideas you can add to your list – use Google Maps to find nearby options\!
| Makerspace | AMAZING space for hackathons. They often have multiple rooms, and can sometimes provide hardware/marketing for your event |
| :---- | :---- |
| **Startup** | More supportive of nonprofits and hackathons\! They’re less risk-averse than larger corporations. Sometimes, they have fancier offices too. |
| **Corporate&nbsp;Office** | Please avoid cubicles (isolates participants from one another, hard to reach), but a good space if they’re willing to do overnight\! |
| **Library/University** | Good spaces if they have big windows and good funding\! Not that great if it’s boring, classroom-like, with lecture halls. Try not to isolate participants\! |
| **Schools** | Avoid unless it’s a fancy, private school or well-funded. We don’t want to remind participants of an academic setting\! |
## ✉️ Part Two: Emailing…
Once you have your mega-list of spaces, you need to reach out to them. This step can make or break your chances, so here’s how to do it right:
@ -37,8 +42,10 @@ Try not to use generic email addresses (ex: info@xyz). Find employees / COOs / p
Tools to find emails:
1. [LinkedIn](http://linkedin.com): Use this to find people\!
2. [Apollo.io](http://Apollo.io) : Find email addresses of the people you find on LinkedIn\!
3. [rocketreach.co](http://rocketreach.co): Another tool to find emails
2. [Apollo](http://Apollo.io) : Find email addresses of the people you find on LinkedIn\!
3. [RocketReach](http://rocketreach.co): Another tool to find emails just from a name.
> *Remember: free trials might be temporary, but temporary emails are infinite ;)*
## Step \#2: Writing the Email
@ -59,30 +66,50 @@ Tools to find emails:
* **Do they care?**
* **CUSTOMIZE\!\!** To the EXACT recipient (research *who* you’re emailing). Customize the prospectus. Customize the email.
\> If you can, you should go to a workshop about writing effective emails & get feedback on your email before sending it\! We’ll hold a couple to get you guys started.
> If you can, you should go to a workshop about writing effective emails & get feedback on your email before sending it\! We’ll hold a couple to get you guys started.
Example:
| Hi \[contact name\], I’m RenRan, a 17-year-old high school student from Ottawa. This \[month\], I’m organizing Ottawa’s first all-girls high school hackathon\! July 5-6, we're running JPEG, a 25hr coding event for 70+ teens. JPEG is affiliated with Hack Club, the "world's largest open source community of teenagers who love to code and build stuff". Learning to code through hackathons helped me make some of my best memories—and friends. But there are very few opportunities for high schoolers in Ottawa, let alone girls, to attend these social coding events. Impact Hub is incredible. Especially your Compassionate Community program and the Cartier Women's initiative in recognizing women entrepreneurs. Our event has everything—but a venue. We’re wondering if Impact Hub Ottawa could donate your space to us overnight July 5-6? I’d love to jump on a call to answer any questions or iron out details\! Warmly, RenRan Sun (she/her) renran@hackclub.com 613-710-4270 |
| :---- |
<div class="notebook">
Hi [contact name],
I’m RenRan, a 17-year-old high school student from Ottawa. This [month], I’m organizing <strong>Ottawa’s first all-girls high school hackathon\!</strong>
July 5-6, we're running JPEG, a <strong>25hr coding event for 70+ teens.</strong> JPEG is affiliated with Hack Club, the "world's largest open source community of teenagers who love to code and build stuff".
Learning to code through hackathons helped me make some of my best memories—and friends. But there are very few opportunities for high schoolers in Ottawa, let alone girls, to attend these social coding events.
Impact Hub is incredible. Especially your Compassionate Community program and the Cartier Women's initiative in recognizing women entrepreneurs.
Our event has everything—but a venue. We’re wondering if Impact Hub Ottawa could donate your space to us <strong>overnight July 5-6?<strong>
I’d love to jump on a call to answer any questions or iron out details\!
Warmly,
RenRan Sun (she/her)
<small>
<a href="mailto:renran@hackclub.com">renran@hackclub.com</a>
<br>
[Phone Number]
</small>
</div>
## Step \#4: Choose-your-adventure
### If you get a “yes\!” …Now what?
### **If you get a “yes\!” …Now what?**
Be nice to them, maybe they’ll host another event in the future\!
### If you get a “sorry we can’t…”
### **If you get a “sorry, we can’t…”**
Ask for monetary donations, food, supplies, or mentors.
They answered, which means congrats\! They care\!
### If you get ghosted: **Follow. Up.**
Follow-up every 3-5 business days\! Reach out to another employee\! Call them\!
Email their \*shivers\* general email.
Being relentless is what gets you a good venue.
* Follow-up every 3-5 business days\! Reach out to another employee\! Call them\!
* Email their \*shivers\* general email.
* Being relentless is what gets you a good venue.
BUT **do not** SPAM THEM or Hack Club might end up blacklisted.

91
src/routes/guide/website/+page.svx Normal file
View file

@ -0,0 +1,91 @@
# **Your Daydream Website ☀️**
Your daydream needs its own website. This might be one of the only technical aspects you’ll need when organizing your hackathon – and day-of mentoring.
Now… on to how to make your site\!
First, fork the repository:
1. Go to [https://github.com/hackclub/daydream](https://github.com/hackclub/daydream)
2. Click “Fork” in the top right
3. Create the fork in your account
Then, clone your fork. In a terminal, run:
```bash
git clone https://github.com/YOUR_USERNAME/daydream.git
cd daydream
```
Once you have a local copy of the site, you need to duplicate the example site. In the `src/routes` folder, copy the folder called `example`, and rename the copy to whatever you want your URL to be.
For example, if you want your site to be at [daydream.hackclub.com/vermont](http://daydream.hackclub.com/vermont), name the folder `vermont`.
Next, you need to configure your event. Open `src/routes/yourcity/+page.svelte` in a text editor, and look at the top. Change all the fields to the information for your event\!
```js
// Configuration - Put your information here!
const eventName = "Example";
const eventLocation = "Example City";
const eventAddress = "1600 Pennsylvania Avenue, Washington, DC 20500";
// These two are optional
const directionsURL = "https://www.google.com/maps/search/1600+pennsylvania+avenue+washington+dc/"
const contactLink = "mailto:example@daydream.hackclub.com"
// Sponsors Configuration
const sponsorsEnabled = true; // Set to false to hide the entire sponsors section
const sponsors = [
{ image: "/example/logo1.png", name: "Sponsor 1", url: "https://example1.com" },
{ image: "/example/logo2.png", name: "Sponsor 2", url: "https://example2.com" },
{ image: "/example/logo3.png", name: "Sponsor 3", url: "https://example3.com" },
{ image: "/example/logo4.png", name: "Sponsor 4", url: "https://example4.com" },
{ image: "/example/logo5.png", name: "Sponsor 5", url: "https://example5.com" },
{ image: "/example/logo6.png", name: "Sponsor 6", url: "https://example6.com" },
{ image: "/example/logo7.png", name: "Sponsor 7", url: "https://example7.com" }
];
// Schedule Configuration - You don't need to use this schedule, this is just an example!
const scheduleData = {
saturday: {
title: "Saturday, September 27th",
items: [
{ event: "Doors open", time: "11:00 AM" },
{ event: "Opening ceremony", time: "12:00 PM" },
{ event: "Lunch", time: "12:30 PM" },
{ event: "Start working on your project!", time: "1:00 PM" },
{ event: "Workshop 1", time: "2:00 PM" },
{ event: "Activity 1", time: "4:00 PM" },
{ event: "Workshop 2", time: "4:00 PM" },
{ event: "Dinner", time: "6:00 PM" },
{ event: "Lightning talks", time: "8:00 PM" },
{ event: "Midnight surprise", time: "12:00 AM" }
]
},
sunday: {
title: "Sunday, September 28th",
items: [
{ event: "Breakfast", time: "8:00 AM" },
{ event: "Demos!", time: "10:30 AM" },
{ event: "Closing ceremony", time: "12:00 PM" }
]
}
};
```
Lastly, submit your site\! Use Git to push your changes:
```bash
git add .
git commit \-m "Add \[Your City\] event page"
git push
```
Then, go back to your repository, click "Contribute" → "Open pull request," and follow the instructions\!
> Are you adding custom images, like sponsor logos? Make a new folder in the `static` folder with your city name, then place them in there\! After that you can access the images at `/cityname/imagename.png`.
#### Wanna make your own site?
If you want to make your own site, it needs to be another page on [daydream.hackclub.com](http://daydream.hackclub.com). The site is written in SvelteKit, but you can do anything else within those bounds\!
> *Note: If you choose to make your own site, it needs to be mobile responsive and high quality (vibecoded AI slop is not allowed).*

BIN
static/guide/avengers.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
static/guide/badge1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 302 KiB

BIN
static/guide/badge2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
static/guide/badge3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 304 KiB

BIN
static/guide/badge4.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
static/guide/badge5.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
static/guide/badge6.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 103 KiB

BIN
static/guide/branding.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
static/guide/counterspell-poster.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 480 KiB

BIN
static/guide/email.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 274 KiB

BIN
static/guide/hack-club-flag.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
static/guide/hcb.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 921 KiB

BIN
static/guide/how.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 814 KiB

BIN
static/guide/notebook-border.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
static/guide/poster1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 655 KiB

BIN
static/guide/poster2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 885 KiB

BIN
static/guide/slack.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 613 KiB

BIN
static/guide/social-media-post.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
static/guide/three-things.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 888 KiB

BIN
static/guide/vibes.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 955 KiB

22
svelte.config.js
View file

@ -1,12 +1,30 @@
import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { mdsvex } from 'mdsvex';
import { mdsvex, escapeSvelte } from 'mdsvex';
import { createHighlighter } from 'shiki';
// shiki config for the guide
const shikiTheme = "min-light"
const shikiHighlighter = await createHighlighter({
themes: [shikiTheme],
langs: ["javascript", "bash"],
})
/** @type {import('mdsvex').MdsvexOptions} */
const mdsvexOptions = {
highlight: {
highlighter: async (code, lang = 'text') => {
const html = escapeSvelte(shikiHighlighter.codeToHtml(code, { lang, theme: shikiTheme }));
return `{@html \`${html}\` }`;
}
},
}
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://svelte.dev/docs/kit/integrations
// for more information about preprocessors
preprocess: [vitePreprocess(), mdsvex()],
preprocess: [vitePreprocess(), mdsvex(mdsvexOptions)],
extensions: ['.svelte', '.svx'],