Update production

.gitignore

@@ -6,6 +6,7 @@
 .pnp.js
 .yarn/install-state.gz
 bun.lockb
+package-lock.json
 
 # testing
 /coverage

README.md

@@ -4,6 +4,8 @@
 
 [moklet.org](https://www.moklet.org)
 
+[![Netlify Status](https://api.netlify.com/api/v1/badges/7e3e2c2a-10bc-499c-9d74-baaf228d4e17/deploy-status)](https://app.netlify.com/sites/moklet-organization/deploys)
+
 <h2>🧐 Features</h2>
 
 Here are some of the project's pages:
@@ -50,7 +52,7 @@ Technologies used in the project:
 - NextAuth.JS
 - Prisma
 
-## 🤝 Contributing
+<h2>🤝 Contributing</h2>
 
 We welcome contributions to this project! Please take a moment to review our [📄 CONTRIBUTING.md](https://github.com/mokletdev/moklet.org/blob/development/CONTRIBUTING.md) guide for details on our code of conduct, contribution process, and how to get started.
 
@@ -59,3 +61,11 @@ Your support and ideas make this project even better. Thank you for being part o
 <h2>🛡️ License:</h2>
 
 This project is licensed under the GNU [General Public License v3.0](https://github.com/mokletdev/moklet.org/blob/development/LICENSE.md)
+
+<h2>🌐 Supported by:</h2>
+
+<p align="center">
+  <a href="https://www.netlify.com/" target="_blank">
+    <img src="https://res.cloudinary.com/projectsben/image/upload/v1736730123/storage/m6rrhk5ijqrsub55ptue.svg" alt="Netlify Logo" width="100">
+  </a>
+</p>

public/contributors.json

@@ -39,36 +39,11 @@
     "linkedin": "in/teguhbayupratama",
     "website": "www.teguhbayu.xyz"
   },
-  {
-    "name": "Pandhu Arya Munjalindra",
-    "role": "Contributor (31st Gen.)",
-    "picture": "https://avatars.githubusercontent.com/u/118494120?v=4",
-    "instagram": "pandhuu._",
-    "linkedin": "in/pandhu-arya",
-    "website": "pandhu-munjalindra.xyz"
-  },
-  {
-    "name": "Muhammad Fadhil Kholaf",
-    "role": "Contributor (31st Gen.)",
-    "picture": "https://avatars.githubusercontent.com/u/110389260",
-    "instagram": "tlg69.fadhil",
-    "linkedin": "in/muhammad-fadhil-kholaf-7b1a7a270",
-    "website": "fadhilkholaf.my.id"
-  },
   {
     "name": "Moch. Gilang Ramadhan",
     "role": "Graphic & UI/UX Designer (31st Gen.)",
     "picture": "https://lh3.google.com/u/0/d/1RBoxVwdNXC4JUkblwMTSCNr_TsfAUFE0",
     "instagram": "guilangs_",
     "linkedin": "in/gilang-ramadhan-4420b8285"
-  },
-
-  {
-    "name": "Arsyad Ali Mahardika",
-    "role": "Contributor (32nd Gen.)",
-    "picture": "https://avatars.githubusercontent.com/u/90751730",
-    "instagram": "arsyadam.id",
-    "linkedin": "in/arsyadam",
-    "website": "arsyadam.id"
   }
 ]

src/app/(main)/_components/parts/SubOrgan.tsx

@@ -14,7 +14,6 @@ function SubOrganCount({
     </div>
   );
 }
-
 export default function SubOrgan() {
   return (
     <SectionWrapper id="sub-organ">

src/app/(main)/kontributor/_components/DeveloperFigure.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link";
-
 import Image from "@/app/_components/global/Image";
 import { H4, P } from "@/app/_components/global/Text";
 
@@ -16,58 +15,67 @@ export default function DeveloperFigure({
   dev,
 }: Readonly<{ dev: DeveloperData }>) {
   return (
-    <figure className="w-full lg:w-[214px] xl:w-[372px] flex flex-col gap-[32px] text-wrap">
-      <div className="flex flex-col gap-2 text-wrap">
-        <H4>{dev.name}</H4>
-        <P>{dev.role}</P>
-      </div>
-      <div className="w-full h-0 border border-neutral-400 rounded-full"></div>
-      <Image
-        src={dev.picture}
-        alt={`${dev.name}'s Picture`}
-        width={372}
-        height={278}
-        className="w-full h-full xl:h-[278px] lg:h-[278px] rounded-xl"
-        unoptimized
-      />
-      <div>
-        <div className="flex gap-[34px] mb-2 flex-row lg:flex-col lg:gap-0 xl:gap-[46px] xl:flex-row">
-          <span className="w-[84px] text-neutral-500 font-[14px]">
-            Instagram
-          </span>
-          <Link
-            className="text-black font-normal hover:text-primary-400 transition-all"
-            href={"https://instagram.com/" + dev.instagram}
-            target="_blank"
-          >
-            @{dev.instagram}
-          </Link>
-        </div>
-        <div className="flex gap-[34px] w-full mb-2 flex-row lg:flex-col lg:gap-0 xl:gap-[46px] xl:flex-row">
-          <span className="w-[84px] text-neutral-500 font-[14px]">
-            LinkedIn
-          </span>
-          <Link
-            className="text-black font-normal hover:text-primary-400 transition-all"
-            href={`https://linkedin.com/${dev.linkedin}`}
-            target="_blank"
-          >
-            {dev.linkedin.length > 20
-              ? dev.linkedin.slice(0, 20) + "..."
-              : dev.linkedin}
-          </Link>
+    <figure className="w-full bg-white rounded-xl p-6 grid grid-rows-[auto_1fr_auto] h-full gap-6">
+      <div className="flex flex-col items-center text-center">
+        <div className="max-w-[200px] sm:max-w-full w-full aspect-square mb-6 overflow-hidden rounded-xl">
+          <Image
+            src={dev.picture || "/placeholder.svg"}
+            alt={`${dev.name}'s Picture`}
+            width={280}
+            height={280}
+            className="w-full h-full object-cover"
+            unoptimized
+          />
         </div>
-        <div className="flex gap-[34px] mb-2 flex-row lg:flex-col lg:gap-0 xl:gap-[46px] xl:flex-row">
-          <span className="w-[84px] text-neutral-500 font-[14px]">Website</span>
-          <Link
-            className="text-black font-normal hover:text-primary-400 transition-all"
-            href={dev.website ? `https://${dev.website}` : "#"}
-            target="_blank"
-          >
-            {dev.website ?? "-"}
-          </Link>
+        <div className="w-full">
+          <H4 className="mb-1 line-clamp-2">{dev.name}</H4>
+          <P className="text-neutral-500 line-clamp-2">{dev.role}</P>
         </div>
       </div>
+
+      <div className="w-full h-px bg-neutral-200 self-end"></div>
+
+      <div className="space-y-3">
+        <ContactInfo
+          label="Instagram"
+          value={`@${dev.instagram}`}
+          href={`https://instagram.com/${dev.instagram}`}
+        />
+        <ContactInfo
+          label="LinkedIn"
+          value={dev.linkedin}
+          href={`https://linkedin.com/in/${dev.linkedin}`}
+        />
+        <ContactInfo
+          label="Website"
+          value={dev.website ?? "-"}
+          href={dev.website ? `https://${dev.website}` : "#"}
+        />
+      </div>
     </figure>
   );
 }
+
+function ContactInfo({
+  label,
+  value,
+  href,
+}: Readonly<{
+  label: string;
+  value: string;
+  href: string;
+}>) {
+  return (
+    <div className="grid grid-cols-[5rem,1fr] items-start gap-2">
+      <span className="text-sm text-neutral-500">{label}</span>
+      <Link
+        className="text-sm text-black hover:text-primary-400 transition-colors break-all line-clamp-1"
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {value}
+      </Link>
+    </div>
+  );
+}

src/app/(main)/kontributor/_components/GithubContributor.tsx

@@ -0,0 +1,31 @@
+import Image from "@/app/_components/global/Image";
+import { GitHubContributorType } from "../page";
+
+interface GitHubContributorProps {
+  contributor: GitHubContributorType;
+}
+
+export default function GitHubContributor({
+  contributor,
+}: Readonly<GitHubContributorProps>) {
+  return (
+    <a
+      href={contributor.html_url}
+      target="_blank"
+      className="flex flex-col items-center p-4 rounded-lg hover:bg-neutral-50 transition-all"
+    >
+      <Image
+        src={contributor.avatar_url}
+        alt={`${contributor.login}'s GitHub avatar`}
+        width={80}
+        height={80}
+        className="rounded-full mb-2"
+        unoptimized
+      />
+      <p className="text-sm font-medium text-center">{contributor.login}</p>
+      <p className="text-xs text-neutral-500">
+        {contributor.contributions} contributions
+      </p>
+    </a>
+  );
+}