Added PrototypeFund Demo Week project page

Signed-off-by: Anxhelo Lushka <anxhelo1995@gmail.com>

assets/scss/_custom.scss

@@ -601,7 +601,7 @@ footer {
 
 .paginate {
   position: relative;
-  
+
   & p.text-uppercase {
     font-weight: 600;
     font-size: 0.85rem;
@@ -623,7 +623,8 @@ footer {
 }
 
 .button {
-  &.previous p, &.next p {
+  &.previous p,
+  &.next p {
     font-weight: 600;
     font-size: 0.85rem;
   }
@@ -843,10 +844,10 @@ address {
     padding: 1rem 1rem 4rem 1rem;
     box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.08),
       0px 3px 5px rgba(0, 0, 0, 0.04), 0px 2.5px 2px rgba(0, 0, 0, 0.02);
-      & p {
-        color: #333 !important;
-        background-color: transparent !important;
-      }
+    & p {
+      color: #333 !important;
+      background-color: transparent !important;
+    }
   }
 }
 
@@ -1109,7 +1110,8 @@ svg path {
   transition: 0.25s ease-in-out;
 }
 
-.carousel-control-next, .olderposts {
+.carousel-control-next,
+.olderposts {
   &:hover,
   &:focus-visible {
     & path {
@@ -1348,6 +1350,88 @@ svg path {
   }
 }
 
+.demoweek-blue-banner {
+  padding: 2rem;
+  font-size: 4.75rem;
+  line-height: 4.75rem;
+  flex: 1;
+  text-transform: uppercase;
+  background-color: #009ace;
+  animation-name: blendAnimationBlue;
+  animation-duration: 3s;
+  animation-timing-function: ease-in-out;
+  animation-delay: 0s;
+  animation-direction: alternate-reverse;
+  animation-iteration-count: infinite;
+  animation-fill-mode: none;
+  animation-play-state: running;
+
+  & div {
+    mix-blend-mode: multiply;
+  }
+
+  & :nth-child(1) {
+    color: #ff0080;
+    position: absolute;
+  }
+
+  & :nth-child(2) {
+    color: #009acf;
+    margin-left: 1.5rem;
+  }
+}
+
+.demoweek-pink-banner {
+  padding: 2rem;
+  font-size: 4.75rem;
+  line-height: 4.75rem;
+  flex: 1;
+  text-transform: uppercase;
+  background-color: #ff0080;
+  animation-name: blendAnimationPink;
+  animation-duration: 3s;
+  animation-timing-function: ease-in-out;
+  animation-delay: 0s;
+  animation-direction: alternate-reverse;
+  animation-iteration-count: infinite;
+  animation-fill-mode: none;
+  animation-play-state: running;
+
+  & div {
+    mix-blend-mode: multiply;
+  }
+
+  & :nth-child(1) {
+    color: #ff0080;
+    position: absolute;
+  }
+
+  & :nth-child(2) {
+    color: #009acf;
+    margin-left: 1.5rem;
+  }
+}
+
+@keyframes blendAnimationPink {
+  0% {
+    background-color: #ff0080;
+  }
+
+  100% {
+    background-color: #009ace;
+  }
+}
+
+@keyframes blendAnimationBlue {
+  0% {
+    background-color: #009ace;
+  }
+
+  100% {
+    background-color: #ff0080;
+  }
+}
+
 .contact {
   font-size: 1.5rem;
   margin-top: 1rem;
@@ -1581,4 +1665,4 @@ svg path {
   padding: 1rem;
   text-decoration: none;
   z-index: 25;
-}
+}

content/de/work/demoweek.md

@@ -0,0 +1,72 @@
++++
+layout = "work/single"
+theme = "dark"
+background = "#000067"
+accent = "#009ACE"
+text = "#FFFFFF"
+title = "PrototypeFund - Virtual Demo Week"
+summary = "Wir haben eine virtuelle Demo-Woche entwickelt, um Projekte aus den Runden 7-10 des deutschen Prototype Fund die Möglichkeit zu geben, ihre Arbeit in einer virtuellen Umgebung zu präsentieren."
+date = "2023-03-11 18:45:00 +0200"
+image = "demoweek"
+tags = []
+categories = ["Branding", "Interaction Design", "Web Development"]
+[links]
+    "Brand Book" = "https://www.figma.com/proto/m9gSaAYsqNVou9gmVdFwlj/Adapt?page-id=328%3A0&node-id=329%3A125&viewport=241%2C48%2C0.07&scaling=contain"
+    "Website" = "https://adapt.internews.org"
++++
+
+Im Jahr 2020, während des Höhepunkts der Corona-Pandemie, wandte sich der Prototype Fund an uns, um bei der Umgestaltung ihrer herkömmlichen Demo Week in ein virtuelles Ereignis zu helfen. Normalerweise trafen sich die Teilnehmer an einem Tag in Berlin, um ihre Projekte zu präsentieren. Aufgrund der Einschränkungen für Veranstaltungen in Präsenz mussten wir jedoch einen alternativen Ansatz entwickeln.
+
+---
+
+{{< figure class="with-js" src="/img/work/demoweek-logo.svg" alt="Prototype Fund Demo Week Logo" >}}
+{{< figure class="no-js" src="/img/work/demoweek-logo.webp" alt="Prototype Fund Demo Week Logo" >}}
+
+Der Prototype Fund ist ein öffentliches Förderprogramm in Deutschland, das Einzelpersonen und kleinen Teams unterstützt, die an Open-Source-Software, digitaler Infrastruktur und Civic-Tech-Projekten arbeiten. Das Programm stellt bis zu 47.500 Euro pro Projekt für einen Zeitraum von sechs Monaten sowie Mentoring- und Networking-Möglichkeiten zur Verfügung. 
+
+Ziel des Prototype Funds ist es, innovative Ideen in einer risikoarmen Umgebung schnell zu prototypisieren und zu testen sowie eine Kultur der Open-Source-Software und Zusammenarbeit in der deutschen Tech-Community zu fördern.
+
+{{< figure src="/img/work/demoweek-screenshot.webp" alt="Prototype Fund Demo Week Website Screenshot" >}}
+
+## Stereoscopic Visuals
+
+Das Branding des Prototype Funds bietet viel kreative Freiheit, indem sie mit stereoskopischen Bildern und Texten spielt, die sich transformieren. Viele Brainstorming-Sitzungen wurden darauf verwendet, synth-wave, cyberpunk und ähnliche visuelle Stile zu erkunden, um den Inhalt zu unterstützen.
+
+<div class="d-flex justify-content-between align-items-center">
+
+<div class="demoweek-blue-banner text-center">
+
+<div>Demo</div>
+
+<div>Week</div>
+
+</div>
+
+<div class="demoweek-pink-banner text-center">
+
+<div>Demo</div>
+
+<div>Week</div>
+
+</div>
+
+</div>
+
+## Accessibility
+
+Der stereoskopische Stil war visuell ansprechend, aber aufgrund seines niedrigen Farbkontrasts war es für einige Benutzer schwierig, wichtige Informationen wahrzunehmen. Um die Zugänglichkeit zu verbessern, haben wir eine erweiterte Farbpalette eingeführt, die vom Prototype Fund-Stil inspiriert wurde. Dadurch konnten wir eine größere Vielfalt an Farben anbieten, die genug Kontrast zum bestehenden Stil hatten und es Benutzern leichter machten, zwischen verschiedenen Elementen auf der Seite zu unterscheiden.
+
+{{< figure class="with-js" src="/img/work/demoweek-colors.svg" alt="Demo Week color palette" >}}
+{{< figure class="no-js" src="/img/work/demoweek-colors.webp" alt="Demo Week color palette" >}}
+
+Zudem haben wir erkannt, dass Barrierefreiheit von entscheidender Bedeutung ist, um eine inklusive Benutzererfahrung zu schaffen. Um sicherzustellen, dass unsere stilistischen Entscheidungen im Einklang der Barrierefreiheit standen, haben wir uns für einen dunklen Stil entschieden, der einen hohen Kontrast bot und die Farben auf der gesamten Website wie Neonlichter erscheinen ließ.
+
+Diese Wahl war nicht nur visuell ansprechend, sondern stellte auch sicher, dass die Website für alle Benutzer zugänglich war, einschließlich derjenigen mit Sehbehinderungen.
+
+{{< figure src="/img/work/demoweek-highlight.webp" alt="Prototype Fund Demo Week Website Screenshot" >}}
+
+## Wie wir geholfen haben
+
+- Eine neue, erfrischte Markenidentität, um eine barrierefreie Webseite zu bieten. 
+- Design und Aufbau der neuen Webseite des Prototype Funds, die Platz für 95 Projekte in 4 Runden bietet. 
+- Unterstützung des Prototype Fund-Teams bei der Bereitstellung und Testung der neuen Website.

content/en/work/demoweek.md

@@ -0,0 +1,70 @@
++++
+layout = "work/single"
+theme = "dark"
+background = "#000067"
+accent = "#009ACE"
+text = "#FFFFFF"
+title = "PrototypeFund - Virtual Demo Week"
+summary = "We developed a virtual demo week experience to enable projects from Rounds 7-10 of the German Prototype Fund to showcase their work in a virtual setting."
+date = "2023-03-11 18:45:00 +0200"
+image = "demoweek"
+tags = []
+categories = ["Branding", "Interaction Design", "Web Development"]
+[links]
+    "Brand Book" = "https://www.figma.com/proto/m9gSaAYsqNVou9gmVdFwlj/Adapt?page-id=328%3A0&node-id=329%3A125&viewport=241%2C48%2C0.07&scaling=contain"
+    "Website" = "https://adapt.internews.org"
++++
+
+At the height of the Covid pandemic in 2020, we were approached by Prototype Fund to help them with shaping their traditional Demo Week virtually. Usually Projects would meet in Berlin for a day and present their work. As in-person events were not an option anymore, we needed to come up with an alternative.
+
+---
+
+{{< figure class="with-js" src="/img/work/demoweek-logo.svg" alt="Prototype Fund Demo Week Logo" >}}
+{{< figure class="no-js" src="/img/work/demoweek-logo.webp" alt="Prototype Fund Demo Week Logo" >}}
+
+Prototype Fund is a public funding program in Germany that supports individuals and small teams working on open source software, digital infrastructure, and civic tech projects. The program provides funding of up to €47,500 per project for a period of six months, as well as mentorship and networking opportunities. The aim of Prototype Fund is to enable innovative ideas to be quickly prototyped and tested in a low-risk environment, and to foster a culture of open source and collaboration in the German tech community.
+
+{{< figure src="/img/work/demoweek-screenshot.webp" alt="Prototype Fund Demo Week Website Screenshot" >}}
+
+## Stereoscopic Visuals
+
+The Prototype Fund branding offers a lot of creative freedom, playing around with stereoscopic imagery and text which transforms. Many brainstorming sessions were spent exploring synth-wave, cyberpunk and similar visual styles to aid the content.
+
+<div class="d-flex justify-content-between align-items-center">
+
+<div class="demoweek-blue-banner text-center">
+
+<div>Demo</div>
+
+<div>Week</div>
+
+</div>
+
+<div class="demoweek-pink-banner text-center">
+
+<div>Demo</div>
+
+<div>Week</div>
+
+</div>
+
+</div>
+
+## Accessibility
+
+While the stereoscopic style was very engaging, it also had accessibility issues as part of it. We introduced a new extended color palette based on the Prototype Fund style to offer enough color contrast with existing.
+
+{{< figure class="with-js" src="/img/work/demoweek-colors.svg" alt="Demo Week color palette" >}}
+{{< figure class="no-js" src="/img/work/demoweek-colors.webp" alt="Demo Week color palette" >}}
+
+Moreover, we recognized that accessibility is crucial for creating an inclusive user experience. To ensure that our stylistic choices were aligned with accessibility best practices, we chose a dark style that provided a high level of contrast and made the colors feel like neon lights across the site. 
+
+This choice was not only visually appealing but also ensured that the site was accessible to all users, including those with visual impairments.
+
+{{< figure src="/img/work/demoweek-highlight.webp" alt="Prototype Fund Demo Week Website Screenshot" >}}
+
+## How we helped
+
+- A new refreshed brand identity to provide a more accessible web experience.
+- Designing and building the new Prototype Fund website accommodating 95 projects across 4 rounds.
+- Support the Prototype Fund team with deploying and testing the new website