LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-09 12:57:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

experiment

Browse Source
This commit is contained in:
Jesse Winton
2024-07-02 13:54:51 -04:00
parent 5cfba0585d
commit b131b91d32
2 changed files with 50 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/constants.ts
View File

@@ -1,6 +1,7 @@
export const GITHUB_STARS = '41.9K';
export const GITHUB_STARS = '42.2K';
export const BANNER_KEY = 'discord-banner-01'; // Change key to force banner to show again
export const SENTRY_DSN = 'https://27d41dc8bb67b596f137924ab8599e59@o1063647.ingest.us.sentry.io/4507497727000576'
export const SENTRY_DSN =
'https://27d41dc8bb67b596f137924ab8599e59@o1063647.ingest.us.sentry.io/4507497727000576';
/**
* History:

47
src/routes/init-2/Hero.svelte
View File

@@ -1,60 +1,67 @@
<script>
const lines = Array.from({ length: 100 });
<script lang="ts">
const lines = Array.from({ length: 50 });
const randomDelay = (i: number) => Math.floor(Math.random() * i) * 1000;
</script>
<div class="hero">
<div class="lockup">
{#each lines as _, i}
<div class="line" style={`--animation-delay: ${i * 2}ms;top: ${i * 10}px`} />
<div class="line" style={`--animation-delay: ${randomDelay(i)}ms;top: ${i * 100}px`} />
{/each}
</div>
</div>
<style lang="scss">
:root {
--line-width: 5vw;
--line-height: 2px;
--animation-duration: 2s;
}
@keyframes -global-line {
0% {
left: -50%;
left: -10%;
}
100% {
left: 110%;
}
}
.hero {
.lockup {
position: relative;
height: 100vh;
mask-image: url('/images/logos/init.svg');
mask-repeat: no-repeat;
mask-size: contain;
height: 80vh;
flex-grow: 1;
overflow: hidden;
display: flex;
margin: 0 auto;
align-items: center;
.line {
position: absolute;
height: 2px;
height: var(--line-height);
width: 100%;
background: rgba(255, 255, 255, 0.1);
background: transparent;
overflow: hidden;
&::after {
content: '';
display: block;
position: absolute;
height: 2px;
width: 5vw;
width: var(--line-width);
height: var(--line-height);
left: -50%;
top: 0;
will-change: left;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
#fff 75%,
#fff 100%
to left,
rgba(254, 83, 109, 0.75) 0%,
rgba(253, 54, 110, 0.2) 100%
);
animation: line 12s infinite;
animation: line var(--animation-duration) infinite;
animation-fill-mode: forwards;
animation-delay: var(--animation-delay);
animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
}
}
}
}