Staff Directory Page

📍 The Project

Leadership mentioned that our site did not have a staff bio page, and the idea stuck with me. I started shaping it into a real project in between larger production cycles. A single, cohesive directory felt like something our readers should already have, so I built it myself using the time and tools I had.

🎨 The Design Concept

 An intern captured the staff headshots. Using Photoshop, I created circular backgrounds in our champagne brand color and positioned each subject so their head peeked slightly outside the circle,  a subtle, intentional touch that added personality while keeping the look clean and professional.

🧰 The Build

I created the layout and interaction structure for the directory and then built the page inside BLOX CMS using HTML, CSS, and JavaScript. I used AI as a technical assistant to help generate and refine code components, and I integrated and customized everything to work within BLOX. This let me keep full creative control while moving quickly through the technical pieces.

📅 Timeline

 The page came together over about a month. The photo editing was the most time-consuming part. I worked on it in spare moments, balancing it alongside bigger projects.

🚀 The Outcome

 The result is a sleek, modern bio page that reflects the professionalism and personality of our team. Staff loved how it turned out, and leadership has asked me to apply the same design treatment to our board member bios, a future project when time allows.

📎 See It Live

To explore the full interactive version of the staff bios page (as of Q1 2025), visit:

www.fauquier.com/sites/staff_bios