Add AGENTS.md documentation for eendoeserver

AGENTS.md

@@ -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
+```

eendoe/css/style.css

@@ -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 {
+#fh5co-contact .gradient {
-  color: rgba(255, 255, 255, 0.5);
+  position: absolute;
-  text-decoration: underline;
+  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 {
+#fh5co-contact .container {
-  color: white;
+  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 */

eendoe/index.html

@@ -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">
+					<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="Image" class="img-responsive">
+						<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">
+					<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="Image" class="img-responsive">
+						<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">
+					<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="Image" class="img-responsive">
+						<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">
+					<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="Image" class="img-responsive">
+						<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">
+					<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="Image" class="img-responsive">
+						<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">
+					<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="Image" class="img-responsive">
+						<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">
+						<li><i class="icon-briefcase"></i>Eendoe Services B.V.</li>
-							
+						<li class="fh5co-contact-address">
-							&nbsp;Eendoe Services B.V.
+							<i class="icon-home"></i>Adriana van Roonlaan<br>2544 NM Den Haag
 						</li>
-						<li class="fh5co-contact-address ">
+						<li><i class="icon-phone"></i><a href="tel:+31850091824">+31 (0)85 00 91 824</a></li>
-							<i class="icon-home"></i>
+						<li><i class="icon-envelope"></i><a href="mailto:info@eendoe.nl">info@eendoe.nl</a></li>
-							&nbsp;Adriana van Roonlaan<br>2544NM Den Haag
+						<li><i class="icon-globe"></i><a href="https://eendoe.nl/" target="_blank">eendoe.nl</a></li>
-						</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>
 					</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>

eendoe/install-repo.sh

@@ -0,0 +1,174 @@
+#!/usr/bin/env bash
+# ==============================================================================
+# Eendoe Private APT Repository Setup Script
+# Ondersteunt: Linux Mint, Ubuntu, Debian
+# ==============================================================================
+set -euo pipefail
+
+# Controleer of het script als root draait
+if [ "$EUID" -ne 0 ]; then
+    echo "Fout: Dit script moet als root worden uitgevoerd." >&2
+    echo "Gebruik: sudo bash $0 [gebruikersnaam] [wachtwoord]" >&2
+    exit 1
+fi
+
+REPO_HOST="repository.eendoe.nl"
+REPO_URL="https://${REPO_HOST}"
+SUITE="stable"
+COMPONENT="main"
+
+echo "=========================================================="
+echo "  Eendoe Private APT Repository Installer"
+echo "=========================================================="
+
+# 1. Credentials ophalen (uit argumenten of interactief)
+REPO_USER="${1:-}"
+REPO_PASS="${2:-}"
+
+if [ -z "$REPO_USER" ]; then
+    if [ -t 0 ]; then
+        read -r -p "Gebruikersnaam voor repository [eendoe]: " INPUT_USER
+    elif [ -e /dev/tty ]; then
+        read -r -p "Gebruikersnaam voor repository [eendoe]: " INPUT_USER </dev/tty
+    else
+        INPUT_USER=""
+    fi
+    REPO_USER="${INPUT_USER:-eendoe}"
+fi
+
+if [ -z "$REPO_PASS" ]; then
+    if [ -t 0 ]; then
+        read -r -s -p "Wachtwoord voor repository ($REPO_USER): " REPO_PASS
+        echo ""
+    elif [ -e /dev/tty ]; then
+        read -r -s -p "Wachtwoord voor repository ($REPO_USER): " REPO_PASS </dev/tty
+        echo ""
+    fi
+fi
+
+if [ -z "$REPO_USER" ] || [ -z "$REPO_PASS" ]; then
+    echo "Fout: Zowel gebruikersnaam als wachtwoord zijn verplicht." >&2
+    exit 1
+fi
+
+# 2. Benodigde pakketten installeren indien nodig
+for pkg in curl gpg; do
+    if ! command -v "$pkg" >/dev/null 2>&1; then
+        echo "Installeren van ontbrekend pakket: $pkg..."
+        apt-get update -qq && apt-get install -y -qq "$pkg"
+    fi
+done
+
+# 3. Authenticatie valideren bij de server
+echo -n "Inloggegevens verifiëren bij $REPO_HOST... "
+HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" -u "${REPO_USER}:${REPO_PASS}" "${REPO_URL}/dists/${SUITE}/Release" || true)
+
+if [ "$HTTP_CODE" = "401" ] || [ "$HTTP_CODE" = "403" ]; then
+    echo "MISLUKT (HTTP $HTTP_CODE)"
+    echo "Fout: Ongeldige gebruikersnaam of wachtwoord voor $REPO_HOST." >&2
+    exit 1
+elif [ "$HTTP_CODE" = "200" ]; then
+    echo "OK (Geverifieerd)"
+else
+    echo "Status HTTP $HTTP_CODE (installatie wordt voortgezet)"
+fi
+
+# 4. APT authenticatiebestand aanmaken met strikte permissies (600)
+echo "Configureren van APT authenticatie (/etc/apt/auth.conf.d/eendoe.conf)..."
+mkdir -p /etc/apt/auth.conf.d
+cat << EOF > /etc/apt/auth.conf.d/eendoe.conf
+machine ${REPO_HOST} login ${REPO_USER} password ${REPO_PASS}
+EOF
+chmod 600 /etc/apt/auth.conf.d/eendoe.conf
+
+# 5. GPG public keyring installeren
+echo "Installeren van Eendoe GPG sleutel (/etc/apt/keyrings/eendoe.gpg)..."
+mkdir -p /etc/apt/keyrings
+cat << 'EOF' | gpg --dearmor --yes -o /etc/apt/keyrings/eendoe.gpg
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+FGLx4o4=
+=CcXl
+-----END PGP PUBLIC KEY BLOCK-----
+EOF
+chmod 644 /etc/apt/keyrings/eendoe.gpg
+
+# 6. APT sources.list aanmaken
+echo "Aanmaken van /etc/apt/sources.list.d/eendoe.list..."
+cat << EOF > /etc/apt/sources.list.d/eendoe.list
+# Eendoe Private APT Repository
+deb [arch=amd64 signed-by=/etc/apt/keyrings/eendoe.gpg] ${REPO_URL}/ ${SUITE} ${COMPONENT}
+EOF
+chmod 644 /etc/apt/sources.list.d/eendoe.list
+
+# 7. APT updaten
+echo "Pakketlijst bijwerken (apt-get update)..."
+apt-get update
+
+echo ""
+echo "=========================================================="
+echo "  Installatie geslaagd!"
+echo "  Eendoe repository is geconfigureerd en klaar voor gebruik."
+echo "  Voorbeeld: sudo apt install eendoe-hyperdeck"
+echo "=========================================================="

eendoe/sass/style.scss

@@ -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;
+	}
+}

vhosts/20_repository.conf

@@ -4,8 +4,8 @@
     ProxyRequests off
     ProxyPreserveHost on
 
-
     RewriteEngine on
+    RewriteCond %{SERVER_NAME} =repository.eendoe.nl [OR]
     RewriteCond %{SERVER_NAME} =repository.bnhmeijer.nl
     RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
 </VirtualHost>
@@ -17,20 +17,21 @@
     Protocols h2 h2c http/1.1
     ServerName repository.eendoe.nl
 
-
-
     DocumentRoot /sites/repository/binaries
 
     <Directory /sites/repository/binaries>
-	      AllowOverride All
+        AllowOverride None
         Options FollowSymLinks
-	      Order deny,allow
+
-          allow from all
+        AuthType Basic
-	      Require all granted
+        AuthName "Eendoe Private Repository"
+        AuthUserFile /sites/repository/.htpasswd
+        Require valid-user
     </Directory>
-Include /etc/letsencrypt/options-ssl-apache.conf
+
-SSLCertificateFile /etc/letsencrypt/live/bm4.nl-0002/fullchain.pem
+    Include /etc/letsencrypt/options-ssl-apache.conf
-SSLCertificateKeyFile /etc/letsencrypt/live/bm4.nl-0002/privkey.pem
+    SSLCertificateFile /etc/letsencrypt/live/bm4.nl-0002/fullchain.pem
+    SSLCertificateKeyFile /etc/letsencrypt/live/bm4.nl-0002/privkey.pem
 </VirtualHost>