Built by one neighbor, for many.

{team.map((m) => ( <article class="vfap-team-card vfap-rv vfap-d3"> <div class="vfap-team-portrait"> {m.photoUrl ? ( <img src={m.photoUrl} alt={`${m.name}, ${m.role}`} loading="lazy" /> ) : ( <div class="vfap-team-mono" aria-hidden="true"> <span>{m.name.split(' ').map((p) => p[0]).join('').slice(0, 2).toUpperCase()}</span> </div> )} </div> <div class="vfap-team-body"> <span class="vfap-team-role">{m.role}</span> <h2 class="vfap-team-name">{m.name}</h2> <p class="vfap-team-title">{m.title}</p> {m.bio && <div class="vfap-team-bio" set:html={m.bio} />} {(m.linkedin || m.github || m.email) && ( <ul class="vfap-team-links"> {m.linkedin && ( <li><a href={m.linkedin} target="_blank" rel="noopener noreferrer">LinkedIn</a></li> )} {m.github && ( <li><a href={m.github} target="_blank" rel="noopener noreferrer">GitHub</a></li> )} {m.email && ( <li><a href={`mailto:${m.email}`}>Email</a></li> )} </ul> )} </div> </article> ))}