Add AGENTS.md documentation for eendoeserver

Add interactive detail modals for work tiles and update work_3 graphic
Update contact section styling and cards
2026-10-20 22:39:48 +02:00 · 2026-10-20 22:31:06 +02:00 · 2026-10-20 22:02:19 +02:00
5 changed files with 493 additions and 95 deletions
@@ -0,0 +1,115 @@
+# AGENTS.md — eendoeserver (eendoe.nl & web03)
+
+Instructies, architectuur, ontwerpregels en deploymentprocedures voor AI-agents en ontwikkelaars die werken binnen deze repository.
+
+---
+
+## 🎯 1. Overzicht & Doel
+
+Deze repository (`eendoeserver`) beheert de bronbestanden, styling, documentatie en Apache 2.4 VirtualHost-configuraties voor de standalone productieserver **`web03`** (`eendoe.nl` en `bm4.nl`).
+
+### Kerncomponenten:
+* **`eendoe/`**: De publieke document root voor de website van Eendoe Services (`index.html`, assets, stylesheets, scripts).
+* **`vhosts/`**: Apache VirtualHost configuraties geïncludeerd op de host via `Include /sites/vhosts/*.conf`.
+
+---
+
+## 🖥️ 2. Productieomgeving & Architectuur
+
+* **Server**: Standalone Linux host `web03` (`eendoe.nl`).
+* **SSH Toegang**: `bart@eendoe.nl` (authenticatie via SSH keys).
+* **Webserver**: Apache 2.4 met HTTP/2 ondersteuning (`mod_ssl`, `mod_rewrite`, `mod_http2`).
+* **Pad op productieserver**:
+  * Website document root: `/sites/eendoe/`
+  * Apache vhosts: `/sites/vhosts/`
+  * Debian package repository (zie ook `package-repo`): `/sites/repository/`
+* **SSL/TLS**: Let's Encrypt certificaten via Certbot (`/etc/letsencrypt/`).
+
+---
+
+## 🎨 3. Ontwerpregels & Frontend Conventies
+
+### ⚠️ Belangrijk: Behoud de authentieke stijl ("Minder AI, meer Elate")
+De website is gebouwd op basis van het klassieke **Elate** template van FREEHTML5.co.
+
+1. **Geen moderne AI/SaaS-saus**:
+   * Vermijd geforceerde glassmorphism, zwevende SaaS feature cards, zware box-shadows, gekleurde border-glows of overdadige gradient-knoppen.
+   * Houd interacties en layouts consistent met de bestaande rustige, zakelijke en minimalistische uitstraling.
+2. **Typografie & Kleuren**:
+   * Basistekst: `#7f7f7f`, koppen: `#393e46`, achtergronden: `#f7f7f7` of `#ffffff`.
+   * Primaire themakleur: `#52d3aa` (turquoise / mintgroen).
+3. **Framework & Bibliotheken**:
+   * **Bootstrap 3.3.5**: Gebruik native Bootstrap 3 componenten (bijv. modals voor popups, grid `col-md-*`, `col-sm-*`).
+   * **jQuery & Plugins**: `jquery.min.js`, `jquery.easing`, `jquery.stellar`, `jquery.waypoints`.
+   * **Iconen**: Icomoon (`icon-phone`, `icon-envelope`, `icon-home`, `icon-globe`, etc.).
+4. **Taal & Toon**:
+   * Alle teksten op de website zijn in zakelijk, foutloos en bondig Nederlands.
+
+---
+
+## 🚀 4. Workflow & Deployment
+
+### A. Wijzigingen aanbrengen & lokaal testen
+* Pas bronbestanden aan binnen `eendoe/` (of `vhosts/` indien van toepassing).
+* Valideer HTML-syntax en controleer dat er geen ongebalanceerde tags ontstaan.
+* Zorg dat gecompileerde CSS (`css/style.css`) en SCSS (`sass/style.scss`) synchroon blijven.
+
+### B. Committen en pushen (Git)
+* Werk vanuit de submodule of clone:
+  ```bash
+  git add <gewijzigde bestanden>
+  git commit -m "Korte beschrijving van de wijziging"
+  git push origin main
+  ```
+* Bij gebruik als submodule binnen de centrale `cluster` repository: werk daarna de submodule pointer in de root repository bij:
+  ```bash
+  git -C .. add eendoeserver
+  git -C .. commit -m "Update eendoeserver submodule pointer"
+  git -C .. push origin main
+  ```
+
+### C. Deployen naar productie (`web03`)
+De live website wordt direct geserveerd vanuit `/sites/eendoe/` op `eendoe.nl`. Deployment gebeurt via `rsync` over SSH:
+
+```bash
+# 1. Droogloop (optioneel, om te controleren wat er overgezet wordt):
+rsync -n -avz eendoe/ bart@eendoe.nl:/sites/eendoe/
+
+# 2. Live deploy van de website:
+rsync -avz eendoe/ bart@eendoe.nl:/sites/eendoe/
+
+# 3. Live verificatie:
+curl -sI https://eendoe.nl | head -n 5
+```
+
+> [!NOTE]
+> Gebruik **geen** `--delete` bij rsync op `/sites/eendoe/` zonder expliciete controle, om te voorkomen dat server-specifieke scripts (zoals `install-repo.sh` of submappen) onbedoeld worden verwijderd.
+
+### D. VirtualHosts bijwerken (indien van toepassing)
+Als configuraties in `vhosts/` zijn gewijzigd:
+```bash
+rsync -avz vhosts/ bart@eendoe.nl:/sites/vhosts/
+ssh bart@eendoe.nl "sudo apache2ctl configtest && sudo systemctl reload apache2"
+```
+
+---
+
+## 📋 5. Bestandsstructuur
+
+```
+eendoeserver/
+├── AGENTS.md                  # Dit instructiebestand
+├── README.md                  # Korte repo-beschrijving
+├── eendoe/                    # Document root
+│   ├── index.html             # Hoofdpagina eendoe.nl / bm4.nl
+│   ├── css/                   # Gecompileerde stylesheets (style.css, bootstrap.css)
+│   ├── sass/                  # SASS bronbestanden (style.scss)
+│   ├── js/                    # JavaScript (Bootstrap, jQuery, plugins, main.js)
+│   ├── images/                # Afbeeldingen en logo's (work_*.jpg, contact.jpg)
+│   ├── fonts/                 # Icomoon en Glyphicons lettertypen
+│   └── documents/             # PDF downloads (zoals algemene voorwaarden)
+└── vhosts/                    # Apache 2.4 configuraties
+    ├── 20_eendoe.conf         # HTTP vhost
+    ├── 20_eendoe-le-ssl.conf  # HTTPS vhost eendoe.nl / bm4.nl
+    └── 20_repository.conf     # APT repository vhost
+```
@@ -1005,12 +1005,69 @@ margin-top: -10px;
  background-image: repeating-linear-gradient(to bottom right, #3f95ea 0%, #52d3aa 100%);
  background-image: -ms-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
 }
-#fh5co-contact a {
-  color: rgba(255, 255, 255, 0.5);
-  text-decoration: underline;
+#fh5co-contact .gradient {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  opacity: .9;
+  -webkit-backface-visibility: hidden;
+  background-color: #52d3aa;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIHN0b3AtY29sb3I9IiMzZjk1ZWEiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzUyZDNhYSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);
+  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #3f95ea), color-stop(1, #52d3aa));
+  background-image: -webkit-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
+  background-image: repeating-linear-gradient(to bottom right, #3f95ea 0%, #52d3aa 100%);
+  background-image: -ms-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
 }
-#fh5co-contact a:hover {
-  color: white;
+#fh5co-contact .container {
+  position: relative;
+  z-index: 4;
+}
+#fh5co-contact h3 {
+  color: #fff;
+  margin-bottom: 25px;
+  font-size: 26px;
+  font-weight: 300;
+}
+#fh5co-contact .fh5co-contact-info {
+  padding: 0;
+  margin: 0 0 1.5em 0;
+}
+#fh5co-contact .fh5co-contact-info li {
+  position: relative;
+  padding: 0;
+  margin: 0 0 1.5em 0;
+  padding-left: 50px;
+  list-style: none;
+  font-size: 18px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.9);
+}
+#fh5co-contact .fh5co-contact-info li i {
+  position: absolute;
+  top: 3px;
+  left: 0;
+  font-size: 24px;
+  color: #fff;
+}
+#fh5co-contact .fh5co-contact-info li a {
+  color: #fff;
+  text-decoration: underline;
+  -webkit-transition: 0.3s;
+  -o-transition: 0.3s;
+  transition: 0.3s;
+}
+#fh5co-contact .fh5co-contact-info li a:hover {
+  color: #fff;
+  text-decoration: none;
+}
+#fh5co-contact img {
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  -ms-border-radius: 7px;
+  border-radius: 7px;
 }
 #fh5co-contact:before, #fh5co-contact:after {
  position: absolute;
@@ -1044,63 +1101,6 @@ margin-top: -10px;
 #fh5co-contact .section-heading h3 {
  color: rgba(255, 255, 255, 0.8);
 }
-#fh5co-contact .fh5co-project-item {
-  display: block;
-  width: 100%;
-  position: relative;
-  top: 0;
-  background: #fff;
-  overflow: hidden;
-  z-index: 9;
-  margin-bottom: 30px;
-  -webkit-border-radius: 7px;
-  -moz-border-radius: 7px;
-  -ms-border-radius: 7px;
-  border-radius: 7px;
-  -webkit-transition: 0.3s;
-  -o-transition: 0.3s;
-  transition: 0.3s;
-}
-#fh5co-contact .fh5co-project-item img {
-  z-index: 8;
-  opacity: 1;
-  -webkit-transition: 0.3s;
-  -o-transition: 0.3s;
-  transition: 0.3s;
-}
-#fh5co-contact .fh5co-project-item .fh5co-text {
-  padding: 10px 20px;
-  height: 7em;
-  background-color: #f6f4f4;
-}
-#fh5co-contact .fh5co-project-item .fh5co-text h2, #fh5co-contact .fh5co-project-item .fh5co-text span {
-  text-decoration: none !important;
-}
-#fh5co-contact .fh5co-project-item .fh5co-text h2 {
-  font-size: 18px;
-  font-weight: bold;
-  margin: 0;
-}
-#fh5co-contact .fh5co-project-item .fh5co-text span {
-  color: #b3b3b3;
-  font-size: 16px;
-  font-weight: 400;
-}
-#fh5co-contact .fh5co-project-item:hover, #fh5co-contact .fh5co-project-item:focus {
-  -webkit-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4);
-  -moz-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4);
-  -ms-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4);
-  -o-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4);
-  box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4);
-  text-decoration: none;
-  top: -15px;
-}
-#fh5co-contact .fh5co-project-item:hover img, #fh5co-contact .fh5co-project-item:focus img {
-  opacity: .7;
-}
-#fh5co-contact .fh5co-project-item:hover h2, #fh5co-contact .fh5co-project-item:hover span, #fh5co-contact .fh5co-project-item:focus h2, #fh5co-contact .fh5co-project-item:focus span {
-  text-decoration: none !important;
-}


 .section-heading {
@@ -1467,4 +1467,62 @@ margin-top: -10px;
  animation-fill-mode: both;
 }

+/* Modals */
+.modal-content {
+  border-radius: 6px;
+  border: none;
+  -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
+}
+.modal-header {
+  padding: 20px 25px 15px;
+  border-bottom: 1px solid #eeeeee;
+}
+.modal-header .close {
+  font-size: 28px;
+  font-weight: 300;
+  line-height: 1;
+  opacity: 0.5;
+  outline: none;
+}
+.modal-header .close:hover {
+  opacity: 1;
+}
+.modal-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #393e46;
+  margin: 0;
+}
+.modal-body {
+  padding: 25px;
+  font-size: 16px;
+  line-height: 1.7;
+  color: #555555;
+}
+.modal-body img {
+  max-height: 250px;
+  width: auto;
+  max-width: 100%;
+  object-fit: contain;
+  margin: 0 auto 20px auto;
+  border-radius: 4px;
+}
+.modal-body p {
+  margin-bottom: 15px;
+}
+.modal-body p:last-child {
+  margin-bottom: 0;
+}
+.modal-footer {
+  padding: 15px 25px;
+  border-top: 1px solid #eeeeee;
+}
+.modal-footer .btn {
+  padding: 8px 25px;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 1px;
+}
+
 /*# sourceMappingURL=style.css.map */
@@ -178,8 +178,8 @@
 			</div>
 			<div class="row row-bottom-padded-sm">
 				<div class="col-md-4 col-sm-6 col-xxs-12">
-					<a href="images/work_1.jpg" class="fh5co-project-item image-popup to-animate">
-						<img src="images/work_1.jpg" alt="Image" class="img-responsive">
+					<a href="#modal-work-1" data-toggle="modal" data-target="#modal-work-1" class="fh5co-project-item to-animate">
+						<img src="images/work_1.jpg" alt="Oracle Application Express" class="img-responsive">
 						<div class="fh5co-text">
 						<h2>Oracle Application Express</h2>
 						<span>De tool voor snelle applicatieontwikkeling en deployment. In recordtijd een werkende oplossing.</span>
@@ -187,8 +187,8 @@
 					</a>
 				</div>
 				<div class="col-md-4 col-sm-6 col-xxs-12">
-					<a href="images/work_2.jpg" class="fh5co-project-item image-popup to-animate">
-						<img src="images/work_2.jpg" alt="Image" class="img-responsive">
+					<a href="#modal-work-2" data-toggle="modal" data-target="#modal-work-2" class="fh5co-project-item to-animate">
+						<img src="images/work_2.jpg" alt="Oracle Database" class="img-responsive">
 						<div class="fh5co-text">
 						<h2>Oracle Database</h2>
 						<span>Database applicatieontwikkeling door onze Oracle certified professionals.</span>
@@ -199,17 +199,17 @@
 				<div class="clearfix visible-sm-block"></div>

 				<div class="col-md-4 col-sm-6 col-xxs-12">
-					<a href="images/work_3.jpg" class="fh5co-project-item image-popup to-animate">
-						<img src="images/work_3.jpg" alt="Image" class="img-responsive">
+					<a href="#modal-work-3" data-toggle="modal" data-target="#modal-work-3" class="fh5co-project-item to-animate">
+						<img src="images/work_3.jpg" alt="Web development" class="img-responsive">
 						<div class="fh5co-text">
 						<h2>Web development</h2>
-						<span>Website onderhoud en ontwikkeling met nieuwe technieken als PHP, jQuery, bootstrap etc</span>
+						<span>Website onderhoud en ontwikkeling met moderne technieken als React, HTML5, Kubernetes etc</span>
 						</div>
 					</a>
 				</div>
 				<div class="col-md-4 col-sm-6 col-xxs-12">
-					<a href="images/work_4.jpg" class="fh5co-project-item image-popup to-animate">
-						<img src="images/work_4.jpg" alt="Image" class="img-responsive">
+					<a href="#modal-work-4" data-toggle="modal" data-target="#modal-work-4" class="fh5co-project-item to-animate">
+						<img src="images/work_4.jpg" alt="Multi-platform" class="img-responsive">
 						<div class="fh5co-text">
 						<h2>Multi-platform</h2>
 						<span>Oplossingen die aansluiten bij uw huidige omgeving, zonder hoge investeringen</span>
@@ -220,8 +220,8 @@
 				<div class="clearfix visible-sm-block"></div>

 				<div class="col-md-4 col-sm-6 col-xxs-12">
-					<a href="images/work_5.jpg" class="fh5co-project-item image-popup to-animate">
-						<img src="images/work_5.jpg" alt="Image" class="img-responsive">
+					<a href="#modal-work-5" data-toggle="modal" data-target="#modal-work-5" class="fh5co-project-item to-animate">
+						<img src="images/work_5.jpg" alt="Overal en altijd" class="img-responsive">
 						<div class="fh5co-text">
 						<h2>Overal en altijd</h2>
 						<span>Moderne oplossingen ongeacht tijd of plaats met behulp van hedendaagse apparatuur. Lokaal, in beheer of in de cloud.</span>
@@ -229,8 +229,8 @@
 					</a>
 				</div>
 				<div class="col-md-4 col-sm-6 col-xxs-12">
-					<a href="images/work_6.jpg" class="fh5co-project-item image-popup to-animate">
-						<img src="images/work_6.jpg" alt="Image" class="img-responsive">
+					<a href="#modal-work-6" data-toggle="modal" data-target="#modal-work-6" class="fh5co-project-item to-animate">
+						<img src="images/work_6.jpg" alt="Integratie" class="img-responsive">
 						<div class="fh5co-text">
 						<h2>Integratie</h2>
 						<span>Systemen koppelen door integratie met behulp van technieken als ETL en webservices </span>
@@ -269,7 +269,7 @@


 	<section id="fh5co-contact" data-section="contact" style="background-image: url(images/full_image_1.jpg);" data-stellar-background-ratio="0.5">
-	
+		<div class="gradient"></div>
 		<div class="container">
 			<div class="row">
 				<div class="col-md-12 section-heading text-center">
@@ -285,17 +285,13 @@
 				<div class="col-md-6 to-animate">
 					<h3>Contactgegevens</h3>
 					<ul class="fh5co-contact-info">
-                        <li">
-							
-							&nbsp;Eendoe Services B.V.
-						</li>
+						<li><i class="icon-briefcase"></i>Eendoe Services B.V.</li>
 						<li class="fh5co-contact-address">
-							<i class="icon-home"></i>
-							&nbsp;Adriana van Roonlaan<br>2544NM Den Haag
+							<i class="icon-home"></i>Adriana van Roonlaan<br>2544 NM Den Haag
 						</li>
-						<li><i class="icon-phone"></i>&nbsp;+31 (0)85 00 91 824</li>
-						<li><i class="icon-envelope"></i>&nbsp;info@eendoe.nl</li>
-						<li><i class="icon-globe"></i>&nbsp;<a href="https://eendoe.nl/" target="_blank">eendoe.nl</a></li>
+						<li><i class="icon-phone"></i><a href="tel:+31850091824">+31 (0)85 00 91 824</a></li>
+						<li><i class="icon-envelope"></i><a href="mailto:info@eendoe.nl">info@eendoe.nl</a></li>
+						<li><i class="icon-globe"></i><a href="https://eendoe.nl/" target="_blank">eendoe.nl</a></li>
 					</ul>
 				</div>

@@ -322,8 +318,120 @@
 		</div>
 	</footer>

+	<!-- Work Modals -->
+	<div class="modal fade" id="modal-work-1" tabindex="-1" role="dialog" aria-labelledby="modal-work-1-title" aria-hidden="true">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+					<h4 class="modal-title" id="modal-work-1-title">Oracle Application Express (APEX)</h4>
+				</div>
+				<div class="modal-body">
+					<img src="images/work_1.jpg" alt="Oracle Application Express" class="img-responsive center-block">
+					<p>Met Oracle APEX bouwen en implementeren wij betrouwbare, schaalbare webapplicaties direct bovenop uw Oracle database. Dankzij de low-code architectuur ontwikkelen we maatwerkoplossingen in een fractie van de traditionele bouwtijd.</p>
+					<p>Ideaal voor het digitaliseren van bedrijfsprocessen, data-entry, rapportages en operationele dashboards zonder concessies aan veiligheid of performance.</p>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
+				</div>
+			</div>
+		</div>
+	</div>

+	<div class="modal fade" id="modal-work-2" tabindex="-1" role="dialog" aria-labelledby="modal-work-2-title" aria-hidden="true">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+					<h4 class="modal-title" id="modal-work-2-title">Oracle Database</h4>
+				</div>
+				<div class="modal-body">
+					<img src="images/work_2.jpg" alt="Oracle Database" class="img-responsive center-block">
+					<p>Onze Oracle-gecertificeerde specialisten ontwerpen, optimaliseren en onderhouden robuuste database-omgevingen. Van relationele datamodellering, complexe SQL-queries en geavanceerde PL/SQL-businesslogica tot databasebeheer en performance tuning.</p>
+					<p>Wij borgen de continuïteit, veiligheid en betrouwbaarheid van uw bedrijfskritische bedrijfsdata.</p>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
+				</div>
+			</div>
+		</div>
+	</div>

+	<div class="modal fade" id="modal-work-3" tabindex="-1" role="dialog" aria-labelledby="modal-work-3-title" aria-hidden="true">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+					<h4 class="modal-title" id="modal-work-3-title">Web development</h4>
+				</div>
+				<div class="modal-body">
+					<img src="images/work_3.jpg" alt="Web development" class="img-responsive center-block">
+					<p>Wij bouwen en onderhouden moderne, responsieve webapplicaties en portalen. Met beproefde en toekomstvaste technologieën zoals React, HTML5 en container-orkestratie via Kubernetes combineren we een prettige gebruikerservaring met schaalbare deployment.</p>
+					<p>Van frontend-ontwerp tot geautomatiseerde CI/CD pipelines en containerized hosting.</p>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="modal fade" id="modal-work-4" tabindex="-1" role="dialog" aria-labelledby="modal-work-4-title" aria-hidden="true">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+					<h4 class="modal-title" id="modal-work-4-title">Multi-platform</h4>
+				</div>
+				<div class="modal-body">
+					<img src="images/work_4.jpg" alt="Multi-platform" class="img-responsive center-block">
+					<p>Oplossingen die naadloos aansluiten op uw bestaande infrastructuur. Of uw medewerkers nu werken op desktop, laptop, tablet of smartphone, en ongeacht het besturingssysteem (Windows, macOS, Linux, iOS of Android).</p>
+					<p>Wij zorgen voor consistente gebruiksvriendelijkheid en optimale toegankelijkheid zonder dat grote herinvesteringen in hardware nodig zijn.</p>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="modal fade" id="modal-work-5" tabindex="-1" role="dialog" aria-labelledby="modal-work-5-title" aria-hidden="true">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+					<h4 class="modal-title" id="modal-work-5-title">Overal en altijd</h4>
+				</div>
+				<div class="modal-body">
+					<img src="images/work_5.jpg" alt="Overal en altijd" class="img-responsive center-block">
+					<p>Veilig, flexibel en efficiënt werken, ongeacht tijd of locatie. Wij adviseren, configureren en beheren omgevingen die meebewegen met uw organisatie: lokaal op uw eigen servers (on-premise), als managed service of in de cloud.</p>
+					<p>Met doordachte back-upstrategieën, monitoring en versleutelde verbindingen voor zorgeloos mobiel werken.</p>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="modal fade" id="modal-work-6" tabindex="-1" role="dialog" aria-labelledby="modal-work-6-title" aria-hidden="true">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+					<h4 class="modal-title" id="modal-work-6-title">Integratie</h4>
+				</div>
+				<div class="modal-body">
+					<img src="images/work_6.jpg" alt="Integratie" class="img-responsive center-block">
+					<p>Geen geïsoleerde datasilo's meer, maar naadloos op elkaar aangesloten bedrijfsprocessen. Wij koppelen verschillende softwaresystemen, databases en externe diensten aan elkaar.</p>
+					<p>Met behulp van gestandaardiseerde REST API's, webservices en betrouwbare ETL-processen (Extract, Transform, Load) stroomt uw data foutloos en geautomatiseerd door de organisatie.</p>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
+				</div>
+			</div>
+		</div>
+	</div>

 	<!-- jQuery -->
 	<script src="js/jquery.min.js"></script>
@@ -1094,10 +1094,38 @@ h1, h2, h3, h4, h5, h6 {
 	}
 }
 #fh5co-contact {
-	// Contacts
 	padding-bottom: 0;
+	position: relative;
+	color: rgba(255, 255, 255, 0.8);
+	background-color: $brand-primary;
+	@include fh5co-gradient;
+
+	.gradient {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 2;
+		opacity: .9;
+		-webkit-backface-visibility: hidden;
+		background-color: $brand-primary;
+		@include fh5co-gradient;
+	}
+
+	.container {
+		position: relative;
+		z-index: 4;
+	}
+
+	h3 {
+		color: #fff;
+		margin-bottom: 25px;
+		font-size: 26px;
+		font-weight: 300;
+	}
+
 	.fh5co-contact-info {
-		// color: rgba(255,255,255,.7);
 		padding: 0;
 		margin: 0 0 1.5em 0;
 		li {
@@ -1106,12 +1134,43 @@ h1, h2, h3, h4, h5, h6 {
 			margin: 0 0 1.5em 0;
 			padding-left: 50px;
 			list-style: none;
+			font-size: 18px;
+			line-height: 1.6;
+			color: rgba(255, 255, 255, 0.9);

 			i {
 				position: absolute;
-				top: .2em;
+				top: 3px;
 				left: 0;
+				font-size: 24px;
+				color: #fff;
 			}
+
+			a {
+				color: #fff;
+				text-decoration: underline;
+				@include transition(.3s);
+				&:hover {
+					color: #fff;
+					text-decoration: none;
+				}
+			}
+		}
+	}
+
+	img {
+		@include border-radius(7px);
+	}
+
+	.section-heading {
+		h2 {
+			color: #fff;
+			&:after {
+				background: rgba(255, 255, 255, 0.3);
+			}
+		}
+		h3 {
+			color: rgba(255, 255, 255, 0.8);
 		}
 	}
 }
@@ -1477,3 +1536,61 @@ h1, h2, h3, h4, h5, h6 {
 // 		@include inline-block;
 // 	}
 // }
+
+// Modals
+.modal-content {
+	@include border-radius(6px);
+	border: none;
+	-webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
+	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
+}
+.modal-header {
+	padding: 20px 25px 15px;
+	border-bottom: 1px solid #eeeeee;
+	.close {
+		font-size: 28px;
+		font-weight: 300;
+		line-height: 1;
+		opacity: 0.5;
+		outline: none;
+		&:hover {
+			opacity: 1;
+		}
+	}
+}
+.modal-title {
+	font-size: 22px;
+	font-weight: 700;
+	color: #393e46;
+	margin: 0;
+}
+.modal-body {
+	padding: 25px;
+	font-size: 16px;
+	line-height: 1.7;
+	color: #555555;
+	img {
+		max-height: 250px;
+		width: auto;
+		max-width: 100%;
+		object-fit: contain;
+		margin: 0 auto 20px auto;
+		@include border-radius(4px);
+	}
+	p {
+		margin-bottom: 15px;
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+.modal-footer {
+	padding: 15px 25px;
+	border-top: 1px solid #eeeeee;
+	.btn {
+		padding: 8px 25px;
+		font-size: 13px;
+		font-weight: 600;
+		letter-spacing: 1px;
+	}
+}
Author	SHA1	Message	Date
bart	ed8f87411b	Add AGENTS.md documentation for eendoeserver	2026-10-20 22:39:48 +02:00
bart	b87d39e321	Add interactive detail modals for work tiles and update work_3 graphic	2026-10-20 22:31:06 +02:00
bart	85cadf1040	Update contact section styling and cards	2026-10-20 22:02:19 +02:00