<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Portfolio</title>
    <link rel="icon" href="/images/favicon.ico" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="shell">
      <header class="hero">
        <p class="eyebrow">Darren Osborne — Software Engineer Portfolio</p>
        <h1>Personal projects, real engineering.</h1>
        <p class="subtitle">
          A curated selection of independent full-stack and systems projects with live deployments,
          source code, and concise technical context. Professional work available upon request.
        </p>
      </header>

      <a class="about-cta" href="about">
        <span class="about-cta-title">Darren Osborne</span>
        <span class="about-cta-role">
          Software Engineer building full-stack and systems-focused applications.
        </span>
        <span class="about-cta-links">GitHub · LinkedIn · Resume</span>
      </a>

      <section class="projects">
        <a class="project-card" href="project-sudokuscope">
          <div class="thumb thumb-sudoku" aria-hidden="true">
            <img src="images/sudokuscope-1.jpg" alt="SudokuScope preview" loading="lazy" />
            <span>Solver Suite</span>
          </div>
          <div class="card-body">
            <h2>SudokuScope</h2>
            <p>
              Multi-module Sudoku analysis platform with a fast solver core, a JavaFX desktop client,
              and a Spring Boot API for browser use.
            </p>
            <div class="card-meta">
              <span>Java, Spring Boot, JavaFX</span>
              <span class="card-cta">View details -&gt;</span>
            </div>
          </div>
        </a>

        <a class="project-card" href="project-character-guesser">
          <div class="thumb thumb-guess" aria-hidden="true">
            <img src="images/character-guesser-1.jpg" alt="CharacterGuesser preview" loading="lazy" />
            <span>ML Canvas</span>
          </div>
          <div class="card-body">
            <h2>CharacterGuesser</h2>
            <p>
              Browser-based handwriting game powered by TensorFlow.js, with live predictions and
              multiple trained models.
            </p>
            <div class="card-meta">
              <span>HTML, CSS, JS, TensorFlow.js</span>
              <span class="card-cta">View details -&gt;</span>
            </div>
          </div>
        </a>

        <a class="project-card" href="project-orderbooklive">
          <div class="thumb thumb-orderbook" aria-hidden="true">
            <img src="images/orderbooklive-1.jpg" alt="OrderbookLive preview" loading="lazy" />
            <span>Live Market</span>
          </div>
          <div class="card-body">
            <h2>OrderbookLive</h2>
            <p>
              Real-time C++ matching engine with a tactile web UI for order flow, trades, and market
              events.
            </p>
            <div class="card-meta">
              <span>C++17, CMake, HTTP UI</span>
              <span class="card-cta">View details -&gt;</span>
            </div>
          </div>
        </a>
      </section>

      <section class="note">
        <h3>How to explore</h3>
        <p>
          Open any project to see a clear launch button plus an in-depth, reader-friendly
          explanation of what is happening behind the scenes.
        </p>
      </section>
    </main>
  </body>
</html>
