{"id":2933,"date":"2024-12-01T10:14:50","date_gmt":"2024-12-01T09:14:50","guid":{"rendered":"https:\/\/digikompas.com\/projecten\/website-my-stargroup\/"},"modified":"2026-02-23T12:12:56","modified_gmt":"2026-02-23T11:12:56","slug":"website-my-stargroup","status":"publish","type":"projects","link":"https:\/\/digikompas.com\/en\/projects\/website-my-stargroup\/","title":{"rendered":"Website My Stargroup"},"content":{"rendered":"\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<div class=\"wp-block-group alignfull hero-section has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background:radial-gradient(rgba(33,150,243,0.63) 0%,rgba(33,150,243,0) 73%);padding-top:0\">\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"1152\" src=\"https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?fit=1536%2C1152&amp;ssl=1\" alt=\"\" class=\"wp-image-2370\" style=\"width:1600px\" srcset=\"https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?w=1536&amp;quality=100&amp;ssl=1 1536w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=300%2C225&amp;quality=100&amp;ssl=1 300w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=1024%2C768&amp;quality=100&amp;ssl=1 1024w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=768%2C576&amp;quality=100&amp;ssl=1 768w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=1200%2C900&amp;quality=100&amp;ssl=1 1200w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=800%2C600&amp;quality=100&amp;ssl=1 800w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=600%2C450&amp;quality=100&amp;ssl=1 600w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=400%2C300&amp;quality=100&amp;ssl=1 400w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=200%2C150&amp;quality=100&amp;ssl=1 200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<\/div>\n\n<h1 class=\"wp-block-heading alignwide has-text-align-center is-style-text-display shiny-text is-style-text-display--1\">The My Stargroup Website<\/h1>\n\n<div class=\"wp-block-group alignwide has-global-padding is-content-justification-center is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--60)\">\n<h2 class=\"wp-block-heading\" style=\"border-bottom-color:#ffffff33;border-bottom-width:1px;margin-top:var(--wp--preset--spacing--80);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)\">About the project<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After the launch of <a href=\"https:\/\/digikompas.com\/projecten\/de-mijn-stargroup-app\/\" data-type=\"projects\" data-id=\"2056\">the My Stargroup app<\/a>, it was time for a campaign to inform Stargroup&#8217;s customers. Previously, the app was made by another party and unfortunately, it could not be updated with the new app. Like any campaign, it requires a good landing page, with the goal of app downloads.  <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Technologies used<\/h3>\n\n\n\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-236ffaf5 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group display-flex is-layout-flex wp-container-core-group-is-layout-94f98c81 wp-block-group-is-layout-flex\" style=\"margin-top:0\">\n<div class=\"wp-block-group wp-container-content-6884ef2a is-nowrap is-layout-flex wp-container-core-group-is-layout-de868385 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full wp-container-content-5cc0e011\" style=\"margin-bottom:10px\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"823\" src=\"https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2025\/06\/google-cloud.png?resize=1024%2C823&#038;quality=100&#038;ssl=1\" alt=\"\" class=\"wp-image-2449\" style=\"object-fit:cover\" srcset=\"https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2025\/06\/google-cloud.png?w=1024&amp;quality=100&amp;ssl=1 1024w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2025\/06\/google-cloud.png?resize=300%2C241&amp;quality=100&amp;ssl=1 300w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2025\/06\/google-cloud.png?resize=768%2C617&amp;quality=100&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0px\">Google Cloud Hosting<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"border-bottom-color:#ffffff33;border-bottom-width:1px;margin-top:var(--wp--preset--spacing--80);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)\">Design<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To convey the friendly character of Stargroup, an interactive landing page was chosen. This single page is completely filled with elements from the My Stargroup app. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40)\">Colors<\/h3>\n\n\n\n<div class=\"wp-block-columns is-not-stacked-on-mobile colors-wrapper is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group has-global-padding is-content-justification-center is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"color-card color-FDD835\"><\/div>\n<span>Primary<\/span>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group has-global-padding is-content-justification-center is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"color-card color-1A237E\"><\/div>\n<span>Secondary<\/span>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group has-global-padding is-content-justification-center is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"color-card color-2196F3\"><\/div>\n<span>Accent<\/span>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"color-card color-F5F5F5\"><\/div>\n<span>Background<\/span>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40)\">Fonts<\/h3>\n\n\n\n<div class=\"wp-block-columns is-not-stacked-on-mobile colors-wrapper is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"font-card\"><\/div>\n<span>Montserrat<\/span>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"border-bottom-color:#ffffff33;border-bottom-width:1px;margin-top:var(--wp--preset--spacing--80);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)\">Animations<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Hover hero<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The hero of the site is filled with small elements that are also found in the app. These elements respond to the visitor&#8217;s mouse to create an interactive experience. <\/p>\n\n\n\n<figure class=\"wp-block-video highlight\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\"><video height=\"1802\" style=\"aspect-ratio: 3200 \/ 1802;\" width=\"3200\" controls=\"\" src=\"https:\/\/videos.files.wordpress.com\/0y5AMQQb\/mijnstargroup-hero-opname.mov\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--70)\">Interactive YouTube video<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Implementing an interactive YouTube video remains one of the best things I have been able to do in my career. In the video below, you can see that the video enlarges when you click play, like a cinematic experience. In addition, the video can be controlled with the buttons below it or the keyboard.   <\/p>\n\n\n\n<figure class=\"wp-block-video highlight\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\"><video height=\"1802\" style=\"aspect-ratio: 3200 \/ 1802;\" width=\"3200\" controls=\"\" poster=\"https:\/\/digikompas.com\/wp-content\/uploads\/2025\/06\/mijnstargroup-video_mov_vp9_2160p.original.jpg\" src=\"https:\/\/videos.files.wordpress.com\/yLLpM1I4\/mijnstargroup-video.mov\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To really complete the cinematic experience, we wanted to give it a kind of 3D effect, which you can see in both the video above and the video below. The web page <strong>behind<\/strong> the video reacts to what happens in the video.  <\/p>\n\n\n\n<figure class=\"wp-block-video highlight\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\"><video height=\"1802\" style=\"aspect-ratio: 3200 \/ 1802;\" width=\"3200\" controls=\"\" src=\"https:\/\/videos.files.wordpress.com\/9hbTSV3c\/mijnstargroup-video-schade.mov\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--70)\">CSS Animations<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of GIFs and videos, the site is full of CSS animations that respond to the mouse. These animations take up less space than an image or video, which makes the site fast despite the many interactions.  <\/p>\n\n\n\n<figure class=\"wp-block-video highlight\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\"><video height=\"1802\" style=\"aspect-ratio: 3200 \/ 1802;\" width=\"3200\" controls=\"\" poster=\"https:\/\/digikompas.com\/wp-content\/uploads\/2025\/06\/mijn-stargroup-css-animatie_mov_hevc_2160p.original.jpg\" src=\"https:\/\/videos.files.wordpress.com\/j3Fmoyjg\/mijn-stargroup-css-animatie.mov\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"border-bottom-color:#ffffff33;border-bottom-width:1px;margin-top:var(--wp--preset--spacing--80);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)\">Credits<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Video:<\/strong> Digikompas in collaboration with Stargroup&#8217;s marketing team<br\/><strong>App:<\/strong> Digikompas<br\/><strong>Website:<\/strong> Digikompas<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The My Stargroup Website About the project After the launch of the My Stargroup app, it was time for a campaign to inform Stargroup&#8217;s customers. Previously, the app was made by another party and unfortunately, it could not be updated with the new app. Like any campaign, it requires a good landing page, with the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2919,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"projectslug_image_url":"https:\/\/digikompas.com\/wp-content\/uploads\/2025\/06\/mijn-stargroup-nl-groot.jpeg","projectslug_image_alt":"The My Stargroup website screenshot","footnotes":""},"categories":[44],"tags":[],"class_list":["post-2933","projects","type-projects","status-publish","has-post-thumbnail","hentry","category-website"],"_links":{"self":[{"href":"https:\/\/digikompas.com\/en\/wp-json\/wp\/v2\/projects\/2933","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digikompas.com\/en\/wp-json\/wp\/v2\/projects"}],"about":[{"href":"https:\/\/digikompas.com\/en\/wp-json\/wp\/v2\/types\/projects"}],"author":[{"embeddable":true,"href":"https:\/\/digikompas.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/digikompas.com\/en\/wp-json\/wp\/v2\/comments?post=2933"}],"version-history":[{"count":1,"href":"https:\/\/digikompas.com\/en\/wp-json\/wp\/v2\/projects\/2933\/revisions"}],"predecessor-version":[{"id":2937,"href":"https:\/\/digikompas.com\/en\/wp-json\/wp\/v2\/projects\/2933\/revisions\/2937"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digikompas.com\/en\/wp-json\/wp\/v2\/media\/2919"}],"wp:attachment":[{"href":"https:\/\/digikompas.com\/en\/wp-json\/wp\/v2\/media?parent=2933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digikompas.com\/en\/wp-json\/wp\/v2\/categories?post=2933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digikompas.com\/en\/wp-json\/wp\/v2\/tags?post=2933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}