tweak to working details

app/contact/page.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { submitMessage } from "@/server/actions/contact.actions";
 import { useMemo, useState } from "react";
 
 export default function ContactPage() {
@@ -15,7 +16,7 @@ export default function ContactPage() {
             <div className="flex flex-col mx-24 items-center dark:text-white ">
                 <h1 className="text-3xl my-8 place-self-start">Thanks for your interest! I&apos;m looking forward to hearing from you.</h1>
 
-                <form className="w-full">
+                <form className="w-full" action={async () => await submitMessage({ from: email, text: message })}>
                     <div className="flex w-full">
                         <div className="flex flex-col w-1/2 mr-2">
                             <label htmlFor="name">Name</label>

components/Navbar/index.tsx

@@ -37,9 +37,6 @@ export default function Navbar() {
 
             <div className="hidden md:inline-flex justify-end w-3/4">
                 <NavbarButton   href="/about"     label="About"       />
-                <NavbarButton   href="/projects"  label="Projects"    />
-                <NavbarButton   href="/read"      label="Read"        />
-                <NavbarButton   href="/listen"    label="Listen"      />
                 <NavbarButton   href="/links"     label="Links"       />
                 <NavbarButton   href="/contact"   label="Contact"     />
             </div>
@@ -60,8 +57,8 @@ export default function Navbar() {
                 <p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 uppercase p-2 border-opacity-50 hover:border-opacity-75'>About</p>
             </Link>
 
-            <Link onClick={() => setMobileMenuOpen(false)} passHref href="/projects" className="w-auto px-2">
+            <Link onClick={() => setMobileMenuOpen(false)} passHref href="/links" className="w-auto px-2">
-                <p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 hover:border-opacity-75 uppercase p-2 border-opacity-50'>Projects</p>
+                <p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 hover:border-opacity-75 uppercase p-2 border-opacity-50'>Links</p>
             </Link>
 
             <Link onClick={() => setMobileMenuOpen(false)} passHref href="/contact" className="w-auto px-2">

components/Resume/Experience.tsx

@@ -11,7 +11,7 @@ export default function Experience() {
 
                 <div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
 
-                <p className="dark:text-white leading-relaxed font-light">Building a dedicated tool for sound design professionals to browse, stream, and download from a large library of audio assets in an on-premise managed cloud solution.</p>
+                <p className="dark:text-white leading-relaxed font-light">Contributing as part of a development team building an insurance tech solution.</p>
             </Card>
 
             <Card>

env.mjs

@@ -2,7 +2,18 @@ import { createEnv } from "@t3-oss/env-nextjs";
 import { z } from 'zod';
 
 const env = createEnv({
-    
+    server: {
+        SMTP_USER: z.string().optional(),
+        SMTP_PASS: z.string().optional(),
+        SMTP_TO: z.string().optional(),
+        SMTP_HOST: z.string().optional(),
+    },
+    runtimeEnv: {
+        SMTP_USER: process.env.SMTP_USER,
+        SMTP_PASS: process.env.SMTP_PASS,
+        SMTP_TO: process.env.SMTP_TO,
+        SMTP_HOST: process.env.SMTP_HOST,
+    },
 })
 
 export { env }

next.config.js

@@ -2,6 +2,9 @@
 const nextConfig = {
     pageExtensions: ['js', 'jsx', 'ts', 'tsx'],
     reactStrictMode: true,
+    experimental: {
+        serverActions: true,
+    }
 }
 
 module.exports = nextConfig;

server/actions/contact.actions.ts

@@ -1,26 +1,32 @@
 'use server';
 import { createTransport } from "nodemailer";
 import SMTPTransport from "nodemailer/lib/smtp-transport";
+import { env } from "../../env.mjs"
 
 export async function submitMessage({ from, text }: { from: string, text: string }) {
-    // const transport = createTransport({
+    const options = {
-    //     host: "unknown",
+        host: env.SMTP_HOST,
-    //     port: 0,
+        port: 587,
-    //     auth: {
+        auth: {
-    //         user: env.SMTP_USER,
+            user: env.SMTP_USER,
-    //         pass: ""
+            pass: env.SMTP_PASS,
-    //     },
+        },
+    } as SMTPTransport.Options;
+
+    // console.log({ options });
+
+    // const transport = createTransport(options);
+
+    // const result = await transport.sendMail({
     //     subject: "Contact Form Submission | mikayla.dev",
-    //     to: env.SMTP_USER,
+    //     to: env.SMTP_TO,
     //     from,
     //     text,
-    // } as SMTPTransport.Options);
+    // });
 
-    // const result = await transport.sendMail(sendMailOptions)
     // const failed = result.rejected.concat(result.pending).filter(Boolean);
 
     // if (failed.length) {
     //     throw new Error("Failed to send email verification");
     // }
-
 }