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

mobile-friendly (#2)
All checks were successful
Deployment / Install (push) Successful in 3m26s
Details

Browse source 
Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com>
Reviewed-on: #2
This commit is contained in:
Benjamin Palko 2025-05-01 13:33:06 -04:00
parent 9dfbdcc554
commit fbcb3179c9
12 changed files with 170 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

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">
<div class="flex 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>

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

@ -13,18 +13,18 @@
<div class="hero bg-base-200">
<div class="hero-content">
<div class="flex max-w-5xl gap-12">
<div class="flex flex-col items-center gap-12 lg:flex-row lg:items-start">
<div class="flex-0">
<div class="avatar">
<div
class="ring-offset-base-100 ring-base-100 dark:ring-primary w-56 rounded-full shadow-2xl ring-8 ring-offset-2 dark:shadow-none"
class="ring-offset-base-100 ring-base-100 dark:ring-primary w-48 rounded-full shadow-2xl ring-8 ring-offset-2 md:w-56 dark:shadow-none"
>
<img src={photo} alt="Its me!" />
</div>
</div>
</div>
<div class="flex flex-1 flex-col">
<p>{titles.join(', ')}</p>
<div class="flex flex-1 flex-col text-center lg:text-left">
<p class="text-gray-500">{titles.join(', ')}</p>
<h1 class="text-primary text-5xl font-light">
<span class="text-base-content font-semibold">{first}</span>
{rest}
@ -32,7 +32,7 @@
<p class="block py-6">
{description}
</p>
<div class="flex justify-end gap-4">
<div class="flex flex-col gap-2 sm:flex-row lg:gap-4">
<a href="/resume" class="btn btn-outline btn-primary btn-wide">Resume</a>
<a href="/contact" class="btn btn-primary btn-wide">Contact</a>
</div>

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

@ -1,30 +1,36 @@
<script lang="ts">
import { Menu } from 'lucide-svelte';
interface Props {
drawerId: string;
title: string;
pages: { slug: string; name: string }[];
route: { id: string | null };
}
let { title, pages, route }: Props = $props();
let { drawerId, title, pages, route }: Props = $props();
</script>
<nav class="navbar">
<div class="flex flex-1 items-center gap-4">
<a href="/">
<div class="avatar avatar-placeholder w-12">
<div class="avatar avatar-placeholder animate-pulse">
<div
class="ring-primary ring-offset-base-100 bg-base-200 text-base-content mx-auto w-10 rounded-full ring-2 ring-offset-2 transition-all ease-in hover:w-12 hover:text-2xl"
class="ring-primary ring-offset-base-100 bg-base-200 text-base-content mx-auto w-8 rounded-full ring-2 ring-offset-2 transition-all ease-in hover:text-2xl lg:w-12"
>
<span class="text-2xl"> {title.at(0)} </span>
<span class="text-xl lg:text-2xl"> {title.at(0)} </span>
</div>
</div>
</a>
<h2 class="text-primary text-3xl font-light">
<h2 class="text-primary text-2xl font-light lg:text-3xl">
<span class="text-base-content font-semibold">Benjamin</span>
Palko
</h2>
</div>
<div class="flex gap-4 text-lg">
<label for={drawerId} aria-label="open sidebar" class="btn btn-square btn-outline lg:hidden">
<Menu />
</label>
<div class="hidden gap-4 text-lg lg:flex">
{#each pages as page (page.slug)}
<a
href={page.slug}

9
src/lib/components/WIP.svelte
View file

@ -6,11 +6,11 @@
{#snippet Banner(messages: string[], backwards: boolean)}
<div
class="bg-hazard flex h-fit w-[110%] flex-col bg-black py-6 text-xl font-semibold text-black"
class="bg-hazard flex h-fit w-[110%] flex-col bg-black py-3 text-xs font-semibold text-nowrap text-black lg:py-6 lg:text-lg"
class:rotate-5={!backwards}
class:-rotate-5={backwards}
>
<div class="scroll-parent w-full overflow-x-hidden bg-amber-400 px-8">
<div class="scroll-parent h-4 w-full overflow-x-hidden bg-amber-400 px-8 lg:h-6">
<div
class="scroll-element flex justify-around"
class:primary={!backwards}
@ -40,9 +40,9 @@
</div>
{/snippet}
<div class="bg-hazard rounded-box h-full w-full border border-amber-400 p-6">
<div class="bg-hazard rounded-box h-full w-full border border-amber-400 p-4 lg:p-6">
<div
class="bg-base-200 rounded-box flex h-full flex-col items-center justify-center gap-48 overflow-hidden border border-amber-400"
class="bg-base-200 rounded-box flex h-full flex-col items-center justify-center gap-32 overflow-hidden border border-amber-400 lg:gap-48"
>
{@render Banner(messages, false)}
{@render Banner(messages, true)}
@ -52,7 +52,6 @@
<style>
.scroll-parent {
position: relative;
height: 1.8rem;
}
.scroll-element {