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

mobile-friendly #2

Merged
baobeld merged 6 commits from mobile-friendly into main 2025-05-01 13:33:06 -04:00
Conversation 0 Commits 6 Files changed 12 +83 -79
4 changed files with 83 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 8be8fb9b60 - Show all commits

23
src/lib/components/Footer.svelte
View file

@ -1,23 +0,0 @@
<script lang="ts">
interface Props {
links: {
name: string;
href: string;
}[];
}
let { links }: Props = $props();
</script>
<div class="flex justify-between text-xs lg:text-lg">
<div class="flex gap-2 lg:gap-8">
{#each links as link (link.href)}
<a
href={link.href}
target="_blank"
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>

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

@ -13,7 +13,7 @@
<div class="hero bg-base-200"> <div class="hero bg-base-200">
<div class="hero-content"> <div class="hero-content">
<div class="flex max-w-5xl gap-12"> <div class="flex flex-col gap-12 lg:flex-row">
<div class="flex-0"> <div class="flex-0">
<div class="avatar"> <div class="avatar">
<div <div
@ -32,7 +32,7 @@
<p class="block py-6"> <p class="block py-6">
{description} {description}
</p> </p>
<div class="flex justify-end gap-4"> <div class="flex flex-col gap-2 lg:flex-row lg:justify-end lg:gap-4">
<a href="/resume" class="btn btn-outline btn-primary btn-wide">Resume</a> <a href="/resume" class="btn btn-outline btn-primary btn-wide">Resume</a>
<a href="/contact" class="btn btn-primary btn-wide">Contact</a> <a href="/contact" class="btn btn-primary btn-wide">Contact</a>
</div> </div>

43
src/routes/+layout.svelte
View file

@ -1,11 +1,17 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/state'; import { goto } from '$app/navigation';
import Footer from '$lib/components/Footer.svelte'; import { navigating, page } from '$app/state';
import Navbar from '$lib/components/Navbar.svelte'; import Navbar from '$lib/components/Navbar.svelte';
import '../app.css'; import '../app.css';
let { children } = $props(); let { children } = $props();
let drawerOpen = $state(false);
if (navigating) {
drawerOpen = false;
}
const pages = [ const pages = [
{ slug: '/', name: 'About Me' }, { slug: '/', name: 'About Me' },
{ slug: '/resume', name: 'Resume' }, { slug: '/resume', name: 'Resume' },
@ -24,25 +30,38 @@
</script> </script>
<div class="drawer drawer-end"> <div class="drawer drawer-end">
<input id="navigation-drawer" type="checkbox" class="drawer-toggle" /> <input id="navigation-drawer" type="checkbox" class="drawer-toggle" bind:checked={drawerOpen} />
<div class="drawer-content h-screen w-screen lg:p-12"> <div class="drawer-content h-screen w-screen lg:p-12">
<div <div
class=" bg-base-200 grid min-h-full grid-rows-[max-content_max-content_auto_max-content] lg:rounded-4xl" class="bg-base-200 grid min-h-full grid-rows-[max-content_max-content_auto_max-content] overflow-hidden lg:gap-4 lg:rounded-4xl"
> >
<header class="lg:p-8"> <header class="lg:p-6">
<Navbar drawerId="navigation-drawer" title="Benjamin Palko" {pages} route={page.route} /> <Navbar drawerId="navigation-drawer" title="Benjamin Palko" {pages} route={page.route} />
</header> </header>
<div>
{#if current && current.slug !== '/'} {#if current && current.slug !== '/'}
<div class="bg-base-300 w-full px-6 py-4 lg:px-12 lg:py-8"> <div class="bg-base-300 w-full px-6 py-4 lg:px-12 lg:py-8">
<h1 class="text-2xl font-light lg:text-4xl">{current.name}</h1> <h1 class="text-2xl font-light lg:text-4xl">{current.name}</h1>
</div> </div>
{/if} {/if}
</div>
<main> <main>
{@render children()} {@render children()}
</main> </main>
<footer class="p-8"> <footer class="p-2 lg:p-6">
<Footer links={socialLinks} /> <div class="flex justify-between text-xs lg:text-lg">
<div class="flex gap-2 lg:gap-8">
{#each socialLinks as link (link.href)}
<a
href={link.href}
target="_blank"
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>
</footer> </footer>
</div> </div>
</div> </div>
@ -51,7 +70,15 @@
<label for="navigation-drawer" aria-label="close sidebar" class="drawer-overlay"></label> <label for="navigation-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu bg-base-200 flex min-h-full w-full flex-col-reverse gap-4 p-4"> <ul class="menu bg-base-200 flex min-h-full w-full flex-col-reverse gap-4 p-4">
{#each pages as page (page.slug)} {#each pages as page (page.slug)}
<li><a href={page.slug} class="btn btn-primary btn-lg">{page.name}</a></li> <li>
<button
class="btn btn-primary btn-lg"
onclick={() => {
goto(page.slug);
drawerOpen = false;
}}>{page.name}</button
>
</li>
{/each} {/each}
<label for="navigation-drawer" class="btn btn-error btn-lg">Close</label> <label for="navigation-drawer" class="btn btn-error btn-lg">Close</label>
</ul> </ul>

20
src/routes/+page.svelte
View file

@ -6,8 +6,8 @@
'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>
<div class="flex flex-col px-12"> <div class="flex flex-col items-center px-12">
<div class="py-48"> <div class="lg:py-48">
<Hero <Hero
photo="/yeet-winter.jpg" photo="/yeet-winter.jpg"
titles={['Software Engineer', 'Game Developer']} titles={['Software Engineer', 'Game Developer']}
@ -15,10 +15,11 @@
{description} {description}
/> />
</div> </div>
<div> <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
<h2 class="py-8 text-xl">What I Do</h2> <div class="col-span-full">
<div class="grid grid-cols-2 gap-8"> <h2 class="border-primary w-fit border-b text-2xl font-light">What I Do</h2>
<div class="flex gap-4"> </div>
<div class="flex flex-col gap-4 lg:flex-row">
<Braces size={48} class="text-primary" /> <Braces size={48} class="text-primary" />
<div class="flex flex-col"> <div class="flex flex-col">
<h3 class="text-xl">Web Development</h3> <h3 class="text-xl">Web Development</h3>
@ -28,7 +29,7 @@
</p> </p>
</div> </div>
</div> </div>
<div class="flex gap-4"> <div class="flex flex-col gap-4 lg:flex-row">
<Gamepad2 size={48} class="text-primary" /> <Gamepad2 size={48} class="text-primary" />
<div class="flex flex-col"> <div class="flex flex-col">
<h3 class="text-xl">Video Game Development</h3> <h3 class="text-xl">Video Game Development</h3>
@ -38,7 +39,7 @@
</p> </p>
</div> </div>
</div> </div>
<div class="flex gap-4"> <div class="flex flex-col gap-4 lg:flex-row">
<MonitorCog size={48} class="text-primary" /> <MonitorCog size={48} class="text-primary" />
<div class="flex flex-col"> <div class="flex flex-col">
<h3 class="text-xl">Linux Ricing</h3> <h3 class="text-xl">Linux Ricing</h3>
@ -48,7 +49,7 @@
</p> </p>
</div> </div>
</div> </div>
<div class="flex gap-4"> <div class="flex flex-col gap-4 lg:flex-row">
<HeartHandshake size={48} class="text-primary" /> <HeartHandshake size={48} class="text-primary" />
<div class="flex flex-col"> <div class="flex flex-col">
<h3 class="text-xl">Open-Source Development</h3> <h3 class="text-xl">Open-Source Development</h3>
@ -59,5 +60,4 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>