updates dashboard and dyj profile

.gitignore

@@ -0,0 +1,2 @@
+.vscode/
+.DS_Store/

author/dayun-ju/index.html

@@ -84,95 +84,82 @@
 </div>
 
     <main role="main" class="container">
-        <section id="profile-page" class="pt-5">
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-lg-4">
-                        <div id="profile">
-                            <img class="avatar avatar-circle" width="270" height="270" src="avatar.png" alt="Dayun Ju">
-                            <div class="portrait-title">
-                                <h2>Dayun Ju</h2>
-                                <h3>
-                                    <span></span>
-                                </h3>
-                            </div>
-                            <ul class="network-icon" aria-hidden="true">
-
-
-
-
-                            </ul>
-                        </div>
+    <section id="profile-page" class="pt-5">
+      <div class="container">
+        <div class="row">
+          <div class="col-12 col-lg-4">
+            <div id="profile"><img class="avatar avatar-circle" width="270" height="270"
+                   src="avatar.png" alt="Dayun Ju">
+              <div class="portrait-title">
+                <h2>Dayun Ju</h2>
+                <h3><span></span></h3>
+              </div>
+              <ul class="network-icon" aria-hidden="true">
+                <!-- <li><a href="mailto:[email protected]" aria-label="envelope"><i
+                       class="fas fa-envelope big-icon"></i></a><a href="https://seilk.github.io"
+                     aria-label="link"><i class="fa-solid fa-link big-icon"></i></a></li> -->
+                  <li><a href="mailto:[email protected]" aria-label="envelope"><i
+                    class="fas fa-envelope big-icon"></i></a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="col-12 col-lg-8 members-info">
+            <div class="article-style"></div>
+            <div class="row">
+              <div class="col-md-6">
+                <div class="section-subheading">Interests</div>
+                <ul class="ul-interests mb-0">
+                  <li>Computer Vision</li>
+                  <li>Unsupervised Semantic Segmantation</li>
+                </ul>
+              </div>
+              <div class="col-md-6">
+                <div class="section-subheading">Education</div>
+                <ul class="ul-edu fa-ul mb-0">
+                  <li><i class="fa-li fas fa-graduation-cap"></i>
+                    <div class="description">
+                      <p class="course">BS-MS Linked Course in Artificial Intelligence</p>
+                      <p class="year">2024-Present</p>
+                      <p class="institution">Yonsei University</p>
                     </div>
-                    <div class="col-12 col-lg-8 members-info">
-                        <div class="article-style">
-
-                        </div>
-                        <div class="row">
-
-                            <div class="col-md-6">
-                                <div class="section-subheading">Interests</div>
-                                <ul class="ul-interests mb-0">
-
-                                        <li>Unsupervised Semantic Segmantation</li>
-
-                                  </ul>
-                                </div>
-
-                            <div class="col-md-6">
-                                <div class="section-subheading">Education</div>
-                                <ul class="ul-edu fa-ul mb-0">
-
-                                        <li>
-                                            <i class="fa-li fas fa-graduation-cap"></i>
-                                            <div class="description">
-                                                <p class="course">your-course</p>
-                                                <p class="year">year</p>
-                                                <p class="institution">your-institution</p>
-                                            </div>
-                                        </li>
-
-                                </ul>
-                            </div>
-
-
-                        <div class="col-md-6">
-
-                        </div>
-
-                        <div class="col-md-6">
-
-                        </div>
-
-
-                        <div class="col-md-6">
-
-                        </div>
-
-                        <div class="col-md-6">
-
-                        </div>
-
-                        <div class="col-md-6">
-
-                        </div>
-
-                        <div class="col-md-6">
-
-                        </div>
-
-                        <div class="col-md-6">
-
-                        </div>
-
-                        <div class="col-md-6">
-
-                        </div>
+                  </li>
+                  <li><i class="fa-li fas fa-graduation-cap"></i>
+                    <div class="description">
+                      <p class="course">BS in Computer Science</p>
+                      <p class="year">2021-Present</p>
+                      <p class="institution">Yonsei University</p>
                     </div>
-                </div>
+                  </li>
+                </ul>
+              </div>
+              <div class="col-md-6"> <!--필요시 추가 작성-->
+              <div class="section-subheading">Selected Publications</div>
+                <ul class="ul-interests mb-0">
+                  <li>
+                    <a href="/publication/2024-miccai-cxrl" target="_blank">
+                      Advancing Text-Driven Chest X-Ray Generation with Policy-Based Reinforcement Learning, MICCAI 2024
+                    </a>
+                  </li>
+                  <li>
+                    <a href="/publication/2024-cvpr-eagle" target="_blank">
+                      EAGLE: Eigen Aggregation Learning for Object-Centric Unsupervised Semantic Segmentation, CVPR 2024 Highlight
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              </div> <!--필요시 추가 작성-->
+              <div class="col-md-6"></div>
+              <div class="col-md-6"></div>
+              <div class="col-md-6"></div>
+              <div class="col-md-6"></div>
+              <div class="col-md-6"></div>
+              <div class="col-md-6"></div>
+              <div class="col-md-6"></div>
             </div>
-        </section>
-    </main>
+          </div>
+        </div>
+    </section>
+  </main>
 
     <script src="/js/vendor-bundle.min.js"></script>
     <script src="/js/wowchemy-init.min.js"></script>

css/wowchemy.css

@@ -10127,3 +10127,25 @@ body.show {
     height: 0.2rem;
   }
 }
+.carousel-item .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* 반투명 검은색 배경 */
+  opacity: 0;
+  transition: opacity 0.5s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.2rem;
+  text-align: center;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.carousel-item:hover .overlay {
+  opacity: 1; /* 마우스가 위에 있을 때 레이어가 보이도록 */
+}

index.html

@@ -134,9 +134,9 @@ <h1 class="hero-title">MICV</h1>
                   <span class="sr-only">Next</span>
                 </a>
               </div>
-              <li class="carousel-indicators" id="carousel-indicators">
+              <ul class="carousel-indicators" id="carousel-indicators">
                 <!-- 목차 인디케이터가 여기에 동적으로 추가됩니다 -->
-              </li>
+              </ul>
             </div>
           </div>
         </div>

js/scripts.js

@@ -5,74 +5,91 @@ window.addEventListener("load", function () {
 
 // welcome image slider
 document.addEventListener("DOMContentLoaded", function () {
-	var imageFolder = "media/welcome/";
-	var imageExtensions = ["jpg", "jpeg", "png", "gif"];
-	var targetWidth = 1600; // 기본 목표 너비
-	var targetHeight = 1200; // 기본 목표 높이
+	const imageFolder = "media/welcome/"; // 이미지 폴더 경로
+	const targetWidth = 1600; // 기본 목표 너비
+	const targetHeight = 1200; // 기본 목표 높이
 
-	// 이미지 파일 목록을 가져와서 캐러셀에 추가
-	var images = [];
-	var carouselInner = document.getElementById("carousel-images");
-	var carouselIndicators = document.getElementById("carousel-indicators");
+	const carouselInner = document.getElementById("carousel-images");
+	const carouselIndicators = document.getElementById("carousel-indicators");
 
-	function loadImages() {
-		var imagePaths = [];
-
-		imageExtensions.forEach(function (extension) {
-			for (var i = 1; i <= 10; i++) {
-				// 1~10번 이미지 파일을 시도
-				var imagePath = imageFolder + "welcome" + i + "." + extension;
-				imagePaths.push(imagePath);
-			}
-		});
+	function fetchAndSortImages() {
+		return fetch("media/welcome/images.json")
+			.then((response) => response.json())
+			.then((files) => {
+				return files.sort((a, b) => a.order - b.order); // order 키를 기준으로 오름차순 정렬
+			})
+			.catch((error) => {
+				console.error("Error fetching and sorting images:", error);
+				return [];
+			});
+	}
 
-		// 이미지 경로 정렬
-		imagePaths.sort();
+	function preloadImages(files, callback) {
+		let loadedCount = 0;
+		const images = [];
 
-		imagePaths.forEach(function (imagePath, index) {
-			var img = new Image();
-			img.src = imagePath;
-			img.onload = function () {
-				var resizedImage = resizeImage(this, targetWidth, targetHeight);
-				images.push(resizedImage);
-				var activeClass = images.length === 1 ? "active" : "";
-				var carouselItem = `
-          <div class="carousel-item ${activeClass}">
-            <img src="${resizedImage}" class="d-block w-100" alt="" style="object-fit: cover;">
-          </div>
-        `;
-				var indicatorItem = `<li data-target="#heroCarousel" data-slide-to="${images.length - 1}" class="${activeClass}"></li>`;
-				carouselInner.innerHTML += carouselItem;
-				carouselIndicators.innerHTML += indicatorItem;
+		files.forEach((file, index) => {
+			const img = new Image();
+			img.src = `${imageFolder}${file.filename}`;
+			img.onload = () => {
+				const resizedImage = resizeImage(img, targetWidth, targetHeight);
+				images.push({ src: resizedImage, description: file.description, filename: file.filename });
+				loadedCount++;
+				if (loadedCount === files.length) {
+					callback(images);
+				}
 			};
-			img.onerror = function () {
-				// 이미지가 존재하지 않으면 무시
+			img.onerror = () => {
+				console.error(`Error loading image: ${file.filename}`);
+				loadedCount++;
+				if (loadedCount === files.length) {
+					callback(images);
+				}
 			};
 		});
+	}
+
+	function displayImages(images) {
+		// 기존 캐러셀 콘텐츠 초기화
+		carouselInner.innerHTML = "";
+		carouselIndicators.innerHTML = "";
+
+		images.forEach((image, idx) => {
+			const activeClass = idx === 0 ? "active" : "";
+			const carouselItem = `
+                <div class="carousel-item ${activeClass}">
+                    <img src="${image.src}" class="d-block w-100" alt="" style="object-fit: cover;">
+                    <div class="overlay">${image.description}</div>
+                </div>
+            `;
+			const indicatorItem = `<li data-target="#heroCarousel" data-slide-to="${idx}" class="${activeClass}"></li>`;
+			carouselInner.innerHTML += carouselItem;
+			carouselIndicators.innerHTML += indicatorItem;
+		});
 
 		// 이미지가 1개인 경우 캐러셀 비활성화
-		setTimeout(function () {
-			if (images.length <= 1) {
-				document.querySelector(".carousel-control-prev").style.display = "none";
-				document.querySelector(".carousel-control-next").style.display = "none";
-				$("#heroCarousel").carousel("pause");
-			} else {
-				// 슬라이딩 속도 조절 (슬라이드 속도는 1초)
-				$("#heroCarousel").on("slide.bs.carousel", function () {
-					$(".carousel-item").css("transition", "transform 1.0s ease");
-				});
-			}
-		}, 500); // 이미지 로드 후 0.5초 대기
+		if (images.length <= 1) {
+			document.querySelector(".carousel-control-prev").style.display = "none";
+			document.querySelector(".carousel-control-next").style.display = "none";
+			$("#heroCarousel").carousel("pause");
+		} else {
+			// 슬라이딩 속도 조절 (슬라이드 속도는 1초)
+			$("#heroCarousel").on("slide.bs.carousel", function () {
+				$(".carousel-item").css("transition", "transform 1.0s ease");
+			});
+		}
 	}
 
 	function resizeImage(img, width, height) {
-		var canvas = document.createElement("canvas");
+		const canvas = document.createElement("canvas");
 		canvas.width = width;
 		canvas.height = height;
-		var ctx = canvas.getContext("2d");
+		const ctx = canvas.getContext("2d");
 		ctx.drawImage(img, 0, 0, width, height);
 		return canvas.toDataURL("image/jpeg");
 	}
 
-	loadImages();
+	fetchAndSortImages().then((files) => {
+		preloadImages(files, displayImages);
+	});
 });

media/welcome/images.json

@@ -0,0 +1,22 @@
+[
+  {
+    "filename": "24-01-11.jpg",
+    "description": "We had a great time at the MICV workshop in early 2024!",
+    "order": 40
+  },
+  {
+    "filename": "24-04-13.jpg",
+    "description": "Happy birthday professor!",
+    "order": 30
+  },
+  {
+    "filename": "24-05-01.jpg",
+    "description": "'EAGLE' accepted to CVPR 2024!, as a highlight paper!",
+    "order": 20
+  },
+  {
+    "filename": "24-05-14.jpeg",
+    "description": "We have early accepted 2 papers MICCAI 2024! See you soon at Moroco!",
+    "order": 10
+  }
+]