Barn av Rusmisbrukere
Barn av rusmisbrukere ("Children of Substance Abusers"; BaR) work for those with parents, or others close to them, who have or have had a substance abuse problem. Together with Postpost Studio, we have created BaR's website - twice!
Barn av rusmisbrukere was founded in 2009 and has since become a nationwide user and interest organization.
Teknologi
- Craft CMS (multi-site)
- Tailwind CSS
- GSAP
![](https://vrsgdweb.imgix.net/images/projects/barnavrus/barn-av-rus.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=d10ae0a22c894c1ae934f533e9a4ac94 600w, https://vrsgdweb.imgix.net/images/projects/barnavrus/barn-av-rus.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=1397d96c1ce693a878e8652e1f7c1c8a 800w, https://vrsgdweb.imgix.net/images/projects/barnavrus/barn-av-rus.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=203d8d20b235ee16ee684ed889a1523d 1000w, https://vrsgdweb.imgix.net/images/projects/barnavrus/barn-av-rus.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=374e1d4e50cae13cfe965775e8ee47da 1200w, https://vrsgdweb.imgix.net/images/projects/barnavrus/barn-av-rus.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=fd39a4cedc49dc6692d481f909487a07 1400w, https://vrsgdweb.imgix.net/images/projects/barnavrus/barn-av-rus.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=348f290e284b3c7ab9962954d1772eb1 1600w, https://vrsgdweb.imgix.net/images/projects/barnavrus/barn-av-rus.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=e396c5652194056213eb7867e24372f1 1800w)
In 2018, our friends at Postpost Studio were tasked with redesigning the visual identity of Barn av rusmisbrukere, and we were invited to join the team to implement the new website.
The first version of the website was launched in early 2019. This was primarily an informational website about the organization, focusing on practical information and internal content, with a frontend rooted in a strong visual identity.
With efficient publishing tools on the backend, BaR was quickly inspired to produce more content: articles, in-depth material, and other knowledge resources on the topics the organization works with. The problem was that the solution was not designed for this type of content, and in 2021, BaR decided to undergo a major redesign of the websites.
However, there is rarely a reason to replace a winning team! The redesign job was given to Postpost, and we were naturally happy to be part of another round 🥳
![](https://vrsgdweb.imgix.net/images/projects/barnavrus/MockupMaison_DD_B11-v2.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=c6922adda1423d27643708013c6bddc7 600w, https://vrsgdweb.imgix.net/images/projects/barnavrus/MockupMaison_DD_B11-v2.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=9a04eb9110bf3de1d9cead53a51d974c 800w, https://vrsgdweb.imgix.net/images/projects/barnavrus/MockupMaison_DD_B11-v2.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=e9404e1e5d7301aebc9d6f049b93f051 1000w, https://vrsgdweb.imgix.net/images/projects/barnavrus/MockupMaison_DD_B11-v2.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=002ec72ba2222b5dbade712a86fe09bf 1200w, https://vrsgdweb.imgix.net/images/projects/barnavrus/MockupMaison_DD_B11-v2.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=338e789cac31cfe37d21ef305e04fc8a 1400w, https://vrsgdweb.imgix.net/images/projects/barnavrus/MockupMaison_DD_B11-v2.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=9febfca2370a8d86ac6a1eea5be8c121 1600w, https://vrsgdweb.imgix.net/images/projects/barnavrus/MockupMaison_DD_B11-v2.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=d1a54c8a66b479541bb0725c505fdb31 1800w)
Version 2 of the website is a more or less total redesign, with a completely new frontend and a range of new content modules and tools under the hood.
With a more balanced focus on both organization and themes, and with a refined visual profile, the new website function better as BaR's primary information channel - and at the same time, the solution has become a valuable knowledge base for the topics the organization works with.
![](https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.33.35@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=381f260c3703c0ba06a71f3a80aed1ed 600w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.33.35@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=826e87c00cc38ad2d9e790617050d2de 800w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.33.35@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=44b809777f0c978a721f4159366e7662 1000w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.33.35@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=d6b8487aad8cdc4e74fd47ebe0dc572f 1200w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.33.35@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=d105cd71b4fbaac4f09a46b002eb8368 1400w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.33.35@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=3dafcfc04e4e65f605b3e113ce308c2e 1600w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.33.35@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=de4aee3f40773cbcdba40b9faff6954d 1800w)
![](https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.51.07@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=5f835456a81a4435e5d6749bb79f54e3 600w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.51.07@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=d323d9de46fb8fb0cc792c9df944ebc6 800w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.51.07@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=c12abc43b27ef43822747d371766c70c 1000w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.51.07@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=8820743979048612005620611923fb5a 1200w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.51.07@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=f3396c370542ebabba92b7eeddaf506d 1400w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.51.07@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=d709d15357f4b0a731cf918b2776c979 1600w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.51.07@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=c628e1b66c91f34a3cf20788934426d3 1800w)
![](https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.55.25@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=f774474106bf82acaa91075d4574b10e 600w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.55.25@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=9b40eeb7ae9ea6bb7bfe3565967e9a1b 800w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.55.25@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=9663277123a1842dbf50967113bacf09 1000w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.55.25@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=b467aab7f9d960ed9a37f3f893e633d4 1200w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.55.25@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=67710257ff5156d60ef4a4dcc9f15934 1400w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.55.25@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=ea724ff22fe2ce4e4a2a93910307e3ac 1600w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.55.25@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=36b2526dbcbe97b9a2d73cb0c4b4813f 1800w)
BaR Portal
In addition to the barnavrus.no website itself, we have developed a closed portal for volunteer onboarding. The portal consists of 100% modular course programs and is built into the same publishing system as the main website.
![](https://vrsgdweb.imgix.net/illustrations/pirate/Vaersaagod_Godstemning_A_Pirate_cropped.png?colorquant=6&cs=srgb&fit=clip&fm=png8&q=80&w=400&s=3f70b4825eb822fe7d36c5eef31a4fc0 400w, https://vrsgdweb.imgix.net/illustrations/pirate/Vaersaagod_Godstemning_A_Pirate_cropped.png?colorquant=6&cs=srgb&fit=clip&fm=png8&q=80&w=600&s=029e5dbc6a0587d89136254a9af4c75c 600w, https://vrsgdweb.imgix.net/illustrations/pirate/Vaersaagod_Godstemning_A_Pirate_cropped.png?colorquant=6&cs=srgb&fit=clip&fm=png8&q=80&w=800&s=90cec26a79d85a6a996eca319d7d235d 800w, https://vrsgdweb.imgix.net/illustrations/pirate/Vaersaagod_Godstemning_A_Pirate_cropped.png?colorquant=6&cs=srgb&fit=clip&fm=png8&q=80&w=1000&s=ce9041d9bf53695d61c6f5b345ecde24 1000w, https://vrsgdweb.imgix.net/illustrations/pirate/Vaersaagod_Godstemning_A_Pirate_cropped.png?colorquant=6&cs=srgb&fit=clip&fm=png8&q=80&w=1200&s=0d1c44538ae72ab4b0a9427d08243d77 1200w)
![](https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.58.20@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=fac1c3504846ec7f8fbf6a424f5b919e 600w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.58.20@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=82f998993065f1ae3b07e1c71b9c1c26 800w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.58.20@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=f801847f8096e671defaa17aaa0c2412 1000w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.58.20@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=e10f524abcbc74626857107a9d30a372 1200w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.58.20@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=8b8418f46334ed1fff08f0ee3a4f8b67 1400w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.58.20@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=4e5d25ddf2e72b9ec451b531bb00f4a3 1600w, https://vrsgdweb.imgix.net/images/projects/barnavrus/CleanShot-2023-08-20-at-12.58.20@2x.png?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=e695d7a30aca16fc1ff5ad70af28bb34 1800w)