finish?

.env.example

@@ -0,0 +1 @@
+VITE_APP_URL=

app.d.ts

@@ -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 {}
+}

src/lib/commissions/Accordion.svelte

@@ -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>

src/lib/commissions/Item.svelte

@@ -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>
+    {#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>

src/lib/elements/Card.svelte

@@ -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>

src/lib/elements/Form.svelte

@@ -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>

src/lib/helpers/variables.js

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

src/routes/commissions/index.svelte

@@ -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">

src/routes/contact.svelte

@@ -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>

src/routes/index.svelte

@@ -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
+            <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
+            <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>

tailwind.config.cjs

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