From c36955aa450dd3fa8668e7c91a7822a3c087eb38 Mon Sep 17 00:00:00 2001 From: pml68 Date: Tue, 16 Jan 2024 19:35:26 +0100 Subject: feat: add profile content, socials etc. --- src/app.html | 1 + src/app.scss | 44 +++++++++++++++++++++++++++++++++++++++----- src/lib/socials.json | 16 ++++++++++++++++ src/routes/+page.svelte | 20 ++++++++++++++++++++ 4 files changed, 76 insertions(+), 5 deletions(-) create mode 100644 src/lib/socials.json diff --git a/src/app.html b/src/app.html index db4d6c5..96c3803 100644 --- a/src/app.html +++ b/src/app.html @@ -4,6 +4,7 @@ + %sveltekit.head% diff --git a/src/app.scss b/src/app.scss index 3f2f0a7..a130a86 100644 --- a/src/app.scss +++ b/src/app.scss @@ -1,3 +1,12 @@ +@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600&display=swap'); + +$font-min: 16px; +$font-desired: 2.6vh; +$font-max: 32px; + +$icon-desired: 5.5vh; +$icon-max: 96px; + *{ box-sizing: border-box; margin: 0; @@ -6,10 +15,30 @@ body { background-color: #1e1e2e; - color: #a6fbb2; - font-family: 'Rubik', sans-serif; + color: #ccc; + font-family: 'Space Mono', monospace; width: 100%; overflow: hidden; + font-size: clamp($font-min, $font-desired, $font-max); +} + +.socials { + margin-top: 10px; +} + +.social-icon { + font-size: clamp($font-min, $icon-desired, $icon-max); +} + +a { + color: #ccc; + text-decoration: none; + transition: color .3s ease-in-out; + + :hover { + color: #a6fbb2; + transition: color .3s ease-in-out; + } } .ii { @@ -25,13 +54,18 @@ body { } .container { - height: calc(90dvh - 8dvh); display: flex; + height: 100dvh; align-items: center; justify-content: center; overflow: hidden; - width: 100%; - z-index: 100; + flex-direction: column; +} + +.main { + text-align: left; + line-height: 1.2; + margin: 20px; } .wave { diff --git a/src/lib/socials.json b/src/lib/socials.json new file mode 100644 index 0000000..c5910d0 --- /dev/null +++ b/src/lib/socials.json @@ -0,0 +1,16 @@ +{ + "socials": [ + { + "link": "https://github.com/pml68", + "icon": "fa-github" + }, + { + "link": "https://dev.to/pml68", + "icon": "fa-dev" + }, + { + "link": "https://steamcommunity.com/id/nigmaballs", + "icon": "fa-steam" + } + ] +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 938ebaf..fe36e3f 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -2,6 +2,15 @@ import '../app.scss' import wave1 from '$lib/assets/wave1.svg' import wave2 from '$lib/assets/wave2.svg' + + import { socials } from '$lib/socials.json' + + type Social = { + link: string, + icon: string + } + + const socialsList: Social[] = socials @@ -11,4 +20,15 @@ Wave 1 Wave 2
+
+

pml68

+

Just your average IT student

+
+ {#each socialsList as {link, icon}} + +
+ + {/each} +
+
-- cgit v1.2.3