From 7feaef724695f68dcfabb8d4d976aef05b77bca0 Mon Sep 17 00:00:00 2001
From: ziyaudheenms <msharafudeen193@gmail.com>
Date: Tue, 14 Oct 2025 06:23:18 +0530
Subject: [PATCH 1/2] Add Ziyaudheen MS to person directory

---
 src/ProjectsData/projects.ts   |  27 ++++++++
 src/app/page.tsx               |  23 +++++++
 src/app/ziyaudheen-ms/page.tsx | 116 +++++++++++++++++++++++++++++++++
 src/components/Projects.tsx    |  56 ++++++++++++++++
 4 files changed, 222 insertions(+)
 create mode 100644 src/ProjectsData/projects.ts
 create mode 100644 src/app/ziyaudheen-ms/page.tsx
 create mode 100644 src/components/Projects.tsx

diff --git a/src/ProjectsData/projects.ts b/src/ProjectsData/projects.ts
new file mode 100644
index 0000000..fcb6d24
--- /dev/null
+++ b/src/ProjectsData/projects.ts
@@ -0,0 +1,27 @@
+
+export const ziyaudheenProjects = [
+  {
+    id:1,
+    projectTitle: "VIDMEET : THE COMPLETE VIDEO CONFERENCE APPLICATION",
+    projectType: "FULL STACK DEVELOPMENT",
+    projectDescription: "After a significant period of learning, implementation, and debugging, I successfully launched a full-stack video conferencing platform. This project, VIDMEET, was built entirely using Next.js and TypeScript, which deepened my skills in server components ('use server'), custom hooks, and powerful authentication with Clerk.",
+    Technologies: ["NextJs" , "Stream" , "Tailwind CSS", ],
+  },
+
+  {
+    id:2,
+    projectTitle: "PARLEZ AI : YOUR VIRTUAL INTERVIEWER",
+    projectType: "FULL STACK DEVELOPMENT WITH AI INTEGRATION",
+    projectDescription: "Introducing your personal virtual interviewer, powered by an LLM for a knowledge-based, serious interview experience. To ensure relevance and realism, simply provide the job description and expectations; you can then practice any interview as many times as you need.",
+    Technologies: ["NextJs" , "Python Django" , "Tailwind CSS", "Vapi Agent" , "Google Gemini"],
+  },
+  {
+    id:3 ,
+    projectTitle: "CLAUDCANVAS : TRANSFORM ANYTHING AS YOU NEED",
+    projectType: "FULL STACK DEVELOPMENT WITH AI INTEGRATION",
+    projectDescription: "CLAUDCANVAS makes complex media transformations easy for everyone. Powered by Cloudinary's AI, the platform lets you effortlessly edit, optimize, and transform your images, videos, and audio. Manage all your content and creations from an intuitive dashboard.",
+    Technologies: ["NextJs" , "Python Django" , "Tailwind CSS", "Claudinary AI"],
+  },
+  
+];
+
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 41ec1ea..6ba1657 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -41,6 +41,29 @@ export default function Home() {
                 </div>
               </div>
             </Link>
+            {/*Ziyaudheen's Card */}
+             <Link href="/ziyaudheen-ms" className="group">
+              <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-200 dark:border-gray-700 hover:scale-105">
+                <div className="flex items-center space-x-4">
+                  <div className="flex-shrink-0">
+                    <div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold text-lg">
+                      Z
+                    </div>
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="text-xl font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                      Ziyaudheen MS
+                    </h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Computer Science Student
+                    </p>
+                    <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
+                      Age: 18 • First Year
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </Link>
 
           </div>
         </main>
diff --git a/src/app/ziyaudheen-ms/page.tsx b/src/app/ziyaudheen-ms/page.tsx
new file mode 100644
index 0000000..e36cb36
--- /dev/null
+++ b/src/app/ziyaudheen-ms/page.tsx
@@ -0,0 +1,116 @@
+import Navbar from "@/components/Navbar";
+import Projects from "@/components/Projects";
+import { ziyaudheenProjects } from "@/ProjectsData/projects";
+
+export default function page() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+      <Navbar />
+      <div className="container mx-auto px-4 py-12">
+
+        {/* Person Profile */}
+        <div className="max-w-4xl mx-auto">
+          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+            {/* Header */}
+            <div className="bg-gradient-to-r from-green-500 to-blue-600 px-8 py-12">
+              <div className="flex items-center space-x-6 flex-col md:flex-row">
+                <div className="flex-shrink-0">
+                  <div className="w-24 h-24 bg-blue-600 rounded-full flex items-center justify-center text-white font-semibold text-4xl">
+                    Z {/* First letter of your name */}
+                  </div>
+                </div>
+                <div className="flex-1 ">
+                  <h1 className="text-3xl text-center md:text-left md:text-4xl font-bold text-white mb-2">
+                    Ziyaudheen MS
+                  </h1>
+                  <p className="text-lg text-center md:text-left md:text-xl text-blue-100 mb-2">Full Stack Software Developer</p>
+                  <p className="text-blue-200 text-center md:text-left">Age: 18 •  Doing btech CSE first year.</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Content */}
+            <div className="p-8">
+              {/* Bio Section */}
+              <div className="mb-8">
+                <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+                  About
+                </h2>
+                <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+                  Myself I am Ziyaudheen MS. Currently  doing Computer Science and Engineering (S1). I am a full Stack software developer with experience in Various Tech frameworks. Working as a Master Tutor by training 100+ students in a digital initiative STEYP. Looking forward to learn more about dev and possibilities of AI/ML in web development.  Also looking forward to contribute in open source projects.Interested in collaborating with all to build something great together. </p>
+              </div>
+
+              {/* Skills Section */}
+              <div className="mb-8">
+                <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+                  Skills & Interests
+                </h2>
+                <div className="flex flex-wrap gap-3">
+                  <span className="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm font-medium">
+                    Javascript
+                  </span>
+                  <span className="px-4 py-2 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full text-sm font-medium">
+                    React Js
+                  </span>
+                  <span className="px-4 py-2 bg-purple-100 dark:bg-red-900 text-red-800 dark:text-red-200 rounded-full text-sm font-medium">
+                    Next JS
+                  </span>
+                  <span className="px-4 py-2 bg-purple-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 rounded-full text-sm font-medium">
+                    Python
+                  </span>
+                   <span className="px-4 py-2 bg-purple-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 rounded-full text-sm font-medium">
+                    Node Js
+                  </span>
+                  <span className="px-4 py-2 bg-purple-100 dark:bg-fuchsia-900 text-fuchsia-800 dark:text-fuchsia-200 rounded-full text-sm font-medium">
+                    AI/ML
+                  </span>
+                  <span className="px-4 py-2 bg-purple-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded-full text-sm font-medium">
+                    Full Stack Development
+                  </span>
+                  {/* Add more skills/interests as needed */}
+                </div>
+              </div>
+                <div className="mb-8">
+                    <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+                  Personal Projects
+                </h2>
+                <div className="flex flex-col gap-3">
+                {
+                  ziyaudheenProjects.map((item) => (
+                <Projects key={item.id} projectTitle={item.projectTitle} projectDescription={item.projectDescription} projectType={item.projectType} technologies={item.Technologies ?? []}/>
+
+                  ))
+                }
+                </div>
+                </div>
+              {/* Contact Section */}
+              <div className="mb-8">
+                <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+                  Get in Touch
+                </h2>
+                <div className="space-y-3">
+                  <div className="flex items-center space-x-3">
+                    <span className="text-gray-600 dark:text-gray-400">📧</span>
+                    <span className="text-gray-700 dark:text-gray-300">msharafudeen193@gmail.com</span>
+                  </div>
+                  <div className="flex items-center space-x-3">
+                    <span className="text-gray-600 dark:text-gray-400">🔗</span>
+                    <a href="https://www.linkedin.com/in/ziyaudheen-ms-b73a75337" className="text-blue-600 dark:text-blue-400 hover:underline">
+                      LinkedIn Profile
+                    </a>
+                  </div>
+                  <div className="flex items-center space-x-3">
+                    <span className="text-gray-600 dark:text-gray-400">🐙</span>
+                    <a href="https://github.com/ziyaudheenms" className="text-blue-600 dark:text-blue-400 hover:underline">
+                      GitHub Profile
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
new file mode 100644
index 0000000..ab53e31
--- /dev/null
+++ b/src/components/Projects.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+
+interface ProjectCard {
+    projectTitle: string,
+    projectDescription: string,
+    projectType: string,
+    technologies: string[]
+}
+
+function Projects({ projectTitle, projectDescription, technologies, projectType }: ProjectCard) {
+    return (
+        <div className="bg-white dark:bg-gray-900 rounded-xl shadow-md p-6 border border-gray-200 dark:border-gray-800">
+            <div className="flex flex-col items-start space-y-4">
+                <div className="flex-1 mb-4">
+                    <h3 className=" text-lg md:text-xl font-bold text-blue-700 dark:text-blue-300 mb-2">
+                        {projectTitle}
+                    </h3>
+                    <p className="text-base text-gray-700 dark:text-gray-300 mb-3">
+                        {projectDescription}
+                    </p>
+                    <button
+                        type="button"
+                        className="inline-block border-2 border-blue-600 dark:border-blue-400 bg-transparent text-blue-700 dark:text-blue-300 p-1 md:px-4 md:py-1 rounded-lg text-sm font-semibold mb-2 shadow hover:bg-blue-50 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-400"
+                    >
+                        Domain: <span className="font-normal text-[14px]">{projectType}</span>
+                    </button>
+                </div>
+                <div className="w-full">
+                    <div className="flex flex-wrap gap-2">
+                        {technologies.map((tech, idx) => (
+                            <span
+                                key={idx}
+                                className={`px-3 py-1 rounded-full text-sm font-medium ${
+                                    [
+                                        "bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-200",
+                                        "bg-green-100 text-green-900 dark:bg-green-900 dark:text-green-200",
+                                        "bg-purple-100 text-purple-900 dark:bg-purple-900 dark:text-purple-200",
+                                        "bg-yellow-100 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-200",
+                                        "bg-pink-100 text-pink-900 dark:bg-pink-900 dark:text-pink-200",
+                                        "bg-red-100 text-red-900 dark:bg-red-900 dark:text-red-200",
+                                        "bg-indigo-100 text-indigo-900 dark:bg-indigo-900 dark:text-indigo-200",
+                                        "bg-teal-100 text-teal-900 dark:bg-teal-900 dark:text-teal-200"
+                                    ][idx % 8]
+                                }`}
+                            >
+                                {tech}
+                            </span>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Projects

From 50fb8771abc46051e3c93d6ab87cd9cf062c48a1 Mon Sep 17 00:00:00 2001
From: ziyaudheenms <msharafudeen193@gmail.com>
Date: Tue, 14 Oct 2025 17:24:56 +0530
Subject: [PATCH 2/2] Add Ziyaudheen MS to person directory

---
 src/ProjectsData/projects.ts   | 27 -------------
 src/app/ziyaudheen-ms/page.tsx | 74 ++++++++++++++++++++++++++++++++--
 src/components/Projects.tsx    | 56 -------------------------
 3 files changed, 71 insertions(+), 86 deletions(-)
 delete mode 100644 src/ProjectsData/projects.ts
 delete mode 100644 src/components/Projects.tsx

diff --git a/src/ProjectsData/projects.ts b/src/ProjectsData/projects.ts
deleted file mode 100644
index fcb6d24..0000000
--- a/src/ProjectsData/projects.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-
-export const ziyaudheenProjects = [
-  {
-    id:1,
-    projectTitle: "VIDMEET : THE COMPLETE VIDEO CONFERENCE APPLICATION",
-    projectType: "FULL STACK DEVELOPMENT",
-    projectDescription: "After a significant period of learning, implementation, and debugging, I successfully launched a full-stack video conferencing platform. This project, VIDMEET, was built entirely using Next.js and TypeScript, which deepened my skills in server components ('use server'), custom hooks, and powerful authentication with Clerk.",
-    Technologies: ["NextJs" , "Stream" , "Tailwind CSS", ],
-  },
-
-  {
-    id:2,
-    projectTitle: "PARLEZ AI : YOUR VIRTUAL INTERVIEWER",
-    projectType: "FULL STACK DEVELOPMENT WITH AI INTEGRATION",
-    projectDescription: "Introducing your personal virtual interviewer, powered by an LLM for a knowledge-based, serious interview experience. To ensure relevance and realism, simply provide the job description and expectations; you can then practice any interview as many times as you need.",
-    Technologies: ["NextJs" , "Python Django" , "Tailwind CSS", "Vapi Agent" , "Google Gemini"],
-  },
-  {
-    id:3 ,
-    projectTitle: "CLAUDCANVAS : TRANSFORM ANYTHING AS YOU NEED",
-    projectType: "FULL STACK DEVELOPMENT WITH AI INTEGRATION",
-    projectDescription: "CLAUDCANVAS makes complex media transformations easy for everyone. Powered by Cloudinary's AI, the platform lets you effortlessly edit, optimize, and transform your images, videos, and audio. Manage all your content and creations from an intuitive dashboard.",
-    Technologies: ["NextJs" , "Python Django" , "Tailwind CSS", "Claudinary AI"],
-  },
-  
-];
-
diff --git a/src/app/ziyaudheen-ms/page.tsx b/src/app/ziyaudheen-ms/page.tsx
index e36cb36..3553d74 100644
--- a/src/app/ziyaudheen-ms/page.tsx
+++ b/src/app/ziyaudheen-ms/page.tsx
@@ -1,6 +1,34 @@
 import Navbar from "@/components/Navbar";
-import Projects from "@/components/Projects";
-import { ziyaudheenProjects } from "@/ProjectsData/projects";
+
+
+
+ const ziyaudheenProjects = [
+  {
+    id:1,
+    projectTitle: "VIDMEET : THE COMPLETE VIDEO CONFERENCE APPLICATION",
+    projectType: "FULL STACK DEVELOPMENT",
+    projectDescription: "After a significant period of learning, implementation, and debugging, I successfully launched a full-stack video conferencing platform. This project, VIDMEET, was built entirely using Next.js and TypeScript, which deepened my skills in server components ('use server'), custom hooks, and powerful authentication with Clerk.",
+    Technologies: ["NextJs" , "Stream" , "Tailwind CSS", ],
+  },
+
+  {
+    id:2,
+    projectTitle: "PARLEZ AI : YOUR VIRTUAL INTERVIEWER",
+    projectType: "FULL STACK DEVELOPMENT WITH AI INTEGRATION",
+    projectDescription: "Introducing your personal virtual interviewer, powered by an LLM for a knowledge-based, serious interview experience. To ensure relevance and realism, simply provide the job description and expectations; you can then practice any interview as many times as you need.",
+    Technologies: ["NextJs" , "Python Django" , "Tailwind CSS", "Vapi Agent" , "Google Gemini"],
+  },
+  {
+    id:3 ,
+    projectTitle: "CLAUDCANVAS : TRANSFORM ANYTHING AS YOU NEED",
+    projectType: "FULL STACK DEVELOPMENT WITH AI INTEGRATION",
+    projectDescription: "CLAUDCANVAS makes complex media transformations easy for everyone. Powered by Cloudinary's AI, the platform lets you effortlessly edit, optimize, and transform your images, videos, and audio. Manage all your content and creations from an intuitive dashboard.",
+    Technologies: ["NextJs" , "Python Django" , "Tailwind CSS", "Claudinary AI"],
+  },
+  
+];
+
+
 
 export default function page() {
   return (
@@ -77,7 +105,47 @@ export default function page() {
                 <div className="flex flex-col gap-3">
                 {
                   ziyaudheenProjects.map((item) => (
-                <Projects key={item.id} projectTitle={item.projectTitle} projectDescription={item.projectDescription} projectType={item.projectType} technologies={item.Technologies ?? []}/>
+                 <div key={item.id} className="bg-white dark:bg-gray-900 rounded-xl shadow-md p-6 border border-gray-200 dark:border-gray-800">
+            <div className="flex flex-col items-start space-y-4">
+                <div className="flex-1 mb-4">
+                    <h3 className=" text-lg md:text-xl font-bold text-blue-700 dark:text-blue-300 mb-2">
+                        {item.projectTitle}
+                    </h3>
+                    <p className="text-base text-gray-700 dark:text-gray-300 mb-3">
+                        {item.projectDescription}
+                    </p>
+                    <button
+                        type="button"
+                        className="inline-block border-2 border-blue-600 dark:border-blue-400 bg-transparent text-blue-700 dark:text-blue-300 p-1 md:px-4 md:py-1 rounded-lg text-sm font-semibold mb-2 shadow hover:bg-blue-50 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-400"
+                    >
+                        Domain: <span className="font-normal text-[14px]">{item.projectType}</span>
+                    </button>
+                </div>
+                <div className="w-full">
+                    <div className="flex flex-wrap gap-2">
+                        {item.Technologies.map((tech, idx) => (
+                            <span
+                                key={idx}
+                                className={`px-3 py-1 rounded-full text-sm font-medium ${
+                                    [
+                                        "bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-200",
+                                        "bg-green-100 text-green-900 dark:bg-green-900 dark:text-green-200",
+                                        "bg-purple-100 text-purple-900 dark:bg-purple-900 dark:text-purple-200",
+                                        "bg-yellow-100 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-200",
+                                        "bg-pink-100 text-pink-900 dark:bg-pink-900 dark:text-pink-200",
+                                        "bg-red-100 text-red-900 dark:bg-red-900 dark:text-red-200",
+                                        "bg-indigo-100 text-indigo-900 dark:bg-indigo-900 dark:text-indigo-200",
+                                        "bg-teal-100 text-teal-900 dark:bg-teal-900 dark:text-teal-200"
+                                    ][idx % 8]
+                                }`}
+                            >
+                                {tech}
+                            </span>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
 
                   ))
                 }
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
deleted file mode 100644
index ab53e31..0000000
--- a/src/components/Projects.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react'
-
-interface ProjectCard {
-    projectTitle: string,
-    projectDescription: string,
-    projectType: string,
-    technologies: string[]
-}
-
-function Projects({ projectTitle, projectDescription, technologies, projectType }: ProjectCard) {
-    return (
-        <div className="bg-white dark:bg-gray-900 rounded-xl shadow-md p-6 border border-gray-200 dark:border-gray-800">
-            <div className="flex flex-col items-start space-y-4">
-                <div className="flex-1 mb-4">
-                    <h3 className=" text-lg md:text-xl font-bold text-blue-700 dark:text-blue-300 mb-2">
-                        {projectTitle}
-                    </h3>
-                    <p className="text-base text-gray-700 dark:text-gray-300 mb-3">
-                        {projectDescription}
-                    </p>
-                    <button
-                        type="button"
-                        className="inline-block border-2 border-blue-600 dark:border-blue-400 bg-transparent text-blue-700 dark:text-blue-300 p-1 md:px-4 md:py-1 rounded-lg text-sm font-semibold mb-2 shadow hover:bg-blue-50 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-400"
-                    >
-                        Domain: <span className="font-normal text-[14px]">{projectType}</span>
-                    </button>
-                </div>
-                <div className="w-full">
-                    <div className="flex flex-wrap gap-2">
-                        {technologies.map((tech, idx) => (
-                            <span
-                                key={idx}
-                                className={`px-3 py-1 rounded-full text-sm font-medium ${
-                                    [
-                                        "bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-200",
-                                        "bg-green-100 text-green-900 dark:bg-green-900 dark:text-green-200",
-                                        "bg-purple-100 text-purple-900 dark:bg-purple-900 dark:text-purple-200",
-                                        "bg-yellow-100 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-200",
-                                        "bg-pink-100 text-pink-900 dark:bg-pink-900 dark:text-pink-200",
-                                        "bg-red-100 text-red-900 dark:bg-red-900 dark:text-red-200",
-                                        "bg-indigo-100 text-indigo-900 dark:bg-indigo-900 dark:text-indigo-200",
-                                        "bg-teal-100 text-teal-900 dark:bg-teal-900 dark:text-teal-200"
-                                    ][idx % 8]
-                                }`}
-                            >
-                                {tech}
-                            </span>
-                        ))}
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default Projects