Add News

Author: githajae

_data/news.yml

@@ -0,0 +1,22 @@
+- date: "2025-06-18"
+  title: "Visiting Researcher at UIUC"
+  content: "Beginning a 3-month research visit at the University of Illinois Urbana-Champaign."
+  tags: [uiuc, research, visit, academic trip]
+  images:
+    - url: "/assets/news/uiuc/3.jpeg"
+      alt: "UIUC Cloths"
+    - url: "/assets/news/uiuc/4.jpeg"
+      alt: "UIUC Card"
+    - url: "/assets/news/uiuc/2.jpeg"
+      alt: "UIUC Union"
+    - url: "/assets/news/uiuc/1.jpeg"
+      alt: "UIUC Gym"
+- date: "2022-03-01"
+  title: "Graduated First in Class, Dept. of Computer Science & Engineering"
+  content: "Honored to graduate as the top student (First in Class) for the Class of 2022 from the Department of Computer Science & Engineering at POSTECH."
+  tags: [graduation, postech, first in class, academics]
+  images:
+    - url: "/assets/news/graduate/specific.jpeg"
+      alt: "현판"
+    - url: "/assets/news/graduate/overall.jpeg"
+      alt: "근접샷"

_layouts/latest-news.html

@@ -0,0 +1,74 @@
+---
+layout: default
+---
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+
+<div class="news-container">
+  <header class="news-header">
+    <h1>Latest News</h1>
+    <div class="news-search-wrapper">
+      <i class="fas fa-search"></i>
+      <input type="search" class="news-search-input" placeholder="Search in news (e.g., award, conference)...">
+    </div>
+  </header>
+
+  <div class="news-feed">
+    {% for item in site.data.news %}
+      {% capture search_terms %}{{ item.title }} {{ item.content }} {{ item.tags | join: ' ' }}{% endcapture %}
+      <div class="news-entry" data-search-terms="{{ search_terms | downcase }}">
+        <p class="news-date">{{ item.date | date: "%B %d, %Y" }}</p>
+        <h3 class="news-title">{{ item.title }}</h3>
+        <div class="news-content">
+          <p>{{ item.content }}</p>
+        </div>
+
+        {% if item.images %}
+          <div class="swiper news-slider-{{ forloop.index }}">
+            <div class="swiper-wrapper">
+              {% for image in item.images %}
+                <div class="swiper-slide">
+                  <img src="{{ image.url | relative_url }}" alt="{{ image.alt | default: 'News image' }}">
+                </div>
+              {% endfor %}
+            </div>
+            <div class="swiper-button-next"></div>
+            <div class="swiper-button-prev"></div>
+          </div>
+        {% endif %}
+      </div>
+    {% endfor %}
+  </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Initialize all Swiper sliders
+  const sliders = document.querySelectorAll('[class^="swiper news-slider-"]');
+  sliders.forEach(slider => {
+    new Swiper(slider, {
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
+      loop: true,
+    });
+  });
+
+  // Live Search Logic
+  const searchInput = document.querySelector('.news-search-input');
+  const newsEntries = document.querySelectorAll('.news-entry');
+  
+  searchInput.addEventListener('input', e => {
+    const searchTerm = e.target.value.toLowerCase();
+    newsEntries.forEach(entry => {
+      const searchData = entry.getAttribute('data-search-terms');
+      if (searchData.includes(searchTerm)) {
+        entry.style.display = 'block';
+      } else {
+        entry.style.display = 'none';
+      }
+    });
+  });
+});
+</script>

_pages/main/news.md

@@ -0,0 +1,5 @@
+---
+permalink: /news/
+title: "Latest News"
+layout: latest-news
+---

_sass/custom/_homepage.scss

@@ -50,7 +50,9 @@ body.page--homepage #main {
   display: flex;
   justify-content: center;
   gap: 1rem;
+  flex-wrap: wrap; /* Add this line */
 }
+
 .gateway-card {
   display: flex;
   align-items: center;
@@ -62,8 +64,14 @@ body.page--homepage #main {
   color: #333;
   font-weight: 600;
   transition: background-color 0.2s ease;
-  i { font-size: 1.2em; }
-  &:hover { background-color: #e0e0e0; }
+}
+
+.gateway-card i { 
+  font-size: 1.2em; 
+}
+
+.gateway-card:hover { 
+  background-color: #e0e0e0; 
 }
 
 /* --- Section 2: Research & Career --- */

_sass/custom/_latest-news.scss

@@ -0,0 +1,22 @@
+/* --- Latest News Page Styles --- */
+.news-container { max-width: 900px; margin: 0 auto; padding: 4rem 2rem; }
+.news-header { text-align: center; margin-bottom: 3rem; }
+.news-header h1 { font-size: 3.5em; font-weight: 800; margin-bottom: 2rem; }
+
+.news-search-wrapper { position: relative; }
+.news-search-wrapper .fa-search { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); color: #aaa; }
+.news-search-input { width: 100%; padding: 0.8rem 1rem 0.8rem 3rem; font-size: 1em; border-radius: 12px; border: 1px solid #ddd; background-color: #f8f8fa; }
+
+.news-entry { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid #e5e5e5; }
+.news-entry:last-child { border-bottom: none; margin-bottom: 0; }
+
+.news-date { font-size: 0.9em; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
+.news-title { font-size: 2em; font-weight: 700; line-height: 1.3; margin: 0 0 1rem 0; }
+.news-content { font-size: 1.1em; line-height: 1.7; color: #333; }
+
+/* --- Image Slider Styles --- */
+.swiper { width: 100%; height: 500px; border-radius: 16px; margin-top: 2rem; box-shadow: 0 5px 25px rgba(0,0,0,0.1); }
+.swiper-slide { display: flex; justify-content: center; align-items: center; background: #eee; }
+.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.swiper-button-next, .swiper-button-prev { color: #fff; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5)); }
+@media (max-width: 768px) { .swiper { height: 400px; } }

assets/css/main.scss

@@ -15,4 +15,5 @@
 @import "custom/homepage";
 @import "custom/knowledge-base";
 @import "custom/kb-post";
-@import "custom/hobby-details";
+@import "custom/hobby-details";
+@import "custom/latest-news";