From 6cf6660eedf9725d6c3eb03af5ad12e20b9fa8a5 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Wed, 7 Feb 2024 14:21:25 +0200
Subject: [PATCH 01/25] add react-hook-form and zod packages

---
 package-lock.json | 36 +++++++++++++++++++++++++++++++++++-
 package.json      |  5 ++++-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5130b3c..fd98ee9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "portfolio-site",
       "version": "0.1.0",
       "dependencies": {
+        "@hookform/resolvers": "^3.3.4",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "gray-matter": "^4.0.3",
@@ -16,8 +17,10 @@
         "next-themes": "^0.2.1",
         "react": "^18",
         "react-dom": "^18",
+        "react-hook-form": "^7.50.1",
         "react-icons": "^5.0.1",
-        "tailwind-merge": "^2.2.1"
+        "tailwind-merge": "^2.2.1",
+        "zod": "^3.22.4"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -553,6 +556,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.4.tgz",
+      "integrity": "sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -5644,6 +5655,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.50.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.50.1.tgz",
+      "integrity": "sha512-3PCY82oE0WgeOgUtIr3nYNNtNvqtJ7BZjsbxh6TnYNbXButaD5WpjOmTjdxZfheuHKR68qfeFnEDVYoSSFPMTQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
@@ -6984,6 +7010,14 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.22.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
+      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 7d08caf..5009030 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "gray-matter": "^4.0.3",
@@ -23,8 +24,10 @@
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.50.1",
     "react-icons": "^5.0.1",
-    "tailwind-merge": "^2.2.1"
+    "tailwind-merge": "^2.2.1",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^20",

From bfd87de067da1377f7609d46bc7f92a63284a284 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Wed, 7 Feb 2024 16:53:14 +0200
Subject: [PATCH 02/25] add contact form zod utilities

---
 src/utils/index.ts | 1 +
 src/utils/zod.ts   | 9 +++++++++
 2 files changed, 10 insertions(+)
 create mode 100644 src/utils/zod.ts

diff --git a/src/utils/index.ts b/src/utils/index.ts
index 12a0292..366ac67 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,2 +1,3 @@
 export * from './misc'
 export * from './constants'
+export * from './zod'
diff --git a/src/utils/zod.ts b/src/utils/zod.ts
new file mode 100644
index 0000000..325b971
--- /dev/null
+++ b/src/utils/zod.ts
@@ -0,0 +1,9 @@
+import { z } from 'zod'
+
+export const ContactFormSchema = z.object({
+  email: z.string().email('Email is invalid'),
+  message: z.string().min(5, 'Message is too short'),
+  name: z.string().min(2, 'Name is required'),
+})
+
+export type ContactFormInputs = z.infer<typeof ContactFormSchema>

From 5f327702934bd85da24e2ea8a3decf833c0a2c0d Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Wed, 7 Feb 2024 16:53:45 +0200
Subject: [PATCH 03/25] replace button with link

---
 src/components/sections/hero/hero.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/sections/hero/hero.tsx b/src/components/sections/hero/hero.tsx
index 7ede32d..6479f7c 100644
--- a/src/components/sections/hero/hero.tsx
+++ b/src/components/sections/hero/hero.tsx
@@ -1,8 +1,9 @@
-import Button from '@/components/ui/button'
+import Button, { buttonVariants } from '@/components/ui/button'
 import Content from '@/components/ui/content'
 import Heading from '@/components/ui/heading'
 import Socials from '@/components/ui/socials/socials'
 import { cn } from '@/utils'
+import Link from 'next/link'
 import { FC, HTMLAttributes } from 'react'
 
 import styles from './hero.module.css'
@@ -29,9 +30,12 @@ const Hero: FC<HeroProps> = ({ className, ...props }) => {
             elegant and responsive user interfaces.
           </p>
         </article>
-        <Button className="mt-5" variant="outline">
-          My Work
-        </Button>
+        <Link
+          className={cn('mt-5', buttonVariants({ variant: 'outline' }))}
+          href="/#my-projects"
+        >
+          My Projects
+        </Link>
       </Content>
       <Socials
         className="absolute bottom-8 left-8 hidden md:flex"

From 80512cee8223ce481d0d56f387038f07e4de6385 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Wed, 7 Feb 2024 16:54:09 +0200
Subject: [PATCH 04/25] update styles

---
 src/components/sections/projects/projects.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sections/projects/projects.tsx b/src/components/sections/projects/projects.tsx
index c931403..c50a6b9 100644
--- a/src/components/sections/projects/projects.tsx
+++ b/src/components/sections/projects/projects.tsx
@@ -23,7 +23,7 @@ const Projects: FC<ProjectsProps> = async ({ className, ...props }) => {
             explore other sections of the site.
           </p>
         ) : (
-          <section className="mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-8 md:mt-14 lg:max-w-none lg:grid-cols-2 xl:gap-14">
+          <section className="mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-8 md:mt-14 lg:max-w-none lg:grid-cols-2 xl:gap-12">
             {projects.map((project) => (
               <ProjectCard
                 data={project}

From abdf9f4918cedabbdd6621ff7db2e1bc09d3b4f0 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Wed, 7 Feb 2024 16:54:47 +0200
Subject: [PATCH 05/25] update technologies mapping

---
 src/components/sections/projects/project-card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sections/projects/project-card.tsx b/src/components/sections/projects/project-card.tsx
index 27c1563..85ae45d 100644
--- a/src/components/sections/projects/project-card.tsx
+++ b/src/components/sections/projects/project-card.tsx
@@ -39,10 +39,10 @@ const ProjectCard: FC<ProjectCardProps> = ({
             />
             {technologies && (
               <div className="flex flex-wrap gap-2">
-                {technologies.map((technology, index) => (
+                {technologies.map((technology) => (
                   <span
                     className="rounded-xl bg-accent bg-opacity-75 px-2 py-1 text-sm font-semibold"
-                    key={index + 1}
+                    key={technology}
                   >
                     {technology}
                   </span>

From 0d285c5898872d1dac8474a98d04f8ac2c51bfcd Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Wed, 7 Feb 2024 16:55:24 +0200
Subject: [PATCH 06/25] add Input component

---
 src/components/ui/input.tsx | 76 +++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 src/components/ui/input.tsx

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..f27caa1
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,76 @@
+import { ContactFormInputs, cn } from '@/utils'
+import { VariantProps, cva } from 'class-variance-authority'
+import { FC, InputHTMLAttributes } from 'react'
+import { Path, UseFormRegister } from 'react-hook-form'
+
+export const inputVariants = cva(
+  'w-full transition-colors outline-none md:text-xl',
+  {
+    defaultVariants: {
+      customSize: 'default',
+      variant: 'default',
+    },
+    variants: {
+      customSize: {
+        default: 'rounded-2xl px-4 py-3.5',
+        placeholder: 'rounded-2xl px-4 pb-2 pt-5',
+      },
+      variant: {
+        default:
+          'border border-neutral-400 bg-light dark:border-neutral-600 dark:bg-dark',
+        placeholder:
+          'border border-neutral-400 bg-light dark:border-neutral-600 dark:bg-dark peer relative placeholder:opacity-0',
+      },
+    },
+  }
+)
+
+export interface InputProps
+  extends InputHTMLAttributes<HTMLInputElement>,
+    VariantProps<typeof inputVariants> {
+  name: Path<ContactFormInputs>
+  register: UseFormRegister<ContactFormInputs>
+}
+
+const Input: FC<InputProps> = ({
+  className,
+  customSize,
+  name,
+  placeholder,
+  register,
+  required,
+  variant,
+  ...props
+}) => {
+  return (
+    <>
+      {placeholder ? (
+        <div className="relative">
+          <input
+            className={cn(
+              inputVariants({
+                customSize: 'placeholder',
+                variant: 'placeholder',
+              }),
+              className
+            )}
+            placeholder={placeholder}
+            {...register(name)}
+            {...props}
+          />
+          <span className="pointer-events-none absolute left-4 top-1/2 z-0 -translate-y-1/2 transition-all peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:leading-none peer-focus:text-accent peer-[:not(:placeholder-shown)]:top-2 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:leading-none">
+            {placeholder}
+          </span>
+        </div>
+      ) : (
+        <input
+          className={cn(inputVariants({ customSize, variant }), className)}
+          {...register(name)}
+          {...props}
+        />
+      )}
+    </>
+  )
+}
+
+export default Input

From ed37705d1e574721afe2013370d96eb09de73d10 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Wed, 7 Feb 2024 16:55:45 +0200
Subject: [PATCH 07/25] add Textarea component

---
 src/components/ui/textarea.tsx | 56 ++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/components/ui/textarea.tsx

diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..7051c02
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,56 @@
+import { inputVariants } from '@/components/ui/input'
+import { ContactFormInputs, cn } from '@/utils'
+import { VariantProps } from 'class-variance-authority'
+import { FC, TextareaHTMLAttributes } from 'react'
+import { Path, UseFormRegister } from 'react-hook-form'
+
+export interface TextareaProps
+  extends TextareaHTMLAttributes<HTMLTextAreaElement>,
+    VariantProps<typeof inputVariants> {
+  name: Path<ContactFormInputs>
+  register: UseFormRegister<ContactFormInputs>
+}
+
+const Textarea: FC<TextareaProps> = ({
+  className,
+  customSize,
+  name,
+  placeholder,
+  register,
+  required,
+  variant,
+  ...props
+}) => {
+  return (
+    <>
+      {placeholder ? (
+        <div className="relative">
+          <textarea
+            className={cn(
+              'h-full',
+              inputVariants({
+                customSize: 'placeholder',
+                variant: 'placeholder',
+              }),
+              className
+            )}
+            placeholder={placeholder}
+            {...register(name)}
+            {...props}
+          />
+          <span className="pointer-events-none absolute left-4 top-4 z-0 transition-all peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:leading-none peer-focus:text-accent peer-[:not(:placeholder-shown)]:top-2 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:leading-none">
+            {placeholder}
+          </span>
+        </div>
+      ) : (
+        <textarea
+          className={cn(inputVariants({ customSize, variant }), className)}
+          {...register(name)}
+          {...props}
+        />
+      )}
+    </>
+  )
+}
+
+export default Textarea

From aa63b546b855f6cfa8aa1d66f15f392e946440aa Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Wed, 7 Feb 2024 16:56:06 +0200
Subject: [PATCH 08/25] add Label component

---
 src/components/ui/label.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/components/ui/label.tsx

diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..f6f3a2a
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,14 @@
+import { cn } from '@/utils'
+import { FC, LabelHTMLAttributes } from 'react'
+
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}
+
+const Label: FC<LabelProps> = ({ children, className, ...props }) => {
+  return (
+    <label className={cn('font-medium md:text-lg', className)} {...props}>
+      {children}
+    </label>
+  )
+}
+
+export default Label

From 15af2b0850d363efe555f672da451c5564b5369f Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Wed, 7 Feb 2024 16:56:27 +0200
Subject: [PATCH 09/25] add FormItem component

---
 src/components/ui/form-item.tsx | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/components/ui/form-item.tsx

diff --git a/src/components/ui/form-item.tsx b/src/components/ui/form-item.tsx
new file mode 100644
index 0000000..b62f7c9
--- /dev/null
+++ b/src/components/ui/form-item.tsx
@@ -0,0 +1,26 @@
+import { cn } from '@/utils'
+import { FC, HTMLAttributes } from 'react'
+
+interface FormItemProps extends HTMLAttributes<HTMLDivElement> {
+  error?: string
+}
+
+const FormItem: FC<FormItemProps> = ({
+  children,
+  className,
+  error,
+  ...props
+}) => {
+  return (
+    <div className={cn('relative flex flex-col gap-1', className)} {...props}>
+      {children}
+      {error && (
+        <span className="absolute -bottom-1 left-0 translate-y-full text-xs text-red-500">
+          {error}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default FormItem

From 523e760725544acb79b9122fbb228dae496c4a78 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Wed, 7 Feb 2024 16:58:51 +0200
Subject: [PATCH 10/25] add ContactForm component

---
 .../sections/contact/contact-form.tsx         | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/components/sections/contact/contact-form.tsx

diff --git a/src/components/sections/contact/contact-form.tsx b/src/components/sections/contact/contact-form.tsx
new file mode 100644
index 0000000..cc07c96
--- /dev/null
+++ b/src/components/sections/contact/contact-form.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import Button from '@/components/ui/button'
+import FormItem from '@/components/ui/form-item'
+import Input from '@/components/ui/input'
+import Label from '@/components/ui/label'
+import Textarea from '@/components/ui/textarea'
+import { ContactFormInputs, ContactFormSchema, cn } from '@/utils'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { FC, FormHTMLAttributes } from 'react'
+import { SubmitHandler, useForm } from 'react-hook-form'
+
+interface ContactFormProps extends FormHTMLAttributes<HTMLFormElement> {}
+
+const ContactForm: FC<ContactFormProps> = ({ className, ...props }) => {
+  const {
+    formState: { errors },
+    handleSubmit,
+    register,
+    reset,
+  } = useForm<ContactFormInputs>({
+    resolver: zodResolver(ContactFormSchema),
+  })
+
+  const onSubmit: SubmitHandler<ContactFormInputs> = (data) => {
+    alert(JSON.stringify(data))
+    reset()
+  }
+
+  return (
+    <form
+      className={cn('grid grid-cols-2 gap-x-10 gap-y-8', className)}
+      onSubmit={handleSubmit(onSubmit)}
+      {...props}
+    >
+      <FormItem error={errors.name?.message}>
+        <Label htmlFor="name">Enter your name</Label>
+        <Input
+          id="name"
+          name="name"
+          placeholder="Name"
+          register={register}
+          required
+          type="text"
+        />
+      </FormItem>
+      <FormItem error={errors.email?.message}>
+        <Label htmlFor="email">Enter your email</Label>
+        <Input
+          id="email"
+          name="email"
+          placeholder="Email"
+          register={register}
+          required
+          type="email"
+        />
+      </FormItem>
+      <FormItem className="col-span-2" error={errors.message?.message}>
+        <Label htmlFor="message">Enter your message</Label>
+        <Textarea
+          id="message"
+          name="message"
+          placeholder="Message"
+          register={register}
+          required
+          rows={4}
+        />
+      </FormItem>
+      <Button type="submit">Submit</Button>
+    </form>
+  )
+}
+
+export default ContactForm

From ac61b42e0bb89b5a884c8dbccb406d2696cd43b7 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Wed, 7 Feb 2024 16:59:34 +0200
Subject: [PATCH 11/25] add Contact component

---
 src/components/sections/contact/contact.tsx | 32 +++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/components/sections/contact/contact.tsx

diff --git a/src/components/sections/contact/contact.tsx b/src/components/sections/contact/contact.tsx
new file mode 100644
index 0000000..f18a2ee
--- /dev/null
+++ b/src/components/sections/contact/contact.tsx
@@ -0,0 +1,32 @@
+import ContactForm from '@/components/sections/contact/contact-form'
+import Content from '@/components/ui/content'
+import Heading from '@/components/ui/heading'
+import { cn } from '@/utils'
+import { FC, HTMLAttributes } from 'react'
+
+interface ContactProps extends HTMLAttributes<HTMLDivElement> {}
+
+const Contact: FC<ContactProps> = ({ className, ...props }) => {
+  return (
+    <section className={cn('bg-light dark:bg-black', className)} {...props}>
+      <Content className="max-w-5xl">
+        <Heading size="h2" variant="underline">
+          Get In Touch
+        </Heading>
+        <p className="mt-6 md:text-xl">
+          Drop me a message using the form below or reach out via my email{' '}
+          <a
+            className="font-semibold transition-colors hover:text-accent"
+            href="mailto:bochkovskyi.anton@gmail.com"
+          >
+            bochkovskyi.anton@gmail.com
+          </a>
+          .
+        </p>
+        <ContactForm className="mt-6" />
+      </Content>
+    </section>
+  )
+}
+
+export default Contact

From 0a3e3e2ca0f27df806e308cac9ed958906559b51 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Wed, 7 Feb 2024 16:59:55 +0200
Subject: [PATCH 12/25] utilize Contact component

---
 src/app/page.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ac6e9e0..fe745eb 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,5 @@
 import About from '@/components/sections/about'
+import Contact from '@/components/sections/contact/contact'
 import Hero from '@/components/sections/hero/hero'
 import Projects from '@/components/sections/projects/projects'
 
@@ -8,6 +9,7 @@ export default function Home() {
       <Hero />
       <About className="py-16 md:py-24" id="about-me" />
       <Projects className="py-16 md:py-24" id="my-projects" />
+      <Contact className="py-16 md:py-24" id="contact-me" />
     </>
   )
 }

From 798b4a169e628e65cdd761a3cbd36888564b23ca Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Wed, 7 Feb 2024 17:00:13 +0200
Subject: [PATCH 13/25] add new word

---
 project-words.txt | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/project-words.txt b/project-words.txt
index 844bf3d..bbff8cc 100644
--- a/project-words.txt
+++ b/project-words.txt
@@ -3,4 +3,5 @@ Bochkovskyi
 clsx
 Nextdotjs
 Tailwindcss
-Skauna
\ No newline at end of file
+Skauna
+hookform
\ No newline at end of file

From a76f5896f827c581c6e5831d8c5510e4b0ff94ce Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Wed, 7 Feb 2024 21:37:32 +0200
Subject: [PATCH 14/25] add sonner package

---
 package-lock.json | 10 ++++++++++
 package.json      |  1 +
 2 files changed, 11 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index fd98ee9..f254e0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "react-dom": "^18",
         "react-hook-form": "^7.50.1",
         "react-icons": "^5.0.1",
+        "sonner": "^1.4.0",
         "tailwind-merge": "^2.2.1",
         "zod": "^3.22.4"
       },
@@ -6087,6 +6088,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sonner": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.4.0.tgz",
+      "integrity": "sha512-nvkTsIuOmi9e5Wz5If8ldasJjZNVfwiXYijBi2dbijvTQnQppvMcXTFNxL/NUFWlI2yJ1JX7TREDsg+gYm9WyA==",
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
diff --git a/package.json b/package.json
index 5009030..5336f59 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.50.1",
     "react-icons": "^5.0.1",
+    "sonner": "^1.4.0",
     "tailwind-merge": "^2.2.1",
     "zod": "^3.22.4"
   },

From 4d84a5d3df386ced51668629da5bb9fa85535554 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Wed, 7 Feb 2024 21:37:58 +0200
Subject: [PATCH 15/25] utilize Toaster component

---
 src/app/layout.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7bed936..5ae9165 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import type { Metadata } from 'next'
 import Header from '@/components/header/header'
 import Providers from '@/store/providers'
 import { cn } from '@/utils'
+import { Toaster } from 'sonner'
 
 import { raleway } from './fonts'
 import './globals.css'
@@ -25,6 +26,12 @@ export default function RootLayout({
           <main className="flex-shrink flex-grow basis-0">{children}</main>
           <div>11111</div>
         </Providers>
+        <Toaster
+          position="bottom-center"
+          richColors
+          theme="system"
+          toastOptions={{ classNames: { title: 'text-sm' } }}
+        />
       </body>
     </html>
   )

From 0b9f0d51da3642e030f1573e1e229a39c44fc9d7 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 8 Feb 2024 14:43:20 +0200
Subject: [PATCH 16/25] update styles

---
 src/components/ui/button.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 75f04f7..7e8f18a 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -3,7 +3,7 @@ import { VariantProps, cva } from 'class-variance-authority'
 import { ButtonHTMLAttributes, FC } from 'react'
 
 export const buttonVariants = cva(
-  'font-medium transition-all active:scale-95 md:text-lg',
+  'font-medium transition-all active:scale-95 md:text-lg disabled:pointer-events-none',
   {
     defaultVariants: {
       size: 'default',
@@ -16,10 +16,10 @@ export const buttonVariants = cva(
       },
       variant: {
         default:
-          'border-2 border-accent bg-accent text-light md:hover:bg-accent-light md:hover:border-accent-light',
+          'border-2 border-accent bg-accent text-light md:hover:bg-accent-light disabled:border-accent-light disabled:bg-accent-light md:hover:border-accent-light',
         icon: 'bg-transparent md:hover:text-accent',
         outline:
-          'border-2 border-accent bg-transparent text-accent md:hover:bg-accent md:hover:text-light',
+          'border-2 border-accent bg-transparent text-accent disabled:border-accent-light disabled:text-accent-light md:hover:bg-accent md:hover:text-light',
       },
     },
   }

From 853a3c1d7f98945b9ba1bfe1fef138ff198c7516 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 8 Feb 2024 14:44:03 +0200
Subject: [PATCH 17/25] move Toaster to the Providers component

---
 src/app/layout.tsx            | 7 -------
 src/store/providers/index.tsx | 7 +++++++
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5ae9165..7bed936 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,7 +3,6 @@ import type { Metadata } from 'next'
 import Header from '@/components/header/header'
 import Providers from '@/store/providers'
 import { cn } from '@/utils'
-import { Toaster } from 'sonner'
 
 import { raleway } from './fonts'
 import './globals.css'
@@ -26,12 +25,6 @@ export default function RootLayout({
           <main className="flex-shrink flex-grow basis-0">{children}</main>
           <div>11111</div>
         </Providers>
-        <Toaster
-          position="bottom-center"
-          richColors
-          theme="system"
-          toastOptions={{ classNames: { title: 'text-sm' } }}
-        />
       </body>
     </html>
   )
diff --git a/src/store/providers/index.tsx b/src/store/providers/index.tsx
index cc29ffc..f177f11 100644
--- a/src/store/providers/index.tsx
+++ b/src/store/providers/index.tsx
@@ -1,5 +1,6 @@
 import ThemeProvider from '@/store/providers/theme-provider'
 import { FC, ReactNode } from 'react'
+import { Toaster } from 'sonner'
 
 import HeaderProvider from './header-provider'
 
@@ -14,6 +15,12 @@ const Providers: FC<ProvidersProps> = ({ children }) => {
       enableSystem
     >
       <HeaderProvider>{children}</HeaderProvider>
+      <Toaster
+        position="bottom-center"
+        richColors
+        theme="system"
+        toastOptions={{ classNames: { title: 'text-sm' } }}
+      />
     </ThemeProvider>
   )
 }

From b2906b1cab02992544bd17aee680c96c41fc84ba Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 8 Feb 2024 14:44:40 +0200
Subject: [PATCH 18/25] add server actions file

---
 src/app/actions.ts | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/app/actions.ts

diff --git a/src/app/actions.ts b/src/app/actions.ts
new file mode 100644
index 0000000..7e6e272
--- /dev/null
+++ b/src/app/actions.ts
@@ -0,0 +1,37 @@
+'use server'
+
+import { ContactFormInputs, ContactFormSchema } from '@/utils'
+import emailjs, { EmailJSResponseStatus } from '@emailjs/nodejs'
+
+export const sendEmail = async (data: ContactFormInputs) => {
+  const dataParseResult = ContactFormSchema.safeParse(data)
+
+  if (dataParseResult.success) {
+    const parsedData = dataParseResult.data
+
+    try {
+      const response = await emailjs.send(
+        process.env.EMAILJS_SERVICE_ID!,
+        process.env.EMAILJS_TEMPLATE_ID!,
+        parsedData,
+        {
+          privateKey: process.env.EMAILJS_PRIVATE_KEY!,
+          publicKey: process.env.EMAILJS_PUBLIC_KEY!,
+        }
+      )
+
+      return { message: response.text, success: true }
+    } catch (error) {
+      if (error instanceof EmailJSResponseStatus) {
+        return { message: error.text, success: false }
+      }
+    }
+  }
+
+  if (!dataParseResult.success) {
+    return {
+      message: JSON.stringify(dataParseResult.error.format()),
+      success: false,
+    }
+  }
+}

From 2a62c8a5de6c9b6bda07f8e6a6d445ce36d39dee Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 8 Feb 2024 14:45:19 +0200
Subject: [PATCH 19/25] add emailjs package

---
 package-lock.json | 9 +++++++++
 package.json      | 1 +
 2 files changed, 10 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index f254e0c..3b77b05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "portfolio-site",
       "version": "0.1.0",
       "dependencies": {
+        "@emailjs/nodejs": "^2.2.0",
         "@hookform/resolvers": "^3.3.4",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
@@ -501,6 +502,14 @@
         "node": ">=18"
       }
     },
+    "node_modules/@emailjs/nodejs": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@emailjs/nodejs/-/nodejs-2.2.0.tgz",
+      "integrity": "sha512-R5V14yCNmdQ5CrzE09BlsV/5s2DN8UcmxgBTo/Jk4T8TKxYT6s8lcEBUgfHSSvPRv/GGsNUknW7MNypgibVOpA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
diff --git a/package.json b/package.json
index 5336f59..368b2f6 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@emailjs/nodejs": "^2.2.0",
     "@hookform/resolvers": "^3.3.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

From 3f5a69772d94550d18072fb41074233a1549e7b7 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 8 Feb 2024 14:45:32 +0200
Subject: [PATCH 20/25] add new word

---
 project-words.txt | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/project-words.txt b/project-words.txt
index bbff8cc..d8e64d7 100644
--- a/project-words.txt
+++ b/project-words.txt
@@ -4,4 +4,5 @@ clsx
 Nextdotjs
 Tailwindcss
 Skauna
-hookform
\ No newline at end of file
+hookform
+sonner
\ No newline at end of file

From 619447c8d053130630ad60d5d36de83587c6f3da Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 8 Feb 2024 14:46:07 +0200
Subject: [PATCH 21/25] update styles

---
 src/components/ui/input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index f27caa1..075a41c 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -4,7 +4,7 @@ import { FC, InputHTMLAttributes } from 'react'
 import { Path, UseFormRegister } from 'react-hook-form'
 
 export const inputVariants = cva(
-  'w-full transition-colors outline-none md:text-xl',
+  'w-full transition-colors outline-none md:text-lg',
   {
     defaultVariants: {
       customSize: 'default',

From 2dd54f43605235e41975124e5f34d3766c4ffe77 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 8 Feb 2024 14:46:26 +0200
Subject: [PATCH 22/25] update styles

---
 src/components/sections/contact/contact.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sections/contact/contact.tsx b/src/components/sections/contact/contact.tsx
index f18a2ee..167897a 100644
--- a/src/components/sections/contact/contact.tsx
+++ b/src/components/sections/contact/contact.tsx
@@ -9,7 +9,7 @@ interface ContactProps extends HTMLAttributes<HTMLDivElement> {}
 const Contact: FC<ContactProps> = ({ className, ...props }) => {
   return (
     <section className={cn('bg-light dark:bg-black', className)} {...props}>
-      <Content className="max-w-5xl">
+      <Content className="max-w-4xl">
         <Heading size="h2" variant="underline">
           Get In Touch
         </Heading>

From 3872204064a28be5c0aaa1eb9271d6e7600511e9 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 8 Feb 2024 14:47:12 +0200
Subject: [PATCH 23/25] add email submition logic

---
 .../sections/contact/contact-form.tsx         | 45 ++++++++++++++++---
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/components/sections/contact/contact-form.tsx b/src/components/sections/contact/contact-form.tsx
index cc07c96..c8be73d 100644
--- a/src/components/sections/contact/contact-form.tsx
+++ b/src/components/sections/contact/contact-form.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { sendEmail } from '@/app/actions'
 import Button from '@/components/ui/button'
 import FormItem from '@/components/ui/form-item'
 import Input from '@/components/ui/input'
@@ -7,12 +8,14 @@ import Label from '@/components/ui/label'
 import Textarea from '@/components/ui/textarea'
 import { ContactFormInputs, ContactFormSchema, cn } from '@/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { FC, FormHTMLAttributes } from 'react'
+import { FC, FormHTMLAttributes, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 
 interface ContactFormProps extends FormHTMLAttributes<HTMLFormElement> {}
 
 const ContactForm: FC<ContactFormProps> = ({ className, ...props }) => {
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false)
   const {
     formState: { errors },
     handleSubmit,
@@ -22,20 +25,44 @@ const ContactForm: FC<ContactFormProps> = ({ className, ...props }) => {
     resolver: zodResolver(ContactFormSchema),
   })
 
-  const onSubmit: SubmitHandler<ContactFormInputs> = (data) => {
-    alert(JSON.stringify(data))
-    reset()
+  const onSubmit: SubmitHandler<ContactFormInputs> = async (data) => {
+    setIsSubmitting(true)
+
+    const loadingToast = toast.loading('Sending a message...')
+    const result = await sendEmail(data)
+
+    if (result?.success) {
+      setIsSubmitting(false)
+
+      toast.dismiss(loadingToast)
+      toast.success('Your message has been sent!', {
+        closeButton: true,
+      })
+
+      reset()
+      return
+    }
+
+    setIsSubmitting(false)
+    toast.dismiss(loadingToast)
+    toast.error('Oops! Something went wrong!', {
+      closeButton: true,
+    })
   }
 
   return (
     <form
-      className={cn('grid grid-cols-2 gap-x-10 gap-y-8', className)}
+      className={cn(
+        'grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8 md:gap-x-10',
+        className
+      )}
       onSubmit={handleSubmit(onSubmit)}
       {...props}
     >
       <FormItem error={errors.name?.message}>
         <Label htmlFor="name">Enter your name</Label>
         <Input
+          disabled={isSubmitting}
           id="name"
           name="name"
           placeholder="Name"
@@ -47,6 +74,7 @@ const ContactForm: FC<ContactFormProps> = ({ className, ...props }) => {
       <FormItem error={errors.email?.message}>
         <Label htmlFor="email">Enter your email</Label>
         <Input
+          disabled={isSubmitting}
           id="email"
           name="email"
           placeholder="Email"
@@ -55,9 +83,10 @@ const ContactForm: FC<ContactFormProps> = ({ className, ...props }) => {
           type="email"
         />
       </FormItem>
-      <FormItem className="col-span-2" error={errors.message?.message}>
+      <FormItem className="sm:col-span-2" error={errors.message?.message}>
         <Label htmlFor="message">Enter your message</Label>
         <Textarea
+          disabled={isSubmitting}
           id="message"
           name="message"
           placeholder="Message"
@@ -66,7 +95,9 @@ const ContactForm: FC<ContactFormProps> = ({ className, ...props }) => {
           rows={4}
         />
       </FormItem>
-      <Button type="submit">Submit</Button>
+      <Button className="w-full sm:w-fit" disabled={isSubmitting} type="submit">
+        Submit
+      </Button>
     </form>
   )
 }

From 6e8f0aa89364675d9a826250f09717365d1069db Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 8 Feb 2024 14:52:32 +0200
Subject: [PATCH 24/25] add custom Toaster component

---
 src/components/ui/toaster.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 src/components/ui/toaster.tsx

diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
new file mode 100644
index 0000000..c31773c
--- /dev/null
+++ b/src/components/ui/toaster.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { THEME } from '@/types/enums/Theme'
+import { useTheme } from 'next-themes'
+import { FC } from 'react'
+import { Toaster as SonnerToaster } from 'sonner'
+
+const Toaster: FC = () => {
+  const { resolvedTheme } = useTheme()
+
+  return (
+    <SonnerToaster
+      position="bottom-center"
+      richColors
+      theme={resolvedTheme === THEME.dark ? 'dark' : 'light'}
+      toastOptions={{ classNames: { title: 'text-sm' } }}
+    />
+  )
+}
+
+export default Toaster

From 35177c192a2a223078e83a88d1946e925ccf40af Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 8 Feb 2024 14:52:51 +0200
Subject: [PATCH 25/25] update Toaster usage

---
 src/store/providers/index.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/store/providers/index.tsx b/src/store/providers/index.tsx
index f177f11..094715d 100644
--- a/src/store/providers/index.tsx
+++ b/src/store/providers/index.tsx
@@ -1,6 +1,6 @@
+import Toaster from '@/components/ui/toaster'
 import ThemeProvider from '@/store/providers/theme-provider'
 import { FC, ReactNode } from 'react'
-import { Toaster } from 'sonner'
 
 import HeaderProvider from './header-provider'
 
@@ -15,12 +15,7 @@ const Providers: FC<ProvidersProps> = ({ children }) => {
       enableSystem
     >
       <HeaderProvider>{children}</HeaderProvider>
-      <Toaster
-        position="bottom-center"
-        richColors
-        theme="system"
-        toastOptions={{ classNames: { title: 'text-sm' } }}
-      />
+      <Toaster />
     </ThemeProvider>
   )
 }