2023-07-19 14:49:15 +00:00
|
|
|
import React from "react";
|
|
|
|
|
import Head from "next/head";
|
|
|
|
|
import TextShuffler from "../components/actions/TextShuffler";
|
|
|
|
|
import submitContactForm from "../functions/frontend/submitContactForm";
|
|
|
|
|
import GeneralLayout from "../layouts/general_layout/GeneralLayout";
|
|
|
|
|
import threeJsAnimations from "../functions/frontend/threeJsAnimations";
|
2022-01-06 05:27:13 +00:00
|
|
|
|
|
|
|
|
const contact = () => {
|
2022-01-06 08:05:14 +00:00
|
|
|
let [success, setSuccess] = React.useState(false);
|
|
|
|
|
|
2022-01-06 05:27:13 +00:00
|
|
|
return (
|
|
|
|
|
<GeneralLayout>
|
2022-01-06 13:03:06 +00:00
|
|
|
<Head>
|
|
|
|
|
<title>Contact me</title>
|
2023-07-19 14:49:15 +00:00
|
|
|
<meta
|
|
|
|
|
name="description"
|
|
|
|
|
content="Get in touch"
|
|
|
|
|
/>
|
2022-01-06 13:03:06 +00:00
|
|
|
</Head>
|
|
|
|
|
|
2023-07-19 14:49:15 +00:00
|
|
|
<div className="flex flex-col items-start max-w-6xl w-full">
|
|
|
|
|
<h1>
|
|
|
|
|
<TextShuffler textInput="Get in touch" />
|
|
|
|
|
</h1>
|
|
|
|
|
<span className="hero-sub-text">
|
|
|
|
|
<TextShuffler
|
|
|
|
|
textInput="Have a question? Want to work together? Send me a message!"
|
|
|
|
|
delay={500}
|
|
|
|
|
/>
|
|
|
|
|
</span>
|
2022-01-06 05:27:13 +00:00
|
|
|
|
2023-07-19 14:49:15 +00:00
|
|
|
<form
|
|
|
|
|
autoComplete="on"
|
|
|
|
|
onSubmit={(e) => {
|
|
|
|
|
submitContactForm(e, setSuccess);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder="Your Name"
|
|
|
|
|
autoComplete="name"
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="email"
|
|
|
|
|
placeholder="Your Email Address"
|
|
|
|
|
autoComplete="email"
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
<textarea
|
|
|
|
|
name="message"
|
|
|
|
|
id="contact-form-message"
|
|
|
|
|
cols="30"
|
|
|
|
|
rows="10"
|
|
|
|
|
placeholder="Message"
|
|
|
|
|
></textarea>
|
|
|
|
|
<button type="submit">Submit</button>
|
|
|
|
|
{success === "Success" && (
|
|
|
|
|
<div className="message-response">
|
|
|
|
|
Success!!!{" "}
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => {
|
|
|
|
|
window.location.reload();
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
Reload
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
{success === "Failed" && (
|
|
|
|
|
<div className="message-response failed">
|
|
|
|
|
Failed{" "}
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => {
|
|
|
|
|
window.location.reload();
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
Reload
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2022-01-06 05:27:13 +00:00
|
|
|
</GeneralLayout>
|
2023-07-19 14:49:15 +00:00
|
|
|
);
|
|
|
|
|
};
|
2022-01-06 05:27:13 +00:00
|
|
|
|
2023-07-19 14:49:15 +00:00
|
|
|
export default contact;
|
