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 +170 -122
12 changed files with 170 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

17
.env.development Normal file
View file

@ -0,0 +1,17 @@
NPM_TOKEN=
# Name: Toby Purdy
MAIL_TRANSPORT_HOST=smtp.ethereal.email
MAIL_TRANSPORT_PORT=587
MAIL_TRANSPORT_USER=toby.purdy58@ethereal.email
MAIL_TRANSPORT_PASS=2bh8GWQpB2FWk6Eu9S
STRAPI_HOST=
STRAPI_PORT=
DATABASE_CLIENT=
DATABASE_HOST=
DATABASE_PORT=
DATABASE_NAME=
DATABASE_USERNAME=
DATABASE_PASSWORD=

4
.github/workflows/pr.yml vendored
View file

@ -27,9 +27,9 @@ jobs:
run: bun install run: bun install
- name: Lint - name: Lint
run: bun lint run: bun lint
- name: Build
run: bun run build
- name: Svelte Check - name: Svelte Check
run: bun check run: bun check
- name: Test - name: Test
run: bun run test:unit run: bun run test:unit
- name: Build
run: bun run build

3
.gitignore vendored
View file

@ -14,9 +14,6 @@ Thumbs.db
# Env # Env
.env .env
.env.*
!.env.example
!.env.test
# Vite # Vite
vite.config.js.timestamp-* vite.config.js.timestamp-*

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 bg-base-200">
<div class="hero-content"> <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="flex-0">
<div class="avatar"> <div class="avatar">
<div <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!" /> <img src={photo} alt="Its me!" />
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-1 flex-col"> <div class="flex flex-1 flex-col text-center lg:text-left">
<p>{titles.join(', ')}</p> <p class="text-gray-500">{titles.join(', ')}</p>
<h1 class="text-primary text-5xl font-light"> <h1 class="text-primary text-5xl font-light">
<span class="text-base-content font-semibold">{first}</span> <span class="text-base-content font-semibold">{first}</span>
{rest} {rest}
@ -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 sm:flex-row 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>

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

@ -1,30 +1,36 @@
<script lang="ts"> <script lang="ts">
import { Menu } from 'lucide-svelte';
interface Props { interface Props {
drawerId: string;
title: string; title: string;
pages: { slug: string; name: string }[]; pages: { slug: string; name: string }[];
route: { id: string | null }; route: { id: string | null };
} }
let { title, pages, route }: Props = $props(); let { drawerId, title, pages, route }: Props = $props();
</script> </script>
<nav class="navbar"> <nav class="navbar">
<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 w-12"> <div class="avatar avatar-placeholder animate-pulse">
<div <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>
</div> </div>
</a> </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> <span class="text-base-content font-semibold">Benjamin</span>
Palko Palko
</h2> </h2>
</div> </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)} {#each pages as page (page.slug)}
<a <a
href={page.slug} href={page.slug}

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

@ -6,11 +6,11 @@
{#snippet Banner(messages: string[], backwards: boolean)} {#snippet Banner(messages: string[], backwards: boolean)}
<div <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}
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 <div
class="scroll-element flex justify-around" class="scroll-element flex justify-around"
class:primary={!backwards} class:primary={!backwards}
@ -40,9 +40,9 @@
</div> </div>
{/snippet} {/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 <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, false)}
{@render Banner(messages, true)} {@render Banner(messages, true)}
@ -52,7 +52,6 @@
<style> <style>
.scroll-parent { .scroll-parent {
position: relative; position: relative;
height: 1.8rem;
} }
.scroll-element { .scroll-element {

70
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' },
@ -23,23 +29,67 @@
let current = $derived(pages.find((p) => p.slug === page.route.id)); let current = $derived(pages.find((p) => p.slug === page.route.id));
</script> </script>
<div class="h-screen w-screen p-12"> <div class="drawer drawer-end">
<input id="navigation-drawer" type="checkbox" class="drawer-toggle" bind:checked={drawerOpen} />
<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] 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=" p-8"> <header class="lg:p-6">
<Navbar 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-12 py-8"> <div class="bg-base-300 w-full px-6 py-4 lg:px-12 lg:py-8">
<h1 class="text-4xl font-light">{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>
<div class="drawer-side">
<label for="navigation-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
<div class="menu bg-base-200 flex min-h-full w-full flex-col justify-between p-4">
<ul class="flex flex-col gap-4">
{#each pages as page (page.slug)}
<li>
<button
class="btn btn-primary btn-soft btn-lg"
onclick={() => {
goto(page.slug);
drawerOpen = false;
}}>{page.name}</button
>
</li>
{/each}
</ul>
<div class="flex flex-col gap-4">
<h2 class="text-primary text-center text-4xl font-light lg:text-3xl">
<span class="text-base-content font-semibold">Benjamin</span>
Palko
</h2>
<label for="navigation-drawer" class="btn btn-error btn-soft btn-lg">Close</label>
</div>
</div>
</div>
</div>

30
src/routes/+page.svelte
View file

@ -6,19 +6,26 @@
'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-6 md:px-12">
<div class="py-48"> <div class="lg:py-48">
<Hero <Hero
photo="/yeet-winter.jpg" photo="/waterfall-cropped.jpg"
titles={['Software Engineer', 'Game Developer']} titles={[
'Software Engineer',
'Game Developer',
'Linux Enjoyer',
'Cyclist',
'Goalie for Hire ⚽'
]}
name="Benjamin Palko" name="Benjamin Palko"
{description} {description}
/> />
</div> </div>
<div> <div class="grid grid-cols-1 gap-8 md: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 +35,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 +45,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 +55,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>
@ -60,4 +67,3 @@
</div> </div>
</div> </div>
</div> </div>
</div>

15
src/routes/contact/+page.server.ts
View file

@ -1,9 +1,4 @@
import { import { env } from '$env/dynamic/private';
MAIL_TRANSPORT_HOST,
MAIL_TRANSPORT_PASS,
MAIL_TRANSPORT_PORT,
MAIL_TRANSPORT_USER
} from '$env/static/private';
import { fail } from '@sveltejs/kit'; import { fail } from '@sveltejs/kit';
import { createTransport } from 'nodemailer'; import { createTransport } from 'nodemailer';
import type { Actions } from './$types'; import type { Actions } from './$types';
@ -49,11 +44,11 @@ export const actions = {
} }
const transport = createTransport({ const transport = createTransport({
host: MAIL_TRANSPORT_HOST, host: env.MAIL_TRANSPORT_HOST,
port: isNaN(Number(MAIL_TRANSPORT_PORT)) ? 587 : Number(MAIL_TRANSPORT_PORT), port: isNaN(Number(env.MAIL_TRANSPORT_PORT)) ? 587 : Number(env.MAIL_TRANSPORT_PORT),
auth: { auth: {
user: MAIL_TRANSPORT_USER, user: env.MAIL_TRANSPORT_USER,
pass: MAIL_TRANSPORT_PASS pass: env.MAIL_TRANSPORT_PASS
} }
}); });

13
src/routes/contact/+page.svelte
View file

@ -15,7 +15,7 @@
</script> </script>
<form id="contact" method="post" use:enhance> <form id="contact" method="post" use:enhance>
<div class="mx-auto grid max-w-3xl grid-flow-col grid-cols-3 grid-rows-7 content-end gap-4 py-8"> <div class="mx-auto grid max-w-3xl gap-4 py-8 sm:grid-flow-col sm:grid-cols-3 sm:grid-rows-6">
<div class="col-span-full"> <div class="col-span-full">
{#if form?.response?.rejected.length ?? 0 > 0} {#if form?.response?.rejected.length ?? 0 > 0}
<div role="alert" class="alert alert-error w-full"> <div role="alert" class="alert alert-error w-full">
@ -37,21 +37,20 @@
<h2 class="col-span-full text-3xl font-light">Reach out! 🤝</h2> <h2 class="col-span-full text-3xl font-light">Reach out! 🤝</h2>
<label class="input input-bordered flex w-full items-center"> <label class="input input-bordered col-span-full flex w-full items-center sm:col-span-1">
<UserRound /> <UserRound />
<input name="name" type="text" class="grow" placeholder="Full Name" /> <input name="name" type="text" class="grow" placeholder="Full Name" />
</label> </label>
<label class="input input-bordered flex w-full items-center gap-2"> <label class="input input-bordered col-span-full flex w-full items-center gap-2 sm:col-span-1">
<Mail /> <Mail />
<input name="email" type="text" class="grow" placeholder="Your Email" /> <input name="email" type="text" class="grow" placeholder="Your Email" />
</label> </label>
<label class="input input-bordered flex w-full items-center gap-2"> <label class="input input-bordered col-span-full flex w-full items-center gap-2 sm:col-span-1">
<Croissant /> <Croissant />
<input name="subject" type="text" class="grow" placeholder="Subject" /> <input name="subject" type="text" class="grow" placeholder="Subject" />
</label> </label>
<button type="submit" class="btn btn-primary">Send Message <Send size={20} /></button>
<div class="col-span-2 row-span-4"> <div class="row-span-3 sm:col-span-2">
<textarea <textarea
name="message" name="message"
form="contact" form="contact"
@ -59,5 +58,7 @@
placeholder="Message" placeholder="Message"
></textarea> ></textarea>
</div> </div>
<button type="submit" class="btn btn-primary col-span0">Send Message <Send size={20} /></button>
</div> </div>
</form> </form>

BIN
static/waterfall-cropped.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 47 KiB