|
|
@ -11,6 +11,13 @@
|
|
|
|
import photo from '../assets/photo.jpg';
|
|
|
|
import photo from '../assets/photo.jpg';
|
|
|
|
import SignalIcon from '../lib/Signal.svelte';
|
|
|
|
import SignalIcon from '../lib/Signal.svelte';
|
|
|
|
import Arrow from '$lib/Arrow.svelte';
|
|
|
|
import Arrow from '$lib/Arrow.svelte';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function scrollBottom() {
|
|
|
|
|
|
|
|
window.scrollTo({
|
|
|
|
|
|
|
|
top: document.body.scrollHeight,
|
|
|
|
|
|
|
|
behavior: 'smooth',
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<svelte:head>
|
|
|
|
<svelte:head>
|
|
|
@ -60,9 +67,9 @@
|
|
|
|
</footer>
|
|
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="absolute bottom-4 h-8 w-8 text-on-primary-token animate-bounce">
|
|
|
|
<button class="absolute bottom-16 h-8 w-8 text-on-primary-token animate-bounce" on:click={scrollBottom}>
|
|
|
|
<Arrow />
|
|
|
|
<Arrow />
|
|
|
|
</div>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="project-gradient mx-auto flex justify-center items-center p-16">
|
|
|
|
<div class="project-gradient mx-auto flex justify-center items-center p-16">
|
|
|
@ -86,13 +93,13 @@
|
|
|
|
background-image: radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
|
|
|
|
background-image: radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
|
|
|
|
radial-gradient(at 98% 1%, rgba(var(--color-success-500) / 0.33) 0px, transparent 50%),
|
|
|
|
radial-gradient(at 98% 1%, rgba(var(--color-success-500) / 0.33) 0px, transparent 50%),
|
|
|
|
radial-gradient(at 0% 100%, rgba(var(--color-success-500) / 0.5) 0px, transparent 50%),
|
|
|
|
radial-gradient(at 0% 100%, rgba(var(--color-success-500) / 0.5) 0px, transparent 50%),
|
|
|
|
radial-gradient(at 100% 100%, rgba(var(--color-error-500) / 0.5) 0px, transparent 50%);
|
|
|
|
radial-gradient(at 100% 100%, rgba(var(--color-warning-500) / 0.5) 0px, transparent 50%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.project-gradient {
|
|
|
|
.project-gradient {
|
|
|
|
background-image: radial-gradient(at 0% 0%, rgba(var(--color-success-500) / 0.5) 0px, transparent 50%),
|
|
|
|
background-image: radial-gradient(at 0% 0%, rgba(var(--color-success-500) / 0.5) 0px, transparent 50%),
|
|
|
|
radial-gradient(at 100% 0%, rgba(var(--color-error-500) / 0.5) 0px, transparent 50%),
|
|
|
|
radial-gradient(at 100% 0%, rgba(var(--color-warning-500) / 0.5) 0px, transparent 50%),
|
|
|
|
radial-gradient(at 0% 100%, rgba(var(--color-warning-500) / 0.5) 0px, transparent 50%),
|
|
|
|
radial-gradient(at 0% 100%, rgba(var(--color-error-500) / 0.5) 0px, transparent 50%),
|
|
|
|
radial-gradient(at 100% 100%, rgba(var(--color-surface-500) / 0.5) 0px, transparent 50%);
|
|
|
|
radial-gradient(at 100% 100%, rgba(var(--color-primary-500) / 0.5) 0px, transparent 50%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|