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

implemented
Some checks failed
Deploy static content to Pages / deploy (pull_request) Failing after 12s
Details

Browse source 
contact

site formatting

nodemailer

docker
This commit is contained in:
Benjamin Palko 2025-04-30 16:51:46 -04:00
parent b64d112ea7
commit 8680552208
7 changed files with 110 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -40,7 +40,7 @@
</div>
{/snippet}
<div class="bg-hazard rounded-box w-full border border-amber-400 p-6">
<div class="bg-hazard rounded-box h-full w-full border border-amber-400 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"
>

16
src/routes/+layout.svelte
View file

@ -24,20 +24,22 @@
</script>
<div class="h-screen w-screen p-12">
<div class="bg-base-200 flex min-h-full flex-col rounded-4xl">
<div class="p-8">
<div
class="bg-base-200 grid min-h-full grid-rows-[max-content_max-content_auto_max-content] rounded-4xl"
>
<header class=" p-8">
<Navbar title="Benjamin Palko" {pages} route={page.route} />
</div>
</header>
{#if current && current.slug !== '/'}
<div class="bg-base-300 w-full px-12 py-8">
<h1 class="text-4xl font-light">{current.name}</h1>
</div>
{/if}
<div class="flex flex-1 items-stretch justify-center p-8">
<main>
{@render children()}
</div>
<div class="p-8">
</main>
<footer class="p-8">
<Footer links={socialLinks} />
</div>
</footer>
</div>
</div>

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

@ -1,54 +1,63 @@
<script lang="ts">
import { enhance } from '$app/forms';
import { CircleCheck, CircleX, Croissant, Mail, UserRound } from 'lucide-svelte';
import {
CircleCheck,
CircleX,
Croissant,
Mail,
Send,
TriangleAlert,
UserRound
} from 'lucide-svelte';
import type { PageProps } from './$types';
let { form, data }: PageProps = $props();
let { form }: PageProps = $props();
</script>
<form class="w-full" id="contact" method="post" use:enhance>
<div class="grid w-full max-w-xl grid-cols-2 gap-6">
<div class="col-span-2 flex flex-col items-center">
<span class="animate-bounce text-2xl">😁</span>
<h2 class="text-2xl">Hello there friend</h2>
<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="col-span-full">
{#if form?.response?.rejected.length ?? 0 > 0}
<div role="alert" class="alert alert-error w-full">
<CircleX />
<span>Ruh roh raggy!</span>
</div>
{:else if form?.response?.accepted.length ?? 0 > 0}
<div role="alert" class="alert alert-success w-full">
<CircleCheck />
<span>Your message has been sent successfully!</span>
</div>
{:else if form?.incorrect}
<div role="alert" class="alert alert-warning w-full">
<TriangleAlert />
<span>Ruh roh raggy!</span>
</div>
{/if}
</div>
<h3 class="col-span-2 text-xl">Reach out! 🤝</h3>
<h2 class="col-span-full text-3xl font-light">Reach out! 🤝</h2>
{#if form?.response.rejected.length ?? 0 > 0}
<div role="alert" class="alert alert-error col-span-2">
<CircleX />
<span>Ruh roh raggy!</span>
</div>
{:else if form?.response.accepted.length ?? 0 > 0}
<div role="alert" class="alert alert-success col-span-2">
<CircleCheck />
<span>Your message has been sent successfully!</span>
</div>
{/if}
<label class="input input-bordered flex w-full items-center">
<UserRound />
<input name="name" type="text" class="grow" placeholder="Full Name" />
</label>
<label class="input input-bordered flex w-full items-center gap-2">
<Mail />
<input name="email" type="text" class="grow" placeholder="Your Email" />
</label>
<label class="input input-bordered flex w-full items-center gap-2">
<Croissant />
<input name="subject" type="text" class="grow" placeholder="Subject" />
</label>
<button type="submit" class="btn btn-primary">Send Message <Send size={20} /></button>
<div class="flex h-full flex-col gap-4">
<label class="input input-bordered flex items-center gap-2">
<UserRound />
<input name="name" type="text" class="grow" placeholder="Name" />
</label>
<label class="input input-bordered flex items-center gap-2">
<Mail />
<input name="email" type="text" class="grow" placeholder="Your Email" />
</label>
<label class="input input-bordered flex items-center gap-2">
<Croissant />
<input name="subject" type="text" class="grow" placeholder="Subject" />
</label>
<div class="col-span-2 row-span-4">
<textarea
name="message"
form="contact"
class="textarea textarea-bordered h-full w-full resize-none"
placeholder="Message"
></textarea>
</div>
<textarea
name="message"
form="contact"
class="textarea textarea-bordered h-full min-w-xl resize-none"
placeholder="Message"
></textarea>
<button type="submit" class="btn btn-primary">Send Message</button>
</div>
</form>