sangelo/website
sangelo/website
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

[c] progress

Browse source
This commit is contained in:
Sangelo 2023-11-15 20:02:58 +01:00
parent f1528aa6f9
commit e8d5dd44eb
15 changed files with 301 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -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",

4
src/app.scss
View file

@ -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;

2
src/routes/+layout.svelte
View file

@ -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}

1
src/routes/+layout.ts
View file

@ -5,3 +5,4 @@ export const load = ({ url }) => {
pathname
};
};
export const prerender = true

2
src/routes/About.svelte
View file

@ -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 />

11
src/routes/Home.svelte
View file

@ -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>

33
src/routes/Socials.svelte
View file

@ -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
src/styles/about.scss
View file

@ -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 {

69
src/styles/home.scss
View file

@ -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
src/styles/index.scss
View file

@ -1,6 +1,7 @@
/* layout */
.container {
height: 100vh;
width: auto;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}

45
src/styles/socials.scss
View file

@ -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';
}

2
src/variables.scss
View file

@ -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
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

13
svelte.config.js
View file

@ -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
})
}
};

5
yarn.lock
View file

@ -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"