Better profile pages

Author: kescobo

_assets/kevin_headshot.png

@@ -69,4 +69,77 @@
 .card-button:hover{
   background-color:#555;
 }
+/* Horizontal profile card */
+.profile-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+}
+
+.profile-info {
+  flex: 1;
+  padding-right: 2rem;
+}
+
+.profile-name {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-size: 2rem;
+}
+
+.profile-title {
+  color: #555;
+  font-size: 1.2rem;
+  margin-bottom: 1rem;
+}
+
+.profile-email {
+  font-family: courier;
+  margin-bottom: 1rem;
+  word-break: break-all;
+  overflow-wrap: break-word;
+}
+
+.profile-button {
+  border: none;
+  outline: 0;
+  padding: 10px 20px;
+  color: white;
+  background-color: #000;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 1rem;
+}
 
+.profile-button:hover {
+  background-color: #333;
+}
+
+.profile-image-container {
+  width: 30%;
+  max-width: 250px;
+}
+
+.profile-image {
+  width: 100%;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+}
+
+.profile-vitae {
+  font-style: italic;
+  margin-bottom: 2rem;
+  padding: 0 1rem;
+  border-left: 3px solid #ddd;
+}
+
+.profile-content {
+  line-height: 1.6;
+}

_css/cards.css

@@ -3,6 +3,7 @@ using Dates
 name="Kevin Bonham"
 title="Assistant Professor"
 vitae="Benevolant dictator"
+portrait="/assets/kevin_headshot.png"
 email="kevin.bonham@tuftsmedicine.org"
 joined = Date(2025,02,01)
 +++

people/kevin.md

@@ -19,14 +19,14 @@ function hfun_list_people()
         (
         node("div", class="card-column",
             node("div", class="card-body", 
-                node("img", src="/assets/portrait_placeholder.png"),
+                node("img", src=p.portrait),
                 node("div", class="card-container", 
-                     node("h2", node("a", href=p.href, p.name)),
+                    node("h2", node("a", href=p.href, p.name)),
                     node("div", class="card-title", p.title),
                     node("div", class="card-vitae", p.vitae),
-                    node("div", class="card-email", p.email),
-                    node("p", node("a", href="mailto:$(p.email)",
-                            node("button", class="card-button", "Contact")
+                    node("div", class="card-email", node("a", href="mailto:$(p.email)", p.email)),
+                    node("p", node("a", href=p.href,
+                            node("button", class="card-button", "Details")
                            )
                     )
                 )
@@ -37,6 +37,20 @@ function hfun_list_people()
     )
 end
 
+function person_info(rp)
+    return (;
+    date=getvarfrom(:joined, rp),
+    name=getvarfrom(:name, rp),
+    title=getvarfrom(:title, rp),
+    email=getvarfrom(:email, rp),
+    portrait=getvarfrom(:portrait, rp, "/assets/portrait_placeholder.png"),
+    vitae=getvarfrom(:vitae, rp),
+    alumn=getvarfrom(:alumn, rp, false),
+    href="/$(splitext(rp)[1])",
+    tags=get_page_tags(rp)
+    )
+end
+
 function get_people(basepath::String="people")
     # find all valid "people/xxx.md" files, exclude the index which is where
     # the people list gets placed
@@ -46,27 +60,31 @@ function get_people(basepath::String="people")
         append!(paths, joinpath.(root, files))
     end
     # for each of those people, get their info
-    posts = [
-        (
-        date=getvarfrom(:joined, rp),
-        name=getvarfrom(:name, rp),
-        title=getvarfrom(:title, rp),
-        email=getvarfrom(:email, rp),
-        vitae=getvarfrom(:vitae, rp),
-        alumn=getvarfrom(:alumn, rp, false),
-        href="/$(splitext(rp)[1])",
-        tags=get_page_tags(rp)
-        )
-        for rp in paths
-    ]
+    posts = [person_info(rp) for rp in paths]
     sort!(posts, by=x -> x.date)
 
     return posts
 end
 
 function hfun_person_header()
-    name = getlvar(:name, getlvar(:title))
-    return string(node("div", class="franklin-content", node("h1", name)))
+    person = person_info(get_rpath())
+    return string(node("div", class="franklin-content", 
+
+        node("div", class="profile-header",
+            node("div", class="profile-info",
+                node("h1", class="profile-name", person.name),
+                node("div", class="profile-title", person.title),
+                node("div", class="profile-vitae", person.vitae),                    
+                node("div", class="profile-email",
+                     node("a", href="mailto:$(person.email)", person.email)
+                ),
+            ),
+            node("div", class="profile-image-container",
+                 node("img", class="profile-image", src=person.portrait, alt="$(person.name)")
+            )
+        ),
+
+    ))
 end
 
 function hfun_list_projects()