GRØNN StudioKennismakenGet in touch

Techniek · 17 onderdelenTechnology · 17 parts

TechniekTechnology

Van de camera op de bouwplaats tot de controles voordat er iets live gaat. Alleen wat ik echt gebruik.From the camera on site to the checks before anything goes live. Only what I actually use.

VastleggenCapturing

Wat ik op de bouwplaats bij me heb om het werk te filmen en te fotograferen.What I carry on site to film and photograph the work.

  1. iPhone 13HardwareHardwareMijn camera: ik film en fotografeer het werk onderweg, tussen het werk door.My camera: I film and photograph the work on the fly, in between the work itself.
  2. Ulanzi MA38HardwareHardwareHet statiefje dat de telefoon vasthoudt, op een kei of waar het maar kan staan.The little stand that holds the phone, on a rock or wherever it will stand.

Wat je zietWhat you see

Alles wat in je browser aankomt: de pagina's, de letters, de beweging en het geluid.Everything that reaches your browser: the pages, the type, the motion and the sound.

  1. Next.js 16SoftwarepakketSoftware packageHet raamwerk dat de pagina's bouwt en ze vooraf klaarzet, zodat ze meteen openen.The framework that builds the pages and prepares them in advance, so they open instantly.
  2. React 19SoftwarepakketSoftware packageDe bouwstenen van elke pagina: menu, kaarten, formulier.The building blocks of every page: menu, cards, form.
  3. Tailwind CSS 4SoftwarepakketSoftware packageDe opmaak: kleuren, maten en ruimte, allemaal uit de merkgids.The styling: colours, sizes and spacing, all from the brand guide.
  4. GSAPSoftwarepakketSoftware packageHet doek tussen de pagina's en de opening; de rest van de beweging is gewone CSS.The curtain between pages and the opening; the rest of the motion is plain CSS.
  5. Syne · MontserratSoftwarepakketSoftware packageDe twee letters van het merk, zelf gehost: geen verzoek naar Google bij je bezoek.The brand's two typefaces, self-hosted: no request to Google when you visit.
  6. Web AudioEigen werkIn-houseHet windje en vogeltje bij het doek, in de browser gemaakt, zonder geluidsbestand. Standaard uit.The breeze and bird at the curtain, made in the browser, without a sound file. Off by default.

Waar het draaitWhere it runs

Geen eigen server in een kast. De site wordt gebouwd en verspreid over servers dicht bij jou.No server in a cupboard. The site is built and spread across servers close to you.

  1. VercelDienstServiceBouwt de site bij elke wijziging en zet hem op servers dicht bij jou.Builds the site on every change and puts it on servers close to you.
  2. GitHubDienstServiceWaar de code staat, met de hele geschiedenis van elke wijziging.Where the code lives, with the full history of every change.
  3. CloudflareDienstServiceDe adressenlijst van gronn.studio: waar het domein naartoe wijst.The address book of gronn.studio: where the domain points.
  4. Service workerEigen werkIn-houseMaakt de site installeerbaar als app, met een eigen pagina als je geen verbinding hebt.Makes the site installable as an app, with its own page when you are offline.

Waar de woorden wonenWhere the words live

Mijn teksten staan in de code, jouw aanvraag gaat rechtstreeks naar mijn inbox.My texts live in the code, your enquiry goes straight to my inbox.

  1. Tekst in de codeEigen werkIn-houseGeen CMS: elke zin staat in de code, in het Nederlands en het Engels.No CMS: every sentence lives in the code, in Dutch and English.
  2. FormSubmitDienstServiceStuurt het kennismakingsformulier rechtstreeks vanuit je browser naar mijn mail.Sends the contact form straight from your browser to my email.

ControleChecks

Wat er draait voordat er iets live gaat. Faalt één controle, dan gaat er niets door.What runs before anything goes live. If one check fails, nothing gets through.

  1. TypeScriptSoftwarepakketSoftware packageControleert de code voordat hij draait: een typefout komt niet live.Checks the code before it runs: a typo does not go live.
  2. ESLintSoftwarepakketSoftware packageLeest de code na op slordigheid en bekende valkuilen.Reads the code for sloppiness and known pitfalls.
  3. PlaywrightSoftwarepakketSoftware packageOpent elke pagina in een echte browser, op telefoon- en desktopbreedte, en kijkt of alles klopt.Opens every page in a real browser, at phone and desktop width, and checks that everything holds.

Van wijziging tot liveFrom change to live

6 stappen · elke keer6 steps · every time

Elke wijziging loopt dezelfde weg.Every change takes the same road.

  1. 01GitHubDe wijziging wordt vastgelegd, met wie, wat en waarom.The change is recorded: who, what and why.
  2. 02TypeScriptKlopt elke waarde met wat de code verwacht?Does every value match what the code expects?
  3. 03ESLintGeen slordigheid, geen bekende valkuilen.No sloppiness, no known pitfalls.
  4. 04BuildAlle pagina's worden vooraf gebouwd, in twee talen.Every page is built in advance, in two languages.
  5. 05PlaywrightElke pagina in een echte browser, op drie breedtes.Every page in a real browser, at three widths.
  6. 06VercelLive, op servers dicht bij jou. Gaat er iets mis: één klik terug.Live, on servers close to you. If something breaks: one click back.

Jouw bezoekYour visit

nu, op dit schermnow, on this screen
Live · alleen in jouw browserLive · only in your browser

Probeer het: draai je telefoon, of zet in Weergave Donker of Engels aan. Niets hiervan wordt opgeslagen of verstuurd.Try it: rotate your phone, or switch on Dark or English in Display. None of this is stored or sent.

En hoe hetAnd how it eruitzietlooks ?

Naar het merkTo the brand