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();
</script>
<div class="flex flex-col">
<div class="hero bg-base-200 py-48">
<div class="hero-content">
<div class="flex max-w-5xl gap-12">
<div class="flex-0">
<div class="avatar">
<div
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!" />
</div>
<div class="hero bg-base-200">
<div class="hero-content">
<div class="flex max-w-5xl gap-12">
<div class="flex-0">
<div class="avatar">
<div
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!" />
</div>
</div>
<div class="flex flex-1 flex-col">
<p>{titles.join(', ')}</p>
<h1 class="text-5xl font-bold">{name}</h1>
<p class="block py-6">
{description}
</p>
<div class="flex justify-end gap-4">
<a href="/portfolio" class="btn btn-outline btn-primary btn-wide">Portfolio</a>
<a href="/contact" class="btn btn-primary btn-wide">Contact</a>
</div>
</div>
<div class="flex flex-1 flex-col">
<p>{titles.join(', ')}</p>
<h1 class="text-5xl font-bold">{name}</h1>
<p class="block py-6">
{description}
</p>
<div class="flex justify-end gap-4">
<a href="/portfolio" class="btn btn-outline btn-primary btn-wide">Portfolio</a>
<a href="/contact" class="btn btn-primary btn-wide">Contact</a>
</div>
</div>
</div>

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

@ -10,9 +10,9 @@
<nav class="navbar px-12">
<div class="flex flex-1 items-center gap-4">
<a href="/">
<div class="avatar avatar-placeholder">
<div class="avatar avatar-placeholder w-12">
<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>
</div>
@ -22,7 +22,11 @@
</div>
<div class="flex gap-4 text-lg">
{#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}
</a>
{/each}