Merge branch 'main' into dependabot/npm_and_yarn/types/react-18.2.53

content/projects/itour.md

@@ -0,0 +1,7 @@
+---
+title: 'iTour'
+image: '/iTour.jpg'
+technologies: ['JavaScript', 'React', 'Next.js', 'TailwindCSS', 'i18n']
+---
+
+iTour project info goes here

content/projects/skauna.md

@@ -0,0 +1,7 @@
+---
+title: 'Skauna'
+image: '/Skauna.jpg'
+technologies: ['HTML', 'CSS', 'JavaScript']
+---
+
+Skauna project info goes here

package.json

@@ -15,14 +15,21 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@emailjs/nodejs": "^2.2.0",
+    "@hookform/resolvers": "^3.3.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "gray-matter": "^4.0.3",
+    "marked": "^12.0.0",
     "next": "14.1.0",
     "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"
+    "sonner": "^1.4.0",
+    "tailwind-merge": "^2.2.1",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^20",

project-words.txt

@@ -2,4 +2,7 @@ raleway
 Bochkovskyi
 clsx
 Nextdotjs
-Tailwindcss
+Tailwindcss
+Skauna
+hookform
+sonner

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,
+    }
+  }
+}

src/app/page.tsx

@@ -1,11 +1,15 @@
 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'
 
 export default function Home() {
   return (
     <>
       <Hero />
-      <About />
+      <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" />
     </>
   )
 }

src/components/header/header-navbar.tsx

@@ -29,7 +29,7 @@ const HeaderNavbar: FC<HeaderNavbarProps> = ({ className }) => {
         orientation={isMobile ? 'vertical' : 'horizontal'}
       >
         <MenuItem href="/#about-me">About Me</MenuItem>
-        <MenuItem href="/#my-projects">My Work</MenuItem>
+        <MenuItem href="/#my-projects">My Projects</MenuItem>
         <MenuItem href="/#contact-me">Contact Me</MenuItem>
       </Menu>
       <Socials className="mt-6 justify-center md:hidden" />

src/components/header/header.tsx

@@ -19,7 +19,7 @@ const Header: FC<HeaderProps> = ({ className }) => {
     >
       <HeaderNavbar />
       <div className="relative z-30 flex items-center justify-between md:static">
-        <ThemeToggler className="-m-2 md:absolute md:right-10 md:top-1/2 md:m-0 md:-translate-y-1/2" />
+        <ThemeToggler className="-mx-5 -my-2 md:absolute md:right-5 md:top-1/2 md:m-0 md:-translate-y-1/2" />
         <MenuIcon className="md:hidden" />
       </div>
     </header>