From 04c59f7d7a2ce2a33f08242611470c696ca67274 Mon Sep 17 00:00:00 2001 From: Daniel LaForce Date: Wed, 9 Apr 2025 17:38:13 -0600 Subject: [PATCH] Add contact form functionality and enhance logo styles --- functions/api/send-email.js | 54 +++++++++++++++++++++++++++++++++++ index.html | 6 ++-- resume.html | 8 +++--- script.js | 47 ++++++++++++++++++++---------- styles.css | 37 ++++++++++++++++++++++-- test-styles.css | 57 ------------------------------------- 6 files changed, 127 insertions(+), 82 deletions(-) create mode 100644 functions/api/send-email.js delete mode 100644 test-styles.css diff --git a/functions/api/send-email.js b/functions/api/send-email.js new file mode 100644 index 0000000..7e01786 --- /dev/null +++ b/functions/api/send-email.js @@ -0,0 +1,54 @@ +import { Resend } from 'resend'; + +/** + * Cloudflare Pages Function - /api/send-email + */ +export async function onRequestPost(context) { + const { name, email, subject, message } = await context.request.json(); + + try { + const response = await fetch("https://api.mailersend.com/v1/email", { + method: "POST", + headers: { + Authorization: "Bearer " + context.env.MAILERSEND_API_KEY, + "Content-Type": "application/json" + }, + body: JSON.stringify({ + from: { + email: "daniel@laforceit.com", + name: "Daniel LaForce" + }, + to: [ + { + email: "daniel@laforceit.com", + name: "Daniel LaForce" + } + ], + subject: `[Argobox] ${subject}`, + html: ` +

New Contact Message

+

Name: ${name}

+

Email: ${email}

+

Message:
${message.replace(/\n/g, "
")}

+ `, + reply_to: [ + { + email, + name + } + ] + }) + }); + + if (!response.ok) { + console.error("MailerSend Error:", await response.json()); + return new Response(JSON.stringify({ error: "Failed to send email" }), { status: 500 }); + } + + return new Response(JSON.stringify({ success: true }), { status: 200 }); + + } catch (err) { + console.error("Unexpected Error:", err); + return new Response(JSON.stringify({ error: "Unexpected server error" }), { status: 500 }); + } +} diff --git a/index.html b/index.html index 35ca1dd..9908deb 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,6 @@ - @@ -41,8 +40,7 @@
@@ -645,7 +643,7 @@ +
Home diff --git a/resume.html b/resume.html index 97489c8..e7cbb9f 100644 --- a/resume.html +++ b/resume.html @@ -294,8 +294,8 @@
@@ -805,8 +805,8 @@
diff --git a/script.js b/script.js index fe6c277..3f13196 100644 --- a/script.js +++ b/script.js @@ -394,32 +394,49 @@ function updateMetrics() { setInterval(updateMetricValues, 5000); } +/** + * Initialize contact form handling + */ /** * Initialize contact form handling */ function initFormHandling(form) { - form.addEventListener('submit', async function(e) { + form.addEventListener('submit', async function (e) { e.preventDefault(); - + const submitButton = form.querySelector('button[type="submit"]'); const originalButtonText = submitButton.innerHTML; submitButton.innerHTML = ' Sending...'; submitButton.disabled = true; - + + const formData = { + name: form.elements['name'].value, + email: form.elements['email'].value, + subject: form.elements['subject'].value, + message: form.elements['message'].value + }; + try { - // Simulated form submission - in production replace with actual API call - // const formData = new FormData(form); - // const formValues = Object.fromEntries(formData.entries()); - - // Simulated API response delay - await new Promise(resolve => setTimeout(resolve, 1500)); - - // Success message - alert('Thank you for your message! I will get back to you soon.'); - form.reset(); + const res = await fetch("/api/send-email", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(formData) + }); + + const data = await res.json(); + + if (data.success) { + alert("Thank you for your message! I will get back to you soon."); + form.reset(); + } else { + alert("Failed to send message. Please try again or contact me directly."); + } + } catch (error) { - console.error('Error:', error); - alert('Failed to send message. Please try again or contact me directly via email.'); + console.error("Error:", error); + alert("Something went wrong while sending your message."); } finally { submitButton.innerHTML = originalButtonText; submitButton.disabled = false; diff --git a/styles.css b/styles.css index bfc10d3..ed0aec8 100644 --- a/styles.css +++ b/styles.css @@ -215,7 +215,8 @@ section { font-size: 1.5rem; color: transparent; background: linear-gradient(135deg, #3b82f6, #2563eb); - -webkit-background-clip: text; +-webkit-background-clip: text; +background-clip: text; background-clip: text; text-shadow: 0 0 8px rgba(59, 130, 246, 0.5); } @@ -1505,4 +1506,36 @@ section { break-inside: avoid; page-break-inside: avoid; } -} \ No newline at end of file +} + +/* ============================ + LaForceIT.com Logo Styling + ============================ */ + +.logo-text-glow { +font-weight: 800; +font-size: 1.6rem; +background: linear-gradient(90deg, var(--accent), var(--accent-darker)); +-webkit-background-clip: text; +background-clip: text; +-webkit-text-fill-color: transparent; +text-shadow: 0 0 6px rgba(59, 130, 246, 0.5); +transition: all 0.3s ease-in-out; +} + +.logo-dot-glow { +color: white; +font-weight: 600; +font-size: 1.6rem; +margin-left: 2px; +text-shadow: 0 0 3px rgba(255, 255, 255, 0.3); +transition: all 0.3s ease-in-out; +} + +.logo-text-glow:hover, +.logo-dot-glow:hover { +text-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 8px rgba(255, 255, 255, 0.3); +transform: scale(1.02); +} + + diff --git a/test-styles.css b/test-styles.css deleted file mode 100644 index 62cd17c..0000000 --- a/test-styles.css +++ /dev/null @@ -1,57 +0,0 @@ -/* Test CSS file to confirm changes are working */ - -/* Save this as test-styles.css in your repository root */ - -/* Logo Styles - Enhanced Version */ -.logo { - position: relative; - display: flex; - align-items: center; -} - -.logo a { - display: flex; - align-items: center; - text-decoration: none; - position: relative; -} - -.logo-text { - font-family: 'Inter', sans-serif; - font-weight: 700; - font-size: 1.5rem; - background: linear-gradient(90deg, #ff0000 0%, #ff6e00 50%, #ffa500 100%); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - position: relative; - text-shadow: 0 0 15px rgba(255, 150, 100, 0.2); - letter-spacing: 0.5px; -} - -.logo-dot { - font-family: 'Inter', sans-serif; - font-weight: 700; - font-size: 1.5rem; - color: #ff6e00; - position: relative; -} - -/* Logo with tech icon detail - using different brackets to be obviously visible */ -.logo a::before { - content: "[ "; - font-family: 'JetBrains Mono', monospace; - color: #ff6e00; - font-weight: bold; - opacity: 0.8; - margin-right: 2px; -} - -.logo a::after { - content: " ]"; - font-family: 'JetBrains Mono', monospace; - color: #ff6e00; - font-weight: bold; - opacity: 0.8; - margin-left: 2px; -} \ No newline at end of file