Skip to content

Add Ziyaudheen MS to person directory #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ziyaudheenms wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add Ziyaudheen MS to person directory #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7feaef7
Add Ziyaudheen MS to person directory
ziyaudheenms Oct 14, 2025
50fb877
Add Ziyaudheen MS to person directory
ziyaudheenms Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
184 changes: 184 additions & 0 deletions src/app/ziyaudheen-ms/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
import Navbar from "@/components/Navbar";



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 (
<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) => (
<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>

))
}
</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>
);
}