ertuncozbay.dev/blog/index.html

<!DOCTYPE html>
<html lang="en" data-theme="colorful">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog &amp; Build Notes — Ertunç Özbay</title>
  <meta name="description" content="Static technical blog and learning notebook by Ertunç Özbay covering project build logs, embedded systems, circuit experiments, and C/Rust programming.">
  <link rel="icon" type="image/svg+xml" href="../assets/images/favicon.svg">
  <link rel="stylesheet" href="../assets/css/style.css?v=2">
</head>
<body>
  <a class="skip-link" href="#main-content">Skip to main content</a>

  <header class="site-header">
    <div class="container header-inner">
      <a class="site-brand" href="../index.html">
        <span class="brand-mark" aria-hidden="true">EÖ</span>
        <span>
          Ertunç Özbay
          <span class="brand-subtitle">embedded // hardware // open-source</span>
        </span>
      </a>

      <div class="header-controls">
        <div class="theme-switcher" role="group" aria-label="Select UI Theme">
          <button type="button" class="theme-btn" data-set-theme="colorful" aria-pressed="true">🎨 Colorful</button>
          <button type="button" class="theme-btn" data-set-theme="neon" aria-pressed="false">🌈 Neon</button>
          <button type="button" class="theme-btn" data-set-theme="blueprint" aria-pressed="false">📐 Blueprint</button>
        </div>

        <button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-controls="primary-navigation">
          <span aria-hidden="true">☰</span>
          <span data-nav-label>Menu</span>
        </button>

        <nav id="primary-navigation" class="site-nav" data-site-nav aria-label="Main navigation">
          <ul class="nav-list">
              <li><a class="nav-link" href="../index.html">Home</a></li>
              <li><a class="nav-link" href="../about.html">About</a></li>
              <li><a class="nav-link" href="../projects/index.html">Projects</a></li>
              <li><a class="nav-link" href="../blog/index.html" aria-current="page">Blog</a></li>
              <li><a class="nav-link" href="../lab.html">Lab</a></li>
              <li><a class="nav-link" href="../contact.html">Contact</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <main id="main-content">
    <div class="container">
      <section class="workshop-hero" aria-labelledby="blog-heading">
        <span class="workshop-eyebrow">📓 TECHNICAL NOTEBOOK // STATIC BLOG</span>
        <h1 id="blog-heading"><span class="gradient-title">Blog &amp; Build Notes</span></h1>
        <p class="hero-lead">
          Where I document hardware build logs, ESP-IDF firmware architecture, circuit debugging stories, and honest reflections on what worked and what failed.
        </p>
      </section>

      <section class="section-block" aria-labelledby="blog-entries-heading">
        <div class="section-header">
          <div>
            <span class="section-label">Browse by Topic</span>
            <h2 id="blog-entries-heading">Notebook Entries</h2>
          </div>
          <p id="blog-filter-status" aria-live="polite" style="margin:0; font-family:var(--font-mono); font-size:0.85rem;">
            Showing 2 entries.
          </p>
        </div>

        <div class="filter-bar" role="group" aria-label="Filter blog posts by category">
          <button type="button" class="filter-btn" data-blog-filter="all" aria-pressed="true">All Entries</button>
          <button type="button" class="filter-btn" data-blog-filter="reflections" aria-pressed="false">Learning Reflections</button>
          <button type="button" class="filter-btn" data-blog-filter="build-logs" aria-pressed="false">Build Logs</button>
          <button type="button" class="filter-btn" data-blog-filter="template" aria-pressed="false">Templates &amp; Drafts</button>
        </div>

        <div class="card-grid-2">
          <!-- Entry 1 -->
          <article class="card card-amber" data-blog-category="reflections,build-logs">
            <div class="card-top">
              <div class="card-meta">
                <span class="badge badge-draft">Starter Note</span>
                <time datetime="2026-10-14">October 14, 2026</time>
                <span>• 3 min read</span>
              </div>
              <h3><a href="welcome-to-my-workshop-note.html">Why I Built This Personal Workshop &amp; Learning Notebook</a></h3>
              <p>
                An introductory note explaining why I designed my site as an open engineering studio for hardware, embedded C firmware, and project build logs rather than a corporate résumé.
              </p>
              <ul class="tag-list" aria-label="Tags">
                <li><span class="tag tag-esp">workshop</span></li>
                <li><span class="tag tag-c">hardware-software</span></li>
                <li><span class="tag tag-hw">learning-in-public</span></li>
              </ul>
            </div>
            <div class="card-actions">
              <a class="btn btn-primary" href="welcome-to-my-workshop-note.html">Read Starter Note</a>
            </div>
          </article>

          <!-- Entry 2 -->
          <article class="card card-synth" data-blog-category="template,build-logs">
            <div class="card-top">
              <div class="card-meta">
                <span class="badge badge-experimental">Template • Draft</span>
                <time datetime="2026-10-14">Template File</time>
                <span>• 2 min read</span>
              </div>
              <h3><a href="post-template.html">[Template] Project Build Log &amp; Technical Note Template</a></h3>
              <p>
                A reusable static HTML article template containing sections for hardware schematics, firmware architecture, what worked, what failed, and related project links.
              </p>
              <ul class="tag-list" aria-label="Tags">
                <li><span class="tag tag-python">template</span></li>
                <li><span class="tag tag-synth">build-log</span></li>
              </ul>
            </div>
            <div class="card-actions">
              <a class="btn btn-secondary" href="post-template.html">Open Post Template</a>
            </div>
          </article>
        </div>
      </section>

    </div>
  </main>

  <footer class="site-footer">
    <div class="container footer-inner">
      <div>
        <strong>Ertunç Özbay</strong> — Electrical &amp; Electronics Engineering Student • <a href="mailto:ertunc.ozbay@outlook.com">ertunc.ozbay@outlook.com</a>
      </div>
      <ul class="footer-links" aria-label="Footer links">
        <li><a href="../projects/index.html">Projects</a></li>
        <li><a href="../blog/index.html">Blog</a></li>
        <li><a href="../lab.html">Lab</a></li>
        <li><a href="../contact.html">Contact</a></li>
        <li><a href="https://git.ertuncozbay.dev/ertunc-ozbay" rel="noopener noreferrer">Git Server</a></li>
        <li><a href="https://www.linkedin.com/in/ertunc-ozbay" rel="noopener noreferrer">LinkedIn</a></li>
      </ul>
    </div>
  </footer>

  <script src="../assets/js/main.js?v=2"></script>
</body>
</html>