update

Author: donutdaniel

index.html

@@ -29,7 +29,7 @@
     </div>
     <div class="flex flex-col gap-2 items-center justify-center w-full">
       <h1>Daniel Ho</h1>
-      <div class="social-links">
+      <div class="contact-links">
         <a href="https://x.com/donutdho" target="_blank">
           <img class="media-icon" src="icons/media/x.svg" alt="X" />
         </a>
@@ -46,9 +46,10 @@ <h1>Daniel Ho</h1>
         <a href="https://medium.com/@donutdaniel/" target="_blank">
           <img class="media-icon" src="icons/media/medium.svg" alt="Medium" />
         </a>
-        <a href="mailto:danielho54@gmail.com">
-          <img class="media-icon" src="icons/media/email.svg" alt="Email" />
-        </a>
+        <span class="contact-separator">|</span>
+        <a href="mailto:danielho54@gmail.com" class="email-link"
+          >danielho54@gmail.com</a
+        >
       </div>
       <div class="flex flex-col text-left bio" style="width: 80%">
         <p>

style.css

@@ -101,6 +101,8 @@ li {
   height: 18px;
   filter: var(--icon-filter);
   transition: filter 0.3s ease;
+  vertical-align: middle;
+  display: flex;
 }
 
 .bio {
@@ -148,7 +150,7 @@ li {
 .social-links {
   display: flex;
   gap: 16px;
-  margin: 0.25rem 0 0.25rem 0;
+  margin-bottom: 0.25rem;
 }
 
 /* Work items */
@@ -247,3 +249,40 @@ li {
   display: block;
   filter: none;
 }
+
+/* Email link under name */
+.email-link {
+  font-size: 0.9rem;
+  color: var(--job-description-color);
+  display: flex;
+  align-items: center;
+}
+
+/* Contact and social links */
+.contact-links {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin: 0.25rem 0 0.5rem 0;
+}
+
+.contact-separator {
+  color: var(--border-color);
+  margin: 0 4px;
+}
+
+/* Media icons */
+.media-icon {
+  width: 18px;
+  height: 18px;
+  filter: var(--icon-filter);
+  transition: filter 0.3s ease;
+  vertical-align: middle;
+  display: flex;
+}
+
+/* Icon links */
+.contact-links a {
+  display: flex;
+  align-items: center;
+}