baobeld/benjaminpalko
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions

foot and formatting

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

21
src/lib/components/Footer.svelte Normal file
View file

@ -0,0 +1,21 @@
<script lang="ts">
interface Props {
links: {
name: string;
href: string;
}[];
}
let { links }: Props = $props();
</script>
<div class="flex justify-between">
<div class="flex gap-8">
{#each links as link (link.href)}
<a href={link.href} class="hover:text-base-content text-slate-600 transition-colors"
>{link.name}</a
>
{/each}
</div>
<p class="text-slate-600">© 2025 Benjamin Palko</p>
</div>

40
src/lib/components/Hero.svelte
View file

@ -9,29 +9,27 @@
let { photo, titles, name, description }: Props = $props(); let { photo, titles, name, description }: Props = $props();
</script> </script>
<div class="flex flex-col"> <div class="hero bg-base-200">
<div class="hero bg-base-200 py-48"> <div class="hero-content">
<div class="hero-content"> <div class="flex max-w-5xl gap-12">
<div class="flex max-w-5xl gap-12"> <div class="flex-0">
<div class="flex-0"> <div class="avatar">
<div class="avatar"> <div
<div class="ring-offset-base-100 ring-base-100 w-56 rounded-full shadow-2xl ring-8 ring-offset-2 dark:shadow-none"
class="ring-offset-base-100 ring-base-100 w-56 rounded-full shadow-2xl ring-8 ring-offset-2 dark:shadow-none" >
> <img src={photo} alt="Its me!" />
<img src={photo} alt="Its me!" />
</div>
</div> </div>
</div> </div>
<div class="flex flex-1 flex-col"> </div>
<p>{titles.join(', ')}</p> <div class="flex flex-1 flex-col">
<h1 class="text-5xl font-bold">{name}</h1> <p>{titles.join(', ')}</p>
<p class="block py-6"> <h1 class="text-5xl font-bold">{name}</h1>
{description} <p class="block py-6">
</p> {description}
<div class="flex justify-end gap-4"> </p>
<a href="/portfolio" class="btn btn-outline btn-primary btn-wide">Portfolio</a> <div class="flex justify-end gap-4">
<a href="/contact" class="btn btn-primary btn-wide">Contact</a> <a href="/portfolio" class="btn btn-outline btn-primary btn-wide">Portfolio</a>
</div> <a href="/contact" class="btn btn-primary btn-wide">Contact</a>
</div> </div>
</div> </div>
</div> </div>

10
src/lib/components/Navbar.svelte
View file

@ -10,9 +10,9 @@
<nav class="navbar px-12"> <nav class="navbar px-12">
<div class="flex flex-1 items-center gap-4"> <div class="flex flex-1 items-center gap-4">
<a href="/"> <a href="/">
<div class="avatar avatar-placeholder"> <div class="avatar avatar-placeholder w-12">
<div <div
class="ring-primary ring-offset-base-100 bg-base-200 text-base-content w-10 rounded-full text-xl ring-2 ring-offset-2" class="ring-primary ring-offset-base-100 bg-base-200 text-base-content mx-auto w-10 rounded-full text-xl ring-2 ring-offset-2 transition-all ease-in hover:w-12 hover:text-2xl"
> >
<b>B</b> <b>B</b>
</div> </div>
@ -22,7 +22,11 @@
</div> </div>
<div class="flex gap-4 text-lg"> <div class="flex gap-4 text-lg">
{#each pages as page (page.slug)} {#each pages as page (page.slug)}
<a href={page.slug} class="link hover:link-accent" class:link-accent={route.id === page.slug}> <a
href={page.slug}
class="link hover:link-accent transition-colors"
class:link-accent={route.id === page.slug}
>
{page.name} {page.name}
</a> </a>
{/each} {/each}

15
src/routes/+layout.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/state'; import { page } from '$app/state';
import Footer from '$lib/components/Footer.svelte';
import Navbar from '$lib/components/Navbar.svelte'; import Navbar from '$lib/components/Navbar.svelte';
import '../app.css'; import '../app.css';
@ -13,11 +14,21 @@
{ slug: '/experience', name: 'Experience' }, { slug: '/experience', name: 'Experience' },
{ slug: '/contact', name: 'Contact' } { 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> </script>
<div class="h-screen w-screen p-12"> <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} /> <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>
</div> </div>

62
src/routes/+page.svelte
View file

@ -1,13 +1,63 @@
<script lang="ts"> <script lang="ts">
import Hero from '$lib/components/Hero.svelte'; import Hero from '$lib/components/Hero.svelte';
import { Braces, Gamepad2, HeartHandshake, MonitorCog } from 'lucide-svelte';
const description = 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.'; '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> </script>
<Hero <div class="flex flex-col px-12">
photo="/yeet-winter.jpg" <div class="py-48">
titles={['Software Engineer', 'Game Developer']} <Hero
name="Benjamin Palko" photo="/yeet-winter.jpg"
{description} 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>