306 lines
9.6 KiB
HTML
306 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="nl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Inzichten uit de praktijk | BvPS</title>
|
||
|
||
<meta name="description" content="Artikelen en praktijkkennis van BvPS over portfoliomanagement, strategisch portfoliomanagement (SPM), capaciteitsmanagement en Fortes Change Cloud voor de publieke sector." />
|
||
<meta name="author" content="BvPS — Bureau voor Project Structurering" />
|
||
<meta name="robots" content="index, follow" />
|
||
<link rel="canonical" href="https://www.bvps.nl/artikelen/" />
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:url" content="https://www.bvps.nl/artikelen/" />
|
||
<meta property="og:title" content="Inzichten uit de praktijk | BvPS" />
|
||
<meta property="og:description" content="Praktijkkennis van BvPS over portfoliomanagement, SPM, capaciteitsmanagement en Fortes Change Cloud voor de publieke sector." />
|
||
<meta property="og:site_name" content="BvPS — Bureau voor Project Structurering" />
|
||
<meta property="og:locale" content="nl_NL" />
|
||
|
||
<!-- Structured data: BreadcrumbList -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "BreadcrumbList",
|
||
"itemListElement": [
|
||
{ "@type": "ListItem", "position": 1, "name": "BvPS", "item": "https://www.bvps.nl/" },
|
||
{ "@type": "ListItem", "position": 2, "name": "Inzichten" }
|
||
]
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
:root {
|
||
--dark-blue: #003F7D;
|
||
--mid-blue: #0072BC;
|
||
--cyan: #0099CC;
|
||
--steel: #4A6080;
|
||
--light-grey: #F0F4F8;
|
||
--text: #1A2A3A;
|
||
--white: #FFFFFF;
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html, body { margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
color: var(--text);
|
||
background: var(--white);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* ─── NAV ─────────────────────────────────────────────── */
|
||
body > nav {
|
||
position: sticky; top: 0; z-index: 100;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0 2.5rem; height: 64px;
|
||
background: rgba(255,255,255,0.97);
|
||
backdrop-filter: blur(10px);
|
||
border-bottom: 1px solid rgba(0,63,125,0.08);
|
||
box-shadow: 0 2px 16px rgba(0,63,125,0.06);
|
||
}
|
||
|
||
.nav-logo { height: 44px; }
|
||
.nav-logo a { display: block; }
|
||
.nav-logo img { height: 44px; }
|
||
|
||
.nav-back {
|
||
display: inline-flex; align-items: center; gap: 0.5rem;
|
||
font-size: 0.85rem; font-weight: 600; font-family: Arial, sans-serif;
|
||
color: var(--steel); text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
.nav-back:hover { color: var(--dark-blue); }
|
||
.nav-back svg { flex-shrink: 0; }
|
||
|
||
.nav-cta {
|
||
background: var(--mid-blue); color: white;
|
||
border: none; padding: 0.5rem 1.2rem;
|
||
border-radius: 6px; font-size: 0.85rem; font-weight: 600;
|
||
cursor: pointer; transition: background 0.2s; font-family: inherit;
|
||
text-decoration: none;
|
||
}
|
||
.nav-cta:hover { background: var(--dark-blue); }
|
||
|
||
/* ─── HERO ─────────────────────────────────────────────── */
|
||
.overzicht-hero {
|
||
background: linear-gradient(135deg, var(--dark-blue) 0%, #005A9E 55%, #006FB3 100%);
|
||
padding: 4rem 2rem 3.5rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.overzicht-hero::before {
|
||
content: '';
|
||
position: absolute; inset: 0;
|
||
background-image:
|
||
radial-gradient(circle at 15% 85%, rgba(0,153,204,0.15) 0%, transparent 50%),
|
||
radial-gradient(circle at 85% 15%, rgba(0,114,188,0.2) 0%, transparent 45%);
|
||
}
|
||
|
||
.overzicht-hero-inner {
|
||
position: relative; z-index: 2;
|
||
max-width: 780px; margin: 0 auto;
|
||
}
|
||
|
||
.overzicht-breadcrumb {
|
||
display: flex; gap: 0.5rem; align-items: center;
|
||
margin-bottom: 1.5rem; flex-wrap: wrap;
|
||
}
|
||
.overzicht-breadcrumb a {
|
||
color: rgba(255,255,255,0.6); font-size: 0.8rem; text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
.overzicht-breadcrumb a:hover { color: white; }
|
||
.overzicht-breadcrumb .sep { color: rgba(255,255,255,0.35); font-size: 0.8rem; }
|
||
.overzicht-breadcrumb .current { color: rgba(255,255,255,0.85); font-size: 0.8rem; }
|
||
|
||
.overzicht-label {
|
||
display: inline-block;
|
||
background: rgba(0,153,204,0.25);
|
||
color: var(--cyan);
|
||
font-size: 0.7rem; font-weight: 700;
|
||
letter-spacing: 0.12em; text-transform: uppercase;
|
||
padding: 0.3rem 0.75rem; border-radius: 4px;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.overzicht-hero h1 {
|
||
font-size: clamp(1.7rem, 4vw, 2.5rem);
|
||
color: white; font-weight: 700; line-height: 1.2;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.overzicht-hero p {
|
||
font-size: 1.05rem; color: rgba(255,255,255,0.75);
|
||
max-width: 600px; line-height: 1.65;
|
||
}
|
||
|
||
/* ─── GRID ─────────────────────────────────────────────── */
|
||
.overzicht-body {
|
||
background: var(--light-grey);
|
||
padding: 3.5rem 2rem 5rem;
|
||
}
|
||
|
||
.overzicht-grid {
|
||
max-width: 1080px; margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1.8rem;
|
||
}
|
||
|
||
.inzicht-card {
|
||
background: white;
|
||
border-radius: 12px;
|
||
border: 1px solid rgba(0,63,125,0.08);
|
||
box-shadow: 0 4px 20px rgba(0,63,125,0.06);
|
||
overflow: hidden;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
display: flex;
|
||
flex-direction: column;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
.inzicht-card:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 8px 32px rgba(0,63,125,0.13);
|
||
}
|
||
|
||
.inzicht-card-top {
|
||
height: 6px;
|
||
background: linear-gradient(90deg, var(--dark-blue), var(--cyan));
|
||
}
|
||
|
||
.inzicht-card-body {
|
||
padding: 1.5rem 1.6rem 1.6rem;
|
||
display: flex; flex-direction: column; flex: 1;
|
||
}
|
||
|
||
.inzicht-meta {
|
||
display: flex; gap: 0.75rem; align-items: center;
|
||
margin-bottom: 0.9rem; flex-wrap: wrap;
|
||
}
|
||
|
||
.inzicht-label {
|
||
font-size: 0.68rem; font-weight: 700;
|
||
letter-spacing: 0.1em; text-transform: uppercase;
|
||
color: var(--mid-blue);
|
||
background: rgba(0,114,188,0.08);
|
||
padding: 0.2rem 0.55rem; border-radius: 3px;
|
||
}
|
||
|
||
.inzicht-date {
|
||
font-size: 0.78rem; color: var(--steel);
|
||
}
|
||
|
||
.inzicht-card-body h2 {
|
||
font-size: 1.05rem; font-weight: 700;
|
||
color: var(--dark-blue); line-height: 1.35;
|
||
margin-bottom: 0.65rem;
|
||
}
|
||
|
||
.inzicht-card-body p {
|
||
font-size: 0.88rem; color: var(--steel);
|
||
line-height: 1.6; flex: 1;
|
||
margin-bottom: 1.1rem;
|
||
}
|
||
|
||
.inzicht-readmore {
|
||
display: inline-flex; align-items: center; gap: 0.4rem;
|
||
font-size: 0.82rem; font-weight: 700;
|
||
color: var(--mid-blue);
|
||
margin-top: auto;
|
||
}
|
||
|
||
/* ─── FOOTER ─────────────────────────────────────────────── */
|
||
footer {
|
||
background: #111B27;
|
||
padding: 2rem;
|
||
display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
|
||
}
|
||
|
||
.footer-logo { height: 26px; filter: brightness(0) invert(1); opacity: 0.6; }
|
||
.footer-text { font-size: 0.75rem; color: rgba(255,255,255,0.3); text-align: center; }
|
||
.footer-links { display: flex; gap: 1.5rem; }
|
||
.footer-links a {
|
||
font-size: 0.78rem; color: rgba(255,255,255,0.4);
|
||
text-decoration: none; transition: color 0.2s;
|
||
}
|
||
.footer-links a:hover { color: rgba(255,255,255,0.7); }
|
||
|
||
/* ─── RESPONSIVE ─────────────────────────────────────────── */
|
||
@media (max-width: 900px) {
|
||
.overzicht-grid { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
@media (max-width: 600px) {
|
||
body > nav { padding: 0 1.2rem; }
|
||
.overzicht-hero { padding: 3rem 1.2rem 2.5rem; }
|
||
.overzicht-body { padding: 2.5rem 1.2rem 3.5rem; }
|
||
.overzicht-grid { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav>
|
||
<div class="nav-logo">
|
||
<a href="https://www.bvps.nl/">
|
||
<img src="https://www.bvps.nl/bvps-logo.png" alt="BvPS — Bureau voor Project Structurering" style="height:44px;" onerror="this.style.display='none'">
|
||
</a>
|
||
</div>
|
||
<a class="nav-back" href="https://www.bvps.nl/#inzichten">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
|
||
Terug naar BvPS.nl
|
||
</a>
|
||
<a class="nav-cta" href="https://www.bvps.nl/#contact">Neem contact op</a>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<div class="overzicht-hero">
|
||
<div class="overzicht-hero-inner">
|
||
<nav class="overzicht-breadcrumb" aria-label="Kruimelpad">
|
||
<a href="https://www.bvps.nl/">BvPS</a>
|
||
<span class="sep">›</span>
|
||
<span class="current">Inzichten</span>
|
||
</nav>
|
||
<div class="overzicht-label">Kennisbank</div>
|
||
<h1>Inzichten uit de praktijk</h1>
|
||
<p>Praktijkkennis van BvPS over portfoliomanagement, strategisch portfoliomanagement, capaciteitsmanagement en Fortes Change Cloud voor de publieke sector.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GRID -->
|
||
<div class="overzicht-body">
|
||
<div class="overzicht-grid" id="inzichten-grid">
|
||
<!-- Gevuld door artikelen.js -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<img class="footer-logo" src="https://www.bvps.nl/bvps-logo.png" alt="BvPS" onerror="this.style.display='none'">
|
||
<p class="footer-text">© 2025 BvPS — Bureau voor Project Structurering · Apeldoorn</p>
|
||
<div class="footer-links">
|
||
<a href="https://www.bvps.nl/#contact">Contact</a>
|
||
<a href="https://www.bvps.nl/">Home</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="artikelen.js"></script>
|
||
<script>
|
||
(function() {
|
||
var grid = document.getElementById('inzichten-grid');
|
||
if (!grid) return;
|
||
// Overzichtspagina gebruikt h2 in de kaarten
|
||
getBvpsArtikelen().forEach(function(artikel) {
|
||
grid.insertAdjacentHTML('beforeend', renderArtikelKaart(artikel).replace('<h3>', '<h2>').replace('</h3>', '</h2>'));
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|