Skip to content

Commit

Permalink
final commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulduhard
paulduhard committed Aug 13, 2024
1 parent 773e15f commit c69a437
Show file tree
Hide file tree
Showing 8 changed files with 334 additions and 36 deletions.
9 changes: 8 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"@fontsource-variable/dm-sans": "^5.0.6",
"@prismicio/client": "^7.8.0",
"@prismicio/svelte": "^1.2.0",
"clsx": "^2.1.1"
"clsx": "^2.1.1",
"gsap": "^3.12.5"
}
}
2 changes: 1 addition & 1 deletion src/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
body {
font-family: 'DM Sans Variable', sans-serif;
background-image: url('/assets/noise-texture.svg');
@apply grid bg-gray-950 bg-repeat text-gray-50;
@apply grid bg-repeat bg-gray-950 text-gray-50;
}

.glass-container {
Expand Down
99 changes: 98 additions & 1 deletion src/lib/components/TriangleGrid.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,102 @@
<script>
import { onMount } from "svelte";
import gsap from "gsap";
const grid = [14, 30];
onMount(()=> {
const prefersReducedMotion = window.matchMedia('(prefers-prefers-reduced-motion: reduce').matches
if (prefersReducedMotion){
gsap.set("#triangle-grid", { opacity: 1 });
gsap.set('.triangle-grid-item', {
opacity: 0.2,
scale: 1
});
return
}
gsap.set('.triangle-grid-item', {
opacity: 0,
transformOrigin: 'center',
color: '#fff'
});
gsap.set("#triangle-grid", { opacity: 1 });
const tl = gsap.timeline()
// Entrance animation
tl.to(".triangle-grid-item", {
keyframes: [
{
opacity: 0,
duration: 0,
},
{
opacity: 0.4,
rotate: "+=180",
color: "#A78BFA",
scale: 3,
duration: 0.6,
stagger: {
amount: 2,
grid: grid,
from: "center"
}
},
{
opacity: 0.2,
rotate: "+=180",
color: "#fff",
scale: 1,
delay: -2,
duration: 0.6,
stagger: {
amount: 3,
grid: grid,
from: "center"
}
}
]
})
// Loop animation
tl.to(".triangle-grid-item", {
delay: 1,
repeat: -1,
repeatDelay: 12,
keyframes: [
{
opacity: 0.4,
rotate: "+=180",
color: "#A78BFA",
scale: 3,
duration: 0.6,
stagger: {
amount: 2,
grid: grid,
from: "center"
}
},
{
opacity: 0.2,
rotate: "+=180",
color: "#fff",
scale: 1,
delay: -2,
duration: 0.6,
stagger: {
amount: 3,
grid: grid,
from: "center"
}
}
]
})
})
</script>

<svg
Expand All @@ -8,7 +105,7 @@
viewBox="0 0 935 425"
class="absolute -left-2 -top-14 -z-10"
id="triangle-grid"
opacity={1}
opacity={0}
style="mask-image: linear-gradient(black, transparent);"
>
<g class="triangle-grid-group">
Expand Down
64 changes: 57 additions & 7 deletions src/lib/slices/Hero/index.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,88 @@
<script lang="ts">
import { onMount } from 'svelte';
import gsap from 'gsap';
import { PrismicImage, PrismicText } from '@prismicio/svelte';
import Bounded from '$lib/components/Bounded.svelte';
import ButtonLink from '$lib/components/ButtonLink.svelte';
import TriangleGrid from '$lib/components/TriangleGrid.svelte';
import type { Content } from '@prismicio/client';
import { PrismicImage, PrismicText } from '@prismicio/svelte';
export let slice: Content.HeroSlice;
onMount(() => {
const prefersReducedMotion = window.matchMedia('(prefers-prefers-reduced-motion: reduce').matches
if (prefersReducedMotion){
gsap.set('.hero__heading, .hero__body, .hero__button, .hero__image, .hero__glow', {
opacity: 1
})
return
}
const tl = gsap.timeline({ defaults: { ease: 'power2.inOut' } });
tl.fromTo(".hero__heading", {scale:0.5}, {scale:1, duration: 1.4, opacity: 1});
tl.fromTo(".hero__body", {y: 20}, {y: 0, duration: 1.2, opacity: 1}, "-=0.6");
tl.fromTo(".hero__button", {scale:1.5}, {scale:1, opacity: 1, duration: 1.3}, "-=0.8");
tl.fromTo(".hero__image", {y:100}, { y:0, opacity: 1, duration: 1.3}, "+=0.3");
tl.fromTo(".hero__glow", {scale:.5}, {scale:1, opacity: 1, duration: 1.8}, "-=1");
gsap.to(".hero__glow--one", {
ease: 'power2.inOut',
repeat: -1,
repeatDelay: 0,
keyframes: [
{top: "0%", left: "33%", duration: 0},
{top: "33%", left: "33%", duration: 2},
{top: "33%", left: "0%", duration: 3},
{top: "0%", left: "0%", duration: 2},
{top: "0%", left: "33%", duration: 3},
]
});
gsap.to(".hero__glow--two", {
ease: 'power2.inOut',
repeat: -1,
repeatDelay: 0,
keyframes: [
{top: "33%", left: "0%", duration: 0},
{top: "0%", left: "0%", duration: 2},
{top: "0%", left: "33%", duration: 3},
{top: "33%", left: "33%", duration: 2},
{top: "33%", left: "0%", duration: 3},
]
});
})
</script>

<Bounded data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
<div class="relative text-center">
<TriangleGrid />
{#if slice.primary.heading}
<h1 class="mx-auto max-w-3xl text-balance text-5xl font-medium md:text-7xl">
<h1 class="max-w-3xl mx-auto text-5xl font-medium opacity-0 hero__heading text-balance md:text-7xl">
<PrismicText field={slice.primary.heading} />
</h1>
{/if}
{#if slice.primary.body}
<p class="maw-w-md mx-auto mt-6 text-balance text-gray-300">
<p class="mx-auto mt-6 text-gray-300 opacity-0 hero__body maw-w-md text-balance">
<PrismicText field={slice.primary.body} />
</p>
{/if}
{#if slice.primary.button_link}
<ButtonLink class="mt-8" field={slice.primary.button_link}
<ButtonLink class="mt-8 opacity-0 hero__button" field={slice.primary.button_link}
>{slice.primary.button_label}</ButtonLink
>
{/if}
{#if slice.primary.image}
<div class="glass-container mt-16 w-fit">
<div class="mt-16 opacity-0 hero__image glass-container w-fit">
<div
class="absolute left-1/3 top-0 -z-10 h-2/3 w-2/3 bg-violet-700/50 mix-blend-screen blur-[120px] filter"
class="absolute left-1/3 top-0 -z-10 h-2/3 w-2/3 bg-violet-700/50 mix-blend-screen blur-3xl md:blur-[120px] filter opacity-0 hero__glow hero__glow--one"
/>
<div
class="absolute left-0 top-1/3 -z-10 h-2/3 w-2/3 bg-orange-600/50 mix-blend-screen blur-[120px] filter"
class="absolute left-0 top-1/3 -z-10 h-2/3 w-2/3 bg-orange-600/50 mix-blend-screen blur-3xl md:blur-[120px] filter opacity-0 hero__glow hero__glow--two"
/>

<PrismicImage class="rounded-lg" field={slice.primary.image} />
Expand Down
101 changes: 84 additions & 17 deletions src/lib/slices/Integrations/index.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,125 @@
<script lang="ts">
import type { Content } from '@prismicio/client';
import LogoBackground from './LogoBackground.svelte';
import background from './background.jpg';
import Bounded from '$lib/components/Bounded.svelte';
import StylizedLogoMark from './StylizedLogoMark.svelte';
<script>
import { onMount } from 'svelte';
import gsap from 'gsap';
import { PrismicRichText, PrismicText } from '@prismicio/svelte';
import clsx from 'clsx';
import IconNpm from '~icons/fa6-brands/npm';
import IconCloudflare from '~icons/fa6-brands/cloudflare';
import IconGithub from '~icons/fa6-brands/github';
import IconFigma from '~icons/fa6-brands/figma';
import IconDigitalOcean from '~icons/fa6-brands/digital-ocean';
import IconFly from '~icons/fa6-brands/fly';
import IconCloudflare from '~icons/fa6-brands/cloudflare';
import IconDigitalOcean from '~icons/fa6-brands/digital-ocean';
import Bounded from '$lib/components/Bounded.svelte';
import LogoBackground from './LogoBackground.svelte';
import StylizedLogoMark from './StylizedLogoMark.svelte';
export let slice: Content.IntegrationsSlice;
import background from './background.jpg';
const icons = {
npm: IconNpm,
digitalocean: IconDigitalOcean,
cloudflare: IconCloudflare,
npm: IconNpm,
github: IconGithub,
figma: IconFigma,
digitalocean: IconDigitalOcean,
fly: IconFly
};
/** @type {import("@prismicio/client").Content.IntegrationsSlice} */
export let slice;
onMount(() => {
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce').matches;
if (prefersReducedMotion) return;
const tl = gsap.timeline({
repeat: -1,
defaults: { ease: 'power2.inOut' }
});
tl.to('.pulsing-logo', {
keyframes: [
{
filter: 'brightness(2)',
opacity: 1,
duration: 0.4,
ease: 'power2.in'
},
{ filter: 'brightness(1)', opacity: 0.7, duration: 0.9 }
]
});
tl.to(
'.signal-line',
{
keyframes: [
{ backgroundPosition: '0% 0%' },
{
backgroundPosition: '100% 100%',
stagger: { from: 'center', each: 0.3 },
duration: 1
}
]
},
'-=1.4'
);
tl.to(
'.pulsing-icon',
{
keyframes: [
{
opacity: 1,
duration: 1,
stagger: {
from: 'center',
each: 0.3
}
},
{
opacity: 0.4,
duration: 1,
stagger: {
from: 'center',
each: 0.3
}
}
]
},
'-=2'
);
});
</script>

<Bounded
data-slice-type={slice.slice_type}
data-slice-variation={slice.variation}
class="relative overflow-hidden"
>
<img src={background} alt="" class="absolute inset-0 h-full w-full object-cover" />
<img src={background} alt="" class="absolute inset-0 object-cover w-full h-full" />
<LogoBackground />

<div class="relative">
<h2
class="mx-auto max-w-2xl text-balance bg-gradient-to-b from-violet-50 to-violet-300 bg-clip-text py-2 text-center text-5xl font-medium text-transparent md:text-7xl"
class="max-w-2xl py-2 mx-auto text-5xl font-medium text-center text-transparent text-balance bg-gradient-to-b from-violet-50 to-violet-300 bg-clip-text md:text-7xl"
>
<PrismicText field={slice.primary.heading} />
</h2>

<div class="mx-auto mt-6 max-w-md text-balance text-center text-gray-300">
<div class="max-w-md mx-auto mt-6 text-center text-gray-300 text-balance">
<PrismicRichText field={slice.primary.body} />
</div>

<div class="mt-20 flex flex-col items-center md:flex-row">
<div class="flex flex-col items-center mt-20 md:flex-row">
{#each slice.primary.items as item, index}
{#if item.icon}
{#if index === Math.floor(slice.primary.items.length / 2)}
<StylizedLogoMark />
<div class="signal-line rotate-180"></div>
<div class="rotate-180 signal-line"></div>
{/if}
<div
class="pulsing-icon flex aspect-square shrink-0 items-center justify-center rounded-full border border-violet-500/30 bg-violet-50/25 p-3 text-3xl text-violet-100 opacity-40 md:text-3xl lg:text-5xl"
class="flex items-center justify-center p-3 text-3xl border rounded-full pulsing-icon aspect-square shrink-0 border-violet-500/30 bg-violet-50/25 text-violet-100 opacity-40 md:text-3xl lg:text-5xl"
>
<svelte:component this={icons[item.icon]} />
</div>
Expand Down
Loading

0 comments on commit c69a437

Please sign in to comment.