Update 1

- Added contact on website functionality, added new projects, contact pages, added technologies section inside about page, bug fixes

.env.example

@@ -0,0 +1,2 @@
+DISCORD_WEBHOOK="" # Discord Webhook URL
+GITHUB_TOKEN="" # Github Token

.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.env
+
 # dependencies
 /node_modules
 /.pnp

README.md

@@ -1,9 +1,10 @@
-# ``v3`` of my Personal portfolio website (JavaScript version) by ``BinaryBlazer``
+# `v3` of my Personal portfolio website (JavaScript version) by `BinaryBlazer`
 
 > [!WARNING]
 > This version is still under construction. Visit the latest stable version: https://github.com/binary-blazer/portfolio/tree/v2
 
 ## 🖥️ Hosting
+
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FJanjyTapYT%2Fportfolio&env=webhook,GITHUB_ACCESS_TOKEN&envDescription=You%20need%20the%20webhook%20variable%20to%20let%20the%20contact%20page%20work.%20you%20can%20create%20webhook%20url%20in%20a%20dscord%20server%20%2F%20channel%20and%20paste%20it%20in%20the%20variable%20value&project-name=portfolio&repo-name=portfolio&demo-title=JanjyTapYT's%20Website&demo-description=A%20cool%20designed%20developer%20website%20built%20with%20Nextjs%20and%20react.&demo-url=https%3A%2F%2Fjanjytapyt.me&demo-image=https%3A%2F%2Fcdn.discordapp.com%2Fattachments%2F971049189377179718%2F1034191567763816448%2Funknown.png)
 
 ## Getting Started
@@ -13,17 +14,21 @@
 ```bash
 npm/yarn/pnpm install && npm/yarn/pnpm start dev
 ```
+
 ## 🛠 Production Server
+
 ```bash
 npm/yarn/pnpm install && npm/yarn/pnpm run build && npm/yarn/pnpm run start
 ```
 
 # Format
+
 ```
 npm/yarn/pnpm format
 ```
 
 ### Terms of Use
+
 By using this website, you agree to the following terms of use:
 
 ```md
@@ -44,13 +49,12 @@ To learn more about Next.js, take a look at the following resources:
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-
 ## ⭐ Star
- - Don't forget to star this repo for support :)
 
+- Don't forget to star this repo for support :)
 
 ## 💫 Credits
 
 ```bash
 Developed with ❤️ by BinaryBlazer
-```
+```

app/about/page.jsx

@@ -1,8 +1,70 @@
+"use client";
+
+import React from "react";
+import { technologies } from "@/main.config";
+import { motion, AnimatePresence } from "framer-motion";
+
 export default function About() {
+  const [currentTab, setCurrentTab] = React.useState(technologies[0]);
+  const tabs = technologies.map((tab) => (
+    <button
+      key={tab.name}
+      onClick={() => setCurrentTab(tab)}
+      className={`${
+        currentTab.name === tab.name
+          ? "bg-primary-500 text-neutral-100"
+          : "bg-neutral-800 text-primary-500"
+      } px-4 py-2 rounded-lg`}
+    >
+      {tab.name}
+    </button>
+  ));
+
   return (
     <>
-      <main className="flex flex-row min-h-screen items-center justify-center p-32 mx-auto">
-        <div className="flex flex-col w-2/3 items-start justify-center">
+      <main className="flex flex-col min-h-screen items-center justify-center p-32 mx-auto">
+        <div className="flex flex-row w-full items-start justify-center">
+          <div className="flex flex-col w-2/3 items-start justify-center">
+            <div className="flex flex-row gap-2 items-center justify-start">
+              <div className="bg-primary-500 p-2 rounded-lg">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={1.5}
+                  stroke="currentColor"
+                  className="w-6 h-6"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
+                  />
+                </svg>
+              </div>
+              <h2 className="text-4xl font-bold text-center">
+                About Me<span className="text-primary-500">.</span>
+              </h2>
+            </div>
+            <p className="text-xl mt-2">
+              I&apos;m a full-stack developer with a passion for open-source
+              software and the web. I&apos;ve been developing for the web for
+              over 6 years and have a strong understanding of web technologies
+              and best practices. I&apos;m also a strong advocate for
+              open-source software and have contributed to many projects over
+              the years.
+            </p>
+          </div>
+          <div className="flex flex-row gap-2 w-1/3 items-center justify-end">
+            <img
+              src="https://avatars.githubusercontent.com/u/81481526?v=4"
+              alt="BinaryBlazer"
+              className="w-64 h-64 rounded-xl border-4 border-primary-500 shadow-lg bg-neutral-800 hover:transform hover:translate-y-[-4px] transition-transform duration-150 ease-in-out"
+              draggable="false"
+            />
+          </div>
+        </div>
+        <div className="flex flex-col w-full items-start justify-center mt-[15rem]">
           <div className="flex flex-row gap-2 items-center justify-start">
             <div className="bg-primary-500 p-2 rounded-lg">
               <svg
@@ -16,29 +78,51 @@ export default function About() {
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
+                  d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
                 />
               </svg>
             </div>
             <h2 className="text-4xl font-bold text-center">
-              About Me<span className="text-primary-500">.</span>
+              Technologies I Use<span className="text-primary-500">.</span>
             </h2>
           </div>
           <p className="text-xl mt-2">
-            I&apos;m a full-stack developer with a passion for open-source software
-            and the web. I&apos;ve been developing for the web for over 6 years and
-            have a strong understanding of web technologies and best practices.
-            I&apos;m also a strong advocate for open-source software and have
-            contributed to many projects over the years.
+            I have experience with a wide range of technologies, from front-end
+            frameworks like React and Vue to back-end frameworks like Express
+            and Django. I also have experience with cloud platforms like AWS and
+            Google Cloud, and have worked with databases like MongoDB and
+            PostgreSQL. I&apos;m always looking to learn new technologies and
+            expand my skillset.
           </p>
         </div>
-        <div className="flex flex-row gap-2 w-1/3 items-center justify-end">
-          <img
-            src="https://avatars.githubusercontent.com/u/81481526?v=4"
-            alt="BinaryBlazer"
-            className="w-64 h-64 rounded-xl border-4 border-primary-500 shadow-lg bg-neutral-800 hover:transform hover:translate-y-[-4px] transition-transform duration-150 ease-in-out"
-            draggable="false"
-          />
+        <div className="mt-8 w-full">
+          <div className="flex flex-row gap-2 items-center justify-start">
+            {tabs}
+          </div>
+        </div>
+        <div className="flex flex-col w-full items-start justify-center mt-16">
+          <h3 className="text-xl font-bold text-center">{currentTab.name}</h3>
+          <motion.div
+            className="gap-2 w-full  mt-2 items-center justify-start grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+            transition={{ duration: 0.5, staggerChildren: 0.2 }}
+          >
+            <AnimatePresence>
+              {currentTab.technologies.map((tech) => (
+                <motion.div
+                  key={tech.name}
+                  className="bg-neutral-800 gap-2 flex flex-row items-center justify-start p-2 w-full rounded-lg text-center transition-transform duration-150 ease-in-out transform hover:translate-y-[-4px]"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: 20 }}
+                >
+                  <div className="bg-neutral-700 p-2 rounded-md">
+                    <img src={tech.icon} alt={tech.name} className="w-6 h-6" />
+                  </div>
+                  {tech.name}
+                </motion.div>
+              ))}
+            </AnimatePresence>
+          </motion.div>
         </div>
       </main>
     </>

app/api/contact/route.js

@@ -0,0 +1,47 @@
+export async function POST(request) {
+  try {
+    const { email, firstName, lastName, message } = await request
+      .clone()
+      .json();
+
+    if (!email || !firstName || !lastName || !message) {
+      return new Response("Missing required fields", { status: 400 });
+    }
+
+    const discordWebhook = process.env.DISCORD_WEBHOOK;
+    const webhookData = {
+      content: `**New Contact Form Submission**`,
+      embeds: [
+        {
+          color: 0x2f3136,
+          fields: [
+            { name: "Name", value: `${firstName} ${lastName}` },
+            { name: "Email", value: email },
+            { name: "Message", value: message },
+          ],
+        },
+      ],
+    };
+
+    const response = await fetch(discordWebhook, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(webhookData),
+    });
+
+    if (!response.ok) {
+      return new Response("An error occurred while sending the message", {
+        status: 500,
+      });
+    }
+
+    return new Response("Message sent successfully", { status: 200 });
+  } catch (error) {
+    console.error(error);
+    return new Response("An error occurred while sending the message", {
+      status: 500,
+    });
+  }
+}