projects.html

<!DOCTYPE html>
<html lang="en" data-theme="dark">

<head>
	<meta charset="UTF-8" />
	<title>Projects — Rob Williams</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description"
		content="Rob Williams — projects built in public. A hand-coded portfolio site live now, with a Python network scanner, automation utilities, and an Active Directory lab in the pipeline." />

	<link rel="stylesheet" href="style.css" />
	<!-- Preconnect: opens the CDN connection while the HTML is still parsing -->
	<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
		integrity="sha384-PPIZEGYM1v8zp5Py7UjFb79S58UeqCL9pYVnVPURKEqvioPROaVAJKKLzvH2rDnI"
		crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
	<a class="skip-link" href="#main">Skip to main content</a>
	<header class="site-header">
		<a href="index.html" class="logo">
			RW <span class="logo-dot"></span>
		</a>

		<div class="header-controls">
			<div class="theme-switcher">
				<span class="theme-label">Theme</span>
				<button id="theme-toggle" class="theme-toggle" type="button" aria-label="Toggle colour theme">
					<span class="theme-icon" aria-hidden="true">🌙</span>
				</button>
			</div>

			<button class="menu-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"
				aria-controls="site-nav">
				<span class="menu-toggle-bar"></span>
				<span class="menu-toggle-bar"></span>
				<span class="menu-toggle-bar"></span>
			</button>

			<nav class="main-nav" id="site-nav">
				<a href="index.html#about">About</a>
				<a href="index.html#overview">Overview</a>
				<a href="index.html#contact">Contact</a>
			</nav>
		</div>
	</header>

	<main id="main">
		<section class="page-header">
			<p class="eyebrow"><a href="index.html#overview">← Back to Overview</a></p>
			<h1>Projects</h1>
		</section>

		<section class="section">
			<p>
				Everything here follows one rule carried over from 24 years of
				engineering: don't claim what you can't show. One project is live
				and public; the rest are queued behind the CPSA exam on 25 July —
				study holds priority until then.
			</p>
		</section>

		<section class="section">
			<h2>Live</h2>
			<ul class="quals-list">
				<li>
					<strong>This site</strong> — a hand-coded portfolio with a
					deliberate constraint: a fresh clone must run from
					<code>index.html</code> with zero commands. No framework, no build
					step. Vanilla HTML, CSS, and JavaScript; light/dark theming via CSS
					custom properties; a Chart.js skills radar with keyboard-accessible
					mode switching; WCAG AA contrast in both themes; and
					integrity-pinned CDN dependencies — supply-chain hygiene starts at
					home. The full working — mistakes, fixes, commit history — is
					public on
					<a href="https://github.com/Rob-JW/portfolio" target="_blank"
						rel="noreferrer">GitHub</a>.
				</li>
			</ul>
		</section>

		<section class="section">
			<h2>In the pipeline</h2>
			<p>
				Planned builds, in intended order. Each one lands here with a
				write-up — purpose, tooling, and what building it taught me —
				once there is real code to show.
			</p>
			<ul class="quals-list">
				<li>
					<strong>Network scanner (Python)</strong> — planned. A socket-level
					TCP port scanner built from first principles before reaching for
					Nmap: understanding what the tool does beats memorising its flags.
				</li>
				<li>
					<strong>Python study utilities</strong> — planned. Small automation
					scripts from my daily study workflow — question-bank drills and
					revision tooling — cleaned up and published.
				</li>
				<li>
					<strong>Active Directory lab</strong> — planned. A small
					domain environment for attack and defence practice, feeding the
					write-ups page as labs are completed.
				</li>
			</ul>
		</section>

		<section id="contact" class="section">
			<h2>Contact</h2>
			<ul class="contact-list contact-icons">
				<li>
					<a href="https://linkedin.com/in/rob-jw" target="_blank" rel="noreferrer" class="contact-icon-link"
						aria-label="LinkedIn profile">
						<i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
					</a>
				</li>
				<li>
					<a href="https://github.com/Rob-JW" target="_blank" rel="noreferrer" class="contact-icon-link"
						aria-label="GitHub profile">
						<i class="fa-brands fa-github" aria-hidden="true"></i>
					</a>
				</li>
				<li>
					<a href="https://robwilliams.link/" target="_blank" rel="noreferrer" class="contact-icon-link"
						aria-label="Personal site">
						<i class="fa-solid fa-globe" aria-hidden="true"></i>
					</a>
				</li>
				<li>
					<a href="mailto:williams5886@gmail.com" class="contact-icon-link" aria-label="Send email">
						<i class="fa-solid fa-envelope" aria-hidden="true"></i>
					</a>
				</li>
			</ul>
		</section>
	</main>

	<footer class="site-footer">
		<span>© <span id="year"></span> Rob Williams</span>
		<span class="footer-dot">Built with pixels &amp; packets.</span>
	</footer>

	<script src="script.js"></script>
</body>

</html>