feat: contact form

package.json

@@ -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": {

src/_data/nav.js

@@ -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' },

src/assets/styles/tailwind.css

@@ -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;
   }

src/contact-success.html

@@ -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 %}

src/contact.md

@@ -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>

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] {