safety commit before i delete pages dir

package.json

@@ -15,15 +15,15 @@
     "@types/react-dom": "18.0.11",
     "axios": "^1.3.4",
     "eslint": "8.35.0",
-    "eslint-config-next": "13.2.1",
+    "eslint-config-next": "^13.5.4",
     "framer-motion": "^10.2.4",
     "google-auth-library": "^8.7.0",
     "googleapis": "^113.0.0",
-    "next": "13.2.1",
+    "next": "^13.5.4",
     "nextjs-progressbar": "^0.0.16",
     "nodemailer": "^6.9.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-parallax-tilt": "^1.7.117",
     "react-toastify": "^9.1.2",
     "typescript": "4.9.5",

src/app/api/mail/route.ts

@@ -0,0 +1,71 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next"
+import nodemailer from "nodemailer"
+
+type Data = {
+  success: boolean
+  message?: string
+  name?: string
+  error?: any
+}
+
+const { EMAIL, RECEIPIENT_EMAIL, PASSWORD } = process.env
+
+const transporter = nodemailer.createTransport({
+  service: "gmail",
+  auth: {
+    user: EMAIL,
+    pass: PASSWORD,
+  },
+})
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  const { email, name, desc } = req.body
+
+  if (req.method !== "POST") {
+    return res
+      .status(404)
+      .json({ success: false, message: "The method is not defined" })
+  }
+
+  if (!email || !name || !desc) {
+    return res
+      .status(400)
+      .json({ success: false, message: "Fill all the fields!!" })
+  }
+
+  const mailData = {
+    from: EMAIL,
+    to: RECEIPIENT_EMAIL,
+    subject: `Message from ${name}`,
+    text: desc + " | Sent by: " + email,
+    html: `<div>${desc}</div><p>Sent by:
+    ${email}</p>`,
+  }
+
+  try {
+    await new Promise((resolve, reject) => {
+      transporter.sendMail(mailData, (error, info) => {
+        if (error) {
+          console.log(error)
+          reject(error)
+          return res.status(500).json({ success: false, error: error })
+        } else {
+          console.log("Mail has been sent successfully")
+          resolve(true)
+          return res.status(200).json({
+            success: true,
+            name,
+            message: `${name} your mail has been sent.   Thank You :)`,
+          })
+        }
+      })
+    })
+  } catch (error) {
+    console.log(error)
+    return res.status(500).json({ success: false, error: error })
+  }
+}

src/app/art-gallery/page.tsx

@@ -0,0 +1,24 @@
+import Navbar from "@/components/UIComponents/Navbar/Navbar"
+import Blob from "@/components/UIComponents/Blob/Blob"
+import styles from "../../styles/ArtGallery.module.css"
+import ArtGallery from "@/components/ArtGallery/ArtGallery"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Deveesh Shetty - Art Gallery",
+  description: "Arts - Paintings / Sketches made by Deveesh Shetty",
+}
+
+function ArtGalleryPage() {
+  return (
+    <>
+      <Blob />
+      <Navbar />
+      <main className={styles.main}>
+        <ArtGallery />
+      </main>
+    </>
+  )
+}
+
+export default ArtGalleryPage

src/app/contact/page.tsx

@@ -0,0 +1,26 @@
+import Navbar from "@/components/UIComponents/Navbar/Navbar"
+import Blob from "@/components/UIComponents/Blob/Blob"
+import Contact from "@/components/Contact/Contact"
+import ContactForm from "@/components/Contact/ContactForm"
+import styles from "../../styles/Contact.module.css"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Deveesh Shetty - Contact",
+  description: "Deveesh Shetty Contact Info",
+}
+
+function ContactPage() {
+  return (
+    <>
+      <Blob />
+      <Navbar />
+      <main className={styles.main}>
+        <Contact />
+        <ContactForm />
+      </main>
+    </>
+  )
+}
+
+export default ContactPage

src/app/layout.tsx

@@ -0,0 +1,27 @@
+import { Metadata } from "next"
+import NextNProgress from "nextjs-progressbar"
+import { ToastContainer } from "react-toastify"
+import "@/styles/globals.css"
+
+export const metadata: Metadata = {
+  title: "Deveesh Shetty",
+  description: "Portfolio Site of Deveesh Shetty",
+}
+
+export default function RootLayout({
+  // Layouts must accept a children prop.
+  // This will be populated with nested layouts or pages
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <NextNProgress color="var(--clr-primary-100)" />
+        {children}
+        <ToastContainer />
+      </body>
+    </html>
+  )
+}

src/app/page.tsx

@@ -0,0 +1,29 @@
+import Head from "next/head"
+import Landing from "@/components/Landing/Landing"
+import Navbar from "@/components/UIComponents/Navbar/Navbar"
+import Blob from "@/components/UIComponents/Blob/Blob"
+import Home from "@/components/Home/Home"
+import Skills from "@/components/Skills/Skills"
+import styles from "../styles/Landing.module.css"
+import Achievements from "@/components/Achievements/Achievements"
+
+export default function LandingPage() {
+  return (
+    <>
+      <Head>
+        <title>Deveesh Shetty</title>
+        <meta name="description" content="Portfolio Site of Deveesh Shetty" />
+      </Head>
+      <>
+        <Blob />
+        <Navbar />
+        <main className={styles.main}>
+          <Landing />
+          <Home />
+          <Achievements />
+          <Skills />
+        </main>
+      </>
+    </>
+  )
+}

src/app/projects/page.tsx

@@ -0,0 +1,23 @@
+import Projects from "@/components/Projects/Projects"
+import Blob from "@/components/UIComponents/Blob/Blob"
+import Navbar from "@/components/UIComponents/Navbar/Navbar"
+import Head from "next/head"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Deveesh Shetty - Projects",
+  description:
+    "Projects built by Deveesh Shetty showcased in my portfolio site",
+}
+
+function ProjectPage() {
+  return (
+    <>
+      <Navbar />
+      <Blob />
+      <Projects />
+    </>
+  )
+}
+
+export default ProjectPage

src/components/Projects/Project.tsx

@@ -0,0 +1,127 @@
+import { Dispatch, SetStateAction, useEffect } from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import Image from "next/image"
+import { Icon } from "@iconify/react"
+import { ProjectObject } from "@/lib/types"
+import { projectsLength } from "@/lib/projects"
+import styles from "./Projects.module.css"
+
+type Props = {
+  index: number
+  setIndex: Dispatch<SetStateAction<number>>
+  project: ProjectObject
+}
+
+function Project({ project, setIndex, index }: Props) {
+  const {
+    name,
+    tagline,
+    sourceCode,
+    liveUrl,
+    blogUrl,
+    descriptionOne,
+    descriptionTwo,
+    img,
+  } = project
+
+  function next() {
+    setIndex((prev) => (prev + 1) % projectsLength)
+  }
+
+  function prev() {
+    if (index === 0) setIndex((prev) => (prev = projectsLength - 1))
+    else setIndex((prev) => prev - 1)
+  }
+
+  function handleToggle(e: KeyboardEvent) {
+    if (e.key === "ArrowLeft") prev()
+    else if (e.key == "ArrowRight") next()
+  }
+
+  useEffect(() => {
+    document.addEventListener("keyup", handleToggle)
+
+    return () => {
+      document.removeEventListener("keyup", handleToggle)
+    }
+  }, [])
+
+  return (
+    <AnimatePresence>
+      <motion.section
+        className={styles.container}
+        initial={{ x: 1000, opacity: 0 }}
+        animate={{ x: 0, opacity: 1 }}
+        transition={{ ease: "easeInOut", duration: 0.2 }}
+      >
+        <div className={styles.projects}>
+          <div className={styles.content}>
+            <div className={styles.content_heading}>
+              <h2>{name}</h2>
+              <h3>{tagline}</h3>
+            </div>
+            <div className={styles.content_paragraph}>
+              <p>{descriptionOne}</p>
+              <p>{descriptionTwo}</p>
+            </div>
+            <div className={styles.content_navigations}>
+              <div>
+                <button className={styles.code_btn}>
+                  <Icon icon="ph:code" />
+                  <a href={sourceCode!} target="_blank">
+                    <p>Source Code</p>
+                  </a>
+                </button>
+                <button className={styles.blog_btn}>
+                  <a href={blogUrl!} target="_blank">
+                    Blog
+                  </a>
+                </button>
+              </div>
+              <button className={styles.live_btn}>
+                <a href={liveUrl!} target="_blank">
+                  Go Live
+                </a>
+              </button>
+            </div>
+            <div className={styles.primary_navigation}>
+              <button data-function="prev" onClick={prev}>
+                <Icon icon="ic:baseline-arrow-left" />
+                <p>Prev</p>
+              </button>
+              <button data-function="next" onClick={next}>
+                <p>Next</p>
+                <Icon icon="ic:baseline-arrow-right" />
+              </button>
+            </div>
+          </div>
+          <div className={styles.image_container}>
+            <a href={liveUrl!} target="_blank">
+              <Image src={img} alt="Chromatico Mobile" />
+            </a>
+          </div>
+        </div>
+        <div className={styles.scroll_text_container}>
+          <div className={styles.scroll_text}>
+            <p>{name}</p>
+            <p>&bull;</p>
+            <p>{name}</p>
+            <p>&bull;</p>
+            <p>{name}</p>
+            <p>&bull;</p>
+          </div>
+          <div className={styles.scroll_text}>
+            <p>{name}</p>
+            <p>&bull;</p>
+            <p>{name}</p>
+            <p>&bull;</p>
+            <p>{name}</p>
+            <p>&bull;</p>
+          </div>
+        </div>
+      </motion.section>
+    </AnimatePresence>
+  )
+}
+
+export default Project