boris/ntbx-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
George Wilkinson
2025-09-17 16:37:05 +00:00
commit 5d8afe0163
6 changed files with 272 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
assets/ntbx_banner_mainpage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 485 KiB

BIN
assets/ntbx_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 922 KiB

BIN
assets/portfolio/chassis.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 346 KiB

BIN
assets/portfolio/thumbs/chassis.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

272
index.html Normal file
View File

@@ -0,0 +1,272 @@
<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="assets/favicon.ico"/>
<title>notBoris Extended — Landing Page</title>
<!-- Bootstrap 5.3 -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<!-- Bootstrap Icons -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
/>
<style>
/* ——— Custom tweaks (kept light, Bootstrap-first) ——— */
:root { --ntbx-gradient: linear-gradient(135deg, #7c4dff 0%, #00e5ff 100%); }
.rounded-4 { border-radius: 1rem !important; }
.rounded-5 { border-radius: 1.5rem !important; }
.glass {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(8px);
}
.hero-bg { background-image: var(--ntbx-gradient); }
.avatar {
width: 112px; height: 112px;
border-radius: 50%;
object-fit: cover;
border: 4px solid rgba(255,255,255,0.5);
}
.chip { border-radius: 999px; }
.section-title small { opacity: .7; font-weight: 500; }
a.card { text-decoration: none; }
.stretched { position: relative; }
.stretched .stretched-link { position: static; }
</style>
</head>
<body class="bg-body text-body">
<!-- Nav -->
<nav class="navbar navbar-expand-lg fixed-top glass rounded-4 mx-3 mt-3 px-3 py-2">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center gap-2" href="#top">
<span class="d-inline-flex align-items-center justify-content-center bg-body-secondary rounded-circle" style="width:36px;height:36px;">
<img style="width: 100%;" src="assets/ntbx_icon.png" alt="nb"/>
</span>
<span class="fw-bold">notBoris Extended</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#skills">Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#work">Work</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
<li class="nav-item ms-lg-2">
<button id="themeToggle" class="btn btn-outline-secondary chip px-3"><i class="bi bi-sun-fill me-2"></i><span>Theme</span></button>
</li>
</ul>
</div>
</div>
</nav>
<main id="top" class="pt-5">
<!-- Hero -->
<section class="container mt-5 pt-5">
<div class="p-4 p-md-5 rounded-5 hero-bg text-white shadow-lg">
<div class="row align-items-center g-4">
<div class="col-md-8">
<h1 class="display-5 fw-bold">notBoris Extended - About Me</h1>
<p class="lead mb-4">Welcome to ntBX!</p>
<div class="d-flex flex-wrap gap-2">
<a href="#about" class="btn btn-light chip px-4 py-2 fw-semibold">Learn more</a>
<a href="#work" class="btn btn-outline-light chip px-4 py-2">See work</a>
</div>
</div>
<div class="col-md-4 text-md-end text-center">
<img class="avatar shadow" src="https://picsum.photos/200" alt="Your avatar" />
<div class="mt-3 small opacity-75"></div>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="container mt-5">
<div class="row g-4">
<div class="col-lg-8">
<div class="card glass rounded-5 shadow-sm border-0 h-100">
<div class="card-body p-4 p-md-5">
<div class="section-title mb-3"><h2 class="h3 mb-1">Who am I?</h2></div>
<p class="fs-5 mb-3">I’m <strong>George</strong>! A Computer Science / Network Security Student based in the United Kingdom. I deploy applications and internet services with a focus on convenience, security and passion.</p>
<hr/>
<p class="mb-0">Using products such as Proxmox, Docker and Ansible, I deploy virtual private servers to host applications on the internet.
<br/><br/>With <a href="https://scaleblade.com/" target="_blank" rel="noreferrer" class="link-light">Scaleblade</a> as a Sponsoring LIR, I am a registered internet service provider, check out my page at <a href="https://bgp.tools/as/213026" target="_blank" rel="noreferrer" class="link-light">bgp.tools</a>!.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card glass rounded-5 shadow-sm border-0 h-100">
<div class="card-body p-4 p-md-5">
<div class="section-title mb-3"><h3 class="h5 mb-1">Useful Info</h3></div>
<ul class="list-unstyled mb-0">
<li class="mb-3 d-flex align-items-start gap-3"><i class="bi bi-geo-alt fs-4"></i><div><div class="fw-semibold">Location</div><div class="opacity-75">Manchester, England</div></div></li>
<li class="mb-3 d-flex align-items-start gap-3"><i class="bi bi-briefcase fs-4"></i><div><div class="fw-semibold">Current Role</div><div class="opacity-75">Student at Salford University</div></div></li>
<li class="mb-3 d-flex align-items-start gap-3"><i class="bi bi-stars fs-4"></i><div><div class="fw-semibold">ASN</div><a href="https://bgp.tools/as/213026" target="_blank" rel="noreferrer" class="link-light link-underline-opacity-0 me-2 badge bg-primary text-emphasis chip"><div class="opacity-75">AS213026</div></a></div></li>
<li class="d-flex align-items-start gap-3"><i class="bi bi-link-45deg fs-4"></i><div><div class="fw-semibold">Links</div><div class="opacity-75"><a href="https://matrix.to/#/@boris:matrix.ntbx.io" class="link-light link-underline-opacity-0 me-2 badge bg-success-subtle text-dark-emphasis chip">Matrix</a><a href="https://git.ntbx.io" class="link-light link-underline-opacity-0 me-2 badge bg-primary-subtle text-dark-emphasis chip">ntBX Git</a><a href="https://git.ntbx.io" class="link-light link-underline-opacity-0 me-2 badge bg-warning-subtle text-dark-emphasis chip">Github</a></div></div></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Skills -->
<section id="skills" class="container mt-5">
<div class="card glass rounded-5 shadow-sm border-0">
<div class="card-body p-4 p-md-5">
<div class="d-flex justify-content-between align-items-end flex-wrap gap-3 mb-3">
<div class="section-title"><h2 class="h3 mb-1">Skills</h2></div>
</div>
<div class="row g-2 g-md-3">
<!-- Duplicate/modify chips as needed -->
<div class="col-auto"><span class="badge text-bg-secondary chip px-3 py-2">Docker</span></div>
<div class="col-auto"><span class="badge text-bg-secondary chip px-3 py-2">Proxmox</span></div>
<div class="col-auto"><span class="badge text-bg-secondary chip px-3 py-2">Ansible</span></div>
<div class="col-auto"><span class="badge text-bg-secondary chip px-3 py-2">Wireguard</span></div>
<div class="col-auto"><span class="badge text-bg-secondary chip px-3 py-2">Traefik</span></div>
<div class="col-auto"><span class="badge text-bg-secondary chip px-3 py-2">NGINX</span></div>
<div class="col-auto"><span class="badge text-bg-secondary chip px-3 py-2">BIRD / FRR</span></div>
<div class="col-auto"><span class="badge text-bg-secondary chip px-3 py-2">Linux/GNU</span></div>
<div class="col-auto"><span class="badge text-bg-secondary chip px-3 py-2">Windows NT</span></div>
<div class="col-auto"><span class="badge text-bg-secondary chip px-3 py-2">FreeBSD</span></div>
<div class="col-auto"><span class="badge text-bg-secondary chip px-3 py-2">LAMP Stack</span></div>
</div>
</div>
</div>
</section>
<!-- Work / Portfolio Preview -->
<section id="work" class="container mt-5">
<div class="d-flex justify-content-between align-items-end flex-wrap gap-3 mb-3">
<div class="section-title"><h2 class="h3 mb-1">Highlighted Work</h2></div>
<a href="#" class="btn btn-outline-secondary chip px-3 disabled" aria-disabled="true"><i class="bi bi-grid-3x3-gap me-2"></i>Full portfolio (soon)</a>
</div>
<div class="row g-4">
<!-- Project Card 1 -->
<div class="col-md-6 col-lg-4">
<a class="card glass rounded-5 shadow-sm border-0 overflow-hidden stretched" href="#" target="_blank" rel="noreferrer">
<img src="assets/portfolio/thumbs/chassis.jpg" class="card-img-top" alt="Supermicro Project" />
<div class="card-body">
<h3 class="h5 mb-1">Helga</h3>
<p class="opacity-75 mb-2">Custom built low power Proxmox host on AM4</p>
<span class="badge text-bg-dark chip">Virtualisation</span>
</div>
<span class="stretched-link"></span>
</a>
</div>
<!-- Project Card 2 -->
<div class="col-md-6 col-lg-4">
<a class="card glass rounded-5 shadow-sm border-0 overflow-hidden stretched" href="#" target="_blank" rel="noreferrer">
<img src="https://picsum.photos/600/400?random=2" class="card-img-top" alt="Project cover" />
<div class="card-body">
<h3 class="h5 mb-1">Title</h3>
<p class="opacity-75 mb-2">Content</p>
<span class="badge text-bg-dark chip">Tag</span>
</div>
<span class="stretched-link"></span>
</a>
</div>
<!-- Project Card 3 -->
<div class="col-md-6 col-lg-4">
<a class="card glass rounded-5 shadow-sm border-0 overflow-hidden stretched" href="#" target="_blank" rel="noreferrer">
<img src="https://picsum.photos/600/400?random=3" class="card-img-top" alt="Project cover" />
<div class="card-body">
<h3 class="h5 mb-1">Title</h3>
<p class="opacity-75 mb-2">Content</p>
<span class="badge text-bg-dark chip">Tag</span>
</div>
<span class="stretched-link"></span>
</a>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="container mt-5 mb-5">
<div class="row g-4">
<div class="col-lg-7">
<div class="card glass rounded-5 shadow-sm border-0 h-100">
<div class="card-body p-4 p-md-5">
<div class="section-title mb-3"><h2 class="h3 mb-1">Get in touch</h2></div>
<p class="mb-4">Prefer email? Reach me directly at <a href="mailto:contact@ntbx.io" class="link-light">contact@ntbx.io</a>. Or use the form below.</p>
<form class="row g-3" onsubmit="event.preventDefault(); alert(`I haven't actually set this up yet, please contact via email`);">
<div class="col-md-6">
<label class="form-label">Name</label>
<input type="text" class="form-control rounded-4" placeholder="Your Name" required />
</div>
<div class="col-md-6">
<label class="form-label">Email</label>
<input type="email" class="form-control rounded-4" placeholder="email@domain.xyz" required />
</div>
<div class="col-12">
<label class="form-label">Message</label>
<textarea class="form-control rounded-4" rows="4" placeholder="What would you like to build?" required></textarea>
</div>
<div class="col-12 d-flex gap-2">
<button class="btn btn-primary chip px-4" type="submit"><i class="bi bi-send me-2"></i>Send</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="card glass rounded-5 shadow-sm border-0 h-100">
<div class="card-body p-4 p-md-5">
<div class="section-title mb-3"><h3 class="h5 mb-1">Connect with me!</h3></div>
<div class="d-grid gap-2">
<a class="btn btn-outline-light chip py-2" href="https://matrix.to/#/@boris:matrix.ntbx.io" target="_blank" rel="noreferrer"><i class="bi bi-chat-fill me-2"></i>Matrix</a>
<a class="btn btn-outline-light chip py-2" href="www.linkedin.com/in/gwilkinson-as213026" target="_blank" rel="noreferrer"><i class="bi bi-linkedin me-2"></i>LinkedIn</a>
<a class="btn btn-outline-light chip py-2" href="https://github.com/not-Boris" target="_blank" rel="noreferrer"><i class="bi bi-github me-2"></i>GitHub</a>
<a class="btn btn-outline-light chip py-2" href="https://git.ntbx.io/boris" target="_blank" rel="noreferrer"><i class="bi bi-git me-2"></i>ntBX Gitea</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="container mb-5">
<div class="glass rounded-5 p-4 text-center small">
<div class="mb-1">© <span id="year"></span> notBoris Extended — ntbx</div>
<div class="opacity-75">Built with <a href="https://getbootstrap.com/" target="_blank" rel="noreferrer" class="link-light">Bootstrap</a> and <a href="https://en.wikipedia.org/wiki/Caffeine" target="_blank" rel="noreferrer" class="link-light">Caffeine</a>.</div>
</div>
</footer>
</main>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script>
// Dynamic year
document.getElementById('year').textContent = new Date().getFullYear();
// Theme toggle (uses Bootstrap v5.3 data-bs-theme)
const html = document.documentElement;
const toggle = document.getElementById('themeToggle');
const saved = localStorage.getItem('ntbx-theme');
if (saved) html.setAttribute('data-bs-theme', saved);
toggle.addEventListener('click', () => {
const cur = html.getAttribute('data-bs-theme') || 'light';
const next = cur === 'light' ? 'dark' : 'light';
html.setAttribute('data-bs-theme', next);
localStorage.setItem('ntbx-theme', next);
toggle.querySelector('i').className = next === 'light' ? 'bi bi-moon-stars-fill me-2' : 'bi bi-sun-fill me-2';
});
</script>
</body>
</html>