.team-detail-photo {
position: relative;
text-align: center;
z-index: 999;
width: 100%;
font-size: 0px;
DISPLAY: NONE;
}
.person-title {
color: #fff;
font-family: Syncopate !important;
font-size: 2em;
}
$headings-font: "Syncopate", cursive!important;
$body-font: "Snycopate", sans-serif!important;
.team-detail-right .person-title {
font-family: "Syncopate", cursive !important;
font-size: 2.2em;
margin-left: 20px !important;
}
.person-desc {
color: rgba(255, 255, 255, 0.2);
margin-top: 10px;
text-transform: uppercase;
font-size: 0.8em;
letter-spacing: 2px;
margin-left: 20px!important;
}
.social {
margin-top: 15px;
margin-left: 20px !important;
}
.team-detail-bio-content p {
margin-bottom: 15px;
line-height: 25px;
font-size: 1.05em;
margin-left: 20px;
}
.social a {
color: #ffffff!important;
font-size: 20px;
margin-right: 8px;
}
body {
height: 100%;
font-family: $body-font;
background-color: #00020A;
}
.syncopate-regular {
font-family: "Syncopate", sans-serif;
font-weight: 800;
font-style: normal;
}
.syncopate-bold {
font-family: "Syncopate", sans-serif;
font-weight: 900;
font-style: normal;
}
.container {
width: 100%;
display: flex;
align-items: center;
height: 100vh;
flex-wrap: wrap;
}
.header {
width: 100%;
text-align: center;
margin-bottom: 75px;
overflow: hidden;
transition: 0.45s ease 0.05s;
max-height: 70px;
&-title {
width: 100%;
font-family: $headings-font;
font-size: 3.3em;
color: #ffffff;
margin-bottom: 15px;
}
}
.team-container {
padding: 0 30px;
box-sizing: border-box;
max-width: 1400px;
width: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
height: auto;
}
.person {
width: calc(25% - 30px);
cursor: pointer;
overflow: hidden;
transition: 0.45s;
position: relative;
&-details {
padding: 0 20px;
box-sizing: border-box;
margin-top: -15px;
transition: 0.3s;
}
&-img {
width: 100%;
}
&-title {
color: #fff;
font-size: 2em;
}
&-desc {
color: rgba(#fff, 0.2);
margin-top: 10px;
text-transform: uppercase;
font-size: 0.8em;
letter-spacing: 2px;
}
&-list {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
&:hover {
.person {
opacity: 0.6;
}
}
}
&:hover {
opacity: 1 !important;
}
&:before {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: #ffffff;
content: "";
height: 0px;
transition: 0.45s;
}
&:after {
content: "\f2ca";
font-family: "Ionicons";
font-size: 36px;
color: #282828;
position: absolute;
width: 100%;
top: 0;
height: 100%;
display: flex;
opacity: 0;
visibility: hidden;
transition: 0.3s;
text-align: center;
flex-wrap: wrap;
align-items: center;
justify-content: center;
left: 0;
flex-direction: column;
}
}
.container-selected {
.header {
max-height: 0px;
}
.person {
opacity: 0 !important;
pointer-events: none;
}
.person-list .person-selected {
opacity: 1 !important;
&:before {
height: 100%;
}
.person-details {
margin-top: -40px;
opacity: 0;
}
}
}
.team-detail {
position: absolute;
width: calc(100% - 100px);
right: 80px;
top: 0;
height: 100%;
color: #fff;
transition: 0.15s;
opacity: 0;
visibility: hidden;
box-sizing: border-box;
&-bio {
&-content {
p {
margin-bottom: 15px;
line-height: 25px;
font-size: 1.05em;
}
}
}
&-header {
margin-bottom: 30px;
}
&-inner {
min-height: 100%;
display: flex;
flex-wrap: wrap;
}
&-left {
position: relative;
width: 650px;
min-height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: top;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
&:before {
width: 100%;
height: 100%;
content: "";
position: absolute;
right: 0;
top: 0;
}
&:after {
width: 100%;
height: 100%;
content: "";
position: absolute;
right: 0;
top: 0;
}
}
&-photo {
position: relative;
text-align: center;
z-index: 999;
width: 100%;
font-size: 0px;
img {
max-width: 100%;
box-shadow: 0 10px 22px rgba(0,0,0,.3);
}
}
&-right {
box-sizing: border-box;
width: calc(100% - 650px);
min-height: 100%;
display: flex;
align-items: center;
padding-right: 10%;
position: relative;
right: 0;
flex-wrap: wrap;
.person-title {
font-family: $headings-font;
font-size: 2.2em;
}
}
}
.header-title {
width: 100%;
font-family: "Syncopate", cursive !important;
font-size: 2.3em!important;
color: #ffffff;
margin-bottom: 15px !important;
}
.container-ready {
.team-detail {
transition: 0.45s ease 0.3s;
opacity: 1;
right: 0;
visibility: visible;
img {
width: 75%;
}
}
.team-container {
height: 0px;
overflow: hidden;
}
.person-selected {
left: 0px !important;
top: 0px !important;
z-index: 99;
height: 100% !important;
width: 100px !important;
pointer-events: auto;
&:after {
opacity: 1;
visibility: visible;
}
}
}
.person-back {
&:before {
height: 0px !important;
}
.person-details {
margin-top: -15px !important;
transition-delay: 0.35s;
opacity: 1 !important;
}
}
.social {
margin-top: 15px;
a {
color: #fbf9bd;
font-size: 20px;
margin-right: 8px;
&:last-child {
margin-right: 0;
}
}
}
@media (max-width: 1200px) {
.team-detail-left {
width: 400px;
padding: 0 40px;
box-sizing: border-box;
}
.team-detail-right {
padding-right: 0;
width: calc(100% - 440px);
}
.person .person-title {
font-size: 1.7em;
}
.person-details {
padding: 0 10px;
}
}
@media (max-width: 970px) {
.team-detail-left {
width: 100%;
padding: 50px 50px 30px 50px;
&:after {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(33, 33, 33, 1) 83%,
rgba(40, 40, 40, 1) 100%
);
}
}
.team-detail-right {
padding: 0 50px;
width: 100%;
}
.team-detail-header {
text-align: center;
}
.container-ready .person-selected {
width: 50px !important;
}
.team-detail {
width: calc(100% - 50px);
}
.person {
width: calc(50% - 20px);
}
}
@media (max-width: 480px) {
.person {
width: 100%;
margin-bottom: 50px;
}
.header {
margin-top: 50px;
}
}
View Compiled
const persons = [
{
name: "Dave Demon",
photo: "https://kinder-der-nacht.net/wp-content/uploads/2024/10/DaveDemon_Label_Fullsize-26.jpg",
title: "Interpret & DJ",
bio:
"<p>Dave Demon, geboren in Münster und aufgewachsen im kleinen Städtchen Greven, entdeckte seine Leidenschaft für elektronische Musik bereits im Alter von 11 Jahren. Bei Besuchen bei seinem Nachbarn und besten Freund erlebte er die ersten elektronischen Klänge. <br> <br> Das Album „Our Happy Hardcore“ von Scooter und die Compilation „Ravermen’s Friend“ prägten seinen Musikgeschmack nachhaltig. Die prägenden Jahre im Fusion Club Mit 17 Jahren erlebte Dave die Clubnächte im legendären Cosmic Club, der später als Fusion Club bekannt wurde. Die nächtlichen Sets von Größen wie DJ Rush und Chris Liebing beeindruckten ihn tief. <br> <br> Besonders das Künstlerduo HardtraX vs. Jackhamma beeinflusste seinen Musikgeschmack und weckte seine Leidenschaft für harten Techno. Diese Nächte prägten seine musikalische Richtung und seinen Wunsch, selbst Musik zu produzieren. <br> <br> Aufstieg und erste Erfolge in der Hardtechno-Szene Anfang der 2000er Jahre, nach dem persönlichen Kennenlernen von HardtraX, begann Dave Demon, eigene Musik zu produzieren. 2002 trat er in die Hardtechno-Szene ein und erlangte schnell Anerkennung für seine kraftvollen Produktionen. Veröffentlichungen bei ZYX Music mit der Compilation „Schranz Total 13“ und das erste eigene Vinyl auf dem United Schranz Board festigten seinen Status als Hardtechno-Künstler in der Underground-Szene.</p>",
social: {
facebook: "#",
twitter: "https://twitter.com/knyttneve",
linkedin: "#"
}
},
{
name: "Bully D",
photo: "https://kinder-der-nacht.net/wp-content/uploads/2024/09/bully-D.jpg",
title: "Remember Trance Producer",
bio:
"<p>Bully D, geboren in Bulgarien und aufgewachsen in Berlin, ist ein DJ, dessen musikalische Reise tief in die goldenen Jahre der elektronischen Musikszene zurückreicht. Seit 2009 in der Schweiz ansässig, steht das „D“ in seinem Künstlernamen für Deutschland sowie als Hommage an sein Vorbild Gary D. <br> <br> Sein unverkennbarer Playstyle vereint Trance, Hard Trance und early Hardstyle aus den Jahren 1994 bis 2003, was ihn zu einer festen Größe in der „Remember Trance“-Szene macht. Bereits 1993, im Alter von 14 Jahren, kam Bully D mit der elektronischen Musik in Berührung. Ein Jahr später legte er mit seinen ersten Plattenspielern los und fand schnell Gefallen am Mixen. <br> <br> Seinen musikalischen Horizont erweiterte er durch den Besuch der Love Parade 1995 und anschließenden Rave-Nächten wie der Dub Mission in der Halle Weißensee, wo Hardcore bis zu 170 BPM den Ton angab. Diese Erfahrungen prägten seinen Musikgeschmack und formten seine Leidenschaft für schnellere Beats. Trotz seiner Liebe zur Musik erlebte Bully D auch schwierige Zeiten in der Berliner Clubszene. <br> <br> Eine besonders negative Erfahrung mit Türstehern ließ ihn an seiner Karriere als DJ zweifeln, was schließlich zu einer musikalischen Pause von 2003 bis 2012 führte. Doch die Rückkehr zur Musik ließ nicht lange auf sich warten: In der Schweizer Trance-Szene fand er 2012 wieder Anschluss, entdeckte das digitale DJing und ließ seine Plattensammlung hinter sich. Die Street Parade und sein Kontakt mit DJ Madwave öffneten ihm die Ohren für neue Richtungen wie New Trance und Psy Trance. Seitdem ist sein Sound zunehmend progressiv geworden. <br> <br> Bully D fühlt sich in einem BPM-Bereich zwischen 140 und 150 BPM am wohlsten. Während er sich in den 2010er Jahren oft zu schnell für den Geschmack vieler fühlte, erlebt er nun in den 2020er Jahren eine Renaissance, bei der sogar Hard Techno mit über 155 BPM wieder geschätzt wird. Ein weiterer Einfluss auf seine musikalische Entwicklung sind die großen Namen der 90er-Jahre wie RMB, Ravers Nature, Gary D und viele andere Größen, die die Mayday geprägt haben.</p>",
social: {
facebook: "#",
twitter: "https://twitter.com/knyttneve",
linkedin: "#"
}
},
{
name: "Bennix",
photo: "https://kinder-der-nacht.net/wp-content/uploads/2024/09/Bennix.jpg",
title: "DJ",
bio:
"<p> beNNix ist ein DJ und Produzent, der sich auf Progressive Trance, Offbeat und DirtyProg spezialisiert hat. Seine Leidenschaft für elektronische Musik entwickelte sich schon im Jugendalter. Bereits mit 18 Jahren begann er, selbst Musik zu mixen, was bald zu seinen ersten Auftritten in Stettin führte. Dort knüpfte er Kontakte zur Schweizer Crew Vive Noctem, bei der er ebenfalls seine Sets präsentierte. Kurz darauf folgten Gigs im renommierten MBia Club in Berlin. Seitdem ist beNNix eine feste Größe in der Berliner Clubszene und tritt regelmäßig in Locations wie dem MBia, Recede Club, Kulti Trebbin, NoLimits in Neustadt Dosse, Crazy Friesack Club und vielen weiteren auf. Neben seiner Verbindung zu Vive Noctem war er auch Teil des Coast Cartel Labels, bevor er zum Eventkollektiv “Kinder der Nacht” wechselte, bei dem er bis heute aktiv ist. Gemeinsam mit seinem Freund Johnny B Good gründete er das b2b-Projekt “Cue&Point”, das 2024 seinen ersten Festivalauftritt auf dem Lalanda OpenAir feierte. </p>",
social: {
facebook: "#",
twitter: "https://twitter.com/knyttneve",
linkedin: "#"
}
},
{
name: "J.D. @ ://STYEIL",
photo: "https://kinder-der-nacht.net/wp-content/uploads/2024/09/Josh.jpg",
title: "I.T; Design, UI/UX",
bio:
"<p>Magazines, Websites, Grunge & Tech+no <br> <br> Joshua Dzombic gelernter Mediengestalter bietet mit 2 von 3 Schwerpunkten eine breite Werkbank von Möglichkeiten wie z.B dem ''HiT-ME!MAGAZiNE'' welches die dritte Aussgabe im November 2024 in einige Handselektierte Läden & Umgebungen platzieren wird. <br> <br> Dabei geht's ihm mit dem Projekt um die Passionen der Menschen, das Verbinden von Projekttreibenden in einem spaßig, professionellen & vertrauenswürdigem Umfeld. Was geht sonst so? Meist: Storylines schreiben/zeichnen oder an einem neuem Medium tüfteln. </p>",
social: {
facebook: "#",
twitter: "https://twitter.com/knyttneve",
linkedin: "#"
}
}
];
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,
social: {
facebook: null,
twitter: null,
linkedin: 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);
}
}
});
