Eerste versie van de website onder versiebeheer

2026-06-27 19:18:49 +02:00
commit 7908d33a62
20 changed files with 5672 additions and 0 deletions
@@ -0,0 +1,305 @@
+<!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>