update: change the place of exhibition and award history.

Author: yudaimasaki

css/style.css

@@ -63,9 +63,10 @@ a {
 .work-overlay {
     position: absolute;
     inset: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    display: grid;
+    grid-template-columns: 3fr 2fr;
+    gap: 40px;
+    align-items: center;
     padding: 40px;
     background: rgba(255, 255, 255, 0.8);
     opacity: 0;
@@ -87,10 +88,13 @@ a {
   display: block;
   width: auto;
   height: 40px;
+  margin-top: 24px;
 }
 
 .work-history {
-  margin: 24px 0 0;
+  margin: 0;
+  padding-left: 40px;
+  border-left: 1px solid rgba(0, 0, 0, 0.2);
   font-size: 12px;
   line-height: 1.6;
 }

index.html

@@ -18,7 +18,7 @@
         <main class="works">
             <figure class="work">
                 <div class="work-image">
-                    <img src="assets/images/fuf.JPG">
+                    <img src="assets/images/fuf.JPG" alt="Familiar, Unfamiliar Face — installation view">
 
                 <div class="work-overlay">
                     <div class="work-text">
@@ -30,20 +30,10 @@
                             Recalling yourself in the mirror, or in photos taken with friends, I hope this work offers a chance to see anew the face that has stayed with you—through past, present, and future.
                         </p>
 
-                        <br>
-
-                        <p class="work-meta">
-                            <a href="https://youtu.be/OtzNKVPBO50" target="_blank" class="youtube-link">
-                              <img src="assets/images/youtube-logo.png">
-                            </a>
-                        </p>
+                        <a href="https://youtu.be/OtzNKVPBO50" target="_blank" class="youtube-link">
+                            <img src="assets/images/youtube-logo.png" alt="Watch on YouTube">
+                        </a>
                     </div>
-                </div>
-            </div>
-
-            <figcaption>
-                <p class="work-title">Familiar, Unfamiliar Face</p>
-                <p class="work-meta">Interactive VR Installation, 2026</p>
 
                 <dl class="work-history">
                     <dt>Upcoming</dt>
@@ -59,6 +49,12 @@
                     <dd>Unity Award, Interverse Virtual Reality Challenge, 2026</dd>
                     <dd>DCEXPO Selection, Interverse Virtual Reality Challenge, INTER BEE IGNITION × DCEXPO, 2026</dd>
                 </dl>
+                </div>
+            </div>
+
+            <figcaption>
+                <p class="work-title">Familiar, Unfamiliar Face</p>
+                <p class="work-meta">Interactive VR Installation, 2026</p>
             </figcaption>
             </figure>
         </main>