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

landing page

Browse source
This commit is contained in:
Benjamin Palko 2025-04-26 23:40:09 -04:00
parent afe035a40c
commit f796bcc5cb
3 changed files with 58 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/lib/components/Hero.svelte Normal file
View file

@ -0,0 +1,39 @@
<script lang="ts">
interface Props {
photo: string;
titles: string[];
name: string;
description: string;
}
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>
</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>
</div>
</div>
</div>

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

@ -9,13 +9,15 @@
<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">
<div class="avatar avatar-placeholder"> <a href="/">
<div <div class="avatar avatar-placeholder">
class="ring-accent ring-offset-base-100 bg-base-200 text-neutral-content w-10 rounded-full ring ring-offset-2" <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"
<span>B</span> >
<b>B</b>
</div>
</div> </div>
</div> </a>
<h2 class="text-3xl"><b>Benjamin</b> Palko</h2> <h2 class="text-3xl"><b>Benjamin</b> Palko</h2>
</div> </div>
<div class="flex gap-4 text-lg"> <div class="flex gap-4 text-lg">

11
src/routes/+page.svelte
View file

@ -1,2 +1,13 @@
<script lang="ts"> <script lang="ts">
import Hero from '$lib/components/Hero.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> </script>
<Hero
photo="/yeet-winter.jpg"
titles={['Software Engineer', 'Game Developer']}
name="Benjamin Palko"
{description}
/>