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

Progress

Browse source 
- Mobile Support
- Error Pages
- Socials Page
- Bugfixes
This commit is contained in:
Sangelo 2023-11-06 17:43:37 +01:00
parent c20f66d77d
commit 97a6e003f1
25 changed files with 978 additions and 382 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/app.html
View file

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sangelo's Space</title>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

2
src/app.scss
View file

@ -1,7 +1,7 @@
/* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */
/* imports */
// @use "assets/scrollbar.scss";
// @use "styles/scrollbar.scss";
@import url("https://fonts.cdnfonts.com/css/manrope");
/* general style */

55
src/lib/IconGitpot.svelte Normal file
View file

@ -0,0 +1,55 @@
<!-- <script lang="ts">
export let $$props;
</script> -->
<svg {...$$props} 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>
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

172
src/routes/+error.svelte Normal file
View file

@ -0,0 +1,172 @@
<script lang="ts">
import { page } from '$app/stores';
// Updated descriptions object to handle all 4xx codes
const descriptions: { [key: string]: string } = {
'4xx': 'Looks like you got lost in space. Try searching again at planet earth.',
'500':
'Looks like the website is down at the moment. Please try again later.<br>If the error persists, contact me at contact@sangelo.space',
'200': 'Hello there! 👋',
default: 'An unexpected error has occurred.'
};
// Function updated to handle all 4xx errors
function getErrorDescription(status: number | string) {
const statusString = status.toString();
// Check if the status code is in the 4xx range
if (statusString.startsWith('4') && statusString.length === 3) {
return descriptions['4xx'];
}
return descriptions[statusString] || descriptions.default;
}
$: is400Status = $page.status?.toString().startsWith('4');
$: errorDescription = getErrorDescription($page.status);
</script>
<content>
<div class="text">
<h1>{$page.status}</h1>
{#if $page.error && $page.error.message}
<h2>{$page.error.message}</h2>
{/if}
<p>{@html errorDescription}</p>
{#if is400Status}
<a class="button" href="/">Fly back home</a>
{/if}
</div>
<div class="blob">
<svg
width="686"
height="1080"
viewBox="0 0 686 1080"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g filter="url(#filter0_i_1002_1047)">
<path
d="M88.6758 136C88.6758 34.6337 0 -8.02344 0 -66H686V1146H0C0 1146 88.6758 1044.94 88.6758 944C88.6758 843.064 0 843.419 0 742.582C0 641.745 88.6758 641.124 88.6758 540C88.6758 438.876 0 439.674 0 338.938C0 238.201 88.6758 237.366 88.6758 136Z"
fill="url(#paint0_radial_1002_1047)"
/>
</g>
<defs>
<filter
id="filter0_i_1002_1047"
x="0"
y="-66"
width="689"
height="1214"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dx="3" dy="2" />
<feGaussianBlur stdDeviation="4" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0" />
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1002_1047" />
</filter>
<radialGradient
id="paint0_radial_1002_1047"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(32 540) scale(654 3651.84)"
>
<stop offset="0.34828" stop-color="#00B2FA" />
<stop offset="1" stop-color="#007DFF" />
</radialGradient>
</defs>
</svg>
</div>
</content>
<style lang="scss">
content {
display: flex;
justify-content: space-between;
align-items: stretch;
height: 100vh;
background-color: $space-black;
color: white;
z-index: 1;
}
.text {
flex: 1 1 50%;
padding: 2em;
overflow: auto;
font-family: $font-family;
z-index: 3;
h1 {
font-size: 80px;
margin-bottom: 0;
margin-top: 0.2em;
font-weight: 800;
}
h2 {
font-size: 40px;
font-weight: 500;
margin-top: 0;
}
p {
font-weight: 300;
font-size: 22px;
margin-bottom: 2em;
}
a.button {
text-decoration: none;
background-color: $white;
padding: 0.6em;
padding-left: 1.5em;
padding-right: 1.5em;
border-radius: 8px;
color: $space-black;
font-weight: 700;
transition: opacity ease-in-out 0.3;
}
a.button:hover {
opacity: 0.9;
}
a.button:active {
opacity: 0.8;
}
}
.blob {
position: relative;
flex: 1 1 50%;
height: 100vh;
svg {
height: 100vh;
width: auto;
position: absolute;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
z-index: 2;
}
}
@media (max-width: 850px) {
.blob {
display: none;
}
}
</style>

270
src/routes/+page.svelte
View file

@ -1,269 +1,19 @@
<script lang="ts">
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
// Icons
import IconDiscord from 'svelte-material-icons/Discord.svelte';
import IconYouTube from 'svelte-material-icons/Youtube.svelte';
import IconGitHub from 'svelte-material-icons/Github.svelte';
import IconEmailFast from 'svelte-material-icons/EmailFast.svelte';
const emojis = [
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ☕️',
'with 🍵',
'with 🍪',
'with 💤',
'with passion',
'on a 💻',
'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;"/>'
];
import Home from './Home.svelte';
import About from './About.svelte';
import Projects from './Projects.svelte';
import Socials from './Socials.svelte';
let emoji = '';
function changeEmoji() {
emoji = emojis[Math.floor(Math.random() * emojis.length)];
}
onMount(() => {
changeEmoji();
});
function smoothScrollTo(elementId: string) {
const element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({
behavior: 'smooth'
});
}
}
function redirectToHome() {
// goto('/');
smoothScrollTo('home');
}
function handleKeydown(event: KeyboardEvent) {
// Trigger redirection on Enter key or Space bar
if (event.key === 'Enter' || event.key === ' ') {
redirectToHome();
}
}
function openWebsite(url: string) {
goto(url);
}
</script>
<div class="container">
<div id="home" class="section">
<header>
<div class="svg-container">
<svg
class="logo"
width="145px"
height="145px"
viewBox="0 0 145 145"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask
id="mask0_1404_2"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="27"
y="0"
width="90"
height="145"
>
<path
d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
fill="#131313"
/>
</mask>
<g mask="url(#mask0_1404_2)">
<rect width="144.6" height="36.15" fill="#00C4FB" />
<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
</g>
</svg>
</div>
<h1>
<span class="word-hello-world-color">Hello World</span>, I'm
<span class="word-sangelo-color">Sangelo</span><br />and I
<span class="word-create-color">create</span> things.
</h1>
</header>
</div>
<div id="about" class="section">
<header>
<svg
role="button"
class="logo"
width="145px"
height="145px"
viewBox="0 0 145 145"
fill="none"
xmlns="http://www.w3.org/2000/svg"
tabindex="0"
on:click={redirectToHome}
on:keydown={handleKeydown}
>
<mask
id="mask0_1404_2"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="27"
y="0"
width="90"
height="145"
>
<path
d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
fill="#131313"
/>
</mask>
<g mask="url(#mask0_1404_2)">
<rect width="144.6" height="36.15" fill="#00C4FB" />
<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
</g>
</svg>
<h1 class="no-select">About me</h1>
</header>
<content>
<div class="about-text">
<h2>Hi! It's me, Sangelo.</h2>
<p>
I'm a guy who does stuff.<br />
<br />
I enjoy creating a variety of things, including UI prototypes, scripts, and programs. Although
I'm new to programming, I love learning new languages. I support open-source software and design
my workflow around it, using Linux and self-hosted tools daily.
</p>
</div>
</content>
</div>
<div id="projects" class="section">
<header>
<svg
role="button"
class="logo"
width="145px"
height="145px"
viewBox="0 0 145 145"
fill="none"
xmlns="http://www.w3.org/2000/svg"
tabindex="0"
on:click={redirectToHome}
on:keydown={handleKeydown}
>
<mask
id="mask0_1404_2"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="27"
y="0"
width="90"
height="145"
>
<path
d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
fill="#131313"
/>
</mask>
<g mask="url(#mask0_1404_2)">
<rect width="144.6" height="36.15" fill="#00C4FB" />
<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
</g>
</svg>
<h1 class="no-select">Projects</h1>
</header>
</div>
<div id="socials" class="section">
<content>
<div class="button-container">
<a href="https://discord.com/users/373525255102136341" class="round-button button discord" aria-label="Discord">
<IconDiscord size="2.5em"/>
</a>
<a href="https://youtube.com/@Sangeloo" class="round-button button youtube" aria-label="YouTube">
<IconYouTube size="3em"/>
</a>
<a href="https://github.com/SangeloDev" class="round-button button github" aria-label="GitHub">
<IconGitHub size="3em"/>
</a>
<a href="mailto:contact@sangelo.space" class="round-button button email" aria-label="Email">
<IconEmailFast size="3em"/>
</a>
</div>
</content>
<footer>
<svg
role="button"
class="logo"
width="145px"
height="145px"
viewBox="0 0 145 145"
fill="none"
xmlns="http://www.w3.org/2000/svg"
tabindex="0"
on:click={redirectToHome}
on:keydown={handleKeydown}
>
<mask
id="mask0_1404_2"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="27"
y="0"
width="90"
height="145"
>
<path
d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
fill="#131313"
/>
</mask>
<g mask="url(#mask0_1404_2)">
<rect width="144.6" height="36.15" fill="#00C4FB" />
<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
</g>
</svg>
<p class="no-select footer footer-credits">&copy; Sangelo 2023-2024, All rights reserved.</p>
<p class="no-select footer footer-text">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
Designed and developed <span class="dynamic-icon" on:click={() => openWebsite("https://sangelo.space")}>{@html emoji}</span> by Sangelo.
</p>
</footer>
</div>
<Home />
<About />
<Projects />
<Socials />
</div>
<style lang="scss">
@import '../assets/index.scss';
@import '../assets/about.scss';
@import '../assets/projects.scss';
@import '../assets/socials.scss';
</style>
@import '../styles/index.scss';
</style>

83
src/routes/About.svelte Normal file
View file

@ -0,0 +1,83 @@
<script lang="ts">
import { goto } from '$app/navigation';
function smoothScrollTo(elementId: string) {
const element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({
behavior: 'smooth'
});
}
}
function redirectToHome() {
// goto('/');
smoothScrollTo('home');
}
function handleKeydown(event: KeyboardEvent) {
// Trigger redirection on Enter key or Space bar
if (event.key === 'Enter' || event.key === ' ') {
redirectToHome();
}
}
function openWebsite(url: string) {
goto(url);
}
</script>
<div id="about" class="section">
<header>
<svg
role="button"
class="logo"
width="145px"
height="145px"
viewBox="0 0 145 145"
fill="none"
xmlns="http://www.w3.org/2000/svg"
tabindex="0"
on:click={redirectToHome}
on:keydown={handleKeydown}
>
<mask
id="mask0_1404_2"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="27"
y="0"
width="90"
height="145"
>
<path
d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
fill="#131313"
/>
</mask>
<g mask="url(#mask0_1404_2)">
<rect width="144.6" height="36.15" fill="#00C4FB" />
<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
</g>
</svg>
<h1 class="no-select">About me</h1>
</header>
<content>
<div class="about-text">
<h2>Hi! It's me, Sangelo.</h2>
<p>
I'm a guy who does stuff.<br />
<br />
I enjoy creating a variety of things, including UI prototypes, scripts, and programs. Although
I'm new to programming, I love learning new languages. I support open-source software and design
my workflow around it, using Linux and self-hosted tools daily.
</p>
</div>
</content>
</div>
<style lang="scss">
@import '../styles/about.scss';
</style>

74
src/routes/Home.svelte Normal file
View file

@ -0,0 +1,74 @@
<script lang='ts'>
import { goto } from '$app/navigation';
function smoothScrollTo(elementId: string) {
const element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({
behavior: 'smooth'
});
}
}
function redirectToHome() {
// goto('/');
smoothScrollTo('home');
}
function handleKeydown(event: KeyboardEvent) {
// Trigger redirection on Enter key or Space bar
if (event.key === 'Enter' || event.key === ' ') {
redirectToHome();
}
}
function openWebsite(url: string) {
goto(url);
}
</script>
<div id="home" class="section">
<header>
<div class="svg-container">
<svg
class="logo"
width="145px"
height="145px"
viewBox="0 0 145 145"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask
id="mask0_1404_2"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="27"
y="0"
width="90"
height="145"
>
<path
d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
fill="#131313"
/>
</mask>
<g mask="url(#mask0_1404_2)">
<rect width="144.6" height="36.15" fill="#00C4FB" />
<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
</g>
</svg>
</div>
<h1>
<span class="word-hello-world-color">Hello World</span>, I'm
<span class="word-sangelo-color">Sangelo</span><br />and I
<span class="word-create-color">create</span> things.
</h1>
</header>
</div>
<style lang="scss">
@import '../styles/index.scss';
@import '../styles/home.scss';
</style>

14
src/routes/Navbar.svelte
View file

@ -1,4 +1,4 @@
<script lang="ts">
<!-- <script lang="ts">
import { onMount } from 'svelte';
import { writable } from 'svelte/store';
@ -36,15 +36,15 @@
smoothScrollTo('home');
}
}
</script>
</script> -->
<ul class="dial-navbar">
<!-- <ul class="dial-navbar">
<li class="page" id="home" on:click={() => smoothScrollTo('home')} class:active={$activeSection === 'home'}>Home</li>
<li class="page" id="about" on:click={() => smoothScrollTo('about')} class:active={$activeSection === 'about'}>About</li>
<li class="page" id="projects" on:click={() => smoothScrollTo('projects')} class:active={$activeSection === 'projects'}>Projects</li>
<li class="page" id="socials" on:click={() => smoothScrollTo('socials')} class:active={$activeSection === 'socials'}>Socials</li>
</ul>
</ul> -->
<!--
<style lang="scss">
@import "../assets/navbar.scss";
</style>
@import "../styles/navbar.scss";
</style> -->

71
src/routes/Projects.svelte Normal file
View file

@ -0,0 +1,71 @@
<script lang="ts">
import { goto } from '$app/navigation';
function smoothScrollTo(elementId: string) {
const element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({
behavior: 'smooth'
});
}
}
function redirectToHome() {
// goto('/');
smoothScrollTo('home');
}
function handleKeydown(event: KeyboardEvent) {
// Trigger redirection on Enter key or Space bar
if (event.key === 'Enter' || event.key === ' ') {
redirectToHome();
}
}
function openWebsite(url: string) {
goto(url);
}
</script>
<div id="projects" class="section">
<header>
<svg
role="button"
class="logo"
width="145px"
height="145px"
viewBox="0 0 145 145"
fill="none"
xmlns="http://www.w3.org/2000/svg"
tabindex="0"
on:click={redirectToHome}
on:keydown={handleKeydown}
>
<mask
id="mask0_1404_2"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="27"
y="0"
width="90"
height="145"
>
<path
d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
fill="#131313"
/>
</mask>
<g mask="url(#mask0_1404_2)">
<rect width="144.6" height="36.15" fill="#00C4FB" />
<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
</g>
</svg>
<h1 class="no-select">Projects</h1>
</header>
</div>
<style lang='scss'>
@import '../styles/projects.scss';
</style>

281
src/routes/Socials.svelte Normal file
View file

@ -0,0 +1,281 @@
<script lang="ts">
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { slide } from 'svelte/transition';
// Icons
import IconDiscord from 'svelte-material-icons/Discord.svelte';
import IconYouTube from 'svelte-material-icons/Youtube.svelte';
import IconGitHub from 'svelte-material-icons/Github.svelte';
import IconEmailFast from 'svelte-material-icons/EmailFast.svelte';
import IconMatrix from 'svelte-material-icons/Matrix.svelte';
// import IconGitpot from '$lib/IconGitpot.svelte';
import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
import IconChevronUp from 'svelte-material-icons/ChevronUp.svelte';
// Initialisations
let showMore = false;
const emojis = [
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ☕️',
'with 🍵',
'with 🍪',
'with 💤',
'with passion',
'on a 💻',
'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;"/>'
];
let emoji = '';
// Functions
function changeEmoji() {
emoji = emojis[Math.floor(Math.random() * emojis.length)];
}
function toggleShowMore() {
showMore = !showMore;
}
onMount(() => {
changeEmoji();
});
function smoothScrollTo(elementId: string) {
const element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({
behavior: 'smooth'
});
}
}
function redirectToHome() {
// goto('/');
smoothScrollTo('home');
}
function handleKeydown(event: KeyboardEvent) {
// Trigger redirection on Enter key or Space bar
if (event.key === 'Enter' || event.key === ' ') {
redirectToHome();
}
}
function openWebsite(url: string) {
goto(url);
}
</script>
<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>
<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"
>
<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>
<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}>
{#if showMore}
Less <IconChevronUp />
{:else}
More <IconChevronDown />
{/if}
</a>
</content>
<footer>
<svg
role="button"
class="logo"
width="145px"
height="145px"
viewBox="0 0 145 145"
fill="none"
xmlns="http://www.w3.org/2000/svg"
tabindex="0"
on:click={redirectToHome}
on:keydown={handleKeydown}
>
<mask
id="mask0_1404_2"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="27"
y="0"
width="90"
height="145"
>
<path
d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
fill="#131313"
/>
</mask>
<g mask="url(#mask0_1404_2)">
<rect width="144.6" height="36.15" fill="#00C4FB" />
<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
</g>
</svg>
<p class="no-select footer footer-credits">&copy; Sangelo 2023-2024, All rights reserved.</p>
<p class="no-select footer footer-text">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
Designed and developed
<span class="dynamic-icon" on:click={() => openWebsite('https://sangelo.space')}
>{@html emoji}</span
> by Sangelo.
</p>
</footer>
</div>
<style lang="scss">
@import '../styles/socials.scss';
// .rotate-up {
// transform: rotate(0deg);
// transition: transform 0.3s ease-in-out;
// }
// .rotate-down {
// transform: rotate(180deg);
// transition: transform 0.3s ease-in-out;
// }
</style>

67
src/routes/about/+page.svelte
View file

@ -1,67 +0,0 @@
<script lang="ts">
import { goto } from '$app/navigation';
function redirectToHome() {
goto('/');
}
function handleKeydown(event: KeyboardEvent) {
// Trigger redirection on Enter key or Space bar
if (event.key === 'Enter' || event.key === ' ') {
redirectToHome();
}
}
</script>
<header>
<svg
role="button"
class="logo"
width="145px"
height="145px"
viewBox="0 0 145 145"
fill="none"
xmlns="http://www.w3.org/2000/svg"
tabindex="0"
on:click={redirectToHome}
on:keydown={handleKeydown}
>
<mask
id="mask0_1404_2"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="27"
y="0"
width="90"
height="145"
>
<path
d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
fill="#131313"
/>
</mask>
<g mask="url(#mask0_1404_2)">
<rect width="144.6" height="36.15" fill="#00C4FB" />
<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
</g>
</svg>
<h1 class="no-select">About me</h1>
</header>
<content>
<div class="about-text">
<h2>Hi! It's me, Sangelo.</h2>
<p>
I'm a guy who does stuff. I enjoy creating a variety of things, including UI prototypes,
scripts, and programs. Although I'm new to programming, I love learning new languages. I
support open-source software and design my workflow around it, using Linux and self-hosted
tools daily.
</p>
</div>
</content>
<style lang="scss">
@import '../../assets/about.scss';
</style>

22
src/assets/about.scss → src/styles/about.scss
View file

@ -1,12 +1,17 @@
// about.scss
.container #about {
display: flex; // reaffirming flex, if needed
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
height: 100vh;
.section {
height: 100vh;
scroll-snap-align: start;
display: flex;
justify-content: flex-start;
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%;
}
#about {
@ -35,8 +40,11 @@
margin-left: 6em;
.about-text {
z-index: 2;
align-self: center;
font-size: 24px;
white-space: word-break;
}
}
@import "./mobile/about.scss";
}

19
src/assets/index.scss → src/styles/home.scss
View file

@ -1,19 +1,3 @@
/* layout */
.container {
height: 100vh;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.section {
height: 100vh;
scroll-snap-align: start;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
/* content style */
#home {
@ -50,7 +34,6 @@
filter: drop-shadow(0 4px 10px rgba(0, 145, 251, 0.2));
}
/* colored words */
span.word-hello-world-color {
color: $french-sky-blue;
@ -63,4 +46,6 @@
span.word-create-color {
color: $capri;
}
@import "./mobile/home.scss";
}

15
src/styles/index.scss Normal file
View file

@ -0,0 +1,15 @@
/* layout */
.container {
height: 100vh;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.section {
height: 100vh;
scroll-snap-align: start;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

22
src/styles/mobile/about.scss Normal file
View file

@ -0,0 +1,22 @@
@import "./mobile-header.scss";
@media (max-width: 850px) {
.section {
background-image: none;
background-color: $space-black;
}
content {
display: flex;
height: 80%;
width: auto;
margin-left: 2em;
margin-right: 2em;
.about-text {
align-self: center;
font-size: 18px;
white-space: word-break;
}
}
}

15
src/styles/mobile/home.scss Normal file
View file

@ -0,0 +1,15 @@
@media (max-width: 850px) {
header h1 {
font-size: 3em;
font-weight: 600;
text-align: center;
user-select: text;
cursor: text;
}
header .logo {
width: 5em;
height: 5em;
transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
}

11
src/styles/mobile/mobile-header.scss Normal file
View file

@ -0,0 +1,11 @@
@media (max-width: 850px) {
header {
margin: 1.5em;
svg.logo {
margin-right: 1em;
height: 3em;
width: 3em;
}
}
}

5
src/styles/mobile/projects.scss Normal file
View file

@ -0,0 +1,5 @@
@import "./mobile-header.scss";
@media (max-width: 850px) {
}

28
src/styles/mobile/socials.scss Normal file
View file

@ -0,0 +1,28 @@
@media (max-width: 850px) {
content {
.round-button {
width: 4.5em;
height: 4.5em;
}
.button-container {
gap: 1em;
margin-top: 10em;
margin-bottom: 1em;
}
}
footer {
margin: 1em;
svg.logo {
height: 2em;
width: 2em;
cursor: pointer;
}
.footer {
font-size: 14px;
}
}
}

0
src/assets/navbar.scss → src/styles/navbar.scss
View file

20
src/assets/projects.scss → src/styles/projects.scss
View file

@ -1,10 +1,14 @@
.container #projects {
display: flex; // reaffirming flex, if needed
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
height: 100vh;
/* layout */
.section {
height: 100vh;
scroll-snap-align: start;
display: flex;
justify-content: flex-start;
align-items: flex-start;
text-align: center;
flex-direction: column;
}
#projects {
@ -32,4 +36,6 @@
width: 60em;
margin-left: 6em;
}
@import "./mobile/projects.scss";
}

76
src/assets/socials.scss → src/styles/socials.scss
View file

@ -1,26 +1,52 @@
.container #socials {
display: flex; // reaffirming flex, if needed
flex-direction: column;
justify-content: flex-end;
align-items: flex-center;
text-align: center;
/* layout */
.section {
height: 100vh;
scroll-snap-align: start;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
}
/* content */
#socials {
content {
display: flex;
height: 80%;
width: 60em;
justify-content: center;
align-content: center;
flex-direction: column;
.button-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 2em;
margin-top: 10em;
margin-bottom: 2em;
}
.button-container.below {
margin: 0;
flex-direction: row;
}
.toggle-more {
color: $star-gray;
cursor: pointer;
transition: transform 0.3s ease-in-out;
text-decoration: none;
align-self: center;
width: 4em;
}
.toggle-more.active {
margin-top: 2em;
}
.round-button {
@ -36,6 +62,13 @@
transition: ease-in-out 0.1s;
}
.icon {
--shadow: rgba(0, 0, 0, 0.544);
box-shadow: 7px 9px 38px -10px var(--shadow);
-webkit-box-shadow: 7px 9px 38px -10px var(--shadow);
-moz-box-shadow: 7px 9px 38px -10px var(--shadow);
}
.button.discord {
background: linear-gradient(162deg, #6d85d8 24.09%, #4a68cc 89.49%);
}
@ -52,6 +85,24 @@
background: linear-gradient(158deg, #ec8f5a 55.62%, #ffaf37 90.01%);
}
.button.matrix {
background: linear-gradient(145deg, rgb(12, 163, 165) 25%, rgb(19, 174, 122) 100%);
}
.button.gitpot {
background: radial-gradient(103.52% 103.52% at 34.04% 26.17%, #fa7042 24.28%, #d23652 120%);
.icon.gitpot {
height: 2.7em;
box-shadow: none;
}
}
.button.inactive {
background: transparent;
display: none;
}
.round-button:hover {
opacity: 0.9;
}
@ -70,10 +121,6 @@
cursor: pointer;
}
h1 {
margin: 0px;
}
.footer {
font-size: 18px;
}
@ -82,9 +129,8 @@
font-weight: 800;
margin-bottom: -0.7em;
}
.emoji {
height: 18px;
}
}
@import "./mobile/socials.scss";
}

3
src/variables.scss
View file

@ -8,7 +8,8 @@ $capri: #00c4fb;
$light-capri: #45d3fa;
$space-black: #121316;
$space-cadet: #2b2d42;
$space-grey: #3e4053;
$space-gray: #3e4053;
$star-gray: #878894;
$white: #ffffff;

16
static/assets/icons/gitpot.svg Normal file
View file

@ -0,0 +1,16 @@
<svg 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>
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

18
static/assets/img/banner-bg.svg Normal file
View file

@ -0,0 +1,18 @@
<svg width="1920" height="470" viewBox="0 0 1920 470" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1705_2)">
<rect width="1920" height="117.5" fill="#00C4FB"/>
<rect y="117.5" width="1920" height="117.5" fill="#00B1FA"/>
<rect y="235" width="1920" height="117.5" fill="#0091FB"/>
<rect y="352.5" width="1920" height="117.5" fill="#0075F7"/>
<rect width="1920" height="470" fill="url(#paint0_linear_1705_2)"/>
</g>
<defs>
<linearGradient id="paint0_linear_1705_2" x1="-8.94069e-06" y1="235" x2="1920" y2="235" gradientUnits="userSpaceOnUse">
<stop offset="0.722036" stop-color="#121316"/>
<stop offset="1" stop-color="#121316" stop-opacity="0.44"/>
</linearGradient>
<clipPath id="clip0_1705_2">
<rect width="1920" height="470" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 797 B