diff options
| author | pml68 <tutorialmester@gmail.com> | 2024-01-16 19:35:26 +0100 |
|---|---|---|
| committer | pml68 <tutorialmester@gmail.com> | 2024-01-16 19:35:26 +0100 |
| commit | c36955aa450dd3fa8668e7c91a7822a3c087eb38 (patch) | |
| tree | e437da8f865e0b158346b6f9ac0fe0c9ccbf6eea /src | |
| parent | feat: make max size for waves bigger (diff) | |
| download | pml68.dev-c36955aa450dd3fa8668e7c91a7822a3c087eb38.tar.gz | |
feat: add profile content, socials etc.
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.html | 1 | ||||
| -rw-r--r-- | src/app.scss | 44 | ||||
| -rw-r--r-- | src/lib/socials.json | 16 | ||||
| -rw-r--r-- | src/routes/+page.svelte | 20 |
4 files changed, 76 insertions, 5 deletions
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 @@ <meta charset="utf-8" /> <link rel="icon" href="%sveltekit.assets%/pml68.png" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"> %sveltekit.head% </head> <body data-sveltekit-preload-data="hover"> 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 </script> <svelte:head> @@ -11,4 +20,15 @@ <img src={wave1} alt="Wave 1" class="wave wave1"> <img src={wave2} alt="Wave 2" class="wave wave2"> <div class="container"> + <div class="main"> + <h1>pml68</h1> + <p>Just your average IT student</p> + <div class="socials"> + {#each socialsList as {link, icon}} + <a href={link} target="_blank"> + <div class={'social-icon fa-brands ' + icon}></div> + </a> + {/each} + </div> + </div> </div> |