From 3610a8fd05b01853e1885fda8387ffaf2257bd6c Mon Sep 17 00:00:00 2001
From: Junbo Koh <cjsn92@gmail.com>
Date: Thu, 25 Jun 2026 07:02:34 +0900
Subject: [PATCH] Style academic homepage

---
 _data/profile.yml        |   2 +
 _layouts/homepage.html   |  19 +++-
 assets/css/homepage.scss | 200 ++++++++++++++++++++++++++-------------
 index.html               |  25 +++--
 4 files changed, 164 insertions(+), 82 deletions(-)
diff --git a/_data/profile.yml b/_data/profile.yml
index b0511af898e0..52e239f5bb80 100644
--- a/_data/profile.yml
+++ b/_data/profile.yml
@@ -1,8 +1,10 @@
 # Homepage profile data for the Blog MVP redesign.
 # Keep this file as the single source for the new homepage profile panel.
 name: "Junbo Koh"
+position: "Master's Student"
 headline: "Ongoing learner, practitioner, and researcher"
 affiliation: "Educational Technology, Seoul National University"
+affiliation_url:
 location: "Seoul, South Korea"
 email: "gtkobo92@snu.ac.kr"
 
diff --git a/_layouts/homepage.html b/_layouts/homepage.html
index c2276a874fb7..a554801944d6 100644
--- a/_layouts/homepage.html
+++ b/_layouts/homepage.html
@@ -6,10 +6,11 @@
   {%- assign profile = site.author -%}
 {%- endunless -%}
 {%- assign profile_name = profile.name | default: site.name | default: site.title -%}
-{%- assign profile_headline = profile.headline | default: site.subtitle -%}
+{%- assign profile_position = profile.position | default: profile.headline | default: site.subtitle -%}
 {%- assign profile_avatar = profile.avatar -%}
 {%- assign profile_avatar_alt = profile.avatar_alt | default: profile_name -%}
 {%- assign profile_email = profile.email -%}
+{%- assign profile_affiliation_url = profile.affiliation_url | default: profile.affiliation_link -%}
 
 <!doctype html>
 {% include copyright.html %}
@@ -37,12 +38,18 @@
 
         <h1 class="homepage-name">{{ profile_name }}</h1>
 
-        {% if profile_headline %}
-          <p class="homepage-headline">{{ profile_headline }}</p>
+        {% if profile_position %}
+          <p class="homepage-position">{{ profile_position }}</p>
         {% endif %}
 
         {% if profile.affiliation %}
-          <p class="homepage-affiliation">{{ profile.affiliation }}</p>
+          <p class="homepage-affiliation">
+            {% if profile_affiliation_url %}
+              <a href="{{ profile_affiliation_url }}">{{ profile.affiliation }}</a>
+            {% else %}
+              {{ profile.affiliation }}
+            {% endif %}
+          </p>
         {% endif %}
 
         {% if profile.location %}
@@ -91,6 +98,10 @@ <h1 class="homepage-name">{{ profile_name }}</h1>
 
       <main id="main" class="homepage-content" role="main">
         {{ content }}
+
+        <footer class="homepage-footer">
+          <small>&copy; {{ site.time | date: "%Y" }} {{ profile_name }}. Powered by Jekyll.</small>
+        </footer>
       </main>
     </div>
 
diff --git a/assets/css/homepage.scss b/assets/css/homepage.scss
index 37d01ef56dd1..5954cdb7294b 100644
--- a/assets/css/homepage.scss
+++ b/assets/css/homepage.scss
@@ -3,32 +3,36 @@
 
 body.layout--homepage {
   background: #fff;
-  color: #222;
+  color: #30363b;
+  font-size: 16px;
+  line-height: 1.6;
 }
 
 .homepage-wrapper {
-  width: calc(100% - 48px);
-  max-width: 1120px;
+  width: calc(100% - 40px);
+  max-width: 1200px;
   min-height: 100vh;
   margin: 0 auto;
   display: grid;
-  grid-template-columns: 260px minmax(0, 1fr);
-  gap: 64px;
+  grid-template-columns: 232px minmax(0, 850px);
+  justify-content: space-between;
+  gap: 56px;
 }
 
 .homepage-profile {
   position: sticky;
-  top: 64px;
+  top: 4em;
   align-self: start;
-  padding-top: 64px;
+  padding-top: 4em;
   text-align: center;
+  -webkit-font-smoothing: subpixel-antialiased;
 }
 
 .homepage-avatar {
   display: inline-block;
-  width: 168px;
-  height: 168px;
-  margin-bottom: 24px;
+  width: 148px;
+  height: 148px;
+  margin-bottom: 20px;
   border-radius: 20%;
   overflow: hidden;
 }
@@ -41,66 +45,71 @@ body.layout--homepage {
 }
 
 .homepage-name {
-  margin: 0 0 12px;
+  margin: 0 0 14px;
   color: #043361;
   font-size: 28px;
   font-weight: 500;
   line-height: 1.15;
 }
 
-.homepage-headline,
+.homepage-position,
 .homepage-affiliation,
 .homepage-location,
 .homepage-email {
-  margin: 0 0 8px;
-  color: #4f5d67;
-  font-size: 16px;
-  line-height: 1.45;
+  margin: 0 0 7px;
+  color: #595959;
+  font-size: 15px;
+  line-height: 1.42;
 }
 
 .homepage-email a,
+.homepage-affiliation a,
 .homepage-content a {
-  color: #2476a8;
+  color: #3399cc;
   text-decoration: none;
 }
 
 .homepage-email a:hover,
+.homepage-affiliation a:hover,
 .homepage-content a:hover {
-  color: #095b86;
+  color: #006699;
   text-decoration: underline;
 }
 
 .homepage-social-links {
   display: flex;
   justify-content: center;
-  gap: 8px;
-  margin-top: 20px;
+  gap: 16px;
+  margin-top: 22px;
 }
 
 .homepage-social-links a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: 1px solid #ccd7de;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
   color: #043361;
+  font-size: 18px;
+  line-height: 1;
   text-decoration: none;
-  transition: transform 120ms ease, border-color 120ms ease, color 120ms ease;
+  transition: transform 120ms ease, color 120ms ease;
 }
 
 .homepage-social-links a:hover {
-  transform: translateY(-1px);
-  border-color: #2476a8;
-  color: #2476a8;
+  transform: scale(1.16);
+  color: #006699;
+  text-decoration: none;
 }
 
 .homepage-content {
-  max-width: 800px;
-  padding: 64px 0 56px;
-  font-size: 17px;
-  line-height: 1.72;
+  max-width: 850px;
+  padding: 4em 0 50px;
+  font-size: 16px;
+  line-height: 1.62;
+  animation: none;
+  opacity: 1;
 }
 
 .homepage-content h1,
@@ -117,8 +126,8 @@ body.layout--homepage {
 }
 
 .homepage-content h2 {
-  margin: 32px 0 16px;
-  font-size: 26px;
+  margin: 2px 0 15px;
+  font-size: 25px;
   font-weight: 500;
 }
 
@@ -134,8 +143,31 @@ body.layout--homepage {
   margin: 0 0 20px;
 }
 
+.homepage-content hr {
+  height: 1px;
+  margin: 0 0 20px;
+  border: 0;
+  background: #e5e5e5;
+}
+
+.homepage-news-list {
+  padding-left: 0;
+  list-style: none;
+}
+
+.homepage-news-list li {
+  margin-bottom: 8px;
+}
+
+.homepage-news-date {
+  display: inline-block;
+  min-width: 78px;
+  color: #767676;
+  font-size: 14px;
+}
+
 .homepage-section {
-  margin-top: 40px;
+  margin-top: 34px;
 }
 
 .homepage-section-heading {
@@ -164,7 +196,7 @@ body.layout--homepage {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 132px;
   gap: 24px;
-  padding: 20px 0;
+  padding: 18px 0;
   border-bottom: 1px solid #dde5ea;
 }
 
@@ -254,6 +286,12 @@ body.layout--homepage {
   font-size: 15px;
 }
 
+.homepage-footer {
+  margin-top: 34px;
+  padding-top: 12px;
+  color: #767676;
+}
+
 @media (prefers-color-scheme: dark) {
   body.layout--homepage {
     background: #20212b;
@@ -267,7 +305,7 @@ body.layout--homepage {
     color: #3eb7f0;
   }
 
-  .homepage-headline,
+  .homepage-position,
   .homepage-affiliation,
   .homepage-location,
   .homepage-email {
@@ -275,25 +313,29 @@ body.layout--homepage {
   }
 
   .homepage-email a,
+  .homepage-affiliation a,
   .homepage-content a {
     color: #64c5f2;
   }
 
   .homepage-email a:hover,
+  .homepage-affiliation a:hover,
   .homepage-content a:hover {
     color: #93d8f7;
   }
 
   .homepage-social-links a {
-    border-color: #53616b;
     color: #64c5f2;
   }
 
   .homepage-social-links a:hover {
-    border-color: #93d8f7;
     color: #93d8f7;
   }
 
+  .homepage-content hr {
+    background: #4b5661;
+  }
+
   .homepage-post-list,
   .homepage-post-row,
   .homepage-category-grid,
@@ -314,58 +356,55 @@ body.layout--homepage {
   .homepage-post-excerpt,
   .homepage-post-meta,
   .homepage-category-count,
-  .homepage-empty {
+  .homepage-empty,
+  .homepage-news-date,
+  .homepage-footer {
     color: #aebac3;
   }
 }
 
 @media print, screen and (max-width: 960px) {
+  body.layout--homepage {
+    padding: 15px;
+  }
+
   .homepage-wrapper {
-    width: calc(100% - 32px);
-    max-width: none;
+    width: auto;
+    min-height: 0;
     display: block;
   }
 
   .homepage-profile {
     position: static;
-    padding: 32px 0 24px;
-    border-bottom: 1px solid #e5e5e5;
-  }
-
-  .homepage-content {
-    max-width: none;
-    padding: 28px 0 40px;
+    padding-top: 0;
   }
 
-  .homepage-post-row {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 10px;
+  .homepage-avatar {
+    width: 117px;
+    height: 117px;
   }
 
-  .homepage-post-meta {
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    text-align: left;
+  .homepage-content {
+    max-width: none;
+    margin: 20px 0 0;
+    padding: 20px 0;
+    border-top: 1px solid #e5e5e5;
   }
 }
 
-@media print, screen and (max-width: 480px) {
-  .homepage-wrapper {
-    width: calc(100% - 24px);
+@media print, screen and (max-width: 560px) {
+  body.layout--homepage {
+    font-size: 15px;
   }
 
   .homepage-avatar {
-    width: 120px;
-    height: 120px;
+    width: 95px;
+    height: 95px;
+    margin-bottom: 14px;
   }
 
-  .homepage-name {
-    font-size: 26px;
-  }
-
-  .homepage-content {
-    font-size: 16px;
+  .homepage-content h2 {
+    font-size: 24px;
   }
 
   .homepage-section-heading {
@@ -377,8 +416,21 @@ body.layout--homepage {
     margin-top: 6px;
   }
 
+  .homepage-post-row {
+    display: block;
+  }
+
+  .homepage-post-meta {
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
+    justify-content: flex-start;
+    margin-top: 12px;
+    text-align: left;
+  }
+
   .homepage-category-grid {
-    grid-template-columns: 1fr;
+    display: block;
   }
 
   .homepage-category-link:nth-child(odd),
@@ -386,4 +438,16 @@ body.layout--homepage {
     padding-right: 0;
     padding-left: 0;
   }
+
+  .homepage-news-date {
+    display: block;
+    min-width: 0;
+    margin-bottom: 2px;
+  }
+}
+
+@media (prefers-color-scheme: dark) and (max-width: 960px) {
+  .homepage-content {
+    border-top-color: #4b5661;
+  }
 }
diff --git a/index.html b/index.html
index 33c987f11dbb..5dc977184fb2 100644
--- a/index.html
+++ b/index.html
@@ -3,26 +3,35 @@
 title: "Home"
 ---
 
+<h2>News</h2>
+
+<ul class="homepage-news-list">
+  <li><span class="homepage-news-date">2026.06</span> Reorganizing this site into an academic profile and learning archive.</li>
+  <li><span class="homepage-news-date">2024.03</span> Added notes on <a href="{{ '/isd/problem-analysis/' | relative_url }}">problem analysis</a> and instructional design foundations.</li>
+  <li><span class="homepage-news-date">2024.02</span> Added notes on <a href="{{ '/llm/fine-tuning-llm/' | relative_url }}">fine-tuning LLMs</a>.</li>
+</ul>
+
 <h2>About Me</h2>
 
-<p>Hello. My name is Junbo Koh, and I am an ongoing learner, practitioner, and researcher in Educational Technology at Seoul National University.</p>
+<p>Hello. My name is Junbo Koh, and I am a master's student in Educational Technology at Seoul National University.</p>
 
 <p>I use this site as a learning archive for ideas I want to keep revisiting: software development, learning experience design, human-computer interaction, and generative AI. The notes here are intentionally practical. They help me connect what I study with what I build, teach, and evaluate.</p>
 
 <p>My current focus is understanding how people learn with emerging technologies, and how AI-supported tools can help learners reason, practice, reflect, and collaborate more effectively.</p>
 
-<hr>
-
-<h2>Interests</h2>
+<h2>Ongoing Research</h2>
 
 <ul>
   <li><strong>Learning experience design:</strong> designing learning environments that support practice, feedback, reflection, and transfer.</li>
   <li><strong>Human-computer interaction:</strong> understanding how people make sense of interactive systems and where usability breaks down.</li>
   <li><strong>Generative AI and LLMs:</strong> exploring how language models can support learning, writing, inquiry, and tool use.</li>
-  <li><strong>Software craftsmanship:</strong> building reliable systems while keeping implementation choices understandable and maintainable.</li>
 </ul>
 
-<h2>Learning Topics</h2>
+<p>I am interested in the intersection of learning sciences, educational technology, and human-centered AI. More specifically, I want to study how learners interact with intelligent tools, how those tools shape learning processes, and how design decisions can make AI systems more explainable, useful, and accountable in educational contexts.</p>
+
+<h2>Writing / Notes</h2>
+
+<p>This site also collects study notes and implementation logs across the topics I return to most often.</p>
 
 <ul>
   <li><a href="{{ '/llm/' | relative_url }}">LLM</a>: notes on generative AI, transformer models, prompt engineering, fine-tuning, and RLHF.</li>
@@ -31,10 +40,6 @@ <h2>Learning Topics</h2>
   <li><a href="{{ '/dl4coders/' | relative_url }}">Deep Learning for Coders</a>: notes from practical deep learning study with fastai and PyTorch.</li>
 </ul>
 
-<h2>Research Interests</h2>
-
-<p>I am interested in the intersection of learning sciences, educational technology, and human-centered AI. More specifically, I want to study how learners interact with intelligent tools, how those tools shape learning processes, and how design decisions can make AI systems more explainable, useful, and accountable in educational contexts.</p>
-
 {% include recent-posts.html limit=5 %}
 
 {% include category-links.html show_count=true %}
