Staff Directory Page

📍 The Project

This was a request from my boss — not a full-blown project with a kickoff or deadline, but something I tackled over time between other priorities. We didn’t have a staff bio page, and leadership wanted a centralized, professional space for readers to learn about the team.

🎨 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 built the layout from scratch using HTML, CSS, and JavaScript inside BLOX CMS. The bios are displayed in a responsive grid, and I incorporated a collapsible design so that visitors could toggle bios open and closed. I fine-tune the flexbox structure and JavaScript to ensure the layout worked smoothly across breakpoints.

📅 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