[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,6 +90,7 @@
|
|||
<div id="socials" class="section">
|
||||
<content>
|
||||
<div class="button-container">
|
||||
<div class="tooltip">
|
||||
<a
|
||||
href="https://discord.com/users/373525255102136341"
|
||||
target="_blank"
|
||||
|
|
@ -98,6 +100,9 @@
|
|||
>
|
||||
<IconDiscord class="icon" size="2.5em" />
|
||||
</a>
|
||||
<span class="tooltiptext">@sangelo</span>
|
||||
</div>
|
||||
<div class="tooltip">
|
||||
<a
|
||||
href="https://youtube.com/@Sangeloo"
|
||||
target="_blank"
|
||||
|
|
@ -107,6 +112,9 @@
|
|||
>
|
||||
<IconYouTube class="icon" size="3em" />
|
||||
</a>
|
||||
<span class="tooltiptext">@Sangeloo</span>
|
||||
</div>
|
||||
<div class="tooltip">
|
||||
<a
|
||||
href="https://github.com/SangeloDev"
|
||||
target="_blank"
|
||||
|
|
@ -116,6 +124,9 @@
|
|||
>
|
||||
<IconGitHub class="icon" size="3em" />
|
||||
</a>
|
||||
<span class="tooltiptext">/SangeloDev</span>
|
||||
</div>
|
||||
<div class="tooltip">
|
||||
<a
|
||||
href="mailto:contact@sangelo.space"
|
||||
target="_blank"
|
||||
|
|
@ -125,11 +136,13 @@
|
|||
>
|
||||
<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 > -->
|
||||
<div class="tooltip">
|
||||
<a href="#top" class="round-button button inactive" aria-label="Inactive" />
|
||||
<a
|
||||
href="https://matrix.to/#/@sangelo:matrix.org"
|
||||
|
|
@ -140,6 +153,9 @@
|
|||
>
|
||||
<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"
|
||||
|
|
@ -208,17 +224,26 @@
|
|||
</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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -47,5 +47,72 @@
|
|||
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