273 lines
15 KiB
HTML
273 lines
15 KiB
HTML
<!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>
|