v0.01 — stardate

Ik maak dingen. Door naast ontwerpen ook zelf te bouwen ontdek ik wat mogelijk is met een materiaal of techniek. En omdat ik weleens achter het scherm vandaan wil — en soms ook tastbaarder voorwerpen wil maken — werk ik in mijn vrije tijd 1 vaak met hout.

maker

In mijn dagelijks leven maak ik digitale uitingen (zoals deze website). Maar omdat ik overdag veel achter een scherm zit — en weleens voorwerpen wilde maken die je vast kunt houden — begon ik met het maken van meubels.

results

results

Ik maak vooral om te leren. Elk project is een nieuw experiment. Dus ook op deze pagina heb ik een beetje gestoeid met verschillende technieken, waaronder het animeren van 'variable fonts' en het 'draggable' maken van de foto's.

tools

Afgelopen jaar stond in het teken van 'maken met minimaal machinegebruik'. Uiteindelijk bleek dat het met een stel beitels, schaaf en japanse zaag vaak net zo snel gaat, maar een stuk minder rommel en lawaai oplevert dan met een machine.

design

Ik begin altijd met het maken van schetsen, mini maquettes en 3D visualisaties. Ook omdat een goed plan vooraf een boel tijd — en kosten — scheelt.

details

Het uitgangspunt tijdens het bouwen is dat het verschil tussen 'dit is wel ok' en 'hier ben ik trots op' vooral bepaald wordt door de aandacht die ik besteed aan detaillering en afwerking, en minder door het ontwerp.

progress

progress

Het maken zelf is meer het doel dan het eindresultaat. De geur van hout, schaafsel en houtlijm. Lekker klooien met wat 90's grunge onder de gehoorbescherming.

Captains log

Date
Done
Learned
Hr
22-05-2021
Layout en animatie changelog
Breedte en positie changelog geanimeerd obv vw
In gsap zelfde positionering systematiek hanteren als in je stijlsheet, anders onverwachte effecten. Dus niet in stylesheet: left: 100vw, en dan in gsap x: 300.
1
Scrolling changelog layover fix codepen) met behulp van GSAP DrawSVG plugin
Bij layover niet handig om main content alleen opacity te geven omdat deze klikbaar blijft wanneer er geen DOM element overheen ligt.
2
Ontwerp scribbles homepage.
Kleuren zijn moeilijk.
1
27-03-2021
SVG animaties homepage
Geprobeerd svg animaties te implementeren in eleventy
Fail. Lijkt erop dat 11ty bij build svg opbouw veranderd. Wordt vervolgd.
2
'Scribbles' svg's geanimeerd codepen) met behulp van GSAP DrawSVG plugin
DrawSVG kan geen externe svg's animeren. Inline svg's kunnen niet gebruikt worden als background en dus niet als pseudo element.
2
Ontwerp scribbles homepage.
Kleuren zijn moeilijk.
1
22-03-2021
CSS Grid
Stylen changelog table gebruikmakend van CSS Grid
Positionering met CSS Grid.
2
Ontwerp changelog table.
Wat in ontwerp eenvoudig is, is in techniek soms moeilijk.
1
11-03-2021
Templating
Implementatie van nunjucks templates en partials voor footer, header, content en changelog.
Dat foutmeldingen in terminal een boel tijd besparen als je ze tenminste ziet. Hoe je zowel .md als .html bestanden kunt gebruiken als basis. Wat frontmatter is.
3
Verdiept in templating languages.
Hoe templating languages (in dit geval nunjucks en liquid) werken en hoe je een basisstructuur opzet.
1
25-02-2021
Motion!
Menu, cahngelog en links geanimeerd.
GSAP x:0 is not x:0 maar x:0 vanaf startpositie element in de DOM.
4
18-02-2021
Opzetten typografische basis
Implementatie fonts en styling responsive typografie.
Niets
2
Een 'Fluid typography' systeem opzetten. Tekst gewrongen en styling homepage.
Typografie laten schalen tussen breakpoints gebruikmakend van 'clamp' in css.
4
17-02-2021
Opzetten framework personal site
Eleventy opgezet als static site generator.
Hoe je je eleventy inricht mbv terminal.
4
Gitlab setup
Wat een SSH key is en waarom je deze nodig hebt. Hoe rechtstreeks te committen vanuit VS Code.
2