feat: contact form
This commit is contained in:
Cory Dransfeldt
parent
acebb3f020
commit
9d14995f3e
6 changed files with 144 additions and 6 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "2.3.1",
|
||||
"version": "2.4.0",
|
||||
"description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
|
||||
"main": "index.html",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ module.exports = async function () {
|
|||
{ name: 'Coffee', icon: 'cup' },
|
||||
],
|
||||
social: [
|
||||
{ name: 'Email', url: 'mailto:cory.dransfeldt@gmail.com', icon: 'brand-gmail' },
|
||||
{ name: 'Email', url: '/contact', icon: 'at' },
|
||||
{ name: 'GitHub', url: 'https://github.com/cdransf', icon: 'brand-github' },
|
||||
{ name: 'Mastodon', url: 'https://social.lol/@cory', icon: 'brand-mastodon' },
|
||||
{ name: 'Last.fm', url: 'https://www.last.fm/user/coryd_', icon: 'brand-lastfm' },
|
||||
|
|
|
|||
|
|
@ -1298,6 +1298,10 @@ video {
|
|||
height: 1rem;
|
||||
}
|
||||
|
||||
.h-40 {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.h-5 {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
|
@ -1318,6 +1322,10 @@ video {
|
|||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.w-1\/2 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.w-10 {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
|
@ -1378,6 +1386,10 @@ video {
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.resize-none {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.list-inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
|
@ -1465,6 +1477,10 @@ video {
|
|||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rounded-sm {
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
|
@ -1776,6 +1792,11 @@ video {
|
|||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.outline-none {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.ring {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
|
|
@ -1805,6 +1826,12 @@ video {
|
|||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.duration-300 {
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
|
@ -2034,6 +2061,13 @@ pre {
|
|||
--scrollbar-track: #dbeafe;
|
||||
}
|
||||
|
||||
button {
|
||||
-webkit-appearance: none !important;
|
||||
-moz-appearance: none !important;
|
||||
appearance: none !important;
|
||||
}
|
||||
|
||||
button,
|
||||
.tag--button {
|
||||
font-weight: 600;
|
||||
padding-top: 0.5rem;
|
||||
|
|
@ -2045,11 +2079,13 @@ pre {
|
|||
border-radius: 9999px;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
background: #2563eb;
|
||||
background-color: #2563eb !important;
|
||||
}
|
||||
|
||||
button.button__small,
|
||||
.tag--button.tag--button__small {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
|
|
@ -2062,10 +2098,13 @@ pre {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:active,
|
||||
button:focus,
|
||||
.tag--button:hover,
|
||||
.tag--button:active,
|
||||
.tag--button:focus {
|
||||
background: #1e40af;
|
||||
background-color: #1e40af !important;
|
||||
}
|
||||
|
||||
[data-tablericon-name] {
|
||||
|
|
@ -2250,6 +2289,11 @@ pre {
|
|||
color: rgb(30 64 175 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.focus\:border-blue-800:focus {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(30 64 175 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.focus-visible\:bg-blue-400:focus-visible {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(96 165 250 / var(--tw-bg-opacity));
|
||||
|
|
@ -2393,6 +2437,11 @@ pre {
|
|||
--tw-text-opacity: 1;
|
||||
color: rgb(191 219 254 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:focus\:border-blue-200:focus {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(191 219 254 / var(--tw-border-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
|
|
@ -2428,6 +2477,14 @@ pre {
|
|||
height: 24rem;
|
||||
}
|
||||
|
||||
.md\:w-1\/3 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.md\:w-3\/4 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.md\:w-96 {
|
||||
width: 24rem;
|
||||
}
|
||||
|
|
|
|||
28
src/contact-success.html
Normal file
28
src/contact-success.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
title: 'Success'
|
||||
layout: default
|
||||
permalink: contact/success.html
|
||||
---
|
||||
|
||||
<div class="text-center w-full">
|
||||
<h2
|
||||
class="m-0 text-4xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-6xl mb-4"
|
||||
>
|
||||
{{ title }}
|
||||
</h2>
|
||||
<h3
|
||||
class="m-0 text-xl font-bold leading-tight tracking-normal dark:text-gray-200 md:text-2xl mb-6"
|
||||
>
|
||||
I'll be in touch soon!
|
||||
</h3>
|
||||
<div class="flex justify-center">
|
||||
<a
|
||||
href="/"
|
||||
class="[&>svg]:h-5 [&>svg]:w-5 [&>svg]:inline icon--bold font-semibold py-2 px-4 rounded-full !no-underline !text-white dark:text-gray-900 bg-blue-600 dark:bg-blue-400 hover:bg-blue-800 dark:hover:bg-blue-200"
|
||||
>
|
||||
{% tablericon "home-2" "Home" %} Head home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
{% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}
|
||||
43
src/contact.md
Normal file
43
src/contact.md
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
---
|
||||
layout: default
|
||||
title: Contact
|
||||
meta:
|
||||
site:
|
||||
name: 'Cory Dransfeldt'
|
||||
description: "I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, music, writing, reading and tv and movies."
|
||||
url: https://coryd.dev
|
||||
logo:
|
||||
src: https://coryd.dev/assets/img/logo.webp
|
||||
width: 2000
|
||||
height: 2000
|
||||
language: en-US
|
||||
title: 'Cory Dransfeldt • Contact'
|
||||
description: 'How to contact me.'
|
||||
url: https://coryd.dev/contact
|
||||
image:
|
||||
src: https://coryd.dev/assets/img/avatar.webp
|
||||
---
|
||||
|
||||
<h2
|
||||
class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mb-2"
|
||||
>
|
||||
{{ title }}
|
||||
</h2>
|
||||
|
||||
Fill out the form below to get in touch (or ping me on [Mastodon](https://social.lol/@cory) if you'd rather not use email).
|
||||
|
||||
<form class="mt-4 flex flex-col justify-center items-center w-full" method="POST" action="/contact/success" name="contact" netlify netlify-honeypot="bot-field">
|
||||
<label class="hidden">
|
||||
Don't fill this out if you're human: <input name="bot-field" />
|
||||
</label>
|
||||
<label class="w-full md:w-3/4">
|
||||
<span class="hidden">Name</span>
|
||||
<input type="text" name="name" placeholder="Name" class="w-full outline-none p-2 mb-6 rounded-sm border border-blue-600 focus:border-blue-800 dark:border-blue-400 dark:focus:border-blue-200 transition-colors ease-in-out duration-300" />
|
||||
</label>
|
||||
<label class="w-full md:w-3/4">
|
||||
<span class="hidden">Email</span>
|
||||
<input type="email" name="email" placeholder="Email" class="w-full outline-none p-2 mb-6 rounded-sm border border-blue-600 focus:border-blue-800 dark:border-blue-400 dark:focus:border-blue-200 transition-colors ease-in-out duration-300" />
|
||||
</label>
|
||||
<textarea name="message" placeholder="Message" class="w-full md:w-3/4 h-40 resize-none outline-none p-2 mb-6 rounded-sm border border-blue-600 focus:border-blue-800 dark:border-blue-400 dark:focus:border-blue-200 transition-colors ease-in-out duration-300"></textarea>
|
||||
<button class="w-1/2 md:w-1/3" type="submit">Send message</button>
|
||||
</form>
|
||||
14
tailwind.css
14
tailwind.css
|
|
@ -102,6 +102,11 @@ pre {
|
|||
@apply scrollbar-track-blue-100;
|
||||
}
|
||||
|
||||
button {
|
||||
@apply !appearance-none;
|
||||
}
|
||||
|
||||
button,
|
||||
.tag--button {
|
||||
@apply font-semibold;
|
||||
@apply py-2;
|
||||
|
|
@ -110,11 +115,13 @@ pre {
|
|||
@apply mb-3;
|
||||
@apply rounded-full;
|
||||
@apply text-white;
|
||||
@apply transition-colors;
|
||||
@apply ease-in-out;
|
||||
@apply duration-300;
|
||||
background: theme(colors.blue.600);
|
||||
background-color: theme(colors.blue.600) !important;
|
||||
}
|
||||
|
||||
button.button__small,
|
||||
.tag--button.tag--button__small {
|
||||
@apply py-1;
|
||||
@apply px-2;
|
||||
|
|
@ -124,10 +131,13 @@ pre {
|
|||
@apply inline-block;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:active,
|
||||
button:focus,
|
||||
.tag--button:hover,
|
||||
.tag--button:active,
|
||||
.tag--button:focus {
|
||||
background: theme(colors.blue.800);
|
||||
background-color: theme(colors.blue.800) !important;
|
||||
}
|
||||
|
||||
[data-tablericon-name] {
|
||||
|
|
|
|||
Reference in a new issue