From 33ddd2add07980e844e5cc93cafac66f2fe87953 Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Sun, 6 Apr 2025 23:00:42 +0100
Subject: [PATCH 1/4] #26 Added re-captcha to the site

---
 src/routes/contact/+page.svelte | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 36ea25a..e058d39 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -60,6 +60,11 @@
         gap: 1em 1em;
         width: 100%;
     }
+
+    .g-recaptcha {
+        width: fit-content;
+        overflow: hidden;
+    }
 </style>
 
 <Card>
@@ -81,6 +86,10 @@
             </div>
             <input class="button" type="submit" value="Send" />
             <input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
+
+            <!-- reCAPTCHA integration -->
+            <div class="g-recaptcha" data-sitekey="6Lc3NgwrAAAAAKBh-ALiEnNfkYR4Wq4TLtH5DYEL"></div>
+            <script src="https://www.google.com/recaptcha/api.js" async defer></script>
         </form>
     </div>
     <div slot="footer">

From 5fe7b83c4799ee1cab383c67fb0fbb1a8db6ac70 Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Sun, 6 Apr 2025 23:12:27 +0100
Subject: [PATCH 2/4] #26 Updated key to support v2 of captcha

---
 src/routes/contact/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index e058d39..531c33c 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -88,7 +88,7 @@
             <input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
 
             <!-- reCAPTCHA integration -->
-            <div class="g-recaptcha" data-sitekey="6Lc3NgwrAAAAAKBh-ALiEnNfkYR4Wq4TLtH5DYEL"></div>
+            <div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
             <script src="https://www.google.com/recaptcha/api.js" async defer></script>
         </form>
     </div>

From da5f47a841a8f8d96d444ac778c19c09eab03113 Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Sun, 27 Apr 2025 19:33:46 +0100
Subject: [PATCH 3/4] #26 Re-Made contact form. More work required.]

---
 src/lib/components/Cards/Card.svelte |   2 +-
 src/routes/contact/+page.svelte      | 167 +++++++++++++++++----------
 2 files changed, 108 insertions(+), 61 deletions(-)

diff --git a/src/lib/components/Cards/Card.svelte b/src/lib/components/Cards/Card.svelte
index 0d5de39..52633d0 100644
--- a/src/lib/components/Cards/Card.svelte
+++ b/src/lib/components/Cards/Card.svelte
@@ -39,7 +39,7 @@
     .card .card-content :global(div) {
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        justify-content: center;
         max-width: 100%;
     }
 
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 531c33c..671a67f 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -1,64 +1,103 @@
 <script lang="ts">
     import Card from '$lib/components/Cards/Card.svelte';
-    import { Toast, ToastType } from "$lib/toast";
-    import { addToast } from "$lib/stores";
+    import { Toast, ToastType } from '$lib/toast';
+    import { addToast } from '$lib/stores';
 
     import { page } from '$app/stores';
     const sent = $page.url.searchParams.get('sent');
 
-    if (sent == "true") {
-        addToast(new Toast("Thank you! Your E-Mail has been sent. I will reply as soon as possible!", ToastType.Success, true, 5000));
+    if (sent == 'true') {
+        addToast(
+            new Toast(
+                'Thank you! Your E-Mail has been sent. I will reply as soon as possible!',
+                ToastType.Success,
+                true,
+                5000
+            )
+        );
     }
     // Can't use else otherwise the warning will display on load
-    if (sent == "false") {
-        addToast(new Toast("Sorry, your E-Mail could not be sent... Please try again later!", ToastType.Error, true, 5000));
+    if (sent == 'false') {
+        addToast(
+    new Toast(
+        'Sorry, your E-Mail could not be sent... Please try again later!',
+        ToastType.Error,
+        true,
+        5000
+    )
+        );
     }
 </script>
 
 <style>
-    form {
+
+    /* Contact form styling */
+    .contact-form {
+        background: none;
+        padding: 1rem;
+        width: 80%;
         display: flex;
-        flex-wrap: wrap;
-        flex: 2 1;
-        align-items: center;
-        justify-content: center;
-        margin: 1em;
-        gap: 1em 3em;
-    }
-    
-    input, textarea {
-        padding: 1em 0em 1em 1em;
-        background-color: var(--input);
-        color: var(--fg);
-        border: 1px solid var(--fg); 
-        outline: 0;
-        border-radius: 8px;
-        resize: none;
-        min-width: 100%;
-        transition: all 0.15s;
-        font-size: .8em;
-    }
-
-    .button {
-        background-color: var(--fg);
-        color: var(--bg);
-        transition: all 0.2s ease-in-out;
-    }
-
-    .button:hover {
-        transform: scale(1.01);
-    }
-
-    textarea {
-        min-height: 12em;
-    }
-
-    .container {
-        display: flex;
-        flex: 2 1 5rem;
         flex-direction: column;
-        gap: 1em 1em;
+        gap: 1rem;
+        transition: all 0.3s ease;
+    }
+
+    /* Input groups */
+    .input-group {
+        display: flex;
+        flex-direction: row;
         width: 100%;
+        justify-content: center;
+        gap: 1rem;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    /* Input fields and textarea */
+    .contact-form input,
+    .contact-form textarea {
+        padding: 0.8rem 1rem;
+        border: 1px solid var(--fg);
+        border-radius: 0.5rem;
+        background: var(--input);
+        color: var(--fg);
+        font-size: 1rem;
+        transition: border-color 0.3s ease, background 0.3s ease;
+    }
+
+    .contact-form button {
+        border: 1px solid var(--fg);
+        width: 60%;
+    }
+
+    .contact-form textarea {
+        width: 100%;
+        min-width: none;
+        resize: vertical;
+        min-height: fit-content;
+    }
+
+    .contact-form input:focus,
+    .contact-form textarea:focus {
+        border-color: var(--glow);
+        outline: none;
+    }
+
+    /* Submit button */
+    .submit-button {
+        padding: 0.8rem 1rem;
+        background: var(--accent);
+        color: var(--fg);
+        border: none;
+        border-radius: 0.5rem;
+        font-size: 1rem;
+        cursor: pointer;
+        transition: background 0.3s ease;
+    }
+
+    .submit-button:hover {
+        background: var(--link);
+        color: var(--input);
     }
 
     .g-recaptcha {
@@ -72,28 +111,36 @@
         <h2>Contact</h2>
     </div>
     <div slot="content">
-        <form action="https://api.staticforms.xyz/submit" method="post">
-            <div class="container">
-                <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
-                <input type="text" name="name" placeholder="Name" required>
-                <input type="text" name="email" placeholder="Email address" required>
-                <input type="hidden" name="replyTo" value="@">
+        <form action="https://api.staticforms.xyz/submit" method="post" class="contact-form">
+            <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
+            <div class="input-group">
+                <input type="text" id="name" name="name" required placeholder="Your Name" />
+                <input type="email" id="email" name="email" required placeholder="Your Email" />
+            </div>
+            <div class="input-group">
                 <input type="text" name="subject" placeholder="Subject" required>
-                <input type="text" name="honeypot" style="display: none;"> 
             </div>
-            <div class="container">
-                <textarea name="message" id="message" placeholder="Message" required></textarea>
+            <div class="input-group">
+                <textarea id="message" name="message" rows="4" required placeholder="Your Message" />
             </div>
-            <input class="button" type="submit" value="Send" />
+            
+            <input type="hidden" name="replyTo" value="@">
+            <input type="text" name="honeypot" style="display: none;">
             <input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
+            
+            <div class="input-group">
+                <!-- reCAPTCHA integration -->
+                <div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
+                <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+            </div>
 
-            <!-- reCAPTCHA integration -->
-            <div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
-            <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+            <div class="input-group">
+                <button type="submit" class="submit-button">Send Message</button>
+            </div>
         </form>
     </div>
     <div slot="footer">
         <a href="/Luke Else - CV.pdf" target="_blank" rel="noopener noreferrer">Curriculum Vitae</a>
         <a href="mailto:contact@luke-else.co.uk">E-Mail</a>
     </div>
-</Card>
\ No newline at end of file
+</Card>

From 051cd42fdb7b3516e3f4961953047cb0bb341554 Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Sun, 27 Apr 2025 22:02:33 +0100
Subject: [PATCH 4/4] CHORE: Cleaning up codebase

Moved component content to be above inline style blocks
---
 src/main.svelte                 | 84 ++++++++++++++++-----------------
 src/routes/+layout.svelte       | 26 +++++-----
 src/routes/contact/+page.svelte | 81 ++++++++++++++++---------------
 src/skills.svelte               | 30 ++++++------
 4 files changed, 112 insertions(+), 109 deletions(-)

diff --git a/src/main.svelte b/src/main.svelte
index 5dc18f5..bba7010 100644
--- a/src/main.svelte
+++ b/src/main.svelte
@@ -9,6 +9,47 @@
 	import Loading from "$lib/components/Loading.svelte";
 </script>
 
+{#await getJson('/json/me.json')}
+    <Loading />
+{:then info}
+    <div class="main-card">
+        <div class="card-header">
+            <h1>{info.name}</h1>
+            <h3 class="not-required">{info.job_title}</h3>
+        </div>
+        <hr />
+        <div class="flex-container">
+            <img class="profile not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
+            <p class="about">{@html info.about}</p>
+        </div>
+    </div>
+
+    <div class="container">
+        <h1>Skills</h1>
+        <hr />
+        <div class="cards">
+            <Skills skills="{info.skills}"></Skills>
+        </div>
+    </div>
+
+    <div class="container">
+        <h1>Experience</h1>
+        <hr />
+        <!-- https://github.com/K-Sato1995/svelte-vertical-timeline -->
+        <Timeline timelineData="{info.timeline}"></Timeline>
+    </div>
+
+    <div style="display: none;">{addToast(new Toast("Click on a skill to open a prompt", ToastType.Info, true, 8_000))}</div>
+    <div style="display: none;">{addToast(new Toast("Welcome!", ToastType.Success, true, 7_000))}</div>
+{:catch}
+    <div class="card">
+        <div class="card-header">
+            <h1>Unable to load portfolio overview data</h1>
+        </div>
+    </div>
+    <div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
+{/await}
+
 <style>
     .main-card {
         background-color: var(--bg-secondary);
@@ -63,45 +104,4 @@
         font-size: 1.5em;
     }
 
-</style>
-
-{#await getJson('/json/me.json')}
-    <Loading />
-{:then info}
-    <div class="main-card">
-        <div class="card-header">
-            <h1>{info.name}</h1>
-            <h3 class="not-required">{info.job_title}</h3>
-        </div>
-        <hr />
-        <div class="flex-container">
-            <img class="profile not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
-            <p class="about">{@html info.about}</p>
-        </div>
-    </div>
-
-    <div class="container">
-        <h1>Skills</h1>
-        <hr />
-        <div class="cards">
-            <Skills skills="{info.skills}"></Skills>
-        </div>
-    </div>
-
-    <div class="container">
-        <h1>Experience</h1>
-        <hr />
-        <!-- https://github.com/K-Sato1995/svelte-vertical-timeline -->
-        <Timeline timelineData="{info.timeline}"></Timeline>
-    </div>
-
-    <div style="display: none;">{addToast(new Toast("Click on a skill to open a prompt", ToastType.Info, true, 8_000))}</div>
-    <div style="display: none;">{addToast(new Toast("Welcome!", ToastType.Success, true, 7_000))}</div>
-{:catch}
-    <div class="card">
-        <div class="card-header">
-            <h1>Unable to load portfolio overview data</h1>
-        </div>
-    </div>
-    <div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
-{/await}
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index be4dc11..ba62dbb 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,6 +3,18 @@
     import ThemeSwitcher from "$lib/components/ThemeSwitcher.svelte";
 </script>
 
+<nav>
+    <a href = "/">//Profile</a>
+    <a href = "/repos">//Repos</a>
+    <a href = "/contact">//Contact</a>
+    <ThemeSwitcher />
+</nav>
+
+<div class="main-container fade">
+    <Toasts />
+    <slot />
+</div>
+
 <style>
     .main-container {
         margin-left: 10%;
@@ -45,16 +57,4 @@
         0% { opacity: 0; }
         100% { opacity: 1; }
     }
-</style>
-
-<nav>
-    <a href = "/">//Profile</a>
-    <a href = "/repos">//Repos</a>
-    <a href = "/contact">//Contact</a>
-    <ThemeSwitcher />
-</nav>
-
-<div class="main-container fade">
-    <Toasts />
-    <slot />
-</div>
+</style>
\ No newline at end of file
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 671a67f..0897274 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -29,6 +29,48 @@
     }
 </script>
 
+<Card>
+    <div slot="header">
+        <h2>Contact</h2>
+    </div>
+    <div slot="content">
+        <form action="https://api.staticforms.xyz/submit" method="post" class="contact-form">
+            <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
+
+            <!-- Form Items-->
+            <div class="input-group">
+                <input type="text" id="name" name="name" required placeholder="Your Name" />
+                <input type="email" id="email" name="email" required placeholder="Your Email" />
+            </div>
+            <div class="input-group">
+                <input type="text" name="subject" placeholder="Subject" required>
+            </div>
+            <div class="input-group">
+                <textarea id="message" name="message" rows="4" required placeholder="Your Message" />
+            </div>
+            
+            <!-- Hidden Attributes-->
+            <input type="hidden" name="replyTo" value="@">
+            <input type="text" name="honeypot" style="display: none;">
+            <input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
+            
+            <!-- reCAPTCHA integration -->
+            <div class="input-group">
+                <div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
+                <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+            </div>
+
+            <div class="input-group">
+                <button type="submit" class="submit-button">Send Message</button>
+            </div>
+        </form>
+    </div>
+    <div slot="footer">
+        <a href="/Luke Else - CV.pdf" target="_blank" rel="noopener noreferrer">Curriculum Vitae</a>
+        <a href="mailto:contact@luke-else.co.uk">E-Mail</a>
+    </div>
+</Card>
+
 <style>
 
     /* Contact form styling */
@@ -105,42 +147,3 @@
         overflow: hidden;
     }
 </style>
-
-<Card>
-    <div slot="header">
-        <h2>Contact</h2>
-    </div>
-    <div slot="content">
-        <form action="https://api.staticforms.xyz/submit" method="post" class="contact-form">
-            <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
-            <div class="input-group">
-                <input type="text" id="name" name="name" required placeholder="Your Name" />
-                <input type="email" id="email" name="email" required placeholder="Your Email" />
-            </div>
-            <div class="input-group">
-                <input type="text" name="subject" placeholder="Subject" required>
-            </div>
-            <div class="input-group">
-                <textarea id="message" name="message" rows="4" required placeholder="Your Message" />
-            </div>
-            
-            <input type="hidden" name="replyTo" value="@">
-            <input type="text" name="honeypot" style="display: none;">
-            <input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
-            
-            <div class="input-group">
-                <!-- reCAPTCHA integration -->
-                <div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
-                <script src="https://www.google.com/recaptcha/api.js" async defer></script>
-            </div>
-
-            <div class="input-group">
-                <button type="submit" class="submit-button">Send Message</button>
-            </div>
-        </form>
-    </div>
-    <div slot="footer">
-        <a href="/Luke Else - CV.pdf" target="_blank" rel="noopener noreferrer">Curriculum Vitae</a>
-        <a href="mailto:contact@luke-else.co.uk">E-Mail</a>
-    </div>
-</Card>
diff --git a/src/skills.svelte b/src/skills.svelte
index 859c2ff..554ed40 100644
--- a/src/skills.svelte
+++ b/src/skills.svelte
@@ -8,20 +8,6 @@
     let activeModal: any = null;
 </script>
 
-<style>
-    .card-footer {
-        margin-bottom: 1em;
-        display: flex;
-        gap: 1.5em;
-        justify-content: space-between;
-    }
-
-    .logo {
-        color: var(--fg);
-        font-size: 3em;
-    }
-</style>
-
 {#each skills as skill}
     <Card on:click={() => {showModal = true; activeModal = skill}}>
         <div slot="header">
@@ -56,4 +42,18 @@
             <a href="/repos">Repos</a>
         </div>
     </Modal>
-{/if}
\ No newline at end of file
+{/if}
+
+<style>
+    .card-footer {
+        margin-bottom: 1em;
+        display: flex;
+        gap: 1.5em;
+        justify-content: space-between;
+    }
+
+    .logo {
+        color: var(--fg);
+        font-size: 3em;
+    }
+</style>
\ No newline at end of file