foot and formatting

This commit is contained in:
Benjamin Palko 2025-04-27 13:55:54 -04:00
parent f796bcc5cb
commit 38ae95ae6e
5 changed files with 116 additions and 32 deletions

View file

@ -1,5 +1,6 @@
<script lang="ts">
import { page } from '$app/state';
import Footer from '$lib/components/Footer.svelte';
import Navbar from '$lib/components/Navbar.svelte';
import '../app.css';
@ -13,11 +14,21 @@
{ slug: '/experience', name: 'Experience' },
{ slug: '/contact', name: 'Contact' }
];
const socialLinks = [
{ name: 'Github', href: 'https://github.com/BenjaminPalko' },
{ name: 'LinkedIn', href: 'https://www.linkedin.com/in/benjaminpalko/' },
{ name: 'Itch.io', href: 'https://baobeld.itch.io/' },
{ name: 'Ko-fi', href: 'https://ko-fi.com/baobeld' }
];
</script>
<div class="h-screen w-screen p-12">
<div class="bg-base-200 flex min-h-full flex-col gap-8 rounded-4xl p-8">
<div class="bg-base-200 flex min-h-full flex-col rounded-4xl p-8">
<Navbar {pages} route={page.route} />
<div class="px-8">{@render children()}</div>
<div class="flex-1 p-8">{@render children()}</div>
<div>
<Footer links={socialLinks} />
</div>
</div>
</div>

View file

@ -1,13 +1,63 @@
<script lang="ts">
import Hero from '$lib/components/Hero.svelte';
import { Braces, Gamepad2, HeartHandshake, MonitorCog } from 'lucide-svelte';
const description =
'Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.';
</script>
<Hero
photo="/yeet-winter.jpg"
titles={['Software Engineer', 'Game Developer']}
name="Benjamin Palko"
{description}
/>
<div class="flex flex-col px-12">
<div class="py-48">
<Hero
photo="/yeet-winter.jpg"
titles={['Software Engineer', 'Game Developer']}
name="Benjamin Palko"
{description}
/>
</div>
<div>
<h2 class="py-8 text-xl">What I Do</h2>
<div class="grid grid-cols-2 gap-8">
<div class="flex gap-4">
<Braces size={48} class="text-primary" />
<div class="flex flex-col">
<h3 class="text-xl">Web Development</h3>
<p class="max-w-2xl">
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
</p>
</div>
</div>
<div class="flex gap-4">
<Gamepad2 size={48} class="text-primary" />
<div class="flex flex-col">
<h3 class="text-xl">Video Game Development</h3>
<p class="max-w-2xl">
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
</p>
</div>
</div>
<div class="flex gap-4">
<MonitorCog size={48} class="text-primary" />
<div class="flex flex-col">
<h3 class="text-xl">Linux Ricing</h3>
<p class="max-w-2xl">
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
</p>
</div>
</div>
<div class="flex gap-4">
<HeartHandshake size={48} class="text-primary" />
<div class="flex flex-col">
<h3 class="text-xl">Open-Source Development</h3>
<p class="max-w-2xl">
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
</p>
</div>
</div>
</div>
</div>
</div>