update
This commit is contained in:
Lanta
parent
0c1341acf1
commit
9865ee4e86
2 changed files with 195 additions and 1 deletions
|
|
@ -1019,6 +1019,139 @@ p { margin: 0 0 1em; color: var(--c-text-dim); }
|
||||||
box-shadow: 0 10px 24px rgba(0, 242, 255, .35);
|
box-shadow: 0 10px 24px rgba(0, 242, 255, .35);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---------- Self-hosted Git banner ---------- */
|
||||||
|
.mx-git-banner {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.1fr 1fr;
|
||||||
|
gap: 48px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 56px;
|
||||||
|
border-radius: var(--r-xl);
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(0,242,255,.06), rgba(150,0,244,.10)),
|
||||||
|
rgba(255,255,255,.03);
|
||||||
|
border: 1px solid var(--c-border-2);
|
||||||
|
box-shadow: var(--shadow-card), var(--shadow-glow);
|
||||||
|
overflow: hidden;
|
||||||
|
isolation: isolate;
|
||||||
|
}
|
||||||
|
.mx-git-banner-glow {
|
||||||
|
position: absolute;
|
||||||
|
inset: -2px;
|
||||||
|
border-radius: inherit;
|
||||||
|
background: var(--grad-brand);
|
||||||
|
opacity: .25;
|
||||||
|
filter: blur(60px);
|
||||||
|
z-index: -1;
|
||||||
|
pointer-events: none;
|
||||||
|
animation: gitGlow 8s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
@keyframes gitGlow {
|
||||||
|
0% { opacity: .15; transform: translate(-4%, -2%) scale(1); }
|
||||||
|
100% { opacity: .35; transform: translate(4%, 2%) scale(1.05); }
|
||||||
|
}
|
||||||
|
.mx-git-banner-content h2 {
|
||||||
|
font-family: var(--f-display);
|
||||||
|
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 12px 0 16px;
|
||||||
|
}
|
||||||
|
.mx-git-banner-content h2 code {
|
||||||
|
font-family: var(--f-mono);
|
||||||
|
font-size: .8em;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: var(--r-sm);
|
||||||
|
background: rgba(0,0,0,.35);
|
||||||
|
border: 1px solid var(--c-border);
|
||||||
|
color: var(--c-accent);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.mx-git-banner-content p {
|
||||||
|
color: var(--c-text-dim);
|
||||||
|
line-height: 1.7;
|
||||||
|
margin: 0 0 22px;
|
||||||
|
}
|
||||||
|
.mx-git-features {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.mx-git-features span {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 14px;
|
||||||
|
border-radius: var(--r-pill);
|
||||||
|
background: rgba(255,255,255,.04);
|
||||||
|
border: 1px solid var(--c-border);
|
||||||
|
color: var(--c-text-dim);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.mx-git-features span i { color: var(--c-accent); }
|
||||||
|
|
||||||
|
/* Terminal mock */
|
||||||
|
.mx-git-terminal {
|
||||||
|
border-radius: var(--r-md);
|
||||||
|
background: #0a0c18;
|
||||||
|
border: 1px solid var(--c-border-2);
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: var(--f-mono);
|
||||||
|
transform: perspective(900px) rotateY(-4deg) rotateX(2deg);
|
||||||
|
transition: transform .6s var(--ease-out);
|
||||||
|
}
|
||||||
|
.mx-git-banner:hover .mx-git-terminal {
|
||||||
|
transform: perspective(900px) rotateY(-2deg) rotateX(1deg) translateY(-4px);
|
||||||
|
}
|
||||||
|
.mx-git-terminal-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
background: rgba(255,255,255,.04);
|
||||||
|
border-bottom: 1px solid var(--c-border);
|
||||||
|
}
|
||||||
|
.mx-git-terminal-bar > span {
|
||||||
|
width: 11px; height: 11px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #ff5f56;
|
||||||
|
}
|
||||||
|
.mx-git-terminal-bar > span:nth-child(2) { background: #ffbd2e; }
|
||||||
|
.mx-git-terminal-bar > span:nth-child(3) { background: #27c93f; }
|
||||||
|
.mx-git-terminal-title {
|
||||||
|
margin-left: auto;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: none !important;
|
||||||
|
color: var(--c-text-mute);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.mx-git-terminal-body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 18px 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: var(--c-text);
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
.mx-git-terminal-body .t-prompt { color: var(--c-accent); margin-right: 6px; }
|
||||||
|
.mx-git-terminal-body .t-str { color: #d42bff; }
|
||||||
|
.mx-git-terminal-body .t-ok { color: #27c93f; margin-right: 6px; }
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.mx-git-banner {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
padding: 36px 28px;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
.mx-git-terminal {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* ---------- Footer ---------- */
|
/* ---------- Footer ---------- */
|
||||||
.mx-footer {
|
.mx-footer {
|
||||||
padding: 40px 0;
|
padding: 40px 0;
|
||||||
|
|
|
||||||
63
index.html
63
index.html
|
|
@ -48,6 +48,7 @@
|
||||||
<li><a href="#tech">Tech</a></li>
|
<li><a href="#tech">Tech</a></li>
|
||||||
<li><a href="#process">Aanpak</a></li>
|
<li><a href="#process">Aanpak</a></li>
|
||||||
<li><a href="#skills">Skills</a></li>
|
<li><a href="#skills">Skills</a></li>
|
||||||
|
<li><a href="#git">Git</a></li>
|
||||||
<li><a href="#contact">Contact</a></li>
|
<li><a href="#contact">Contact</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
@ -117,6 +118,7 @@
|
||||||
<span class="mx-marquee-item">Docker</span>
|
<span class="mx-marquee-item">Docker</span>
|
||||||
<span class="mx-marquee-item">Bicep</span>
|
<span class="mx-marquee-item">Bicep</span>
|
||||||
<span class="mx-marquee-item">ARM Templates</span>
|
<span class="mx-marquee-item">ARM Templates</span>
|
||||||
|
<span class="mx-marquee-item">Self-hosted Forgejo</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -288,6 +290,55 @@
|
||||||
<div class="mx-tech reveal delay-1"><i class="fa fa-database"></i><span>SQL</span></div>
|
<div class="mx-tech reveal delay-1"><i class="fa fa-database"></i><span>SQL</span></div>
|
||||||
<div class="mx-tech reveal delay-2"><i class="fa fa-file-code-o"></i><span>Bicep</span></div>
|
<div class="mx-tech reveal delay-2"><i class="fa fa-file-code-o"></i><span>Bicep</span></div>
|
||||||
<div class="mx-tech reveal delay-3"><i class="fa fa-cloud-upload"></i><span>REST API</span></div>
|
<div class="mx-tech reveal delay-3"><i class="fa fa-cloud-upload"></i><span>REST API</span></div>
|
||||||
|
<div class="mx-tech reveal"><i class="fa fa-code-fork"></i><span>Forgejo (self-hosted)</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- =============== SELF-HOSTED GIT =============== -->
|
||||||
|
<section class="mx-section" id="git" style="padding-top: 0;">
|
||||||
|
<div class="mx-container">
|
||||||
|
<div class="mx-git-banner reveal">
|
||||||
|
<div class="mx-git-banner-glow" aria-hidden="true"></div>
|
||||||
|
<div class="mx-git-banner-content">
|
||||||
|
<span class="mx-eyebrow">Self-hosted</span>
|
||||||
|
<h2>Onze eigen <span class="grad">Git-server</span> — <code>git.opzeker.it</code></h2>
|
||||||
|
<p>
|
||||||
|
We <em>eten ons eigen hondenvoer</em>: al onze code, Infrastructure as Code en
|
||||||
|
automation-scripts staan op een zelf-gehoste <strong>Forgejo</strong>-instance.
|
||||||
|
Volledig in eigen beheer, met onze eigen CI/CD, backups en monitoring —
|
||||||
|
een voorbeeld van wat we ook voor jou kunnen draaien.
|
||||||
|
</p>
|
||||||
|
<div class="mx-git-features">
|
||||||
|
<span><i class="fa fa-lock" aria-hidden="true"></i> Eigen beheer & data</span>
|
||||||
|
<span><i class="fa fa-shield" aria-hidden="true"></i> Hardened & gemonitord</span>
|
||||||
|
<span><i class="fa fa-cogs" aria-hidden="true"></i> CI/CD ready</span>
|
||||||
|
<span><i class="fa fa-cloud" aria-hidden="true"></i> Hybrid cloud</span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex; gap:14px; flex-wrap:wrap; margin-top: 28px;">
|
||||||
|
<a href="https://git.opzeker.it" target="_blank" rel="noopener" class="mx-btn mx-btn-primary" data-magnetic="0.25">
|
||||||
|
<i class="fa fa-code-fork" aria-hidden="true"></i>
|
||||||
|
Bezoek git.opzeker.it
|
||||||
|
<span class="arrow" aria-hidden="true">→</span>
|
||||||
|
</a>
|
||||||
|
<a href="#contact" class="mx-btn mx-btn-ghost" data-magnetic="0.2">
|
||||||
|
Zelf zo'n setup? Vraag het ons
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mx-git-banner-visual" aria-hidden="true">
|
||||||
|
<div class="mx-git-terminal">
|
||||||
|
<div class="mx-git-terminal-bar">
|
||||||
|
<span></span><span></span><span></span>
|
||||||
|
<span class="mx-git-terminal-title">~ git.opzeker.it</span>
|
||||||
|
</div>
|
||||||
|
<pre class="mx-git-terminal-body"><span class="t-prompt">$</span> git remote add origin <span class="t-str">https://git.opzeker.it/lanta/project.git</span>
|
||||||
|
<span class="t-prompt">$</span> git push -u origin main
|
||||||
|
<span class="t-ok">✔</span> Forgejo · self-hosted
|
||||||
|
<span class="t-ok">✔</span> CI pipeline triggered
|
||||||
|
<span class="t-ok">✔</span> Deployed to Azure ✨</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -424,6 +475,9 @@
|
||||||
<a href="tel:+31611054521" aria-label="Telefoon">
|
<a href="tel:+31611054521" aria-label="Telefoon">
|
||||||
<i class="fa fa-phone" aria-hidden="true"></i>
|
<i class="fa fa-phone" aria-hidden="true"></i>
|
||||||
</a>
|
</a>
|
||||||
|
<a href="https://git.opzeker.it" target="_blank" rel="noopener" aria-label="Git">
|
||||||
|
<i class="fa fa-git" aria-hidden="true"></i>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -450,6 +504,13 @@
|
||||||
<p class="mx-contact-val"><a href="https://www.linkedin.com/in/thijsstobbelaar/" target="_blank" rel="noopener">in/thijsstobbelaar</a></p>
|
<p class="mx-contact-val"><a href="https://www.linkedin.com/in/thijsstobbelaar/" target="_blank" rel="noopener">in/thijsstobbelaar</a></p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="mx-contact-icon"><i class="fa fa-git" aria-hidden="true"></i></span>
|
||||||
|
<div>
|
||||||
|
<p class="mx-contact-meta">Git</p>
|
||||||
|
<p class="mx-contact-val"><a href="https://git.opzeker.it" target="_blank" rel="noopener">git.opzeker.it</a></p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="mx-contact-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
|
<span class="mx-contact-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -466,7 +527,7 @@
|
||||||
<!-- =============== FOOTER =============== -->
|
<!-- =============== FOOTER =============== -->
|
||||||
<footer class="mx-footer">
|
<footer class="mx-footer">
|
||||||
<div class="mx-container">
|
<div class="mx-container">
|
||||||
<p>© <span id="mx-year"></span> Opzeker IT — Cloud · DevOps · Automation · <a href="http://www.opzeker.it">opzeker.it</a></p>
|
<p>© <span id="mx-year"></span> Opzeker IT — Cloud · DevOps · Automation · <a href="http://www.opzeker.it">opzeker.it</a> · <a href="https://git.opzeker.it" target="_blank" rel="noopener">git.opzeker.it</a></p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue