const persons = [
{
name: "Nish",
photo: "https://uploads-ssl.webflow.com/63f8afb7a279459200022c42/6627db6a016fef9ae6c531cf_Nish_2.webp",
title: "Creative Director",
bio: "<p>With 30 years of design and marketing expertise, Nish stands as an award-winning Creative Director, having led teams in some of the most prominent agencies in the UK. Twelve years ago, Nish founded Curious Agency, driven by the vision to provide expertise devoid of administrative burdens, thus cultivating a truly agile and well-informed agency.<br><br>Nish brings a distinctive perspective to all clients. His portfolio encompasses a blend of business-to-business (B2B) and business-to-consumer (B2C) campaigns, spanning various channels, with a dedicated emphasis on Diversity and ESG. This breadth of experience has honed Nish's ability to craft compelling campaigns that not only resonate but also deliver tangible results.<br><br>Furthermore, Nish serves as an Advisory Member at Brand Leadership Community, contributing his insights on marketing, diversity and inclusion (D&I), and content strategies. Through his multifaceted roles and unwavering commitment to innovation and impact, Nish continues to shape the landscape of creative marketing and advocacy.<br><br>At weekends Nish can be found on a mountain bike in Wales, holding on for dear life. His other passions are coffee, movies and tidying the garage which seems like an endless task.</p>"
},
{
name: "Shawn",
photo: "https://uploads-ssl.webflow.com/63f8afb7a279459200022c42/6627db6a0c119a90233b6840_Shawn_2.webp",
title: "Senior Creative",
bio: "<p>With 15 years of design and marketing expertise, Shawn emerges as an innovative problem-solver, consistently delivering effective solutions across a diverse range of B2B and B2C campaigns for large companies. His approach to problem-solving is marked by creativity and ingenuity, ensuring solutions that not only meet but exceed expectations. <br><br> From illustration and branding to web design-build and development, Shawn's skills encompass a broad spectrum of creative disciplines. He specialises in crafting engaging animated and video content, captivating audiences with his dynamic visuals. Shawn brings to projects a keen eye for design solutions, expertise in web design and user experience optimization, proficiency in animation and video production, and a flair for distinctive illustration work. <br><br> Beyond his professional pursuits, Shawn is a music and Sunday dinner enthusiast and an avid consumer of ghost videos on YouTube. Whether hitting the gym or indulging in his YouTube fascination, Shawn brings his passion for challenging conventions to every aspect of his life and work.</p>"
},
// Duplicate the above entries to create eight team members
{
name: "Sarah",
photo: "https://uploads-ssl.webflow.com/63f8afb7a279459200022c42/6627db6a92bc8930fa64286f_Sarah_2.webp",
title: "Senior Designer",
bio: "<p>With 12 years of design experience, Sarah has dedicated the last 6 years to specializing in the healthcare sector. Accessibility for patients is a top priority for her, and she has devoted a significant portion of her career to developing health literacy principles for both print and digital materials. Her expertise extends to animation and video production, branding and identity design, internal communications, digital design, web coding, and executing B2B and B2C campaigns. Sarah's passion lies in creating customer excitement and engagement through her work. <br><br>Sarah brings a fervent dedication to projects, coupled with a knack for idea generation and a mastery of animation and video production. Outside of her professional endeavours, Sarah enjoys skiing, indulging in good red wine, and dabbling in pottery, where she likes to pretend she's quite skilled.</p>"
},
{
name: "Anna",
photo: "https://uploads-ssl.webflow.com/63f8afb7a279459200022c42/6627db6affac22faa11990df_Anna_2.webp",
title: "Digital Strategy",
bio: "<p>Anna boasts a rich 12-year background in integrated digital marketing, adept at seamlessly incorporating digital marketing initiatives into overarching business strategies. Her track record includes spearheading highly effective campaigns across diverse sectors such as retail, construction, insurance, finance, aviation, and travel. Proficient in SEO, PPC, social media, and content marketing, Anna emphasizes the importance of cohesive and seamless customer experiences in her work. <br><br>What sets Anna apart is her straightforward analysis and approach, facilitating clear insights into project requirements. She excels in comprehensive campaign planning, leveraging her multi-sector expertise to deliver tailored strategies that resonate across various industries. <br><br>Anna dedicates a significant amount of her time to supporting digital media knowledge among young business owners and school-aged children. Whether through mentorship programs, workshops, or educational initiatives, Anna is committed to empowering the next generation with the skills and knowledge they need to thrive in the digital age.</p>"
},
// ...repeat for additional members
{
name: "Tashia",
photo: "https://uploads-ssl.webflow.com/63f8afb7a279459200022c42/6627db6adf824a659bf08cba_Tash.webp",
title: "Copy, Content & SEO",
bio: "<p>With a decade of experience, Tashia has assisted businesses in fortifying their brand identity, enhancing their visibility through effective SEO strategies, and actively engaging with their target audience through compelling content. Her writing expertise spans various formats, including blog posts, feature articles, reports, press releases, white papers, and more. Tashia specializes in crafting SEO-optimized copy that significantly elevates the visibility of her clients. <br><br>Her skills extend to marketing content creation, encompassing blogs, white papers, emails, reports, social media content, and testimonials. What Tashia brings to projects is a talent for producing engaging content and copy, meticulous proofreading abilities, and proficiency in online content creation. <br><br> Outside of her professional pursuits, Tashia enjoys frequent trips to Cornwall, where she attempts to hone her surfing skills whenever possible.</p>"
},
{
name: "Claire",
photo: "https://cdn.prod.website-files.com/63f8afb7a279459200022c42/66f3c71a1fbe616545b97b28_Clare-web.png",
title: "ESG & Sustainability Strategist",
bio: "<p>With more than 25 years of capital markets, finance and management consulting experience Claire has gained extensive skills in developing sustainability, growth and governance driven transformational change programs for companies with business issues. <br><br>Claire works strategically as an executive mentor and board advisor with listed, as well as entrepreneurial or private companies, to improve governance and sustainability practices that enhance reputational value. <br><br>Claire provides interim as well as project ”lead” support to all types of organizations to find solutions to particular governance, sustainability or growth challenges. <br><br>Claire has non-executive director and chair experience in the listed, entrepreneurial, youth and health charity, local authority and education sectors. She is certified carbon literate and regularly provides training as well as learning and development support programs for organisations seeking to be upskilled in sustainability and governance. <br><br>Claire is a retained faculty member for Euronext, Nottingham Business School and the Hunter Centre for Entrepreneurship at Strathclyde University.</p>"
},
// Duplicate the above entries to create eight team members
{
name: "Andrea",
photo: "https://uploads-ssl.webflow.com/63f8afb7a279459200022c42/6627e2717bbd78831a9f652e_Andrea_2.jpg",
title: "Diversity & Inclusion Strategist",
bio: "<p>Andrea is passionate about creating inclusive, sustainable, and ethically operating Supply Chains. She was EMEA Supplier Diversity Program Manager in a large international corporation for many years, where she led and developed the strategy for the Supplier Diversity 1st Tier program for EMEA and the 2nd Tier program on a global level. <br><br>She was also responsible for the supply chain social responsibility team in EMEA and developed a mentoring program for diverse-owned businesses. <br><br>Andrea strives to show the impact inclusive, sustainable, and ethically operating Supply Chains have on the economy, on corporates and on diverse-owned businesses. In 2019, Andrea Fimian’s work was awarded 1st prize in the IT Female Awards in the Outstanding Diversity Commitment category by the Women IT Network in Germany.</p>"
},
{
name: "Jack",
photo: "https://uploads-ssl.webflow.com/63f8afb7a279459200022c42/6627db6a0ed5d6d4e1af1621_Jack_1.webp",
title: "Digital",
bio: "<p>With over twenty years of experience as a digital marketing consultant, Jack is fueled by a deep passion for all things digital. His expertise encompasses web design, coding, development, and implementation, making him a versatile asset to any project. <br><br>Jack's proficiency extends to email marketing, web development, and interactive infographics, where he brings a wealth of knowledge and experience. As a WordPress aficionado, he excels in themes and plugin development, delivering robust technical solutions. Jack's contribution to projects is characterised by his straightforward digital expertise and his ability to provide effective technical solutions. <br><br>As a parent to two young children, Jack spends most of his weekends driving between football clubs and dance classes. Though he complains, we know he loves it.</p>"
},
// ...repeat for additional members
];
const app = new Vue({
el: "#app",
data() {
return {
persons: persons,
selectedPersonIndex: null,
isSelected: false,
selectedPerson: null,
inlineStyles: null,
isReady: false,
isOk: false,
selectedPersonData: {
name: null,
title: null,
photo: null,
bio: null,
}
};
},
methods: {
selectPerson(index, el) {
if (!this.isOk) {
this.selectedPersonIndex = index;
this.isSelected = true;
el.target.parentElement.className == "person-details"
? (this.selectedPerson = el.target.parentElement.parentElement)
: (this.selectedPerson = el.target.parentElement);
this.selectedPerson.classList.add("person-selected");
this.selectedPerson.setAttribute(
"style",
`width:${this.selectedPerson.offsetWidth}px;`
);
this.selectedPersonData = this.persons[index];
window.setTimeout(() => {
this.inlineStyles = `width:${this.selectedPerson
.offsetWidth}px;height:${this.selectedPerson
.offsetHeight}px;left:${this.selectedPerson.offsetLeft}px;top:${this
.selectedPerson.offsetTop}px;position:fixed`;
this.selectedPerson.setAttribute("style", this.inlineStyles);
}, 400);
window.setTimeout(() => {
this.isReady = true;
this.isOk = true;
}, 420);
} else {
this.reset();
}
},
reset() {
this.isReady = false;
window.setTimeout(() => {
this.selectedPerson.classList.add("person-back");
}, 280);
window.setTimeout(() => {
this.selectedPerson.setAttribute("style", "");
}, 340);
window.setTimeout(() => {
this.isSelected = false;
this.selectedPerson.classList.remove("person-back", "person-selected");
this.isOk = false;
}, 400);
}
}
});
