Projecten

Terug

Corneelia Wall Art

screenshot van het project
Opdrachtgever
Corneelia Wall Art
Team
Corneel Online
Tools
Vue.js, Nuxt.js, Figma, Forestry CMS, Cloudinary, Netlify, PWA
Opgeleverd
2021
Bezoek website

Tijdens de lockdown kwam mijn vrouw op het idee om de beste werken uit onze persoonlijke fotocollectie te koop aan te bieden via betrouwbare online platvormen. Zo werd Corneelia Wall Art geboren. Corneelia Wall Art biedt betaalbare fotokunst voor thuis of op de (thuis)werkplek.

Waarom deze website?

Het doel van de website is om onze fotografische werken onder de aandacht te brengen en te promoten. Zo hebben andere belangstellenden er ook iets aan. We verkopen dit werk via betrouwbare kanalen, waar het werk beschikbaar is in verschillende materialen en afmetingen. Hier kan het werk worden besteld en afgerekend. Bij eventuele verkoop ontvangen wij een percentage van het verkoopbedrag. De promotie moet je echter zelf organiseren en wat is dan beter dan een vlotte JAMstack site!

Projectdoelen

Bij de bouw van de website had ik mezelf een aantal doelen gesteld. Naast het praktische doel, de promotie van ons werk), wilde ik bepaalde features in de site verwerken, en bekend raken met nieuwe technologie. Hieronder zal ik dat verder toelichten.

Ontwerp met Figma

Dit is een persoonlijk project en er was geen budget om een van mijn favoriete ontwerpers in te schakelen. Daarom ben ik zelf aan de slag gegaan met het ontwerp. Ik had recent al eens met Figma gewerkt, maar nooit een compleet ontwerp gemaakt met deze design tool. Inmiddels begrijp ik waarom iedereen zo enthousiast is. Figma is een hele intuïtieve tool (zeker als je Sketch al gewend bent) waarmee je snel kan werken. De perfecte tool voor webdesign.

Ontwikkelen met Nuxt.js

Het belangrijkste doel voor mij was om na een paar Gridsome projecten nu eens met Nuxt.js te werken. Nuxt.js is een framework gebaseerd op Vue.js en bij deze website heb ik het gebruikt als static site generator. Nuxt.js is als het ware een extra laag op Vue waarmee bepaalde lastige concepten een stuk makkelijker worden gemaakt. In een ander artikel vind je meer informatie over dit fantastische framework.


Meertalige inhoud in Markdown met Nuxt Content

De inhoud van de website is helemaal in Markdown geschreven met behulp van de Nuxt Content module. De inhoud van de website is in het Nederlands en Engels. De manier waarop Nuxt Content werkt lijkt een beetje op de manier waarop Gridsome dat doet, maar in plaats van GraphQL biedt Nuxt een API die lijkt op MongoDB. Hiermee kan je op een eenvoudige manier data ophalen en deze verwerken in de website.

Content management met Forestry CMS

Alle content is in Markdown geschreven. Om deze content op een eenvoudige en prettige manier te kunnen bijwerken heb ik gekozen voor Forestry als headless CMS. Forestry ziet er erg goed uit werkt lekker vlot en overzichtelijk.

Light mode en dark mode

De website biedt zowel een light mode als een dark mode. Als je 's avonds laat in bed nog even snel een foto wil uitzoeken, dan is de dark mode lekker rustig aan de ogen.

PWA - Installeer de website op je startscherm

Deze website is een PWA (Progressive Web App). Hierdoor kan je de website installeren als een app en werkt alles lekker vlot. De hele site is met 1 klik bereikbaar en nog fullscreen ook.

Afbeeldingen via CDN

De afbeeldingen worden getoond vanaf Cloudinary, een CDN (Content Delivery Network). Dit zorgt ervoor dat de pagina's snel worden geladen en heeft daarnaast als voordeel dat de afbeeldingen worden geoptimaliseerd voor gebruik.

Hosting bij Netlify

De website wordt gehost bij Netlify, de nummer 1 op het gebied van statische JAMstack websites.

Conclusie

Aan het eind van dit project kan ik concluderen dat het werken met deze technologie stack erg goed bevallen is en ik zie Nuxt.js dan ook als mijn voornaamste gereedschap voor toekomstige projecten.

Wat houdt je bezig?

Heb jij een interessant project?
En wil je erover praten?

Of je nou een starter bent of een doorgewinterd bedrijf, ik hoor het graag als je een leuke uitdaging voor me hebt.

Marco Verheul
T. 06 2846 1106
E. marco@corneelonline.nl