Feat: 세미나 멘토 기록 추가

SUSC-KR · Dec 10, 2023 · a14ea32 · a14ea32
1 parent 7972ba7
commit a14ea32
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 35 deletions.
diff --git a/public/images/seminarMentor/hyunah_yoo.jpg b/public/images/seminarMentor/hyunah_yoo.jpg
diff --git a/public/images/mentor/junwon.jpeg → public/images/studyMentor/junwon.jpeg b/public/images/mentor/junwon.jpeg → public/images/studyMentor/junwon.jpeg
diff --git a/public/images/mentor/yeonguk.webp → public/images/studyMentor/yeonguk.webp b/public/images/mentor/yeonguk.webp → public/images/studyMentor/yeonguk.webp
diff --git a/src/components/SeminarMentorCard.astro b/src/components/SeminarMentorCard.astro
@@ -0,0 +1,65 @@
+---
+const { mentorName, mentorImg, seminarTitle, seminarLink, linkedIn, github, instagram } = Astro.props;
+
+interface Props {
+	mentorName: string;
+	mentorImg: string;
+	seminarTitle: string;
+	seminarLink: string;
+	linkedIn?: string;
+	github?: string;
+	instagram?: string;
+}
+
+---
+
+<div class="mentor-card flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl group dark:border-gray-700">
+	<img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300" src={mentorImg} alt="orgImage">
+
+	<h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white">{mentorName}</h1>
+
+	<p class="mt-2 text-gray-500 capitalize dark:text-gray-300">{seminarTitle}</p>
+
+	<a href={seminarLink} class="mt-2 text-gray-500 capitalize dark:text-gray-300">세미나 다시보기</p>
+
+	<div class="flex mt-3 -mx-2">
+		{linkedIn && (
+			<a href={linkedIn} class="mx-2 text-gray-600 dark:text-gray-300" aria-label="Reddit">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="currentColor"
+					viewBox="0 0 24 24">
+					<path
+						d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z" />
+				</svg>
+			</a>
+		)}
+
+		{instagram && (
+			<a href={instagram} class="mx-2 text-gray-600 dark:text-gray-300" aria-label="Instagram">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="currentColor"
+					viewBox="0 0 24 24">
+					<path
+						d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
+				</svg>
+			</a>
+		)}
+
+		{github && (
+			<a href={github} class="mx-2 text-gray-600 dark:text-gray-300" aria-label="Github">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="currentColor"
+					viewBox="0 0 24 24">
+					<path
+						d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+				</svg>
+			</a>
+		)}
+	</div>
+</div>
diff --git a/src/components/MentorCard.astro → src/components/StudyMentorCard.astro b/src/components/MentorCard.astro → src/components/StudyMentorCard.astro
diff --git a/src/content/mentors/junwon.mdx b/src/content/mentors/junwon.mdx
diff --git a/src/content/seminarMentors/hyunah_yoo.mdx b/src/content/seminarMentors/hyunah_yoo.mdx
@@ -0,0 +1,7 @@
+---
+mentorName: "유현아"
+mentorImg: "images/seminarMentor/hyunah_yoo.jpg"
+seminarTitle: "AI 커리어"
+seminarLink: "https://youtu.be/N5eFE39Exvc?feature=shared"
+linkedIn: "https://www.linkedin.com/in/hayoo2/"
+---
diff --git a/src/content/studyMentors/junwon.mdx b/src/content/studyMentors/junwon.mdx
@@ -0,0 +1,9 @@
+---
+mentorName: "이준원"
+mentorImg: "images/studyMentor/junwon.jpeg"
+mentorBio: "오픈소스 노예"
+techStack: ["Python", "CV", "Pytorch"]
+github: "https://github.com/cpprhtn"
+linkedIn: "https://linkedin.com/in/cpprhtn"
+instagram: "https://www.instagram.com/cpp_rhtn"
+---
diff --git a/src/content/mentors/yeonguk.mdx → src/content/studyMentors/yeonguk.mdx b/src/content/mentors/yeonguk.mdx → src/content/studyMentors/yeonguk.mdx
@@ -1,6 +1,6 @@
 ---
 mentorName: "추영욱"
-mentorImg: "images/mentor/yeonguk.webp"
+mentorImg: "images/studyMentor/yeonguk.webp"
 mentorBio: "재미난 프로젝트를 찾아 돌아다니며 공부하는 탐험가입니다. 최근엔 Swift와 인공지능을 좀 찍먹하고 있습니다 ㅎㅎ"
 techStack: ["SwiftUI", "Pytorch", "Python", "CV", "ReactNative"]
 github: "https://github.com/choo121600"

diff --git a/src/pages/mentors/index.astro b/src/pages/mentors/index.astro
@@ -6,11 +6,15 @@ import Footer from "@components/Footer.astro";
 import Container from "@components/Container.astro";
 
 import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
-import MentorCard from "@components/MentorCard.astro";
+import StudyMentorCard from "@components/StudyMentorCard.astro";
+import SeminarMentorCard from "@components/SeminarMentorCard.astro";
 
 import { getCollection } from "astro:content";
 
-const mentors = await getCollection("mentors");
+const studyMentors = await getCollection("studyMentors");
+const seminarMentors = await getCollection("seminarMentors");
+
+
 
 ---
 
@@ -26,29 +30,54 @@ const mentors = await getCollection("mentors");
         <div class="lg:w-2/3 text-center mx-auto">
           <div id="mentor">
             <Container>
-              <div class="mb-12 space-y-2 text-center">
-                <h2 class="text-3xl font-bold text-gray-800 md:text-4xl dark:text-white">
-									멘토
-                </h2>
-                <p class="break-words lg:mx-auto lg:w-6/12 text-gray-600 dark:text-gray-300">
-									SUSC를 위해 기여해주시고 계시는 멘토님들을 소개합니다.
-								</p>
-							</div>
-							<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
-                {
-                  mentors.map((mentor) => (
-                    <MentorCard
-                      mentorName={mentor.data.mentorName}
-                      mentorImg={mentor.data.mentorImg}
-                      mentorBio={mentor.data.mentorBio}
-                      techStack={Object.values(mentor.data.techStack)}
-                      github={mentor.data.github}
-                      linkedIn={mentor.data.linkedIn}
-                      instagram={mentor.data.instagram}
-                    />
-                  ))
-                }
-							</div>
+              <div class="">
+                <div class="mb-12 space-y-2 text-center">
+                  <h2 class="text-3xl font-bold text-gray-800 md:text-4xl dark:text-white">
+                    스터디 멘토
+                  </h2>
+                  <p class="break-words lg:mx-auto lg:w-6/12 text-gray-600 dark:text-gray-300">
+                    SUSC를 위해 스터디 개설 또는 질의 응답을 통해 기여해주신 멘토님들을 소개합니다.
+                  </p>
+                </div>
+                <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+                  {
+                    studyMentors.map((mentor) => (
+                      <StudyMentorCard
+                        mentorName={mentor.data.mentorName}
+                        mentorImg={mentor.data.mentorImg}
+                        mentorBio={mentor.data.mentorBio}
+                        techStack={Object.values(mentor.data.techStack)}
+                        github={mentor.data.github}
+                        linkedIn={mentor.data.linkedIn}
+                        instagram={mentor.data.instagram}
+                      />
+                    ))
+                  }
+                </div>
+                <div class="mt-24 mb-12 space-y-2 text-center">
+                  <h2 class="text-3xl font-bold text-gray-800 md:text-4xl dark:text-white">
+                    세미나 멘토
+                  </h2>
+                  <p class="break-words lg:mx-auto lg:w-6/12 text-gray-600 dark:text-gray-300">
+                    SUSC를 위해 세미나 발표를 통해 기여해주신 멘토님들을 소개합니다.
+                  </p>
+                </div>
+                <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+                  {
+                    seminarMentors.map((mentor) => (
+                      <SeminarMentorCard
+                        mentorName={mentor.data.mentorName}
+                        mentorImg={mentor.data.mentorImg}
+                        seminarTitle={mentor.data.seminarTitle}
+                        seminarLink={mentor.data.seminarLink}
+                        github={mentor.data.github}
+                        linkedIn={mentor.data.linkedIn}
+                        instagram={mentor.data.instagram}
+                      />
+                    ))
+                  }
+                </div>
+              </div>
 						</Container>
 					</div>          
         </div>