Skip to content

Commit 89dafc1

Browse files
denmettedenmette
committed
feat: introduce featured post card and update homepage layout
- Added `featured-post-card.html` partial for dynamic display of highlighted posts. - Updated homepage layout to include an intro section and a featured post for the first page. - Improved desktop and mobile typography for posts with refined paragraph handling. - Enhanced `Over Mij` content for clarity and tone. - Updated `dev` script in `package.json` to use `--cleanDestinationDir`.
1 parent d52901e commit 89dafc1

4 files changed

Lines changed: 177 additions & 19 deletions

File tree

‎content/over-mij/index.html‎

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -71,55 +71,72 @@ <h1 class="text-3xl font-semibold text-slate-900 dark:text-slate-100">Maarten Ca
7171
<section class="space-y-3">
7272
<h2 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">Over mij</h2>
7373
<p class="text-base leading-relaxed">
74-
Ik ben Maarten, en ik werk meestal als tech lead of Java architect. Ik haal mijn voldoening uit mensen vooruit helpen.
75-
Ik geef richting, ik maak keuzes expliciet, en ik zorg dat teams met vertrouwen kunnen leveren.
74+
Ik ben Maarten. Ik werk meestal als tech lead of Java architect en haal mijn voldoening uit mensen vooruit helpen.
75+
Richting geven, keuzes expliciet maken en teams helpen leveren met vertrouwen, dat is waar ik energie van krijg.
76+
</p>
77+
<p class="text-base leading-relaxed">
78+
Ik beweeg mij vlot tussen code, architectuur en samenwerking. Soms betekent dat diep in een bestaande codebase duiken,
79+
soms net afstand nemen om helderheid te brengen. Altijd met oog voor duurzaamheid, leesbaarheid en intentie.
7680
</p>
7781
</section>
7882

7983
<section class="space-y-3">
8084
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Hoe ik naar software kijk</h3>
8185
<p class="text-base leading-relaxed">
82-
Als ik code schrijf, bouw ik sterke testen. Ik gebruik testen om intentie vast te leggen, niet om implementatiedetails te bewijzen.
83-
Met AI zie ik soms de reflex ontstaan om testen minder belangrijk te vinden. Ik ga daar niet in mee. Zonder testen verdwijnt de bedoeling,
84-
en dan betaal je later dubbel.
86+
Voor mij draait software niet om code schrijven, maar om intentie vastleggen.
87+
</p>
88+
<p class="text-base leading-relaxed">
89+
Testen zijn daarbij essentieel. Niet om implementaties te bewijzen, wel om duidelijk te maken wat de bedoeling is.
90+
Zeker nu AI steeds vaker code genereert, zie ik het risico dat testen als minder belangrijk worden gezien.
91+
Daar ga ik niet in mee. Zonder testen verdwijnt de context, en die rekening krijg je later gepresenteerd.
8592
</p>
8693
<p class="text-base leading-relaxed">
87-
Ik bots soms op een context waarin ik mijn mening niet meteen kan geven. Ik werk eraan om dat beter te navigeren, zonder mijn helderheid te verliezen.
88-
Ik kies daarbij bewust voor communicatie die de intentie bewaakt en het team helpt, ook als de oplossing nog niet vastligt.
94+
Ik geloof in heldere communicatie, ook wanneer de oplossing nog niet vastligt. Dat vraagt soms navigeren in complexe
95+
contexten waarin niet alles meteen uitgesproken kan worden. Ik leer daarin bewust scherp blijven zonder hard te worden,
96+
en helder zonder het team te verliezen.
8997
</p>
9098
</section>
9199

92100
<section class="space-y-3">
93101
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Werk</h3>
94102
<p class="text-base leading-relaxed">
95-
Ik werk als consultant bij Sopra Steria. Ik stap bij klanten binnen, help technische keuzes maken en verbeter systemen die al jaren draaien.
96-
Daarnaast doe ik people management: carrières begeleiden, opportuniteiten spotten en groei mogelijk maken via training en coaching.
103+
Ik werk als consultant bij Sopra Steria. Bij klanten help ik technische keuzes maken en verbeter ik systemen die vaak al jaren meegaan.
104+
Daarnaast neem ik ook people management op mij: carrières begeleiden, groeikansen zien en mensen ondersteunen via coaching en training.
97105
</p>
98106
<p class="text-base leading-relaxed">
99-
Ik werk graag aan nieuwe dingen, maar ik krijg de meeste voldoening van bestaande applicaties verbeteren. Ik maak code leesbaar, ik snoei complexiteit,
100-
en ik bouw stap voor stap vertrouwen op. Ik leerde ook dat niet iedereen dezelfde reflex heeft rond testen, en ik stuur daar pragmatisch op bij.
107+
Hoewel ik graag nieuwe dingen bouw, haal ik mijn grootste voldoening uit bestaande applicaties beter maken.
108+
Complexiteit terugdringen, code leesbaar maken en stap voor stap vertrouwen opbouwen. Niet dogmatisch, wel pragmatisch,
109+
afgestemd op de realiteit van het team.
101110
</p>
102111
</section>
103112

104113
<section class="space-y-3">
105114
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Deze blog</h3>
106115
<p class="text-base leading-relaxed">
107-
Dit is mijn plek om kennis te delen en te blijven bijleren. Ik schrijf vooral informatief, soms met een mening, altijd vanuit de praktijk.
108-
Als een post nuttig is voor iemand anders, dan is ze geslaagd.
116+
Deze blog is mijn plek om te delen wat ik leer en te weinig hardop zeg. Meestal informatief, soms met een duidelijke mening,
117+
altijd vanuit de praktijk. Als iemand hier iets vindt dat helpt bij een beslissing, een refactor of een gesprek, dan is een post geslaagd.
109118
</p>
110119
<p class="text-base leading-relaxed">
111-
Naast deze blog ben ik ook co-host van de podcast <a class="text-moss underline-offset-4 transition hover:text-moss hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-moss/70 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:text-mustard dark:hover:text-mustard dark:focus-visible:ring-moss/70 dark:focus-visible:ring-offset-slate-950" href="https://jcast.dev/" target="_blank" rel="noopener noreferrer">JCast</a>, waarbij Java het startpunt is en de rest de speeltuin.
120+
Naast deze blog ben ik ook co-host van de podcast
121+
<a
122+
class="text-moss underline-offset-4 transition hover:text-moss hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-moss/70 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:text-mustard dark:hover:text-mustard dark:focus-visible:ring-moss/70 dark:focus-visible:ring-offset-slate-950"
123+
href="https://jcast.dev/"
124+
target="_blank"
125+
rel="noopener noreferrer"
126+
>JCast</a>,
127+
waar Java vaak het vertrekpunt is en de rest van softwareontwikkeling de speeltuin.
112128
</p>
113129
</section>
114130

115131
<section class="space-y-3">
116132
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Jeugdwerk en thuis</h3>
117133
<p class="text-base leading-relaxed">
118-
Ik engageer mij in het jeugdwerk als instructeur bij Top Vakantie VZW. Ik leid startende animatoren op en neem verantwoordelijkheid als ploeginstructeur of cursusleider. Dat vraagt inzet, maar het geeft mij minstens evenveel terug.
134+
Naast mijn werk engageer ik mij in het jeugdwerk als instructeur bij Top Vakantie VZW. Ik leid startende animatoren op
135+
en neem verantwoordelijkheid als ploeginstructeur of cursusleider. Het vraagt veel, maar het geeft minstens evenveel terug.
119136
</p>
120137
<p class="text-base leading-relaxed">
121-
Thuis ben ik papa van Toke en Livi. Zij geven mij richting. Ik hou mijn leven bewust simpel, met minder drukte sinds covid, zodat er meer rust is
122-
en meer ruimte om aanwezig te zijn.
138+
Thuis ben ik papa van Toke en Livi. Zij houden mijn kompas scherp. Sinds covid hou ik mijn leven bewuster eenvoudiger,
139+
met minder drukte en meer rust, zodat er ruimte blijft om aanwezig te zijn.
123140
</p>
124141
</section>
125142
</section>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"private": true,
44
"scripts": {
55
"build:css": "NODE_ENV=production hugo --minify",
6-
"dev": "hugo server --buildFuture --disableFastRender --buildDrafts"
6+
"dev": "hugo server --buildFuture --disableFastRender --buildDrafts --cleanDestinationDir"
77
},
88
"devDependencies": {
99
"@tailwindcss/postcss": "^4.1.18",

‎themes/custom/layouts/index.html‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,26 @@ <h1 class="hidden">Laatste posts</h1>
55
{{- $pageSize := 5 -}}
66
{{- $posts := where .Site.RegularPages "Section" "posts" -}}
77
{{- $paginator := .Paginate $posts $pageSize -}}
8-
{{ range $paginator.Pages }}
8+
{{- if eq $paginator.PageNumber 1 -}}
9+
<section class="space-y-2">
10+
<h2 class="text-[0.7rem] font-medium uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">Intro</h2>
11+
<p class="text-sm leading-relaxed text-slate-600 dark:text-slate-300 md:hidden">
12+
Ik leer veel, deel te weinig, en probeer dat hier recht te trekken, meestal als reflectie, altijd om anderen vooruit te helpen.
13+
</p>
14+
<p class="hidden text-base leading-relaxed text-slate-600 dark:text-slate-300 md:block">
15+
Ik leer veel, deel te weinig, en probeer dat hier recht te trekken, meestal als reflectie, altijd om anderen vooruit te helpen. Je leest hier over software engineering, Java, clean code en agile werken, aangevuld met home automation, tools zoals Obsidian en kleine how-to's die onderweg ontstaan. Af en toe duiken ook verhalen op uit JCast en projecten die ik bouw met Hugo, Home Assistant of Maven.
16+
</p>
17+
</section>
18+
{{- end -}}
19+
{{- if and (eq $paginator.PageNumber 1) (gt (len $paginator.Pages) 0) -}}
20+
{{- $featured := index $paginator.Pages 0 -}}
21+
{{ partial "featured-post-card.html" (dict "page" $featured) }}
22+
{{- end -}}
23+
{{- $listPages := $paginator.Pages -}}
24+
{{- if and (eq $paginator.PageNumber 1) (gt (len $paginator.Pages) 0) -}}
25+
{{- $listPages = after 1 $paginator.Pages -}}
26+
{{- end -}}
27+
{{ range $listPages }}
928
{{ partial "post-card.html" (dict "page" .) }}
1029
{{ end }}
1130
</div>

‎themes/custom/layouts/partials/featured-post-card.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
{{- $page := .page -}}
2+
{{- $title := $page.Title -}}
3+
4+
{{- $summary := "" -}}
5+
{{- with $page.Params.summary -}}
6+
{{- $summary = . -}}
7+
{{- else -}}
8+
{{- $summary = $page.Summary -}}
9+
{{- end -}}
10+
11+
{{- $imageSrc := "" -}}
12+
{{- with $page.Params.cover.image -}}
13+
{{- $imageSrc = . -}}
14+
{{- end -}}
15+
16+
{{- $imageAlt := "" -}}
17+
{{- with $page.Params.cover.alt -}}
18+
{{- $imageAlt = . -}}
19+
{{- end -}}
20+
{{- if eq $imageAlt "" -}}
21+
{{- $imageAlt = $title -}}
22+
{{- end -}}
23+
24+
{{- $paragraphs := findRE `<p[^>]*>[\s\S]*?</p>` $page.Content -}}
25+
{{- $safeParagraphs := slice -}}
26+
{{- range $paragraphs -}}
27+
{{- $p := . -}}
28+
{{- if not (findRE `<(img|figure|picture|pre|code|ul|ol|li|table|blockquote)` $p) -}}
29+
{{- $p = replaceRE `<a[^>]*>` "" $p -}}
30+
{{- $p = replaceRE `</a>` "" $p -}}
31+
{{- $p = replaceRE `^<p[^>]*>` "" $p -}}
32+
{{- $p = replaceRE `</p>$` "" $p -}}
33+
{{- $safeParagraphs = $safeParagraphs | append $p -}}
34+
{{- end -}}
35+
{{- end -}}
36+
37+
{{- $excerptParagraphs := slice -}}
38+
{{- if ge (len $safeParagraphs) 2 -}}
39+
{{- $excerptParagraphs = first 2 $safeParagraphs -}}
40+
{{- else if eq (len $safeParagraphs) 1 -}}
41+
{{- $excerptParagraphs = first 1 $safeParagraphs -}}
42+
{{- end -}}
43+
44+
<article class="relative rounded-2xl border border-slate-200 bg-white p-4 shadow-sm transition hover:border-moss hover:bg-eggshell focus-within:border-moss focus-within:bg-eggshell dark:border-slate-800 dark:bg-slate-900 dark:hover:border-slate-700 dark:hover:bg-slate-900/80 dark:focus-within:border-moss dark:focus-within:bg-slate-900/80 md:p-6">
45+
<div class="space-y-4">
46+
{{- with $imageSrc -}}
47+
<div class="overflow-hidden rounded-xl border border-slate-100 dark:border-slate-800">
48+
{{- $imageResource := $page.Resources.GetMatch . -}}
49+
{{- if $imageResource -}}
50+
{{- partial "image.html" (dict
51+
"page" $page
52+
"src" $imageResource.Name
53+
"alt" $imageAlt
54+
"class" "h-36 w-full object-cover md:h-48"
55+
"sizes" "(max-width: 768px) 100vw, 560px"
56+
) -}}
57+
{{- else -}}
58+
<img
59+
src="{{ . }}"
60+
alt="{{ $imageAlt }}"
61+
class="h-48 w-full object-cover"
62+
loading="lazy"
63+
decoding="async"
64+
/>
65+
{{- end -}}
66+
</div>
67+
{{- end -}}
68+
69+
<div class="space-y-2">
70+
<h2 class="text-xl font-semibold text-slate-900 dark:text-slate-100">
71+
<a
72+
class="hover:text-moss hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-moss dark:hover:text-mustard dark:focus-visible:outline-moss"
73+
href="{{ $page.RelPermalink }}"
74+
>
75+
<span class="absolute inset-0" aria-hidden="true"></span>
76+
<span class="relative z-10">{{ $title }}</span>
77+
</a>
78+
</h2>
79+
80+
{{- with $page.Date -}}
81+
<p class="text-sm text-slate-500 dark:text-slate-400">
82+
{{ partial "date.html" (dict "date" . "format" ":date_long") }}
83+
</p>
84+
{{- end -}}
85+
86+
{{- if gt (len $excerptParagraphs) 0 -}}
87+
<div class="space-y-3 text-sm leading-relaxed text-slate-600 dark:text-slate-300">
88+
{{- range $index, $paragraph := $excerptParagraphs -}}
89+
<p class="{{ if eq $index 1 }}hidden md:block{{ end }}">{{ $paragraph | safeHTML }}</p>
90+
{{- end -}}
91+
</div>
92+
{{- else if $summary -}}
93+
<p class="text-sm leading-relaxed text-slate-600 dark:text-slate-300">{{ $summary | plainify }}</p>
94+
{{- end -}}
95+
96+
{{- $terms := $page.GetTerms "tags" -}}
97+
{{- if gt (len $terms) 0 -}}
98+
<ul class="relative z-20 flex flex-wrap gap-2 pt-2">
99+
{{- range $terms -}}
100+
<li>
101+
<span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
102+
{{ .LinkTitle }}
103+
</span>
104+
</li>
105+
{{- end -}}
106+
</ul>
107+
{{- else -}}
108+
{{- with $page.Params.tags -}}
109+
<ul class="flex flex-wrap gap-2 pt-2">
110+
{{- range . -}}
111+
<li>
112+
<span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
113+
{{ . }}
114+
</span>
115+
</li>
116+
{{- end -}}
117+
</ul>
118+
{{- end -}}
119+
{{- end -}}
120+
</div>
121+
</div>
122+
</article>

0 commit comments

Comments
 (0)