personal-site/pages/contact.jsx

38 lines
1.7 KiB
React
Raw Normal View History

2022-01-06 05:27:13 +00:00
import React from 'react'
2022-01-06 13:03:06 +00:00
import Head from 'next/head'
2022-01-06 05:27:13 +00:00
import TextShuffler from '../components/actions/TextShuffler'
2022-01-06 08:05:14 +00:00
import submitContactForm from '../functions/frontend/submitContactForm'
2022-01-06 05:27:13 +00:00
import GeneralLayout from '../layouts/general_layout/GeneralLayout'
2022-03-11 10:43:00 +00:00
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>
<meta name="description" content="Get in touch" />
</Head>
2022-06-04 07:26:53 +00:00
<h1><TextShuffler textInput="Great things await ..." /></h1>
2022-01-06 05:27:13 +00:00
<span className='hero-sub-text'>
2022-06-04 07:26:53 +00:00
<TextShuffler textInput="Let's talk" delay={ 500 } />
2022-01-06 05:27:13 +00:00
</span>
2022-02-04 11:25:05 +00:00
<form autoComplete='on' onSubmit={ (e) => { submitContactForm(e, setSuccess) } }>
2022-01-06 08:22:49 +00:00
<input type="text" placeholder='Your Name' autoComplete='name' required />
<input type="email" placeholder='Your Email Address' autoComplete='email' required />
2022-01-06 05:27:13 +00:00
<textarea name="message" id="contact-form-message" cols="30" rows="10" placeholder='Message'></textarea>
<button type="submit">Submit</button>
2022-02-04 11:25:05 +00:00
{ 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> }
2022-01-06 05:27:13 +00:00
</form>
2022-03-11 10:43:00 +00:00
<div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div>
2022-01-06 05:27:13 +00:00
</GeneralLayout>
)
}
export default contact