From e27bd90c1041f71b2eefbbcec1be7f4b9b5d65dc Mon Sep 17 00:00:00 2001 From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com> Date: Sat, 29 Apr 2023 22:33:10 +0200 Subject: [PATCH 01/11] Hero - part 1 - Make left part of hero section - Prepare Section.svelte to get the right sizing - Improve responsive for large screens for navbar - Add Tailwind breakpoint for large screens (1920px) - Add hover-child: variant because hover:child: acts lke child-hover: for some reason - Improve buttons readability and flexibility --- src/lib/components/Section.svelte | 8 ++++++++ src/lib/ui/Button.svelte | 17 +++++++++++++++-- src/routes/+layout.svelte | 4 ++-- src/routes/+page.svelte | 27 +++++++++++++++++++++++++++ tailwind.config.ts | 4 ++++ 5 files changed, 56 insertions(+), 4 deletions(-) create mode 100644 src/lib/components/Section.svelte diff --git a/src/lib/components/Section.svelte b/src/lib/components/Section.svelte new file mode 100644 index 00000000..bb58ef1d --- /dev/null +++ b/src/lib/components/Section.svelte @@ -0,0 +1,8 @@ +
+ {#if $$slots.title} +

+ +

+ {/if} + +
diff --git a/src/lib/ui/Button.svelte b/src/lib/ui/Button.svelte index 57e81118..45453910 100644 --- a/src/lib/ui/Button.svelte +++ b/src/lib/ui/Button.svelte @@ -4,13 +4,26 @@ {#if type === "primary"} {:else if type === "secondary"} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index d0557a78..3259d054 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -40,9 +40,9 @@ -
+
- From c188dfdcd2ba7a3ccf10a3b73ac3d31f39c72c7d Mon Sep 17 00:00:00 2001 From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com> Date: Sun, 30 Apr 2023 17:17:00 +0200 Subject: [PATCH 04/11] Taller hero, bottom arrow & fixes - Make hero section taller to *kinda* feat the screen height - Add bottom scroll-to-next-section button - Improve Section.svelte paddings & margins --- src/lib/components/Section.svelte | 4 ++-- src/routes/+page.svelte | 17 +++++++++++++++-- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/lib/components/Section.svelte b/src/lib/components/Section.svelte index 26011ffb..de155cae 100644 --- a/src/lib/components/Section.svelte +++ b/src/lib/components/Section.svelte @@ -1,6 +1,6 @@ -
+
{#if $$slots.title} -

+

{/if} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5e0366a3..35655799 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,14 +1,21 @@ Home | Renew -
+
@@ -33,6 +40,12 @@
+
+ scrollTo("" /* TODO: Add section selector */)} + /> +
From 948b86669464c2ef0857558788146342a693410e Mon Sep 17 00:00:00 2001 From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com> Date: Sun, 30 Apr 2023 21:01:06 +0200 Subject: [PATCH 05/11] Make scroll-to-bottom button magnetic & change its animations --- src/lib/components/MagneticElement.svelte | 103 ++++++++++++++++++++++ src/lib/ts/id.ts | 10 +++ src/routes/+page.svelte | 27 +++++- 3 files changed, 137 insertions(+), 3 deletions(-) create mode 100644 src/lib/components/MagneticElement.svelte create mode 100644 src/lib/ts/id.ts diff --git a/src/lib/components/MagneticElement.svelte b/src/lib/components/MagneticElement.svelte new file mode 100644 index 00000000..dbde1f6b --- /dev/null +++ b/src/lib/components/MagneticElement.svelte @@ -0,0 +1,103 @@ + + + +
+ +
diff --git a/src/lib/ts/id.ts b/src/lib/ts/id.ts new file mode 100644 index 00000000..89e1f8ca --- /dev/null +++ b/src/lib/ts/id.ts @@ -0,0 +1,10 @@ +// From https://github.com/rgossiaux/svelte-headlessui/blob/master/src/lib/hooks/use-id.ts +let id = 0; + +function generateId() { + return ++id; +} + +export function useId() { + return generateId(); +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 35655799..5f616ef8 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -2,6 +2,7 @@ import { ArrowDownIcon, ArrowRightIcon } from "@rgossiaux/svelte-heroicons/solid"; import Button from "$ui/Button.svelte"; import Section from "$components/Section.svelte"; + import MagneticElement from "$components/MagneticElement.svelte"; function scrollTo(selector: string) { const element = document.querySelector(selector); @@ -40,12 +41,32 @@
-
+ { + const element = e.detail.element; + element.style.transitionDuration = "500ms"; + setTimeout(() => { + element.style.removeProperty("transition-duration"); + }, 500); + element.parentElement.style.transform = "scale(1.2)"; + }} + on:out_zone={(e) => { + const element = e.detail.element; + element.style.transitionDuration = "500ms"; + element.parentElement.style.transform = "scale(1)"; + }} + > scrollTo("" /* TODO: Add section selector */)} /> -
+
From d96bd7b8bbda8d63f0a31e8428c68df2faa5a7b9 Mon Sep 17 00:00:00 2001 From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com> Date: Mon, 1 May 2023 14:59:42 +0200 Subject: [PATCH 06/11] Right hero design - Switch from @rgossiaux/svelte-heroicons to @babeard's - Add tailwindcss-3d lib - Make MagneticElement configurable --- package.json | 3 +- pnpm-lock.yaml | 38 +++++++---- src/lib/components/MagneticElement.svelte | 20 +++--- src/lib/components/Mouse3DTilting.svelte | 77 +++++++++++++++++++++++ src/lib/components/SlideOver.svelte | 4 +- src/routes/+layout.svelte | 4 +- src/routes/+page.svelte | 50 ++++++++++++--- tailwind.config.ts | 4 +- 8 files changed, 165 insertions(+), 35 deletions(-) create mode 100644 src/lib/components/Mouse3DTilting.svelte diff --git a/package.json b/package.json index c357ef9c..f6ac4f1c 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ "format": "prettier --plugin-search-dir . --write ." }, "devDependencies": { + "@babeard/svelte-heroicons": "2.0.0-rc.0", "@rgossiaux/svelte-headlessui": "^1.0.2", - "@rgossiaux/svelte-heroicons": "^0.1.2", "@sveltejs/adapter-static": "^2.0.2", "@sveltejs/kit": "^1.15.9", "@types/node": "^18.16.3", @@ -32,6 +32,7 @@ "svelte": "^3.58.0", "svelte-check": "^3.2.0", "tailwindcss": "^3.3.2", + "tailwindcss-3d": "^0.2.2", "tslib": "^2.5.0", "typescript": "^5.0.4", "vite": "^4.3.3" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 438cde54..58ddf157 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,12 +1,12 @@ lockfileVersion: '6.0' devDependencies: + '@babeard/svelte-heroicons': + specifier: 2.0.0-rc.0 + version: 2.0.0-rc.0(svelte@3.58.0) '@rgossiaux/svelte-headlessui': specifier: ^1.0.2 version: 1.0.2(svelte@3.58.0) - '@rgossiaux/svelte-heroicons': - specifier: ^0.1.2 - version: 0.1.2(svelte@3.58.0) '@sveltejs/adapter-static': specifier: ^2.0.2 version: 2.0.2(@sveltejs/kit@1.15.9) @@ -55,6 +55,9 @@ devDependencies: tailwindcss: specifier: ^3.3.2 version: 3.3.2 + tailwindcss-3d: + specifier: ^0.2.2 + version: 0.2.2(tailwindcss@3.3.2) tslib: specifier: ^2.5.0 version: 2.5.0 @@ -72,6 +75,14 @@ packages: engines: {node: '>=10'} dev: true + /@babeard/svelte-heroicons@2.0.0-rc.0(svelte@3.58.0): + resolution: {integrity: sha512-zjoRKBHA2QLjj3bi9mJMtyUyb/Y+PGlxiMdVXO3Bv8If3RJBuxtvVAYD2/tUakhxocB272PxhGNz4sixmB0rpA==} + peerDependencies: + svelte: ^3.44.0 + dependencies: + svelte: 3.58.0 + dev: true + /@esbuild/android-arm64@0.17.18: resolution: {integrity: sha512-/iq0aK0eeHgSC3z55ucMAHO05OIqmQehiGay8eP5l/5l+iEr4EIbh4/MI8xD9qRFjqzgkc0JkX0LculNC9mXBw==} engines: {node: '>=12'} @@ -394,14 +405,6 @@ packages: svelte: 3.58.0 dev: true - /@rgossiaux/svelte-heroicons@0.1.2(svelte@3.58.0): - resolution: {integrity: sha512-c5Ep1QDvBo9HD/P0AxbXItDbn6x77fldCjjL0aBjNseUntV4fkdHkBde1IaLr8i0kmrhTSovjkIen8W83jUPzg==} - peerDependencies: - svelte: ^3.44.0 - dependencies: - svelte: 3.58.0 - dev: true - /@sveltejs/adapter-static@2.0.2(@sveltejs/kit@1.15.9): resolution: {integrity: sha512-9wYtf6s6ew7DHUHMrt55YpD1FgV7oWql2IGsW5BXquLxqcY9vjrqCFo0TzzDpo+ZPZkW/v77k0eOP6tsAb8HmQ==} peerDependencies: @@ -1347,6 +1350,10 @@ packages: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} dev: true + /lodash@4.17.21: + resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} + dev: true + /lru-cache@6.0.0: resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==} engines: {node: '>=10'} @@ -1960,6 +1967,15 @@ packages: engines: {node: '>= 8'} dev: true + /tailwindcss-3d@0.2.2(tailwindcss@3.3.2): + resolution: {integrity: sha512-lGEFymZKmuCQb5y1sdi0I9nFA65cUS6fRHAfhzOsNm8xzhhEf4YS4HwYYTa0m6Wyv0YTklS5lY/ZrFfwLpbOHA==} + peerDependencies: + tailwindcss: '>=3.2.0' + dependencies: + lodash: 4.17.21 + tailwindcss: 3.3.2 + dev: true + /tailwindcss@3.3.2: resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==} engines: {node: '>=14.0.0'} diff --git a/src/lib/components/MagneticElement.svelte b/src/lib/components/MagneticElement.svelte index dbde1f6b..cdf12feb 100644 --- a/src/lib/components/MagneticElement.svelte +++ b/src/lib/components/MagneticElement.svelte @@ -1,18 +1,22 @@ + +
+ +
diff --git a/src/lib/components/SlideOver.svelte b/src/lib/components/SlideOver.svelte index 41d542f3..0633bb62 100644 --- a/src/lib/components/SlideOver.svelte +++ b/src/lib/components/SlideOver.svelte @@ -1,5 +1,5 @@