mirror of
https://github.com/LukeHagar/website.git
synced 2025-12-09 21:07:46 +00:00
283 lines
7.1 KiB
Svelte
283 lines
7.1 KiB
Svelte
<script lang="ts">
|
|
import { spring, type AnimationListOptions, type SpringOptions } from 'motion';
|
|
import { animation, createScrollHandler, scroll, type Animation } from '.';
|
|
|
|
const springOptions: SpringOptions = { stiffness: 58.78, mass: 1, damping: 17.14 };
|
|
const animationOptions: AnimationListOptions = {
|
|
x: { easing: spring(springOptions) },
|
|
y: { easing: spring(springOptions) }
|
|
};
|
|
const animations: {
|
|
mobile: {
|
|
main: Animation;
|
|
reversed: Animation;
|
|
};
|
|
desktop: {
|
|
main: Animation;
|
|
reversed: Animation;
|
|
};
|
|
}[] = [
|
|
{
|
|
mobile: {
|
|
main: animation('#oss-discord', { x: 0, y: 0, rotate: 1 }, animationOptions),
|
|
reversed: animation('#oss-discord', { y: 1200, x: 0, rotate: 1 }, animationOptions)
|
|
},
|
|
desktop: {
|
|
main: animation('#oss-discord', { x: 20, y: '-80vh', rotate: 15 }, animationOptions),
|
|
reversed: animation('#oss-discord', { x: -100, y: '0vh', rotate: 15 }, animationOptions)
|
|
}
|
|
},
|
|
{
|
|
mobile: {
|
|
main: animation('#oss-github', { x: 0, y: -10, rotate: -2 }, animationOptions),
|
|
reversed: animation('#oss-github', { y: 1200, x: 10, rotate: -2 }, animationOptions)
|
|
},
|
|
desktop: {
|
|
main: animation('#oss-github', { x: -100, y: '-55vh', rotate: 6.26 }, animationOptions),
|
|
reversed: animation('#oss-github', { x: 0, y: '0vh', rotate: 6.26 }, animationOptions)
|
|
}
|
|
},
|
|
{
|
|
mobile: {
|
|
main: animation('#oss-twitter', { x: 0, y: 10, rotate: -3 }, animationOptions),
|
|
reversed: animation('#oss-twitter', { y: 1200, x: -10, rotate: -3 }, animationOptions)
|
|
},
|
|
desktop: {
|
|
main: animation('#oss-twitter', { x: 100, y: '-70vh', rotate: -15 }, animationOptions),
|
|
reversed: animation('#oss-twitter', { x: 0, y: '0vh', rotate: -15 }, animationOptions)
|
|
}
|
|
},
|
|
{
|
|
mobile: {
|
|
main: animation('#oss-youtube', { x: 0, y: 5, rotate: 2 }, animationOptions),
|
|
reversed: animation('#oss-youtube', { y: 1200, x: -5, rotate: 2 }, animationOptions)
|
|
},
|
|
desktop: {
|
|
main: animation('#oss-youtube', { x: -100, y: '-55vh', rotate: -3.77 }, animationOptions),
|
|
reversed: animation('#oss-youtube', { x: 0, y: '0vh', rotate: -3.77 }, animationOptions)
|
|
}
|
|
},
|
|
{
|
|
mobile: {
|
|
main: animation('#oss-commits', { x: 0, y: -4, rotate: -1 }, animationOptions),
|
|
reversed: animation('#oss-commits', { y: 1200, x: 4, rotate: -1 }, animationOptions)
|
|
},
|
|
desktop: {
|
|
main: animation('#oss-commits', { x: 100, y: '-80vh', rotate: -10.2 }, animationOptions),
|
|
reversed: animation('#oss-commits', { x: 0, y: '0vh', rotate: -10.2 }, animationOptions)
|
|
}
|
|
}
|
|
];
|
|
|
|
const scrollHandler = createScrollHandler(
|
|
animations.map(({ mobile, desktop }, i) => {
|
|
return {
|
|
percentage: 0.1,
|
|
whenAfter() {
|
|
const { main, reversed } = isMobile() ? mobile : desktop;
|
|
|
|
main.play();
|
|
return reversed.play;
|
|
}
|
|
};
|
|
})
|
|
);
|
|
|
|
const isMobile = () => {
|
|
return window.innerWidth < 1024;
|
|
};
|
|
</script>
|
|
|
|
<div
|
|
id="open-source"
|
|
use:scroll
|
|
on:aw-scroll={({ detail }) => {
|
|
const { percentage } = detail;
|
|
scrollHandler(percentage);
|
|
}}
|
|
on:aw-resize={({ detail }) => {
|
|
scrollHandler.reset();
|
|
const { percentage } = detail;
|
|
|
|
scrollHandler(percentage);
|
|
}}
|
|
>
|
|
<div class="sticky-wrapper">
|
|
<h3 class="aw-display aw-u-color-text-primary">Powered by Open Source</h3>
|
|
|
|
<div class="cards-wrapper">
|
|
<a
|
|
href="https://discord.com/invite/GSeTUeA"
|
|
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical oss-card"
|
|
id="oss-discord"
|
|
>
|
|
<div class="u-flex-vertical u-main-space-between u-gap-32">
|
|
<span class="aw-icon-discord aw-u-font-size-40" aria-hidden="true" aria-label="Discord" />
|
|
</div>
|
|
<div class="aw-title u-margin-block-start-auto">17k+ Discord Members</div>
|
|
</a>
|
|
|
|
<a
|
|
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical oss-card"
|
|
id="oss-github"
|
|
href="https://github.com/appwrite/appwrite"
|
|
>
|
|
<div class="u-flex-vertical u-main-space-between u-gap-32">
|
|
<span class="aw-icon-github aw-u-font-size-40" aria-hidden="true" aria-label="GitHub" />
|
|
</div>
|
|
<div class="aw-title u-margin-block-start-auto">32k+ GitHub Stars</div>
|
|
</a>
|
|
|
|
<a
|
|
href="https://twitter.com/appwrite"
|
|
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical oss-card"
|
|
id="oss-twitter"
|
|
>
|
|
<div class="u-flex-vertical u-main-space-between u-gap-32">
|
|
<span class="aw-icon-x aw-u-font-size-40" aria-hidden="true" aria-label="Twitter" />
|
|
</div>
|
|
<div class="aw-title u-margin-block-start-auto">125k+ Twitter Followers</div>
|
|
</a>
|
|
|
|
<a class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical oss-card" id="oss-youtube">
|
|
<div class="u-flex-vertical u-main-space-between u-gap-32">
|
|
<span class="aw-icon-youtube aw-u-font-size-40" aria-hidden="true" aria-label="YouTube" />
|
|
</div>
|
|
<div class="aw-title u-margin-block-start-auto">3k+ Youtube Subscribers</div>
|
|
</a>
|
|
|
|
<a
|
|
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical oss-card"
|
|
id="oss-commits"
|
|
href="https://github.com/appwrite/appwrite"
|
|
>
|
|
<div class="u-flex-vertical u-main-space-between u-gap-32">
|
|
<span class="aw-icon-github aw-u-font-size-40" aria-hidden="true" aria-label="GitHub" />
|
|
</div>
|
|
<div class="aw-title u-margin-block-start-auto">15k+ Code Commits</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
#open-source {
|
|
height: 1500px;
|
|
position: relative;
|
|
}
|
|
|
|
.sticky-wrapper {
|
|
position: sticky;
|
|
top: 0;
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1.25rem;
|
|
padding-inline: 1.25rem;
|
|
|
|
width: 100%;
|
|
height: 100vh;
|
|
|
|
text-align: center;
|
|
|
|
&::after {
|
|
background: linear-gradient(
|
|
to top,
|
|
hsl(var(--aw-color-background)) 0%,
|
|
hsl(var(--aw-color-background) / 0) 5%
|
|
);
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.cards-wrapper {
|
|
position: relative;
|
|
height: 22.5rem;
|
|
margin-top: 80px;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
h3 {
|
|
max-width: 61.375rem;
|
|
}
|
|
|
|
.cards-wrapper {
|
|
position: absolute;
|
|
height: 100vh;
|
|
width: clamp(1024px, 90vw, 1440px);
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.oss-card {
|
|
background: linear-gradient(
|
|
106deg,
|
|
rgba(255, 255, 255, 0.72) 0%,
|
|
rgba(255, 255, 255, 0.8) 41.9%,
|
|
rgba(255, 255, 255, 0.6) 100%
|
|
);
|
|
backdrop-filter: blur(10px);
|
|
|
|
--card-padding: 2rem;
|
|
|
|
--w: clamp(306px, 50vw, 22.125rem);
|
|
--h: 20.125rem;
|
|
width: var(--w);
|
|
height: var(--h);
|
|
text-align: left;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
position: absolute;
|
|
left: calc(50% - calc(var(--w) / 2));
|
|
transform: translateX(-1200px);
|
|
|
|
[class*='icon'] {
|
|
opacity: 48%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.oss-card {
|
|
left: unset;
|
|
transform: unset;
|
|
}
|
|
|
|
#oss-discord {
|
|
bottom: -400px;
|
|
left: 1%;
|
|
transform: rotate(15deg);
|
|
}
|
|
|
|
#oss-github {
|
|
bottom: -400px;
|
|
left: 19%;
|
|
}
|
|
|
|
#oss-twitter {
|
|
bottom: -400px;
|
|
left: clamp(20%, 22vw, 29%);
|
|
}
|
|
|
|
#oss-youtube {
|
|
bottom: -400px;
|
|
left: clamp(64%, calc(1024px - 10vw), 70%);
|
|
}
|
|
|
|
#oss-commits {
|
|
bottom: -400px;
|
|
right: 10%;
|
|
}
|
|
}
|
|
</style>
|