[c] progress
This commit is contained in:
parent
f1528aa6f9
commit
e8d5dd44eb
15 changed files with 301 additions and 140 deletions
|
|
@ -13,6 +13,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^2.0.0",
|
||||
"@sveltejs/adapter-static": "^2.0.3",
|
||||
"@sveltejs/kit": "^1.20.4",
|
||||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||
"@typescript-eslint/parser": "^6.0.0",
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ html,
|
|||
body,
|
||||
main {
|
||||
font-family: $font-family;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
margin: 0;
|
||||
color: $white;
|
||||
background-color: $space-black;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</script>
|
||||
|
||||
{#key data.pathname}
|
||||
<main in:fly={{ x: 10, duration: 250, delay: 250 }} out:fly={{ x: -5, duration: 250 }}>
|
||||
<main in:fly={{ x: -10, duration: 250, delay: 250 }} out:fly={{ x: 5, duration: 250 }}>
|
||||
<slot />
|
||||
</main>
|
||||
{/key}
|
||||
|
|
|
|||
|
|
@ -5,3 +5,4 @@ export const load = ({ url }) => {
|
|||
pathname
|
||||
};
|
||||
};
|
||||
export const prerender = true
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
</header>
|
||||
<content>
|
||||
<div class="about-text">
|
||||
<h2>Hi! It's me, Sangelo.</h2>
|
||||
<h2>Hi! It's me, <span class="sangelo">Sangelo</span>.</h2>
|
||||
<p>
|
||||
I'm a guy who does stuff.<br />
|
||||
<br />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<script lang='ts'>
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
|
||||
|
||||
function smoothScrollTo(elementId: string) {
|
||||
const element = document.getElementById(elementId);
|
||||
if (element) {
|
||||
|
|
@ -65,6 +67,15 @@
|
|||
<span class="word-sangelo-color">Sangelo</span><br />and I
|
||||
<span class="word-create-color">create</span> things.
|
||||
</h1>
|
||||
<div
|
||||
class="chevron"
|
||||
on:click={()=> smoothScrollTo('about')}
|
||||
on:keydown={handleKeydown}
|
||||
role="button"
|
||||
tabindex=0
|
||||
>
|
||||
<IconChevronDown size="1.6em" />
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,8 @@
|
|||
'in 🏫',
|
||||
'at 🏠',
|
||||
'with <img src="/assets/emojis/vscodium.png" alt="VSCodium" style="height: 18px;"/>',
|
||||
'with <img src="/assets/emojis/stackoverflow.png" alt="StackOverflow" style="height: 18px;"/>'
|
||||
'with <img src="/assets/emojis/stackoverflow.png" alt="StackOverflow" style="height: 18px;"/>',
|
||||
'with <img src="/assets/emojis/svelte.png" alt="Svelte" style="height: 18px;" />'
|
||||
];
|
||||
|
||||
let emoji = '';
|
||||
|
|
@ -89,136 +90,160 @@
|
|||
<div id="socials" class="section">
|
||||
<content>
|
||||
<div class="button-container">
|
||||
<a
|
||||
href="https://discord.com/users/373525255102136341"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="round-button button discord"
|
||||
aria-label="Discord"
|
||||
>
|
||||
<IconDiscord class="icon" size="2.5em" />
|
||||
</a>
|
||||
<a
|
||||
href="https://youtube.com/@Sangeloo"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="round-button button youtube"
|
||||
aria-label="YouTube"
|
||||
>
|
||||
<IconYouTube class="icon" size="3em" />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/SangeloDev"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="round-button button github"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
<IconGitHub class="icon" size="3em" />
|
||||
</a>
|
||||
<a
|
||||
href="mailto:contact@sangelo.space"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="round-button button email"
|
||||
aria-label="Email"
|
||||
>
|
||||
<IconEmailFast class="icon" size="3em" />
|
||||
</a>
|
||||
<div class="tooltip">
|
||||
<a
|
||||
href="https://discord.com/users/373525255102136341"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="round-button button discord"
|
||||
aria-label="Discord"
|
||||
>
|
||||
<IconDiscord class="icon" size="2.5em" />
|
||||
</a>
|
||||
<span class="tooltiptext">@sangelo</span>
|
||||
</div>
|
||||
<div class="tooltip">
|
||||
<a
|
||||
href="https://youtube.com/@Sangeloo"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="round-button button youtube"
|
||||
aria-label="YouTube"
|
||||
>
|
||||
<IconYouTube class="icon" size="3em" />
|
||||
</a>
|
||||
<span class="tooltiptext">@Sangeloo</span>
|
||||
</div>
|
||||
<div class="tooltip">
|
||||
<a
|
||||
href="https://github.com/SangeloDev"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="round-button button github"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
<IconGitHub class="icon" size="3em" />
|
||||
</a>
|
||||
<span class="tooltiptext">/SangeloDev</span>
|
||||
</div>
|
||||
<div class="tooltip">
|
||||
<a
|
||||
href="mailto:contact@sangelo.space"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="round-button button email"
|
||||
aria-label="Email"
|
||||
>
|
||||
<IconEmailFast class="icon" size="3em" />
|
||||
</a>
|
||||
<span class="tooltiptext">contact@sangelo.space</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-container below">
|
||||
{#if showMore}
|
||||
<div class="button-container below" transition:slide>
|
||||
<!-- <div > -->
|
||||
<a href="#top" class="round-button button inactive" aria-label="Inactive" />
|
||||
<a
|
||||
href="https://matrix.to/#/@sangelo:matrix.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="round-button button matrix"
|
||||
aria-label="Matrix"
|
||||
>
|
||||
<IconMatrix class="icon" size="2.5em" />
|
||||
</a>
|
||||
<a
|
||||
href="https://gitpot.dev/Sangelo"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="round-button button gitpot"
|
||||
aria-label="Gitpot"
|
||||
>
|
||||
<!-- <img src="/assets/icons/gitpot.svg" class="icon gitpot" /> -->
|
||||
<!-- <IconGitpot class="icon gitpot"/> -->
|
||||
<svg
|
||||
class="icon gitpot"
|
||||
width="220"
|
||||
height="220"
|
||||
viewBox="0 0 220 220"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<div class="tooltip">
|
||||
<a href="#top" class="round-button button inactive" aria-label="Inactive" />
|
||||
<a
|
||||
href="https://matrix.to/#/@sangelo:matrix.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="round-button button matrix"
|
||||
aria-label="Matrix"
|
||||
>
|
||||
<g clip-path="url(#clip0_309_10)">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M77.039 8.90552L111.492 67.9484C120.704 83.6564 77.5623 84.511 72.6278 75.7048L45.4398 27.2507C42.8514 22.6278 42.3906 17.0945 44.191 12.11C45.9914 7.12537 49.8697 3.19524 54.7915 1.3545L55.3945 1.12769C63.5194 -1.91261 72.6378 1.36534 77.039 8.90552Z"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M150.929 106.236C141.019 106.236 141.019 90.7225 150.929 90.7225H173.605C175.058 90.7225 176.44 90.1425 177.473 89.1089C178.496 88.0649 179.07 86.6677 179.07 85.1994V85.1683C179.07 82.1176 176.624 79.6452 173.605 79.6452H46.3922C43.3738 79.6452 40.9275 82.1176 40.9275 85.1683V85.1994C40.9275 86.6677 41.5014 88.0649 42.5241 89.1089C43.5571 90.1425 44.9395 90.7225 46.3922 90.7225H67.9734C77.8833 90.7225 77.8832 106.236 67.9734 106.236H46.3922C40.8762 106.236 35.5759 104.023 31.6768 100.072C27.7676 96.1314 25.5784 90.7744 25.5784 85.1994V85.1682C25.5784 73.5436 34.901 64.132 46.3922 64.132H173.605C185.096 64.132 194.419 73.5436 194.419 85.1682V85.1994C194.419 90.7744 192.229 96.1313 188.32 100.072C184.421 104.023 179.121 106.236 173.605 106.236H150.929Z"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M84.4197 172.725C78.3108 172.725 72.4576 170.263 68.1388 165.91C63.8201 161.545 61.3962 155.62 61.3962 149.455V71.8896C61.3962 67.5975 64.8343 64.1331 69.0707 64.1331H135.585C141.694 64.1331 147.547 66.5846 151.866 70.9477C156.184 75.3021 158.608 81.2267 158.608 87.4027V118.429C158.608 131.274 148.304 141.699 135.585 141.699C122.865 141.699 112.561 131.274 112.561 118.429V113.257C112.561 111.82 111.415 110.672 110.004 110.672C108.592 110.672 107.446 111.82 107.446 113.257V149.455C107.446 162.3 97.1419 172.725 84.4224 172.725H84.4197Z"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M173.935 101.839C172.104 97.9813 173.711 93.3482 177.528 91.4871C181.344 89.6363 185.928 91.2603 187.77 95.1178C193.204 106.536 196.253 119.329 196.253 132.825C196.253 180.938 157.605 220 110 220C62.3958 220 23.7473 180.938 23.7473 132.825C23.7473 119.329 26.7966 106.536 32.2305 95.1178C34.0721 91.2603 38.6561 89.6364 42.4727 91.4871C46.2894 93.3483 47.8962 97.9813 46.065 101.839C41.6041 111.219 39.0961 121.727 39.0961 132.823C39.0961 172.372 70.8682 204.485 110 204.485C149.132 204.485 180.904 172.373 180.904 132.823C180.904 121.727 178.398 111.219 173.935 101.839Z"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M171.396 204.482C175.633 204.482 179.071 207.957 179.071 212.239C179.071 216.521 175.633 219.995 171.396 219.995H48.6038C44.3674 219.995 40.9293 216.521 40.9293 212.239C40.9293 207.957 44.3674 204.482 48.6038 204.482H171.396Z"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M23.0236 204.482C27.26 204.482 30.6981 207.957 30.6981 212.239C30.6981 216.521 27.26 219.995 23.0236 219.995H7.67452C3.4381 219.995 0 216.521 0 212.239C0 207.957 3.4381 204.482 7.67452 204.482H23.0236Z"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M212.325 204.482C216.562 204.482 220 207.957 220 212.239C220 216.521 216.562 219.995 212.325 219.995H196.976C192.74 219.995 189.302 216.521 189.302 212.239C189.302 207.957 192.74 204.482 196.976 204.482H212.325Z"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_309_10">
|
||||
<rect width="220" height="220" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</a>
|
||||
<IconMatrix class="icon" size="2.5em" />
|
||||
</a>
|
||||
<span class="tooltiptext">@sangelo:matrix.org</span>
|
||||
</div>
|
||||
<div class="tooltip">
|
||||
<a
|
||||
href="https://gitpot.dev/Sangelo"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="round-button button gitpot"
|
||||
aria-label="Gitpot"
|
||||
>
|
||||
<!-- <img src="/assets/icons/gitpot.svg" class="icon gitpot" /> -->
|
||||
<!-- <IconGitpot class="icon gitpot"/> -->
|
||||
<svg
|
||||
class="icon gitpot"
|
||||
width="220"
|
||||
height="220"
|
||||
viewBox="0 0 220 220"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_309_10)">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M77.039 8.90552L111.492 67.9484C120.704 83.6564 77.5623 84.511 72.6278 75.7048L45.4398 27.2507C42.8514 22.6278 42.3906 17.0945 44.191 12.11C45.9914 7.12537 49.8697 3.19524 54.7915 1.3545L55.3945 1.12769C63.5194 -1.91261 72.6378 1.36534 77.039 8.90552Z"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M150.929 106.236C141.019 106.236 141.019 90.7225 150.929 90.7225H173.605C175.058 90.7225 176.44 90.1425 177.473 89.1089C178.496 88.0649 179.07 86.6677 179.07 85.1994V85.1683C179.07 82.1176 176.624 79.6452 173.605 79.6452H46.3922C43.3738 79.6452 40.9275 82.1176 40.9275 85.1683V85.1994C40.9275 86.6677 41.5014 88.0649 42.5241 89.1089C43.5571 90.1425 44.9395 90.7225 46.3922 90.7225H67.9734C77.8833 90.7225 77.8832 106.236 67.9734 106.236H46.3922C40.8762 106.236 35.5759 104.023 31.6768 100.072C27.7676 96.1314 25.5784 90.7744 25.5784 85.1994V85.1682C25.5784 73.5436 34.901 64.132 46.3922 64.132H173.605C185.096 64.132 194.419 73.5436 194.419 85.1682V85.1994C194.419 90.7744 192.229 96.1313 188.32 100.072C184.421 104.023 179.121 106.236 173.605 106.236H150.929Z"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M84.4197 172.725C78.3108 172.725 72.4576 170.263 68.1388 165.91C63.8201 161.545 61.3962 155.62 61.3962 149.455V71.8896C61.3962 67.5975 64.8343 64.1331 69.0707 64.1331H135.585C141.694 64.1331 147.547 66.5846 151.866 70.9477C156.184 75.3021 158.608 81.2267 158.608 87.4027V118.429C158.608 131.274 148.304 141.699 135.585 141.699C122.865 141.699 112.561 131.274 112.561 118.429V113.257C112.561 111.82 111.415 110.672 110.004 110.672C108.592 110.672 107.446 111.82 107.446 113.257V149.455C107.446 162.3 97.1419 172.725 84.4224 172.725H84.4197Z"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M173.935 101.839C172.104 97.9813 173.711 93.3482 177.528 91.4871C181.344 89.6363 185.928 91.2603 187.77 95.1178C193.204 106.536 196.253 119.329 196.253 132.825C196.253 180.938 157.605 220 110 220C62.3958 220 23.7473 180.938 23.7473 132.825C23.7473 119.329 26.7966 106.536 32.2305 95.1178C34.0721 91.2603 38.6561 89.6364 42.4727 91.4871C46.2894 93.3483 47.8962 97.9813 46.065 101.839C41.6041 111.219 39.0961 121.727 39.0961 132.823C39.0961 172.372 70.8682 204.485 110 204.485C149.132 204.485 180.904 172.373 180.904 132.823C180.904 121.727 178.398 111.219 173.935 101.839Z"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M171.396 204.482C175.633 204.482 179.071 207.957 179.071 212.239C179.071 216.521 175.633 219.995 171.396 219.995H48.6038C44.3674 219.995 40.9293 216.521 40.9293 212.239C40.9293 207.957 44.3674 204.482 48.6038 204.482H171.396Z"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M23.0236 204.482C27.26 204.482 30.6981 207.957 30.6981 212.239C30.6981 216.521 27.26 219.995 23.0236 219.995H7.67452C3.4381 219.995 0 216.521 0 212.239C0 207.957 3.4381 204.482 7.67452 204.482H23.0236Z"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M212.325 204.482C216.562 204.482 220 207.957 220 212.239C220 216.521 216.562 219.995 212.325 219.995H196.976C192.74 219.995 189.302 216.521 189.302 212.239C189.302 207.957 192.74 204.482 196.976 204.482H212.325Z"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_309_10">
|
||||
<rect width="220" height="220" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="tooltiptext">/sangelo</span>
|
||||
</div>
|
||||
<a href="#top" class="round-button button inactive" aria-label="Inactive" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<a class="toggle-more" href="#socials" on:click={toggleShowMore} role="button" class:active={showMore}>
|
||||
<div
|
||||
class="toggle-more"
|
||||
on:click={toggleShowMore}
|
||||
on:keydown={handleKeydown}
|
||||
role="button"
|
||||
class:active={showMore}
|
||||
tabindex=0
|
||||
>
|
||||
{#if showMore}
|
||||
Less <IconChevronUp />
|
||||
{:else}
|
||||
More <IconChevronDown />
|
||||
{/if}
|
||||
</a>
|
||||
</div>
|
||||
</content>
|
||||
<footer>
|
||||
<svg
|
||||
|
|
@ -269,7 +294,7 @@
|
|||
<style lang="scss">
|
||||
@import '../styles/socials.scss';
|
||||
|
||||
// .rotate-up {
|
||||
// .rotate-up {
|
||||
// transform: rotate(0deg);
|
||||
// transition: transform 0.3s ease-in-out;
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
align-items: flex-start;
|
||||
text-align: left;
|
||||
flex-direction: column;
|
||||
background-image: url("/assets/img/banner-bg.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: fill;
|
||||
background-position: center, center, 50%, 50%;
|
||||
// background-image: url("/assets/img/banner-bg.svg");
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: fill;
|
||||
// background-position: center, center, 50%, 50%;
|
||||
}
|
||||
|
||||
#about {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
background-color: transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
header h1 {
|
||||
font-size: 4em;
|
||||
font-weight: 700;
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
user-select: text;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
|
||||
header .logo {
|
||||
/* width: 145px;
|
||||
height: 145px; */
|
||||
|
|
@ -29,23 +29,90 @@
|
|||
height: 8em;
|
||||
transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
|
||||
|
||||
header .logo:hover {
|
||||
filter: drop-shadow(0 4px 10px rgba(0, 145, 251, 0.2));
|
||||
}
|
||||
|
||||
|
||||
/* colored words */
|
||||
span.word-hello-world-color {
|
||||
color: $french-sky-blue;
|
||||
}
|
||||
|
||||
|
||||
span.word-sangelo-color {
|
||||
color: $deep-sky-blue;
|
||||
}
|
||||
|
||||
|
||||
span.word-create-color {
|
||||
color: $capri;
|
||||
}
|
||||
|
||||
@import "./mobile/home.scss";
|
||||
}
|
||||
.chevron {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
animation: jump 1.5s ease-in-out 0s infinite normal, fadeInFadeOut 33s ease-in-out 0s infinite normal;
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
20% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
80% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes jump {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
20% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: translateY(-10px);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
60% {
|
||||
-webkit-transform: translateY(-5px);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInFadeOut {
|
||||
0%, 8% { opacity: 0; }
|
||||
9%, 91% { opacity: 1; }
|
||||
92%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@import './mobile/home.scss';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/* layout */
|
||||
.container {
|
||||
height: 100vh;
|
||||
width: auto;
|
||||
scroll-snap-type: y mandatory;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
align-items: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
/* content */
|
||||
|
|
@ -110,6 +109,47 @@
|
|||
.round-button:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: $space-gray-tooltip;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 10px;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 116%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
transition: opacity ease-in-out 0.1s;
|
||||
}
|
||||
|
||||
.tooltiptext {
|
||||
z-index: 1001;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.tooltiptext:hover {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
@ -131,6 +171,5 @@
|
|||
}
|
||||
}
|
||||
|
||||
@import "./mobile/socials.scss";
|
||||
@import './mobile/socials.scss';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ $space-gray: #3e4053;
|
|||
$star-gray: #878894;
|
||||
$white: #ffffff;
|
||||
|
||||
// Tooltip Alpha
|
||||
$space-gray-tooltip: #3e4053b2;
|
||||
|
||||
// Font Family
|
||||
$font-family: 'Manrope', sans-serif;
|
||||
BIN
static/assets/emojis/svelte.png
Normal file
BIN
static/assets/emojis/svelte.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
|
|
@ -1,6 +1,7 @@
|
|||
import adapter from '@sveltejs/adapter-auto';
|
||||
import adapter from '@sveltejs/adapter-static';
|
||||
import { vitePreprocess } from '@sveltejs/kit/vite';
|
||||
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
|
|
@ -11,7 +12,15 @@ const config = {
|
|||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
||||
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||
adapter: adapter()
|
||||
adapter: adapter({
|
||||
// default options are shown. On some platforms
|
||||
// these options are set automatically — see below
|
||||
pages: 'build',
|
||||
assets: 'build',
|
||||
fallback: undefined,
|
||||
precompress: false,
|
||||
strict: true
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -246,6 +246,11 @@
|
|||
dependencies:
|
||||
import-meta-resolve "^4.0.0"
|
||||
|
||||
"@sveltejs/adapter-static@^2.0.3":
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@sveltejs/adapter-static/-/adapter-static-2.0.3.tgz#616836c30bdce4d673a2e26c0f5ffbd5c1bc7c67"
|
||||
integrity sha512-VUqTfXsxYGugCpMqQv1U0LIdbR3S5nBkMMDmpjGVJyM6Q2jHVMFtdWJCkeHMySc6mZxJ+0eZK3T7IgmUCDrcUQ==
|
||||
|
||||
"@sveltejs/kit@^1.20.4":
|
||||
version "1.27.3"
|
||||
resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.27.3.tgz#2e7067fd781d26c194e0da536cf643cbae9b79a2"
|
||||
|
|
|
|||
Loading…
Reference in a new issue