https://rondom-internet.nl/wp-content/uploads/2025/08/Erwin-van-der-Star-computer2-e1755956726549.webp

37114

>_ System Administrator

Niet zomaar een webbouwer.

Jouw Technische Vangnet.

Ik ben Erwin. Terwijl jij je focust op je bedrijf, zorg ik dat de digitale motor blijft draaien. Mijn aanpak is simpel: geen wollig jargon, maar heldere diagnoses en snelle oplossingen.

10+

99,9%+

data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA4MCIgaGVpZ2h0PSI1NDAiIHZpZXdCb3g9IjAgMCAxMDgwIDU0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZmlsbD0iI0VCRUJFQiIgZD0iTTAgMGgxMDgwdjU0MEgweiIvPgogICAgICAgIDxwYXRoIGQ9Ik00NDUuNjQ5IDU0MGgtOTguOTk1TDE0NC42NDkgMzM3Ljk5NSAwIDQ4Mi42NDR2LTk4Ljk5NWwxMTYuMzY1LTExNi4zNjVjMTUuNjItMTUuNjIgNDAuOTQ3LTE1LjYyIDU2LjU2OCAwTDQ0NS42NSA1NDB6IiBmaWxsLW9wYWNpdHk9Ii4xIiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICAgICAgICA8Y2lyY2xlIGZpbGwtb3BhY2l0eT0iLjA1IiBmaWxsPSIjMDAwIiBjeD0iMzMxIiBjeT0iMTQ4IiByPSI3MCIvPgogICAgICAgIDxwYXRoIGQ9Ik0xMDgwIDM3OXYxMTMuMTM3TDcyOC4xNjIgMTQwLjMgMzI4LjQ2MiA1NDBIMjE1LjMyNEw2OTkuODc4IDU1LjQ0NmMxNS42Mi0xNS42MiA0MC45NDgtMTUuNjIgNTYuNTY4IDBMMTA4MCAzNzl6IiBmaWxsLW9wYWNpdHk9Ii4yIiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICAgIDwvZz4KPC9zdmc+Cg==

on



fa

900

Technische Specificaties

26px

Divi Specialist

• Custom Theme Development
• Speed Optimization (CWV)
• Complex Layout Fixes

Crisis Management

• Gehackte sites herstellen
• Malware preventie
• Server Migraties

Logboek

/* — CONTAINER — */
.ri-logboek-container {
max-width: 800px;
margin: 0 auto;
position: relative;
font-family: sans-serif; /* Of je eigen site font */
box-sizing: border-box;
}

/* — DE VERTICALE LIJN — */
/* We maken een lijn die doorloopt */
.ri-logboek-container::before {
content: ”;
position: absolute;
top: 0;
bottom: 0;
left: 20px; /* Mobiel: lijn links */
width: 1px;
background-color: rgba(255, 255, 255, 0.1); /* Subtiele lijn kleur */
z-index: 0;
}

/* — HET ITEM (Rij) — */
.ri-timeline-item {
position: relative;
margin-bottom: 48px; /* Ruimte tussen items */
padding-left: 60px; /* Ruimte voor de lijn op mobiel */
z-index: 1;
}

/* — DE DATUM (Links of Boven) — */
.ri-timeline-date {
font-family: monospace; /* Tech look */
font-weight: bold;
font-size: 14px;
color: #60a5fa; /* Blauw */
margin-bottom: 8px;
display: block;
}

/* — DE BOLLETJES (Dots) — */
.ri-timeline-dot {
position: absolute;
left: 12px; /* Gecentreerd op de lijn (20px) */
top: 5px; /* Iets gezakt zodat hij lijnt met datum/titel */
width: 16px;
height: 16px;
background-color: #0B1120; /* Achtergrondkleur (Navy) om lijn te maskeren */
border: 2px solid #3b82f6; /* Blauwe rand */
border-radius: 50%;
z-index: 2;
}

/* Groene Dot variant */
.ri-dot-green {
border-color: #10b981; /* Emerald groen */
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
animation: dot-pulse 2s infinite;
}

@keyframes dot-pulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* — DE CONTENT — */
.ri-timeline-title {
color: #ffffff;
font-size: 20px;
font-weight: 800;
margin: 0 0 8px 0;
line-height: 1.2;
}

.ri-timeline-desc {
color: #94a3b8; /* Slate 400 */
font-size: 15px;
line-height: 1.6;
margin: 0;
}

/* ========================================== */
/* DESKTOP AANPASSINGEN (Vanaf 768px breed) */
/* ========================================== */
@media (min-width: 768px) {

/* Lijn verplaatsen naar midden-ish */
.ri-logboek-container::before {
left: 120px; /* Ruimte voor jaartal links */
}

.ri-timeline-item {
padding-left: 160px; /* Content schuift naar rechts */
display: flex;
align-items: flex-start;
}

/* Datum naar links verplaatsen */
.ri-timeline-date {
position: absolute;
left: 0;
width: 100px;
text-align: right; /* Rechts uitlijnen tegen de lijn aan */
top: 3px;
margin-bottom: 0;
}

/* Dot op de nieuwe lijn positie zetten */
.ri-timeline-dot {
left: 112px; /* 120px lijn – halve breedte dot */
top: 6px;
}
}

/* — CONTAINER — */
.ri-wa-wrapper {
padding: 80px 20px;
text-align: center;
font-family: sans-serif;
box-sizing: border-box;
}
.ri-wa-wrapper * { box-sizing: border-box; }

/* — DE KAART — */
.ri-wa-card {
background-color: #162033; /* Iets lichter dan de achtergrond */
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 60px 40px;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
/* Subtiel rastertje in de kaart */
background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 30px 30px;
}

/* Groene gloed effect achtergrond */
.ri-wa-card::before {
content: ”; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
background: radial-gradient(circle, rgba(37, 211, 102, 0.05) 0%, transparent 50%);
pointer-events: none;
}

/* — STATUS INDICATOR — */
.ri-wa-status {
display: inline-flex; align-items: center; gap: 10px;
background: rgba(37, 211, 102, 0.1);
border: 1px solid rgba(37, 211, 102, 0.2);
padding: 6px 16px; border-radius: 50px;
margin-bottom: 32px;
}

.ri-wa-dot {
width: 8px; height: 8px; background-color: #25D366; border-radius: 50%;
box-shadow: 0 0 10px #25D366;
animation: wa-pulse 2s infinite;
}

.ri-wa-status-text {
color: #25D366; font-size: 12px; font-weight: bold; font-family: monospace; text-transform: uppercase; letter-spacing: 1px;
}

/* — TYPOGRAFIE — */
.ri-wa-title {
color: white; font-size: clamp(28px, 5vw, 48px); font-weight: 800; margin: 0 0 16px 0; line-height: 1.1;
}

.ri-wa-phone {
color: white; font-family: monospace; font-size: clamp(24px, 4vw, 40px); font-weight: 700; margin-bottom: 40px; display: block; letter-spacing: -1px; opacity: 0.8;
}

/* — WHATSAPP KNOP — */
.ri-wa-btn {
background-color: #25D366; color: #0f172a;
font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
text-decoration: none;
padding: 18px 40px; border-radius: 12px;
display: inline-flex; align-items: center; gap: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 30px -5px rgba(37, 211, 102, 0.4);
}

.ri-wa-btn:hover {
background-color: #20bd5a; transform: translateY(-4px) scale(1.02);
box-shadow: 0 20px 40px -10px rgba(37, 211, 102, 0.6);
}

.ri-wa-btn svg { width: 24px; height: 24px; fill: currentColor; }

/* Animatie */
@keyframes wa-pulse {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.9); }
100% { opacity: 1; transform: scale(1); }
}

/* Mobiel aanpassing */
@media (max-width: 600px) {
.ri-wa-card { padding: 40px 20px; }
.ri-wa-btn { width: 100%; justify-content: center; }
}