Merge pull request #55 from wrideveloper/feat/miniclass-talent-card

src/components/section/talent-pool/components/talent-card.svelte

@@ -10,6 +10,7 @@
  export let about: string;
  export let profileImage: string;
  export let yearsOfExperience: number;
+ export let smallerImage = false;
 
  type Contact = {
  type: "github" | "email" | "dribbble" | "linkedin";
@@ -19,25 +20,40 @@
 </script>
 
 <div
- class="relative grid grid-rows-[15rem,3.5rem,4rem,3rem] rounded-lg border border-slate-200 bg-white transition-all duration-300 p-4"
+ class="relative grid grid-cols-2 md:grid-cols-1 gap-x-4
+ {smallerImage
+ ? 'grid-rows-[auto,auto,1.5rem] md:grid-rows-[13rem,3.5rem,4rem,3rem]'
+ : 'grid-rows-[auto,auto,1.5rem] md:grid-rows-[15rem,3.5rem,4rem,3rem]'}
+ rounded-lg border border-slate-200 bg-white transition-all duration-300 p-4"
 >
- <div class="relative w-full h-60 rounded-lg bg-slate-200 border border-slate-200 overflow-hidden">
- <img class="absolute bottom-0 inset-x-0 mx-auto w-full object-cover" src={profileImage} alt="Doctor" />
+ <div
+ class="col-start-1 col-end-2 row-start-1 row-end-4 md:row-end-2 self-start justify-self-center relative rounded-lg bg-slate-200 border border-slate-200 overflow-hidden
+ {smallerImage ? 'w-[8rem] h-[8rem] md:w-[13rem] md:h-[13rem]' : 'w-[9.8rem] h-[9.8rem] md:w-[15rem] md:h-[15rem]'}"
+ >
+ <img class="absolute bottom-0 inset-x-0 mx-auto w-full object-cover" src={profileImage} alt={name} />
  </div>
- <div class="font-sans mt-3">
+ <div
+ class="col-start-2 col-end-3 md:col-start-1 md:col-end-2 row-start-1 row-end-2 md:row-start-2 md:row-end-3 self-start font-sans md:mt-3"
+ >
  <h4 class="font-semibold text-slate-800">{name}</h4>
  <p class="text-sm text-slate-400">{position}</p>
  </div>
- <div class="mt-2 flex-1">
+ <div
+ class="col-start-2 col-end-3 md:col-start-1 md:col-end-2 row-start-2 row-end-3 md:row-start-3 md:row-end-4 md:mt-2 flex-1"
+ >
  <p class="text-sm text-slate-500">
  {about}
  </p>
  </div>
- <div class="flex items-center justify-between font-sans mt-3">
+ <div
+ class="col-start-2 col-end-3 md:col-start-1 md:col-end-2 row-start-3 row-end-4 md:row-start-4 md:row-end-5 flex items-start md:items-center justify-between font-sans mt-2"
+ >
  <div class="flex items-center gap-2">
  {#each contacts as contact}
- <button
- class="h-8 w-8 rounded-full text-slate-400 hover:text-primary-500 hover:enabled:bg-slate-100 flex items-center justify-center tw-accessiblity transition-colors duration-300"
+ <a
+ href={contact.url}
+ target="_blank"
+ class="h-4 w-4 md:w-8 md:h-8 rounded-full text-slate-400 hover:text-primary-500 hover:enabled:bg-slate-100 flex items-center justify-center tw-accessiblity transition-colors duration-300"
  >
  {#if contact.type === "linkedin"}
  <LinkedInIcon class="w-4 h-4" />
@@ -48,18 +64,18 @@
  {:else if contact.type === "email"}
  <EmailIcon class="w-4 h-4" />
  {/if}
- </button>
+ </a>
  {/each}
  </div>
  <div class="flex items-center justify-end gap-2">
  <StarIcon class="w-4 h-4 text-amber-600" />
  <span class="font-semibold text-xs text-slate-500">
  {#if yearsOfExperience > 5}
- +5 yrs exp
+ +5y
  {:else if yearsOfExperience > 0}
- +{yearsOfExperience} yrs exp
+ +{yearsOfExperience}y
  {:else}
- &lt;1 yr exp
+ &lt;1y
  {/if}
  </span>
  </div>

src/content/config.ts

@@ -22,6 +22,7 @@ const miniclassCollection = defineCollection({
  image: z.string().url(),
  day: z.enum(["senin", "selasa", "rabu", "kamis", "jumat", "sabtu", "minggu"]),
  time: z.tuple([z.string().min(1), z.string().min(1)]),
+ mentors: z.array(z.string()),
  }),
 });
 

src/content/miniclass/game.md

@@ -7,6 +7,8 @@ day: kamis
 time:
  - "19.00"
  - "21.00"
+mentors:
+ - Ziedny Mubarok
 ---
 
 # Pengenalan Singkat
@@ -88,7 +90,3 @@ Berikut merupakan materi yang akan dipelajari di Miniclass Game.
 2. **SQLite**
 
  
-
-# Mentor
-
-Siapa aja

src/content/miniclass/mobile.md

@@ -7,6 +7,11 @@ day: senin
 time:
  - "19.00"
  - "21.00"
+mentors:
+ - Muhammad Ilzam Mulkhaq
+ - Tio Irawan
+ - Agus Prayogi
+ - Maulana Arif
 ---
 
 # Pengenalan Singkat
@@ -56,7 +61,3 @@ Berikut merupakan materi yang akan dipelajari di Miniclass Mobile.
 2. **Praktik Model List pada RecycleView**
 
  
-
-# Mentor
-
-Siapa aja

src/content/miniclass/ui-ux.md

@@ -7,6 +7,9 @@ day: rabu
 time:
  - "19.00"
  - "21.00"
+mentors:
+ - Ahmad Shodikin
+ - Fitrah Rahmadhani Ahmad
 ---
 
 # Pengenalan Singkat
@@ -21,7 +24,7 @@ Tentu saja, miniclass ini tidak akan lengkap tanpa challenge yang menarik. Kami
 
  
 
-# Sibalus
+# Silabus
 
 Berikut merupakan materi yang akan dipelajari di Miniclass UI/UX Design.
 
@@ -47,7 +50,3 @@ Berikut merupakan materi yang akan dipelajari di Miniclass UI/UX Design.
 6. **Fase Testing**
 
  
-
-# Mentor
-
-Siapa aja

src/content/miniclass/web.md

@@ -7,6 +7,11 @@ day: rabu
 time:
  - "19.00"
  - "21.00"
+mentors:
+ - Muhammad Ali Zulfikar
+ - Alfan (Alivan) Olivan
+ - Muhammad Ilzam Mulkhaq
+ - Dicha Zelianivan Arkana
 ---
 
 ## Pengenalan Singkat
@@ -58,12 +63,12 @@ Apa aja nih yang bakal dipelajarin? Ok kita bakal bagi jadi beberapa bagian, yai
 - Git and GitHub
 - Mini Project 01
 
-<div style="display: flex; gap: 3px;">
- <img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="HTML Badge">
- <img src="https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white" alt="CSS Badge">
- <img src="https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E" alt="JavaScript Badge">
- <img src="https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white" alt="Git Badge">
- <img src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white" alt="GitHub Badge">
+<div style="display: flex; gap: 0.25rem; justify-content: center; flex-wrap: wrap;">
+ <img style="margin: 0;" src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="HTML Badge">
+ <img style="margin: 0;" src="https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white" alt="CSS Badge">
+ <img style="margin: 0;" src="https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E" alt="JavaScript Badge">
+ <img style="margin: 0;" src="https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white" alt="Git Badge">
+ <img style="margin: 0;" src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white" alt="GitHub Badge">
 </div>
 
 ### Advanced Phase
@@ -76,12 +81,12 @@ Apa aja nih yang bakal dipelajarin? Ok kita bakal bagi jadi beberapa bagian, yai
 - Pick a Front-end Framework (React, Vue, Angular)
 - Mini Project 02
 
-<div style="display: flex; gap: 3px;">
- <img src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB" alt="React Badge">
- <img src="https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D" alt="Vue.js Badge">
- <img src="https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white" alt="Angular Badge">
- <img src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="Tailwind CSS Badge">
- <img src="https://img.shields.io/badge/ES6-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black" alt="ES6 Badge">
+<div style="display: flex; gap: 0.25rem; justify-content: center; flex-wrap: wrap;">
+ <img style="margin: 0;" src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB" alt="React Badge">
+ <img style="margin: 0;" src="https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D" alt="Vue.js Badge">
+ <img style="margin: 0;" src="https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white" alt="Angular Badge">
+ <img style="margin: 0;" src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="Tailwind CSS Badge">
+ <img style="margin: 0;" src="https://img.shields.io/badge/ES6-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black" alt="ES6 Badge">
 </div>
 
 #### Back-end Concentration
@@ -92,25 +97,13 @@ Apa aja nih yang bakal dipelajarin? Ok kita bakal bagi jadi beberapa bagian, yai
 - MongoDB
 - Mini Project 02
 
-<div style="display: flex; gap: 3px;">
- <img src="https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js Badge">
- <img src="https://img.shields.io/badge/Express.js-404D59?style=for-the-badge" alt="Express.js Badge">
- <img src="https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white" alt="MongoDB Badge">
+<div style="display: flex; gap: 0.25rem; justify-content: center; flex-wrap: wrap;">
+ <img style="margin: 0;" src="https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js Badge">
+ <img style="margin: 0;" src="https://img.shields.io/badge/Express.js-404D59?style=for-the-badge" alt="Express.js Badge">
+ <img style="margin: 0;" src="https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white" alt="MongoDB Badge">
 </div>
 
 ### Final Project
 
 - Build your own Web App Project
 - Explore! Explore! Explore!
-
-## Mentor
-
-**Our Web Development Fellows!**
-
-_Meet the team_
-
-| Name | Roles | LinkedIn | Github |
-| :--------------: | :---: | :--------------------------------------------------: | :---------------------------------------: |
-| **Ali Zulfikar** | Lead | [LinkedIn](https://www.linkedin.com/in/alizulfikar/) | [Github](https://www.github.com/alizul01) |
-
-We are waiting for you to join us!

src/data/talents.ts

@@ -60,7 +60,7 @@ export const TALENT_DATA: TalentData = {
  },
  {
  name: "Fitrah Rahmadhani Ahmad",
- about: "Saya seorang mahasiswa yang tengah mempelajari dunia informatika, tertarik dengan desain, programming, serta teknologi.",
+ about: "Head of Information Media Division at Workshop Riset Informatika",
  position: "UI/UX Designer",
  profileImage:
  "https://media.licdn.com/dms/image/D5603AQH03DfNua6WrQ/profile-displayphoto-shrink_200_200/0/1671933716567?e=1694044800&v=beta&t=sP3LRo8dw_tYqTWXo2lnYgF2kYkanjcfcIPDlYB7veI",
@@ -91,7 +91,7 @@ export const TALENT_DATA: TalentData = {
  about: "I'm a fast learner and have a high curiosity about programming.",
  position: "Mobile and Web Developer",
  profileImage:
- "https://media.licdn.com/dms/image/C5603AQENdjd61mHkpw/profile-displayphoto-shrink_200_200/0/1662975121163?e=1694044800&v=beta&t=Ndkd7SXFdCYLA5rMuI_UGHRitr_MHRJToNLHfr5Ik3Q",
+ "https://media.licdn.com/dms/image/D5603AQGjgQPzKhx-Wg/profile-displayphoto-shrink_200_200/0/1688747714927?e=1695254400&v=beta&t=4WVDyjaPVdX1WcbpB4OE5xKiSSKAquj9ZB6BxTWZfWY",
  yearsOfExperience: 4,
  proficiencies: ["mobile", "backend"],
  availabilities: ["freelance"],

src/pages/miniclass/[...slug].astro

@@ -1,6 +1,8 @@
 ---
 import { getCollection, getEntry } from "astro:content";
 import Layout from "~/layouts/default.astro";
+import { TALENT_DATA } from "~/data/talents";
+import TalentCard from "~/components/section/talent-pool/components/talent-card.svelte";
 
 const { slug } = Astro.params;
 if (slug === undefined) {
@@ -13,6 +15,9 @@ if (entry === undefined) {
 
 const [startTime, endTime] = entry.data.time;
 const { Content } = await entry.render();
+const mentors = await Promise.all(
+ entry.data.mentors.map((mentor) => TALENT_DATA.talents.find((talent) => talent.name === mentor)),
+);
 
 export async function getStaticPaths() {
  const entries = await getCollection("miniclass");
@@ -39,7 +44,7 @@ export async function getStaticPaths() {
  }}
 >
  <main
- class="prose prose-slate prose-headings:text-slate-800 prose-headings:font-heading prose-img:mx-auto prose-img:bg-white prose-img:rounded-lg prose-img:shadow-lg py-24 max-w-[80ch] mx-auto"
+ class="px-4 prose prose-slate prose-headings:text-slate-800 prose-headings:font-heading prose-img:mx-auto prose-img:bg-white prose-img:rounded-lg prose-img:shadow-lg pt-24 pb-8 max-w-[80ch] mx-auto"
  >
  <div class="mb-12">
  <img class="rounded-lg w-full h-64 object-cover" src={entry.data.image} alt="Cover" />
@@ -51,4 +56,10 @@ export async function getStaticPaths() {
  </div>
  <Content />
  </main>
+ <div class="max-w-[80ch] mx-auto px-4 py-8">
+ <h2 class="font-bold text-slate-800 text-2xl font-heading mb-4">Mentor</h2>
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+ {mentors.map((mentor) => <TalentCard smallerImage {...mentor} />)}
+ </div>
+ </div>
 </Layout>