Skip to content

Commit

Permalink
✨ Added some animations && Updated description
Browse files Browse the repository at this point in the history
  • Loading branch information
@nwrenger
nwrenger committed Apr 6, 2024
1 parent c2c832e commit 69dd642
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 63 deletions.
1 change: 0 additions & 1 deletion src/lib/index.ts
View file

This file was deleted.

6 changes: 6 additions & 0 deletions src/lib/utils.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// Get random Integer in Range function, js doesn't have a native function for that...
export function getRandomInt(min: number, max: number): number {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
71 changes: 42 additions & 29 deletions src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,55 +6,68 @@
type PopupSettings,
AppShell,
LightSwitch,
storePopup
storePopup,
setInitialClassState
} from '@skeletonlabs/skeleton';
import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
import { fade } from 'svelte/transition';
import { onMount } from 'svelte';
storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
const profile: PopupSettings = {
event: 'click',
target: 'profileContents',
placement: 'bottom'
};
let mounted = false;
onMount(() => (mounted = true));
</script>

<svelte:head>{@html '<script>(' + setInitialClassState.toString() + ')();</script>'}</svelte:head>

<!-- App Shell -->
<AppShell>
<svelte:fragment slot="pageHeader">
<!-- Page Container -->
<div class="page-container !max-w-6xl mx-auto grid grid-cols-[1fr_auto] items-center gap-4 p-4">
<button type="button" class="btn-icon" use:popup={profile} title="profile">
<img class=" max-w-full rounded-sm aspect-square shadow-xl" src="/favicon.png" alt="nw" />
</button>
{#if mounted}
<div
class="page-container !max-w-6xl mx-auto grid grid-cols-[1fr_auto] items-center gap-4 p-4"
in:fade={{ duration: 200, delay: 0 }}
>
<button type="button" class="btn-icon" use:popup={profile} title="profile">
<img class=" max-w-full rounded-sm aspect-square shadow-xl" src="/favicon.png" alt="nw" />
</button>

<div class="card p-4 w-72 shadow-xl" data-popup="profileContents">
<div class="space-y-4">
<div>
<p class="font-bold">Nils Wrenger</p>
<p class="opacity-50">nwrenger</p>
</div>
<p>Hi, I use Fedora OS and have skills in programming with Rust btw</p>
<div class="flex gap-4">
<small><strong>9</strong> <span class="opacity-50">Followers</span></small>
<small><strong>11</strong> <span class="opacity-50">Following</span></small>
<div class="card p-4 w-72 shadow-xl" data-popup="profileContents">
<div class="space-y-4">
<div>
<p class="font-bold">Nils Wrenger</p>
<p class="opacity-50">nwrenger</p>
</div>
<p>Hi, I use Fedora OS and have skills in programming with Rust btw</p>
<div class="flex gap-4">
<small><strong>9</strong> <span class="opacity-50">Followers</span></small>
<small><strong>11</strong> <span class="opacity-50">Following</span></small>
</div>
<a
class="btn variant-soft w-full"
href="https://github.com/nwrenger"
target="_blank"
rel="noreferrer"
>
View on Github
</a>
</div>
<a
class="btn variant-soft w-full"
href="https://github.com/nwrenger"
target="_blank"
rel="noreferrer"
>
View on Github
</a>
<div class="arrow bg-surface-100-800-token" />
</div>
<div class="arrow bg-surface-100-800-token" />
<LightSwitch
class="bg-surface-50/50 dark:bg-surface-900/50 backdrop-blur-xl shadow-xl"
ring="ring-none"
/>
</div>
<LightSwitch
class="bg-surface-50/50 dark:bg-surface-900/50 backdrop-blur-xl shadow-xl"
ring="ring-none"
/>
</div>
{/if}
</svelte:fragment>
<!-- Page Route Content -->
<slot />
Expand Down
93 changes: 60 additions & 33 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
<script>
<script lang="ts">
import { getRandomInt } from '$lib/utils';
import { onMount } from 'svelte';
import { fade, fly, slide } from 'svelte/transition';
let projects = [
{
title: 'console-utils-rs',
Expand Down Expand Up @@ -37,7 +41,7 @@
},
{
title: 'omega',
description: 'A performant terminal-based file editor with extensive shortcuts',
description: 'A performant terminal-based project editor with extensive shortcuts',
href: 'https://github.com/nwrenger/omega'
},
{
Expand Down Expand Up @@ -71,6 +75,9 @@
href: 'https://github.com/nwrenger/shitboard'
}
];
let mounted = false;
onMount(() => (mounted = true));
</script>

<svelte:head>
Expand All @@ -81,39 +88,59 @@
/>
</svelte:head>

<div class="container space-y-8 flex flex-col items-center !max-w-6xl mx-auto p-4">
<h1 class="h1">Hi, there!</h1>
{#if mounted}
<div class="container space-y-8 flex flex-col items-center !max-w-6xl mx-auto p-4">
<h1 class="h1" in:fade={{ duration: 200, delay: 200 }}>Hi, there!</h1>

<p class="text-center">
I'm Nils, a high school student passionate about coding, particularly in <a
href="https://www.rust-lang.org/"
class="anchor"
target="_blank">Rust</a
<p class="text-center" in:fade={{ duration: 200, delay: 400 }}>
I'm Nils, a high school student passionate about coding, particularly in <a
href="https://www.rust-lang.org/"
class="anchor"
target="_blank">Rust</a
>
and in <a href="https://svelte.dev/" class="anchor" target="_blank">Svelte</a>. I have done a
lot of things so far, so look for that under <code class="code">Projects</code>. Feel free to
reach out for a chat about coding or anything else via my E-Mail
<a href="mailto:nils@wrenger.net" class="anchor" target="_parent">nils@wrenger.net</a>!
</p>

<div
class="flex flex-col items-center"
in:fly={{
duration: 200,
delay: 600,
y: getRandomInt(-1000, 1000),
x: getRandomInt(-1000, 1000)
}}
>
and in <a href="https://svelte.dev/" class="anchor" target="_blank">Svelte</a>. I have done a
lot of things so far, so look for that under <code class="code">Projects</code>. Feel free to
reach out for a chat about coding or anything else via my E-Mail
<a href="mailto:nils@wrenger.net" class="anchor" target="_parent">nils@wrenger.net</a>!
</p>
<h2 class="h2 pb-2">Projects</h2>
<code class="code">Total: {projects.length}</code>
</div>

<div class="flex flex-col items-center">
<h2 class="h2 pb-2">Projects</h2>
<code class="code">Total: {projects.length}</code>
</div>
<div
class="grid md:grid-cols-2 gap-4 w-full"
in:slide={{ duration: 200, delay: 800, axis: 'x' }}
>
{#each projects as project, i}
<a class="overflow-hidden block card card-hover" href={project.href} target="_blank">
<div class="p-4">
<h3 class="h3">{project.title}</h3>
<p>{project.description}</p>
</div>
</a>
{/each}
</div>

<div class="grid md:grid-cols-2 gap-4 w-full">
{#each projects as project}
<a class="overflow-hidden block card card-hover" href={project.href} target="_blank">
<div class="p-4">
<h3 class="h3">{project.title}</h3>
<p>{project.description}</p>
</div>
</a>
{/each}
<p
class="text-center"
in:fly={{
duration: 200,
delay: 600,
y: -1000
}}
>
More details and other smaller Projects can be seen on
<a href="https://www.github.com/nwrenger" class="anchor" target="_blank">my Github</a>
</p>
</div>

<p class="text-center">
More details and other smaller Projects can be seen on
<a href="https://www.github.com/nwrenger" class="anchor" target="_blank">my Github</a>
</p>
</div>
{/if}

0 comments on commit 69dd642

Please sign in to comment.