main
Midnight 3 years ago
parent 1b617b5aa8
commit 8cde6bed58

@ -0,0 +1 @@
VITE_APP_URL=

13
app.d.ts vendored

@ -0,0 +1,13 @@
/// <reference types="@sveltejs/kit" />
// See https://kit.svelte.dev/docs#typescript
// for information about these interfaces
declare namespace App {
interface Locals {}
interface Platform {}
interface Session {}
interface Stuff {}
}

@ -2,22 +2,23 @@
import { onMount } from "svelte";
export let title;
export let open = "";
export let autoOpen = false;
export let id;
export let note = null;
onMount(() => {
if(open == "true") {
if(window.location.hash == "#" + id || autoOpen == true) {
openAccordion();
}
});
function openAccordion() {
let content = document.querySelector("#content");
content.classList.toggle("block");
let content = document.querySelector("#" + id + "-content");
content.classList.toggle("flex");
content.classList.toggle("hidden");
let trigger = document.querySelector("#trigger");
if(content.classList.contains("block")) {
let trigger = document.querySelector("#" + id + "-trigger");
if(content.classList.contains("flex")) {
trigger.innerHTML = "⬇️";
} else {
trigger.innerHTML = "➡️";
@ -25,14 +26,20 @@
}
</script>
<section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col gap-5" id="icon">
<section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col gap-5" id={id}>
<div class="flex justify-between items-center">
<h2 class="text-2xl font-bold">{title}</h2>
<button type="none" id="trigger" on:click={openAccordion} class="text-2xl">➡️</button>
<button type="none" id="{id}-trigger" on:click={openAccordion} class="text-2xl">➡️</button>
</div>
<div class="hidden" id="content">
<hr class="mb-5" />
<div class="hidden flex-col gap-5" id="{id}-content">
{#if note}
<p class="text-sm text-gray-200">
{@html note}
</p>
{/if}
<hr />
<slot />
</div>

@ -1,13 +1,21 @@
<script>
export let name;
export let price;
export let picture;
export let picture = null;
export let note = null;
</script>
<div class="flex flex-col justify-between items-center gap-2">
<div class="flex flex-col items-center gap-2">
<span class="w-full flex justify-between">
<h3 class="text-xl font-bold">{name}</h3>
<span class="bg-green-500 py-1 text-sm px-5 rounded-lg">{price}</span>
<h3 class="text-xl font-bold break-words">{name}</h3>
<span><span class="bg-green-500 py-1 text-sm px-5 rounded-lg">{price}</span></span>
</span>
<img src={picture} alt={name} class="w-full rounded-xl shadow" />
{#if note}
<p class="text-sm text-gray-200 w-full">{@html note}</p>
{/if}
{#if picture}
<img src={picture} alt={name} class="w-full rounded-xl shadow" />
{:else}
<p class="p-2 italic text-gray-200 bg-gray-700 rounded-xl shadow w-full flex justify-center items-center text-center aspect-square">Example TBA</p>
{/if}
</div>

@ -6,12 +6,12 @@
</script>
<a href={href} class="group relative shadow w-full bg-cover text-white rounded-lg hover:-translate-y-1 duration-300">
<img src={picture} class="bg-black rounded-lg group-hover:bg-gradient-to-b group-hover:from-rose-400 group-hover:to-red-900 duration-300" alt={alt} />
<a href={href} class="group relative shadow w-full bg-cover text-white rounded-lg hover:-translate-y-1 duration-300 overflow-hidden">
<img src={picture} class="bg-black rounded-lg group-hover:bg-gradient-to-b group-hover:from-rose-400 group-hover:to-red-900 duration-300 w-full h-full" alt={alt} />
<div class="absolute inset-0 bg-black bg-opacity-50 group-hover:bg-opacity-20 duration-300 rounded-lg"></div>
<div class="absolute inset-0 flex justify-center items-center">
<h4 class="font-bold text-sm lg:text-xl text-center drop-shadow-xl">
<h4 class="font-bold italic text-sm lg:text-3xl text-center drop-shadow-xl">
<slot />
</h4>
</div>

@ -0,0 +1,96 @@
<script>
import { variables } from "$lib/helpers/variables";
let email = "";
let message = "";
let notify;
function send() {
email = "";
message = "";
notify = "Email sent!";
}
</script>
<main class="flex flex-col gap-5 w-2/3 mx-auto">
<form
class="flex flex-col gap-5"
action="https://api.staticforms.xyz/submit"
method="post"
>
<input
type="hidden"
name="accessKey"
value="534c3443-4fa9-41bc-976b-684b3049bef3"
/>
<input type="text" name="honeypot" style="display: none;" />
<input type="hidden" name="redirectTo" value={variables.appUrl} />
<div class="flex flex-col">
<label for="email" value="E-Mail" class="text-lg font-bold"
>E-Mail</label
>
<input
id="email"
name="email"
type="text"
class="text-lg py-1 px-2 rounded-lg shadow bg-gray-600"
bind:value={email}
/>
</div>
<div class="flex flex-col">
<label for="message" value="E-Mail" class="text-lg font-bold"
>Message</label
>
<textarea
id="message"
name="message"
class="text-lg py-1 px-2 rounded-lg shadow bg-gray-600"
bind:value={message}
rows="5"
/>
</div>
<div class="flex flex-col">
{#if email != "" && message != ""}
<button
type="submit"
on:click={send}
class="bg-gradient-to-tr from-red-500 to-pink-500 py-2 px-3 rounded-lg font-bold shadow button"
>Send</button
>
{:else}
<button
disabled
type="none"
on:click={send}
title="Fill in the fields before submitting"
class="bg-black bg-opacity-50 py-2 px-3 rounded-lg font-bold shadow text-gray-400"
>
Send
</button>
{/if}
</div>
{#if notify}
<p class="text-green-500 font-bold text-lg">{notify}</p>
{/if}
</form>
</main>
<style>
.button {
transition-duration: 0.3s;
}
.button:hover {
transition-duration: 0.3s;
transform: translateY(-2px);
}
.button:active {
transition-duration: 0.3s;
transform: translateY(5px);
}
</style>

@ -0,0 +1,3 @@
export const variables = {
appUrl: import.meta.env.VITE_APP_URL
};

@ -1,9 +1,10 @@
<script>
import Accordion from "$lib/commissions/Accordion.svelte";
import Item from "$lib/commissions/Item.svelte";
import Social from "$lib/elements/Social.svelte";
import Accordion from "$lib/commissions/Accordion.svelte";
import Item from "$lib/commissions/Item.svelte";
import Social from "$lib/elements/Social.svelte";
import Navbar from "$lib/header/Navbar.svelte";
import { onMount } from "svelte";
</script>
<svelte:head>
@ -13,7 +14,7 @@ import Social from "$lib/elements/Social.svelte";
<main class="flex flex-col gap-5">
<Navbar page="/commissions" />
<Accordion title="Icon Commissions" open="true" id="icon">
<Accordion title="Icon Commissions" autoOpen={true} id="icon">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
<Item picture="/commissions/iconsketchy.jpg" name="Sketchy" price="$13" />
<Item picture="/commissions/iconbasic.jpg" name="Basic" price="$18" />
@ -24,33 +25,61 @@ import Social from "$lib/elements/Social.svelte";
</div>
</Accordion>
<section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col" id="emote">
<h2 class="text-xl font-bold">Emote Commissions</h2>
</section>
<Accordion title="Emote Commissions" id="emote">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
<Item picture="/commissions/emote1.jpg" name="Pack of 4" price="$26" />
<Item picture="/commissions/emote2.jpg" name="Pack of 5" price="$31" />
<Item picture="/commissions/emote4.jpg" name="Pack of 6" price="$38" />
</div>
</Accordion>
<section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col" id="ych">
<h2 class="text-xl font-bold">YCH Commissions</h2>
</section>
<Accordion title="YCH Commissions" id="ych">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
<Item picture="/commissions/ychbaby.jpg" name="Baby YCH Flat Color" price="$7" />
<Item picture="/commissions/ychbaby.jpg" name="Baby YCH Cell Shaded" price="$10" />
</div>
</Accordion>
<section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col" id="halfbody">
<h2 class="text-xl font-bold">Half Body Commissions</h2>
</section>
<Accordion title="Half Body Commissions" id="halfbody">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
<Item picture="/commissions/halfbodysketchy.jpg" name="Sketchy" price="$18" />
<Item picture="/commissions/halfbodybasic.jpg" name="Basic" price="$23" />
<Item name="Basic Lineless" price="$23" />
<Item name="Cell Shaded" price="$28" />
<Item picture="/commissions/halfbodyultralineart.jpg" name="Ultra Lineart" price="$40" />
</div>
</Accordion>
<section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col" id="fullbody">
<h2 class="text-xl font-bold">Full Body Commissions</h2>
</section>
<Accordion title="Full Body Commissions" id="fullbody">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
<Item name="Sketchy" price="$23" />
<Item picture="/commissions/fullbodybasic.jpg" name="Basic" price="$28" />
<Item picture="/commissions/fullbodybasiclineless.jpg" name="Basic Lineless" price="$28" />
<Item name="Cell Shaded" price="$33" />
<Item picture="/commissions/fullbodyultralineart.jpg" name="Ultra Lineart" price="$45" />
</div>
</Accordion>
<section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col" id="animation">
<h2 class="text-xl font-bold">Animation Commissions</h2>
</section>
<Accordion title="Animation Commissions" id="animation">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
<Item picture="/commissions/animationheadshot.gif" name="Headshot" price="$21 per frame" note="-20% if sketchy<br/> +80% if cell shaded" />
</div>
</Accordion>
<section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col" id="refsheet">
<h2 class="text-xl font-bold">Reference Sheet Commissions</h2>
</section>
<Accordion title="Reference Sheet Commissions" note="Feel free to contact me about reference sheets! A lot of different details determine the price." id="refsheet">
<div class="grid grid-cols-1 lg:grid-cols-1 gap-5">
<Item picture="/commissions/refsheet1.jpg" name="Reference Sheet Example" price="$?" />
<Item picture="/commissions/refsheet2.jpg" name="Reference Sheet Example" price="$?" />
<Item picture="/commissions/refsheet3.jpg" name="Reference Sheet Example" price="$?" />
</div>
</Accordion>
<section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col" id="complex">
<h2 class="text-xl font-bold">Complex Scene Commissions</h2>
</section>
<Accordion title="Complex Scene Commissions" note="Feel free to contact me about complex scenes! A lot of different details determine the price." id="complex">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
<Item picture="/commissions/complex1.jpg" name="Complex Scene Example" price="$?" />
<Item picture="/commissions/complex2.jpg" name="Complex Scene Example" price="$?" />
</div>
</Accordion>
<section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col">
<div class="flex flex-wrap justify-center items-center gap-5">

@ -1,6 +1,6 @@
<script>
import Social from "$lib/elements/Social.svelte";
import Form from "$lib/elements/Form.svelte";
import Social from "$lib/elements/Social.svelte";
import Navbar from "$lib/header/Navbar.svelte";
</script>
@ -28,6 +28,6 @@ import Social from "$lib/elements/Social.svelte";
</section>
<section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col">
Email
<Form />
</section>
</main>

@ -48,36 +48,40 @@ import Social from "$lib/elements/Social.svelte";
<section class="container">
<div class="grid grid-cols-2 lg:grid-cols-3 gap-3">
<Card href="/commissions#icon" picture="/comm.png" alt="commission info">
<Card href="/commissions#icon" picture="/commissions/iconbasic.jpg" alt="commission info">
Icon <br/> Commissions
</Card>
<Card href="/commissions#emote" picture="/comm.png" alt="commission info">
<Card href="/commissions#emote" picture="/commissions/emote2.jpg" alt="commission info">
Emote <br/> Commissions
</Card>
<Card href="/commissions#ych" picture="/comm.png" alt="commission info">
<Card href="/commissions#ych" picture="/commissions/ychbaby.jpg" alt="commission info">
YCH <br/> Commissions
</Card>
<Card href="/commissions#halfbody" picture="/comm.png" alt="commission info">
Halfbody <br/> Commissions
</Card>
<span class="col-span-3 flex">
<Card href="/commissions#refsheet" picture="/commissions/refsheet3.jpg" alt="commission info">
Ref Sheet <br/> Commissions
</Card>
</span>
<Card href="/commissions#fullbody" picture="/comm.png" alt="commission info">
Fullbody <br/> Commissions
</Card>
<span class="col-span-2 flex">
<Card href="/commissions#complex" picture="/commissions/complex1.jpg" alt="commission info">
Complex Scene <br/> Commissions
</Card>
</span>
<Card href="/commissions#animation" picture="/comm.png" alt="commission info">
<Card href="/commissions#animation" picture="/commissions/animationheadshot.gif" alt="commission info">
Animation <br/> Commissions
</Card>
<Card href="/commissions#refsheet" picture="/comm.png" alt="commission info">
Ref Sheet <br/> Commissions
<Card href="/commissions#halfbody" picture="/commissions/halfbodybasic.jpg" alt="commission info">
Halfbody <br/> Commissions
</Card>
<Card href="/commissions#complex" picture="/comm.png" alt="commission info">
Complex Scene <br/> Commissions
<Card href="/commissions#fullbody" picture="/commissions/fullbodyultralineart.jpg" alt="commission info">
Fullbody <br/> Commissions
</Card>
</div>
</section>

Binary file not shown.

After

Width:  |  Height:  |  Size: 598 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 191 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

@ -25,7 +25,7 @@ module.exports = {
20: '20px'
}
},
extend: {}
extend: { blur: { xs: '2px' } }
},
plugins: []
};

Loading…
Cancel
Save