From 463e128f606ff44c2def5bd911c71dcde82e235e Mon Sep 17 00:00:00 2001
From: ertunc-ozbay <ertunc.ozbay@outlook.com>
Date: Thu, 15 Oct 2026 00:42:24 +0300
Subject: [PATCH] Deploying the site files

---
 CNAME                            |   1 +
 README.md                        | 113 +++++
 about.html                       | 179 ++++++++
 contact.html                     | 129 ++++++
 favicon.svg                      |   8 +
 hardware-software-bridge.svg     |  26 ++
 index.html                       | 180 ++++++++
 lab.html                         | 230 ++++++++++
 main.js                          |  73 +++
 midi-breadboard-instrument.html  | 172 +++++++
 midi-breadboard-layout.svg       |  59 +++
 multi-functional-controller.html | 146 ++++++
 post-template.html               | 146 ++++++
 rc-autonomous-vehicle.html       | 142 ++++++
 style.css                        | 766 +++++++++++++++++++++++++++++++
 welcome-to-my-workshop-note.html | 121 +++++
 16 files changed, 2491 insertions(+)
 create mode 100644 CNAME
 create mode 100644 README.md
 create mode 100644 about.html
 create mode 100644 contact.html
 create mode 100644 favicon.svg
 create mode 100644 hardware-software-bridge.svg
 create mode 100644 index.html
 create mode 100644 lab.html
 create mode 100644 main.js
 create mode 100644 midi-breadboard-instrument.html
 create mode 100644 midi-breadboard-layout.svg
 create mode 100644 multi-functional-controller.html
 create mode 100644 post-template.html
 create mode 100644 rc-autonomous-vehicle.html
 create mode 100644 style.css
 create mode 100644 welcome-to-my-workshop-note.html

diff --git a/CNAME b/CNAME
new file mode 100644
index 0000000..26f6787
--- /dev/null
+++ b/CNAME
@@ -0,0 +1 @@
+ertuncozbay.dev
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..dcfefc1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,113 @@
+# Ertunç Özbay — Personal Website, Workshop & Technical Notebook
+
+Live website: **https://ertuncozbay.dev**  
+Repository: **https://github.com/ertunc-ozbay/ertuncozbay.github.io** (Branch: `main`)
+
+Welcome! This repository contains the source files for my personal website, engineering project showcase, blog, and lab notebook.
+
+The site is intentionally built with **plain HTML, CSS, and JavaScript**—with no framework, no build step, no database, and no external backend—so it remains free, fast, and easy to understand and maintain as a beginner.
+
+---
+
+## 1. What GitHub Pages Does (and How Changes Reach the Live Website)
+
+- **GitHub Pages** is a free static web hosting service provided by GitHub. It takes the HTML, CSS, JavaScript, and image files stored on the `main` branch of this repository and serves them directly to visitors at **https://ertuncozbay.dev**.
+- **How changes go live:** Whenever you edit a file on GitHub (or push a commit to the `main` branch), GitHub Pages automatically updates the live website within about **1 to 2 minutes**. You do not need to run any build command or deploy script.
+
+---
+
+## 2. Which File Must NOT Be Changed (`CNAME`)
+
+- **`CNAME`** (located in the root folder `/CNAME`) contains a single line:
+  ```text
+  ertuncozbay.dev
+  ```
+- **Do not delete, rename, or modify `CNAME`.** GitHub Pages uses this exact file to connect this repository to the custom domain `https://ertuncozbay.dev`.
+
+---
+
+## 3. Repository Structure & Where Every Page Lives
+
+```text
+/
+├── CNAME                                      # Custom domain file (DO NOT MODIFY)
+├── README.md                                  # This beginner maintenance guide
+├── index.html                                 # Homepage (Personal workshop intro)
+├── about.html                                 # About page (Philosophy, car/AI analogy, university)
+├── contact.html                               # Contact & collaboration page
+├── lab.html                                   # Lab & experiment notebook page
+├── assets/
+│   ├── css/
+│   │   └── style.css                          # All visual styling (dark metallic workshop theme)
+│   ├── js/
+│   │   └── main.js                            # Mobile menu toggle & blog category filter
+│   └── images/
+│       ├── favicon.svg                        # Browser tab icon
+│       ├── hardware-software-bridge.svg       # Diagram on the About page
+│       └── midi-breadboard-layout.svg         # Diagram on the MIDI project page
+├── projects/
+│   ├── index.html                             # Projects overview page (all project cards)
+│   ├── multi-functional-controller.html       # Project 1 detail page
+│   ├── rc-autonomous-vehicle.html             # Project 2 detail page
+│   └── midi-breadboard-instrument.html        # Project 3 detail page
+└── blog/
+    ├── index.html                             # Blog index page (lists all blog posts)
+    ├── welcome-to-my-workshop-note.html       # Starter / example note
+    └── post-template.html                     # Copy this file to write a new blog post!
+```
+
+- **Where the Homepage is:** `index.html` in the main (root) folder.
+- **Where the About page is:** `about.html` in the main (root) folder.
+- **Where CSS is stored:** `assets/css/style.css`. Change colors, fonts, spacing, or card styles here, and every page updates automatically.
+- **Where JavaScript is stored:** `assets/js/main.js`. Controls the mobile menu button (`Menu` / `Close`) and the category filter buttons on the Blog page.
+
+---
+
+## 4. How to Edit Project Cards & Create a New Project Detail Page
+
+### Editing existing project cards
+1. Open **`projects/index.html`**.
+2. Each project is inside an `<article class="card">...</article>` block.
+3. You can update the status badge (`In progress`), description, confirmed component tags (`<ul class="tag-list">`), **"What I am currently learning"**, or **"Next step"** text directly inside that card.
+4. If you also want the summary on the homepage to match, update the matching card in **`index.html`**.
+
+### Creating a new project detail page
+1. Go into the **`projects/`** folder.
+2. Copy one of the existing pages (for example, `projects/multi-functional-controller.html`) and rename the copy to your new project name using lowercase letters and hyphens (for example, `projects/new-circuit-test.html`).
+3. Open your new file and edit the `<title>`, `<h1>` heading, overview paragraphs, and table rows.
+4. Open **`projects/index.html`**, copy one `<article class="card">...</article>` block, and change its link (`href="new-circuit-test.html"`) and text to point to your new page.
+
+---
+
+## 5. How to Create a Blog Post (Step-by-Step)
+
+1. Go into the **`blog/`** folder and make a copy of **`blog/post-template.html`**.
+2. Rename your copied file using lowercase letters and hyphens, for example:
+   `blog/midi-script-first-test.html`
+3. Open your new HTML file and edit:
+   - `<title>` in the `<head>`
+   - The badge, `<time>`, Category, and Reading time inside `<div class="card-meta">`
+   - The article title inside `<h1>`
+   - The summary inside `<p class="hero-lead">`
+   - The tags inside `<ul class="tag-list">`
+   - The main article sections (`<h2>` and `<p>`)
+4. Remove the amber "Template Notice" box once your real article is ready.
+5. Open **`blog/index.html`** and add a new `<article class="card" data-blog-category="build-logs">` block at the top of `<div class="card-grid-2">` linking to your new file (`href="midi-script-first-test.html"`).
+
+---
+
+## 6. How to Update Navigation
+
+The top navigation bar (`Home`, `About`, `Projects`, `Blog`, `Lab`, `Contact`) sits inside `<header class="site-header">` near the top of each HTML file.
+
+- **Important relative path rule:**
+  - In root files (`index.html`, `about.html`, `lab.html`, `contact.html`), links use direct paths like `href="about.html"` and `href="projects/index.html"`.
+  - In subfolder files (`projects/*.html` and `blog/*.html`), links to the root folder start with `../` (meaning "go up one folder"), such as `href="../index.html"`, `href="../about.html"`, and `href="../assets/css/style.css"`.
+- The current page link has `aria-current="page"` so visitors and screen readers can see which page is active.
+
+---
+
+## 7. Static Architecture & Future Phases
+
+- **Currently 100% Static (Phase 1):** This website does not use a backend server, database, user login system, or commenting service right now. Everything runs directly from static files on GitHub Pages.
+- **Postponed for Future Phases:** User accounts, blog/project comments, and a small personal community/forum are intentionally postponed until later phases so the foundation stays simple, reliable, and easy to maintain first.
diff --git a/about.html b/about.html
new file mode 100644
index 0000000..df24531
--- /dev/null
+++ b/about.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>About — Ertunç Özbay</title>
+  <meta name="description" content="About Ertunç Özbay: Electrical and Electronics Engineering student at Bülent Ecevit University, exploring hardware, software, embedded systems, C, and reverse engineering.">
+  <link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
+  <link rel="stylesheet" href="assets/css/style.css">
+</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">workshop // notebook // lab</span>
+        </span>
+      </a>
+
+      <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" aria-current="page">About</a></li>
+            <li><a class="nav-link" href="projects/index.html">Projects</a></li>
+            <li><a class="nav-link" href="blog/index.html">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>
+  </header>
+
+  <main id="main-content">
+    <div class="container">
+      <section class="workshop-hero" aria-labelledby="about-heading">
+        <span class="workshop-eyebrow">ABOUT // IDENTITY &amp; APPROACH</span>
+        <h1 id="about-heading">About Me &amp; This Workshop</h1>
+        <p class="hero-lead">
+          I am a student who enjoys building things, understanding systems, and learning by going deeper than the first explanation.
+        </p>
+      </section>
+
+      <section class="section-block reading-width" aria-labelledby="story-heading">
+        <span class="section-label">01 // Who I Am</span>
+        <h2 id="story-heading">Learning by Building and Investigating</h2>
+        <p>
+          My interests span both hardware and software. I do not want to limit myself to only one layer of a system. I want to understand how physical components, electronics, firmware, and higher-level software work together.
+        </p>
+        <p>
+          I am currently studying embedded systems, circuit analysis, C programming, and technical reporting. In the future, I want to study Assembly and continue developing my programming skills with C++, Python, Rust, and other technologies.
+        </p>
+        <p>
+          I love open source, freedom, and making things that are useful, unusual, or simply fun. I am using this website to document my progress, express myself, share what I build, and find people who enjoy learning and creating together.
+        </p>
+        <p>
+          I am currently studying Electrical and Electronics Engineering at Bülent Ecevit University. I am still exploring my exact future specialization, but I am especially interested in areas where hardware, software, human judgment, and practical engineering meet.
+        </p>
+      </section>
+
+      <figure class="schematic-frame" aria-label="Hardware and software layers diagram">
+        <img src="assets/images/hardware-software-bridge.svg" alt="Diagram showing three connected layers: Layer 1 Circuits and Electronics, Layer 2 Embedded and Low-Level C Programming, and Layer 3 Tools and Human Judgment." width="760" height="220">
+        <figcaption class="schematic-caption">
+          Connecting physical circuits, low-level code, and high-level software tools rather than treating them as separate worlds.
+        </figcaption>
+      </figure>
+
+      <section class="section-block reading-width" aria-labelledby="philosophy-heading">
+        <span class="section-label">02 // Hardware, Software &amp; AI Philosophy</span>
+        <h2 id="philosophy-heading">Why I Want to Understand Both Sides of a System</h2>
+        <div class="callout-box amber">
+          <span class="callout-title">Core Principle</span>
+          <p style="margin-bottom:0;">
+            “I want to understand both hardware and software because I do not want to depend completely on tools or people who understand the parts I do not. My goal is to understand systems deeply enough to make decisions, guide AI effectively, recognize when something is wrong, and take responsibility for what I build.”
+          </p>
+        </div>
+
+        <h3>The Car Analogy</h3>
+        <p>
+          I often think about technology through a simple car analogy: if I want to drive a car responsibly, I should understand at least the basics of its steering, dynamics, brakes, and other important systems. If I understand how the car works and how to drive it, I can make good decisions, recognize problems early, teach someone else, and know what to ask for when something needs attention.
+        </p>
+        <p>
+          I want to approach AI in the exact same way. I know AI is changing both hardware and software workflows, and I use AI tools when experimenting. However, I do not want to use AI blindly. I want to understand systems deeply enough to guide AI, evaluate its output, recognize mistakes, and take responsibility for the final result.
+        </p>
+      </section>
+
+      <section class="section-block reading-width" aria-labelledby="re-heading">
+        <span class="section-label">03 // Looking Under the Hood</span>
+        <h2 id="re-heading">Learning Reverse Engineering Honestly</h2>
+        <p>
+          I am also interested in reverse engineering, and I am interested in understanding how software and systems work internally. I am still learning reverse engineering and experimenting with reverse-engineering tools—I do not pretend to be an expert.
+        </p>
+        <p>
+          So far, I have experimented with tools such as <strong>Cheat Engine</strong>, <strong>Ghidra</strong>, and <strong>x64dbg</strong> to investigate and configure aspects of online game mechanics. In some of those experiments, AI tools generated or helped with parts of the code, and I did not yet fully understand every part of the underlying code that was produced.
+        </p>
+        <p>
+          Being honest about that gap is important to me: that experience is actually what pushed me to study low-level programming, C, and future Assembly more seriously. My goal is not to pretend that I already understand everything—my goal is to understand more each time I investigate a system.
+        </p>
+      </section>
+
+      <section class="section-block" aria-labelledby="interests-heading">
+        <div class="section-header">
+          <div>
+            <span class="section-label">04 // Technical Map</span>
+            <h2 id="interests-heading">Areas I Am Studying &amp; Exploring</h2>
+          </div>
+        </div>
+
+        <div class="card-grid">
+          <div class="card">
+            <div class="card-top">
+              <h3>Current Focus</h3>
+              <ul>
+                <li>Hardware and software interaction</li>
+                <li>Embedded systems &amp; microcontrollers</li>
+                <li>Electronics &amp; circuit analysis</li>
+                <li>C programming</li>
+                <li>Building and testing real systems on breadboards</li>
+                <li>Technical documentation and reporting</li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="card-top">
+              <h3>Next Learning Milestones</h3>
+              <ul>
+                <li>Assembly language fundamentals</li>
+                <li>Deeper C++ and systems programming</li>
+                <li>Python for tooling and conversion scripts</li>
+                <li>Rust for reliable systems software</li>
+                <li>Learning reverse engineering (Cheat Engine, Ghidra, x64dbg)</li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="card-top">
+              <h3>Future Directions Under Exploration</h3>
+              <ul>
+                <li>Embedded systems &amp; physical computing</li>
+                <li>Robotics, RC vehicles, and autonomous systems</li>
+                <li>Firmware analysis &amp; hardware-software security</li>
+                <li>Open-source hardware and software tools</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+    </div>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container footer-inner">
+      <div>
+        <strong>Ertunç Özbay</strong> — Personal workshop, project lab, and learning notebook.
+      </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://github.com/ertunc-ozbay" rel="noopener noreferrer">GitHub</a></li>
+      </ul>
+    </div>
+  </footer>
+
+  <script src="assets/js/main.js"></script>
+</body>
+</html>
diff --git a/contact.html b/contact.html
new file mode 100644
index 0000000..67f8708
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Contact & Collaboration — Ertunç Özbay</title>
+  <meta name="description" content="Connect with Ertunç Özbay on GitHub to discuss hardware, software, embedded systems, C programming, and open-source projects.">
+  <link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
+  <link rel="stylesheet" href="assets/css/style.css">
+</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">workshop // notebook // lab</span>
+        </span>
+      </a>
+
+      <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">Blog</a></li>
+            <li><a class="nav-link" href="lab.html">Lab</a></li>
+            <li><a class="nav-link" href="contact.html" aria-current="page">Contact</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main-content">
+    <div class="container">
+      <section class="workshop-hero" aria-labelledby="contact-heading">
+        <span class="workshop-eyebrow">CONNECT // SAY HELLO</span>
+        <h1 id="contact-heading">Contact &amp; Collaboration</h1>
+        <p class="hero-lead">
+          I want visitors here to feel like they are meeting a friend or an engineering teammate. If you enjoy building things, learning deeply, or talking about how hardware and software work together, I would be happy to connect.
+        </p>
+      </section>
+
+      <section class="section-block" aria-labelledby="contact-links-heading">
+        <div class="section-header">
+          <div>
+            <span class="section-label">01 // Where to Find Me</span>
+            <h2 id="contact-links-heading">GitHub &amp; Open-Source Links</h2>
+          </div>
+        </div>
+
+        <div class="card-grid-2">
+          <div class="card">
+            <div class="card-top">
+              <span class="section-label">GitHub Profile</span>
+              <h3><a href="https://github.com/ertunc-ozbay" rel="noopener noreferrer">github.com/ertunc-ozbay</a></h3>
+              <p>
+                Follow my open-source repositories, check out my ongoing code and hardware-software projects, or open an issue/discussion on a repository.
+              </p>
+            </div>
+            <div class="card-actions">
+              <a class="btn btn-primary" href="https://github.com/ertunc-ozbay" rel="noopener noreferrer">Visit My GitHub Profile</a>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="card-top">
+              <span class="section-label">Website &amp; Controller Repositories</span>
+              <h3>Project Repositories</h3>
+              <p>
+                Explore the source code for this static workshop website or my ongoing Multi-Functional RC Controller project:
+              </p>
+              <ul>
+                <li><a href="https://github.com/ertunc-ozbay/ertuncozbay.github.io" rel="noopener noreferrer">ertunc-ozbay/ertuncozbay.github.io</a> (This website)</li>
+                <li><a href="https://github.com/ertunc-ozbay/multi-functional-controller" rel="noopener noreferrer">ertunc-ozbay/multi-functional-controller</a> (RC Controller)</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="section-block reading-width" aria-labelledby="topics-heading">
+        <span class="section-label">02 // Let’s Talk About</span>
+        <h2 id="topics-heading">Topics I Always Enjoy Discussing</h2>
+        <ul>
+          <li>Embedded systems, microcontrollers, circuit analysis, and breadboard builds</li>
+          <li>C programming, learning Assembly, and exploring C++, Python, or Rust</li>
+          <li>RC controllers, autonomous vehicle experiments, and hardware-software interaction</li>
+          <li>Beginner reverse-engineering learning notes (Cheat Engine, Ghidra, x64dbg)</li>
+          <li>Open-source projects, learning in public, and using AI responsibly by understanding the underlying system</li>
+        </ul>
+
+        <div class="callout-box">
+          <span class="callout-title">Future Community Note</span>
+          <p style="margin-bottom:0;">
+            In the future, after this static portfolio and blog have grown with more project logs and articles, I hope to add a small community discussion space where people can talk about projects and experiments directly. For now, the site stays 100% static and simple, and GitHub is the best place to reach me.
+          </p>
+        </div>
+      </section>
+
+    </div>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container footer-inner">
+      <div>
+        <strong>Ertunç Özbay</strong> — Personal workshop, project lab, and learning notebook.
+      </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://github.com/ertunc-ozbay" rel="noopener noreferrer">GitHub</a></li>
+      </ul>
+    </div>
+  </footer>
+
+  <script src="assets/js/main.js"></script>
+</body>
+</html>
diff --git a/favicon.svg b/favicon.svg
new file mode 100644
index 0000000..bbab2f8
--- /dev/null
+++ b/favicon.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Ertunç Özbay Workshop Icon">
+  <rect width="64" height="64" rx="12" fill="#121720" stroke="#2c384a" stroke-width="2"/>
+  <path d="M16 20h18M16 32h14M16 44h18" stroke="#e5a93c" stroke-width="3.5" stroke-linecap="round"/>
+  <circle cx="42" cy="20" r="4" fill="#4db6ac"/>
+  <circle cx="38" cy="32" r="4" fill="#e5a93c"/>
+  <circle cx="42" cy="44" r="4" fill="#4db6ac"/>
+  <path d="M42 24v16" stroke="#2c384a" stroke-width="2" stroke-dasharray="3 3"/>
+</svg>
diff --git a/hardware-software-bridge.svg b/hardware-software-bridge.svg
new file mode 100644
index 0000000..c8b8578
--- /dev/null
+++ b/hardware-software-bridge.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 220" role="img" aria-labelledby="hwsw-title hwsw-desc">
+  <title id="hwsw-title">Hardware and Software Systems Philosophy Diagram</title>
+  <desc id="hwsw-desc">Diagram showing how electronics and physical components connect through embedded firmware and C code to higher-level software and human judgment.</desc>
+  <rect width="760" height="220" rx="10" fill="#0f141c" stroke="#2a3546" stroke-width="2"/>
+  <rect x="28" y="42" width="210" height="136" rx="8" fill="#161e2b" stroke="#e5a93c" stroke-width="1.6"/>
+  <text x="44" y="72" fill="#e5a93c" font-family="monospace" font-size="12" font-weight="bold">LAYER 01 // HARDWARE</text>
+  <text x="44" y="98" fill="#e6edf3" font-family="sans-serif" font-size="14" font-weight="bold">Circuits &amp; Electronics</text>
+  <text x="44" y="122" fill="#9fb0c4" font-family="sans-serif" font-size="12">Physical components, power,</text>
+  <text x="44" y="140" fill="#9fb0c4" font-family="sans-serif" font-size="12">signals, actuators &amp; boards</text>
+
+  <line x1="238" y1="110" x2="274" y2="110" stroke="#4db6ac" stroke-width="2.2"/>
+
+  <rect x="274" y="42" width="212" height="136" rx="8" fill="#161e2b" stroke="#4db6ac" stroke-width="1.6"/>
+  <text x="290" y="72" fill="#4db6ac" font-family="monospace" font-size="12" font-weight="bold">LAYER 02 // BRIDGE</text>
+  <text x="290" y="98" fill="#e6edf3" font-family="sans-serif" font-size="14" font-weight="bold">Embedded &amp; Low-Level</text>
+  <text x="290" y="122" fill="#9fb0c4" font-family="sans-serif" font-size="12">C programming, registers,</text>
+  <text x="290" y="140" fill="#9fb0c4" font-family="sans-serif" font-size="12">future Assembly &amp; internals</text>
+
+  <line x1="486" y1="110" x2="522" y2="110" stroke="#e5a93c" stroke-width="2.2"/>
+
+  <rect x="522" y="42" width="210" height="136" rx="8" fill="#161e2b" stroke="#7986cb" stroke-width="1.6"/>
+  <text x="538" y="72" fill="#9fa8da" font-family="monospace" font-size="12" font-weight="bold">LAYER 03 // SOFTWARE</text>
+  <text x="538" y="98" fill="#e6edf3" font-family="sans-serif" font-size="14" font-weight="bold">Tools &amp; Human Judgment</text>
+  <text x="538" y="122" fill="#9fb0c4" font-family="sans-serif" font-size="12">Scripts, C++ / Python / Rust,</text>
+  <text x="538" y="140" fill="#9fb0c4" font-family="sans-serif" font-size="12">evaluating AI &amp; system logic</text>
+</svg>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..50034ac
--- /dev/null
+++ b/index.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Projects — Ertunç Özbay</title>
+  <meta name="description" content="Hardware and software projects by Ertunç Özbay: Multi-Functional RC Controller, RC and Autonomous Vehicle, and MIDI Breadboard Instrument.">
+  <link rel="icon" type="image/svg+xml" href="../assets/images/favicon.svg">
+  <link rel="stylesheet" href="../assets/css/style.css">
+</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">workshop // notebook // lab</span>
+        </span>
+      </a>
+
+      <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" aria-current="page">Projects</a></li>
+            <li><a class="nav-link" href="../blog/index.html">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>
+  </header>
+
+  <main id="main-content">
+    <div class="container">
+      <section class="workshop-hero" aria-labelledby="projects-heading">
+        <span class="workshop-eyebrow">PROJECT SHOWCASE // REAL BUILDS</span>
+        <h1 id="projects-heading">Projects on My Bench</h1>
+        <p class="hero-lead">
+          Here are the three real projects I am currently building and documenting. Because I value honesty in technical documentation, each project page lists only confirmed components and real progress—never invented specifications.
+        </p>
+      </section>
+
+      <section class="section-block" aria-labelledby="project-list-heading">
+        <div class="section-header">
+          <div>
+            <span class="section-label">Active Hardware &amp; Software Builds</span>
+            <h2 id="project-list-heading">Current Projects (3)</h2>
+          </div>
+        </div>
+
+        <div class="card-grid">
+          <!-- Project 1 -->
+          <article class="card">
+            <div class="card-top">
+              <div class="card-meta">
+                <span class="badge badge-progress">Status: In progress</span>
+                <span>Project 01</span>
+              </div>
+              <h3><a href="multi-functional-controller.html">Multi-Functional RC Controller</a></h3>
+              <p>
+                An ongoing RC controller project focused on remote control hardware and hardware-software integration.
+              </p>
+
+              <p><strong>Confirmed technologies &amp; focus:</strong></p>
+              <ul class="tag-list" aria-label="Confirmed technologies for Multi-Functional RC Controller">
+                <li><span class="tag">RC Control</span></li>
+                <li><span class="tag">Hardware-Software Integration</span></li>
+                <li><span class="tag">Open-Source Repo</span></li>
+              </ul>
+
+              <div class="project-notes">
+                <p><strong>What I am currently learning:</strong> Structuring an RC controller system so physical inputs and control software stay reliable and modular.</p>
+                <p><strong>Next step:</strong> Documenting confirmed hardware choices, wiring notes, and iteration logs as testing progresses.</p>
+              </div>
+            </div>
+
+            <div class="card-actions">
+              <a class="btn btn-primary" href="multi-functional-controller.html">Read Project Page</a>
+              <a class="btn btn-secondary" href="https://github.com/ertunc-ozbay/multi-functional-controller" rel="noopener noreferrer">GitHub Repository</a>
+            </div>
+          </article>
+
+          <!-- Project 2 -->
+          <article class="card">
+            <div class="card-top">
+              <div class="card-meta">
+                <span class="badge badge-progress">Status: In progress</span>
+                <span>Project 02</span>
+              </div>
+              <h3><a href="rc-autonomous-vehicle.html">RC and Autonomous Vehicle</a></h3>
+              <p>
+                An ongoing project exploring RC control and autonomous vehicle behavior. This project is part of my effort to understand systems across electronics, control logic, and software.
+              </p>
+
+              <p><strong>Confirmed technologies &amp; focus:</strong></p>
+              <ul class="tag-list" aria-label="Confirmed focus areas for RC and Autonomous Vehicle">
+                <li><span class="tag">RC Control</span></li>
+                <li><span class="tag">Autonomous Behavior Exploration</span></li>
+                <li><span class="tag">Electronics</span></li>
+                <li><span class="tag">Control Logic &amp; Software</span></li>
+              </ul>
+
+              <div class="project-notes">
+                <p><strong>What I am currently learning:</strong> How manual RC control and autonomous decision logic interact with physical vehicle electronics.</p>
+                <p><strong>Next step:</strong> Confirming and testing the hardware platform before publishing specific sensor or controller details.</p>
+              </div>
+            </div>
+
+            <div class="card-actions">
+              <a class="btn btn-primary" href="rc-autonomous-vehicle.html">Read Project Page</a>
+            </div>
+          </article>
+
+          <!-- Project 3 -->
+          <article class="card">
+            <div class="card-top">
+              <div class="card-meta">
+                <span class="badge badge-experimental">Status: In progress / Experimental</span>
+                <span>Project 03</span>
+              </div>
+              <h3><a href="midi-breadboard-instrument.html">MIDI Breadboard Instrument</a></h3>
+              <p>
+                A breadboard-based project that plays MIDI melodies by converting MIDI data into C code for the device. The hardware currently includes two active buzzers, one passive buzzer, a rotary encoder, a 1.3-inch AMOLED display, two buttons, and two LEDs.
+              </p>
+
+              <p><strong>Confirmed components &amp; tools:</strong></p>
+              <ul class="tag-list" aria-label="Confirmed components for MIDI Breadboard Instrument">
+                <li><span class="tag">MIDI-to-C Conversion Script</span></li>
+                <li><span class="tag">C Code Output</span></li>
+                <li><span class="tag">2x Active Buzzers</span></li>
+                <li><span class="tag">1x Passive Buzzer</span></li>
+                <li><span class="tag">1x Rotary Encoder</span></li>
+                <li><span class="tag">1.3" AMOLED Screen</span></li>
+                <li><span class="tag">2x Buttons</span></li>
+                <li><span class="tag">2x LEDs</span></li>
+              </ul>
+
+              <div class="project-notes">
+                <p><strong>What I am currently learning:</strong> Translating musical MIDI data into C code arrays and coordinating buzzers, a display, and physical user inputs on a breadboard.</p>
+                <p><strong>Next step:</strong> Recording build notes, refining the MIDI-to-C conversion workflow, and documenting the breadboard setup.</p>
+              </div>
+            </div>
+
+            <div class="card-actions">
+              <a class="btn btn-primary" href="midi-breadboard-instrument.html">Read Project Page</a>
+            </div>
+          </article>
+        </div>
+      </section>
+
+    </div>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container footer-inner">
+      <div>
+        <strong>Ertunç Özbay</strong> — Personal workshop, project lab, and learning notebook.
+      </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://github.com/ertunc-ozbay" rel="noopener noreferrer">GitHub</a></li>
+      </ul>
+    </div>
+  </footer>
+
+  <script src="../assets/js/main.js"></script>
+</body>
+</html>
diff --git a/lab.html b/lab.html
new file mode 100644
index 0000000..50589ef
--- /dev/null
+++ b/lab.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lab & Experiment Notebook — Ertunç Özbay</title>
+  <meta name="description" content="Workshop lab notebook of Ertunç Özbay: current hardware experiments, MIDI-to-C conversion tools, reverse-engineering learning notes, and open technical questions.">
+  <link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
+  <link rel="stylesheet" href="assets/css/style.css">
+</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">workshop // notebook // lab</span>
+        </span>
+      </a>
+
+      <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">Blog</a></li>
+            <li><a class="nav-link" href="lab.html" aria-current="page">Lab</a></li>
+            <li><a class="nav-link" href="contact.html">Contact</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main-content">
+    <div class="container">
+      <section class="workshop-hero" aria-labelledby="lab-heading">
+        <span class="workshop-eyebrow">WORKSHOP BENCH // LAB NOTEBOOK</span>
+        <h1 id="lab-heading">Lab &amp; Experiment Notebook</h1>
+        <p class="hero-lead">
+          Welcome to my open workbench. Not everything I do starts as a structured project—this page tracks my ongoing hardware experiments, conversion scripts, reverse-engineering learning notes, playful breadboard builds, and the technical questions I am currently investigating.
+        </p>
+      </section>
+
+      <!-- Section 1: Current experiments -->
+      <section class="section-block" aria-labelledby="lab-current">
+        <div class="section-header">
+          <div>
+            <span class="section-label">01 // Active Bench</span>
+            <h2 id="lab-current">Current Experiments</h2>
+          </div>
+        </div>
+        <div class="card-grid-2">
+          <div class="card">
+            <div class="card-top">
+              <div class="card-meta">
+                <span class="badge badge-experimental">On the Breadboard</span>
+                <span>Hardware + C</span>
+              </div>
+              <h3>Multi-Buzzer MIDI Playback &amp; Display Sync</h3>
+              <p>
+                Testing how two active buzzers and one passive buzzer behave together on a breadboard alongside a 1.3-inch AMOLED screen, a rotary encoder, two buttons, and two LEDs as part of my <a href="projects/midi-breadboard-instrument.html">MIDI Breadboard Instrument</a>.
+              </p>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="card-top">
+              <div class="card-meta">
+                <span class="badge badge-progress">Ongoing Study</span>
+                <span>Control &amp; Integration</span>
+              </div>
+              <h3>RC Input &amp; Vehicle Control Logic</h3>
+              <p>
+                Exploring how physical inputs on my <a href="projects/multi-functional-controller.html">Multi-Functional RC Controller</a> and control logic for my <a href="projects/rc-autonomous-vehicle.html">RC and Autonomous Vehicle</a> can be organized cleanly across hardware and software.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Section 2: Hardware experiments -->
+      <section class="section-block" aria-labelledby="lab-hardware">
+        <div class="section-header">
+          <div>
+            <span class="section-label">02 // Physical Layer</span>
+            <h2 id="lab-hardware">Hardware Experiments</h2>
+          </div>
+        </div>
+        <div class="card-grid">
+          <div class="card">
+            <div class="card-top">
+              <h3>Circuit Analysis &amp; Breadboard Prototyping</h3>
+              <p>
+                Connecting classroom circuit analysis concepts to real breadboard setups—watching how physical components, buttons, encoders, buzzers, and indicator LEDs behave in practice.
+              </p>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="card-top">
+              <h3>Physical Computing Interfaces</h3>
+              <p>
+                Experimenting with tactile hardware inputs (rotary encoders and push buttons) and compact displays (such as a 1.3-inch AMOLED screen) to make embedded builds interactive without relying on a PC screen.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Section 3: Software and conversion tools -->
+      <section class="section-block" aria-labelledby="lab-software">
+        <div class="section-header">
+          <div>
+            <span class="section-label">03 // Code &amp; Tooling</span>
+            <h2 id="lab-software">Software and Conversion Tools</h2>
+          </div>
+        </div>
+        <div class="card-grid">
+          <div class="card">
+            <div class="card-top">
+              <h3>MIDI-to-C Code Conversion Script</h3>
+              <p>
+                A custom script I wrote that takes MIDI data and converts it into C code for my breadboard instrument. It bridges higher-level musical data with low-level C arrays that the hardware can play directly.
+              </p>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="card-top">
+              <h3>C Programming &amp; Future Language Exploration</h3>
+              <p>
+                Practicing C programming for embedded systems now, while preparing to study Assembly for deeper low-level understanding and expanding my toolkit with C++, Python, and Rust.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Section 4: Reverse-engineering learning -->
+      <section class="section-block" aria-labelledby="lab-re">
+        <div class="section-header">
+          <div>
+            <span class="section-label">04 // System Internals</span>
+            <h2 id="lab-re">Reverse-Engineering Learning</h2>
+          </div>
+        </div>
+        <div class="callout-box">
+          <span class="callout-title">Beginner Learning Log</span>
+          <p>
+            I am learning reverse engineering and experimenting with reverse-engineering tools because I am interested in understanding how software and systems work internally.
+          </p>
+          <ul>
+            <li><strong>Tools I have experimented with:</strong> Cheat Engine, Ghidra, and x64dbg.</li>
+            <li><strong>What I tried:</strong> Investigating and configuring aspects of online game mechanics.</li>
+            <li><strong>Honest reflection:</strong> In some of these experiments, I used code generated with the help of AI tools and realized I did not yet understand every line of the underlying code. That realization motivated me to study C, memory concepts, and future Assembly systematically so I can read and verify what happens under the hood myself.</li>
+          </ul>
+        </div>
+      </section>
+
+      <!-- Section 5: Unfinished or playful builds -->
+      <section class="section-block" aria-labelledby="lab-playful">
+        <div class="section-header">
+          <div>
+            <span class="section-label">05 // Playful Curiosity</span>
+            <h2 id="lab-playful">Unfinished or Playful Builds</h2>
+          </div>
+        </div>
+        <p class="reading-width">
+          I believe some of the best learning happens when building things that are unusual, playful, or simply fun. Playing MIDI melodies across two active buzzers and one passive buzzer on a breadboard started from that exact spirit—combining music, C code, and electronics just to see how far a breadboard setup can go.
+        </p>
+      </section>
+
+      <!-- Section 6: Questions I am currently investigating -->
+      <section class="section-block" aria-labelledby="lab-questions">
+        <div class="section-header">
+          <div>
+            <span class="section-label">06 // Open Questions</span>
+            <h2 id="lab-questions">Questions I Am Currently Investigating</h2>
+          </div>
+        </div>
+        <div class="card-grid-2">
+          <div class="card">
+            <div class="card-top">
+              <h3>How do C constructs map to Assembly and hardware?</h3>
+              <p>
+                As I study C programming and prepare to learn Assembly, how do compiled functions, memory layouts, and hardware registers look when inspected inside tools like Ghidra or x64dbg?
+              </p>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="card-top">
+              <h3>How can we use AI tools without losing deep system understanding?</h3>
+              <p>
+                What foundational knowledge across electronics, firmware, and software is essential so a builder can guide AI effectively, spot subtle bugs, and stay fully responsible for the system?
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+    </div>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container footer-inner">
+      <div>
+        <strong>Ertunç Özbay</strong> — Personal workshop, project lab, and learning notebook.
+      </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://github.com/ertunc-ozbay" rel="noopener noreferrer">GitHub</a></li>
+      </ul>
+    </div>
+  </footer>
+
+  <script src="assets/js/main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..6ed28b4
--- /dev/null
+++ b/main.js
@@ -0,0 +1,73 @@
+/* ==========================================================================
+   Ertunç Özbay — Workshop & Portfolio Script (Plain JS, No Dependencies)
+   Handles:
+   1. Accessible mobile navigation menu toggle (with Escape key support)
+   2. Static blog category filtering on the Blog page
+   ========================================================================== */
+
+(function () {
+  "use strict";
+
+  // 1. Mobile Navigation Toggle
+  var navToggle = document.querySelector("[data-nav-toggle]");
+  var siteNav = document.querySelector("[data-site-nav]");
+
+  if (navToggle && siteNav) {
+    navToggle.addEventListener("click", function () {
+      var isExpanded = navToggle.getAttribute("aria-expanded") === "true";
+      var nextState = !isExpanded;
+      navToggle.setAttribute("aria-expanded", String(nextState));
+      siteNav.classList.toggle("is-open", nextState);
+      var labelSpan = navToggle.querySelector("[data-nav-label]");
+      if (labelSpan) {
+        labelSpan.textContent = nextState ? "Close" : "Menu";
+      }
+    });
+
+    // Close mobile menu when pressing Escape
+    document.addEventListener("keydown", function (event) {
+      if (event.key === "Escape" && siteNav.classList.contains("is-open")) {
+        navToggle.setAttribute("aria-expanded", "false");
+        siteNav.classList.remove("is-open");
+        var labelSpan = navToggle.querySelector("[data-nav-label]");
+        if (labelSpan) {
+          labelSpan.textContent = "Menu";
+        }
+        navToggle.focus();
+      }
+    });
+  }
+
+  // 2. Blog Category Filter (Progressive Enhancement)
+  var filterButtons = document.querySelectorAll("[data-blog-filter]");
+  var blogCards = document.querySelectorAll("[data-blog-category]");
+  var filterStatus = document.getElementById("blog-filter-status");
+
+  if (filterButtons.length > 0 && blogCards.length > 0) {
+    filterButtons.forEach(function (button) {
+      button.addEventListener("click", function () {
+        var selectedCategory = button.getAttribute("data-blog-filter");
+
+        filterButtons.forEach(function (btn) {
+          btn.setAttribute("aria-pressed", btn === button ? "true" : "false");
+        });
+
+        var visibleCount = 0;
+        blogCards.forEach(function (card) {
+          var categories = (card.getAttribute("data-blog-category") || "").split(",");
+          var match = selectedCategory === "all" || categories.indexOf(selectedCategory) !== -1;
+          card.hidden = !match;
+          if (match) {
+            visibleCount += 1;
+          }
+        });
+
+        if (filterStatus) {
+          filterStatus.textContent =
+            "Showing " + visibleCount + (visibleCount === 1 ? " entry" : " entries") +
+            (selectedCategory === "all" ? "." : " in selected category.");
+        }
+      });
+    });
+  }
+})();
diff --git a/midi-breadboard-instrument.html b/midi-breadboard-instrument.html
new file mode 100644
index 0000000..570f465
--- /dev/null
+++ b/midi-breadboard-instrument.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MIDI Breadboard Instrument — Projects — Ertunç Özbay</title>
+  <meta name="description" content="Project notes for the MIDI Breadboard Instrument by Ertunç Özbay: playing MIDI melodies via C code on a breadboard with buzzers, a 1.3-inch AMOLED display, and rotary encoder.">
+  <link rel="icon" type="image/svg+xml" href="../assets/images/favicon.svg">
+  <link rel="stylesheet" href="../assets/css/style.css">
+</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">workshop // notebook // lab</span>
+        </span>
+      </a>
+
+      <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" aria-current="page">Projects</a></li>
+            <li><a class="nav-link" href="../blog/index.html">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>
+  </header>
+
+  <main id="main-content">
+    <div class="container">
+      <nav class="breadcrumb" aria-label="Breadcrumb">
+        <a href="index.html">← Back to Projects</a>
+      </nav>
+
+      <article>
+        <header class="workshop-hero">
+          <div class="card-meta">
+            <span class="badge badge-experimental">Status: In progress / Experimental</span>
+            <span>Project 03 // Breadboard Hardware, C Code &amp; Music</span>
+          </div>
+          <h1>MIDI Breadboard Instrument</h1>
+          <p class="hero-lead">
+            A breadboard-based project that plays MIDI melodies by converting MIDI data into C code for the device.
+          </p>
+          <p class="reading-width">
+            The hardware currently includes two active buzzers, one passive buzzer, a rotary encoder, a 1.3-inch AMOLED display, two buttons, and two LEDs.
+          </p>
+          <div class="button-row">
+            <a class="btn btn-secondary" href="index.html">All Projects</a>
+            <a class="btn btn-secondary" href="../lab.html">See Lab Experiments</a>
+          </div>
+        </header>
+
+        <figure class="schematic-frame" aria-label="MIDI Breadboard Instrument Component Diagram">
+          <img src="../assets/images/midi-breadboard-layout.svg" alt="Block diagram of the MIDI Breadboard Instrument showing the MIDI conversion script producing C code for the breadboard system, connected to two active buzzers, one passive buzzer, a 1.3-inch AMOLED screen, one rotary encoder, two buttons, and two LEDs." width="760" height="320">
+          <figcaption class="schematic-caption">
+            Confirmed software-to-hardware workflow and component list for the MIDI Breadboard Instrument.
+          </figcaption>
+        </figure>
+
+        <section class="section-block reading-width" aria-labelledby="p3-overview">
+          <span class="section-label">01 // Overview</span>
+          <h2 id="p3-overview">Combining Hardware, Software, and Creativity</h2>
+          <p>
+            This project represents the kind of work I enjoy most: combining hardware, software, music, experimentation, and creativity in a practical and unusual system on a breadboard.
+          </p>
+          <p>
+            To get melodies onto the hardware, I wrote a script that converts MIDI data into C code for the device. That generated C code drives the breadboard setup to play MIDI sounds while providing physical controls and visual feedback.
+          </p>
+        </section>
+
+        <section class="section-block reading-width" aria-labelledby="p3-components">
+          <span class="section-label">02 // Confirmed Hardware &amp; Software</span>
+          <h2 id="p3-components">Confirmed Components on the Breadboard</h2>
+          <table class="spec-table">
+            <thead>
+              <tr>
+                <th scope="col">Component / Layer</th>
+                <th scope="col">Confirmed Specification</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><strong>Conversion Workflow</strong></td>
+                <td>Custom script that converts MIDI data into C code for the device</td>
+              </tr>
+              <tr>
+                <td><strong>Device Code Output</strong></td>
+                <td>C code</td>
+              </tr>
+              <tr>
+                <td><strong>Active Sound Components</strong></td>
+                <td>2 × Active buzzers</td>
+              </tr>
+              <tr>
+                <td><strong>Passive Sound Component</strong></td>
+                <td>1 × Passive buzzer</td>
+              </tr>
+              <tr>
+                <td><strong>Display</strong></td>
+                <td>1 × 1.3-inch AMOLED screen</td>
+              </tr>
+              <tr>
+                <td><strong>Rotational Input</strong></td>
+                <td>1 × Rotary encoder</td>
+              </tr>
+              <tr>
+                <td><strong>Push Inputs</strong></td>
+                <td>2 × Buttons</td>
+              </tr>
+              <tr>
+                <td><strong>Visual Indicators</strong></td>
+                <td>2 × LEDs</td>
+              </tr>
+              <tr>
+                <td><strong>Additional Circuit Details</strong></td>
+                <td>Details will be documented as the project develops.</td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+
+        <section class="section-block reading-width" aria-labelledby="p3-learning">
+          <span class="section-label">03 // Workshop Notes</span>
+          <h2 id="p3-learning">What I Am Currently Learning &amp; Next Steps</h2>
+          <div class="callout-box">
+            <span class="callout-title">What I Am Currently Learning</span>
+            <p>
+              How data conversion scripts bridge file formats (like MIDI) into low-level C structures, and how multiple physical outputs (two active buzzers, one passive buzzer, two LEDs, and a 1.3-inch AMOLED screen) can be coordinated alongside user inputs (a rotary encoder and two buttons).
+            </p>
+            <span class="callout-title">Next Step</span>
+            <p style="margin-bottom:0;">
+              Documenting how the MIDI-to-C conversion script formats note events and adding further hardware notes as the breadboard prototype evolves.
+            </p>
+          </div>
+        </section>
+      </article>
+
+    </div>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container footer-inner">
+      <div>
+        <strong>Ertunç Özbay</strong> — Personal workshop, project lab, and learning notebook.
+      </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://github.com/ertunc-ozbay" rel="noopener noreferrer">GitHub</a></li>
+      </ul>
+    </div>
+  </footer>
+
+  <script src="../assets/js/main.js"></script>
+</body>
+</html>
diff --git a/midi-breadboard-layout.svg b/midi-breadboard-layout.svg
new file mode 100644
index 0000000..84b5e9b
--- /dev/null
+++ b/midi-breadboard-layout.svg
@@ -0,0 +1,59 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 320" role="img" aria-labelledby="midi-diag-title midi-diag-desc">
+  <title id="midi-diag-title">MIDI Breadboard Instrument Confirmed Component Block Diagram</title>
+  <desc id="midi-diag-desc">Block diagram showing a MIDI data conversion script producing C code for the breadboard instrument, connected to confirmed hardware components: two active buzzers, one passive buzzer, a rotary encoder, a 1.3-inch AMOLED screen, two buttons, and two LEDs.</desc>
+  <rect width="760" height="320" rx="10" fill="#0f141c" stroke="#2a3546" stroke-width="2"/>
+  <!-- Grid lines -->
+  <g stroke="#18202c" stroke-width="1">
+    <line x1="0" y1="64" x2="760" y2="64"/>
+    <line x1="0" y1="128" x2="760" y2="128"/>
+    <line x1="0" y1="192" x2="760" y2="192"/>
+    <line x1="0" y1="256" x2="760" y2="256"/>
+    <line x1="152" y1="0" x2="152" y2="320"/>
+    <line x1="304" y1="0" x2="304" y2="320"/>
+    <line x1="456" y1="0" x2="456" y2="320"/>
+    <line x1="608" y1="0" x2="608" y2="320"/>
+  </g>
+  <!-- Left box: Software conversion -->
+  <rect x="28" y="88" width="190" height="144" rx="8" fill="#161e2b" stroke="#4db6ac" stroke-width="1.8"/>
+  <text x="44" y="118" fill="#4db6ac" font-family="monospace" font-size="12" font-weight="bold">SOFTWARE PIPELINE</text>
+  <text x="44" y="145" fill="#e6edf3" font-family="sans-serif" font-size="14" font-weight="bold">MIDI Data Input</text>
+  <text x="44" y="168" fill="#9fb0c4" font-family="sans-serif" font-size="12">Conversion Script</text>
+  <text x="44" y="192" fill="#e5a93c" font-family="monospace" font-size="12">→ Generates C Code</text>
+  <text x="44" y="214" fill="#8b9bb0" font-family="sans-serif" font-size="11">Melody arrays &amp; timing</text>
+
+  <!-- Arrow -->
+  <line x1="218" y1="160" x2="278" y2="160" stroke="#e5a93c" stroke-width="2.5"/>
+  <polygon points="278,160 268,154 268,166" fill="#e5a93c"/>
+
+  <!-- Center box: Breadboard Core -->
+  <rect x="282" y="72" width="176" height="176" rx="8" fill="#161e2b" stroke="#e5a93c" stroke-width="1.8"/>
+  <text x="300" y="102" fill="#e5a93c" font-family="monospace" font-size="12" font-weight="bold">BREADBOARD SYSTEM</text>
+  <text x="300" y="130" fill="#e6edf3" font-family="sans-serif" font-size="14" font-weight="bold">C Code Execution</text>
+  <text x="300" y="154" fill="#9fb0c4" font-family="sans-serif" font-size="12">Hardware I/O &amp; Tone</text>
+  <text x="300" y="174" fill="#9fb0c4" font-family="sans-serif" font-size="12">Coordination</text>
+  <text x="300" y="210" fill="#8b9bb0" font-family="monospace" font-size="10">*Specific MCU &amp; wiring</text>
+  <text x="300" y="224" fill="#8b9bb0" font-family="monospace" font-size="10">documented as confirmed</text>
+
+  <!-- Branches to right: Confirmed Hardware -->
+  <line x1="458" y1="105" x2="510" y2="68" stroke="#4db6ac" stroke-width="1.8"/>
+  <line x1="458" y1="145" x2="510" y2="136" stroke="#4db6ac" stroke-width="1.8"/>
+  <line x1="458" y1="175" x2="510" y2="204" stroke="#4db6ac" stroke-width="1.8"/>
+  <line x1="458" y1="215" x2="510" y2="266" stroke="#4db6ac" stroke-width="1.8"/>
+
+  <!-- Right boxes: Confirmed Hardware Components -->
+  <rect x="512" y="36" width="220" height="54" rx="6" fill="#161e2b" stroke="#2c384a" stroke-width="1.5"/>
+  <text x="526" y="58" fill="#e6edf3" font-family="sans-serif" font-size="13" font-weight="bold">Sound Output (3x Buzzers)</text>
+  <text x="526" y="77" fill="#9fb0c4" font-family="monospace" font-size="11">2x Active + 1x Passive Buzzer</text>
+
+  <rect x="512" y="104" width="220" height="54" rx="6" fill="#161e2b" stroke="#2c384a" stroke-width="1.5"/>
+  <text x="526" y="126" fill="#e6edf3" font-family="sans-serif" font-size="13" font-weight="bold">Visual Display</text>
+  <text x="526" y="145" fill="#9fb0c4" font-family="monospace" font-size="11">1x 1.3-inch AMOLED Screen</text>
+
+  <rect x="512" y="172" width="220" height="54" rx="6" fill="#161e2b" stroke="#2c384a" stroke-width="1.5"/>
+  <text x="526" y="194" fill="#e6edf3" font-family="sans-serif" font-size="13" font-weight="bold">Physical Controls</text>
+  <text x="526" y="213" fill="#9fb0c4" font-family="monospace" font-size="11">1x Rotary Encoder + 2x Buttons</text>
+
+  <rect x="512" y="240" width="220" height="54" rx="6" fill="#161e2b" stroke="#2c384a" stroke-width="1.5"/>
+  <text x="526" y="262" fill="#e6edf3" font-family="sans-serif" font-size="13" font-weight="bold">Status Indicators</text>
+  <text x="526" y="281" fill="#9fb0c4" font-family="monospace" font-size="11">2x LEDs on Breadboard</text>
+</svg>
diff --git a/multi-functional-controller.html b/multi-functional-controller.html
new file mode 100644
index 0000000..2b60897
--- /dev/null
+++ b/multi-functional-controller.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Multi-Functional RC Controller — Projects — Ertunç Özbay</title>
+  <meta name="description" content="Project notes for the Multi-Functional RC Controller by Ertunç Özbay: an ongoing hardware-software RC control build.">
+  <link rel="icon" type="image/svg+xml" href="../assets/images/favicon.svg">
+  <link rel="stylesheet" href="../assets/css/style.css">
+</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">workshop // notebook // lab</span>
+        </span>
+      </a>
+
+      <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" aria-current="page">Projects</a></li>
+            <li><a class="nav-link" href="../blog/index.html">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>
+  </header>
+
+  <main id="main-content">
+    <div class="container">
+      <nav class="breadcrumb" aria-label="Breadcrumb">
+        <a href="index.html">← Back to Projects</a>
+      </nav>
+
+      <article>
+        <header class="workshop-hero">
+          <div class="card-meta">
+            <span class="badge badge-progress">Status: In progress</span>
+            <span>Project 01 // Hardware + Software</span>
+          </div>
+          <h1>Multi-Functional RC Controller</h1>
+          <p class="hero-lead">
+            An ongoing project related to RC control and hardware-software integration.
+          </p>
+          <div class="button-row">
+            <a class="btn btn-primary" href="https://github.com/ertunc-ozbay/multi-functional-controller" rel="noopener noreferrer">View GitHub Repository</a>
+            <a class="btn btn-secondary" href="index.html">All Projects</a>
+          </div>
+        </header>
+
+        <section class="section-block reading-width" aria-labelledby="p1-overview">
+          <span class="section-label">01 // Overview</span>
+          <h2 id="p1-overview">What This Project Is About</h2>
+          <p>
+            The <strong>Multi-Functional RC Controller</strong> is an ongoing hardware-and-software build where I explore how a single remote controller can be designed, programmed, and adapted for practical RC applications.
+          </p>
+          <p>
+            Rather than treating a controller as a sealed black box, I want to understand both the physical interface and the software logic that translates user input into control actions.
+          </p>
+        </section>
+
+        <section class="section-block reading-width" aria-labelledby="p1-confirmed">
+          <span class="section-label">02 // Confirmed Information</span>
+          <h2 id="p1-confirmed">Confirmed Scope &amp; Repository</h2>
+          <table class="spec-table">
+            <thead>
+              <tr>
+                <th scope="col">Item</th>
+                <th scope="col">Confirmed Detail</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><strong>Project Name</strong></td>
+                <td>Multi-Functional RC Controller</td>
+              </tr>
+              <tr>
+                <td><strong>Current Status</strong></td>
+                <td>In progress</td>
+              </tr>
+              <tr>
+                <td><strong>Source Repository</strong></td>
+                <td><a href="https://github.com/ertunc-ozbay/multi-functional-controller" rel="noopener noreferrer">github.com/ertunc-ozbay/multi-functional-controller</a></td>
+              </tr>
+              <tr>
+                <td><strong>Core Focus</strong></td>
+                <td>RC control and hardware-software integration</td>
+              </tr>
+              <tr>
+                <td><strong>Hardware &amp; Protocol Specs</strong></td>
+                <td>Details will be documented as the project develops.</td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+
+        <section class="section-block reading-width" aria-labelledby="p1-learning">
+          <span class="section-label">03 // Workshop Notes</span>
+          <h2 id="p1-learning">What I Am Currently Learning &amp; Next Steps</h2>
+          <div class="callout-box">
+            <span class="callout-title">What I Am Currently Learning</span>
+            <p>
+              How physical control inputs, embedded software structure, and clear technical documentation come together when designing a custom controller from scratch.
+            </p>
+            <span class="callout-title">Next Step</span>
+            <p style="margin-bottom:0;">
+              Details will be documented as the project develops. As each hardware stage and software iteration is tested on the bench, I will publish confirmed component lists and build logs here and in the <a href="../blog/index.html">Blog</a>.
+            </p>
+          </div>
+        </section>
+      </article>
+
+    </div>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container footer-inner">
+      <div>
+        <strong>Ertunç Özbay</strong> — Personal workshop, project lab, and learning notebook.
+      </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://github.com/ertunc-ozbay" rel="noopener noreferrer">GitHub</a></li>
+      </ul>
+    </div>
+  </footer>
+
+  <script src="../assets/js/main.js"></script>
+</body>
+</html>
diff --git a/post-template.html b/post-template.html
new file mode 100644
index 0000000..a1321fb
--- /dev/null
+++ b/post-template.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>[Template] Project Build Log & Technical Note Template — Blog — Ertunç Özbay</title>
+  <meta name="description" content="Reusable static HTML blog post template for Ertunç Özbay's workshop website.">
+  <link rel="icon" type="image/svg+xml" href="../assets/images/favicon.svg">
+  <link rel="stylesheet" href="../assets/css/style.css">
+</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">workshop // notebook // lab</span>
+        </span>
+      </a>
+
+      <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>
+  </header>
+
+  <main id="main-content">
+    <div class="container">
+      <nav class="breadcrumb" aria-label="Breadcrumb">
+        <a href="index.html">← Back to Blog</a>
+      </nav>
+
+      <!--
+        =====================================================================
+        BEGINNER HOW-TO: HOW TO CREATE A NEW BLOG POST FROM THIS TEMPLATE
+        1. Duplicate this file (blog/post-template.html) inside the blog/ folder.
+        2. Rename the new copy, for example: blog/midi-c-conversion-notes.html
+        3. Edit the <title>, Date, Category, Reading time, Heading (<h1>),
+           Summary, Tags, and Article sections below.
+        4. Open blog/index.html and copy one <article class="card"> block to
+           link to your new filename.
+        =====================================================================
+      -->
+
+      <article class="reading-width">
+        <header class="workshop-hero">
+          <div class="card-meta">
+            <span class="badge badge-experimental">Template • Draft Example</span>
+            <time datetime="2026-10-14">YYYY-MM-DD (Template)</time>
+            <span>• Category: Build Log / Technical Note</span>
+            <span>• Reading time: X min read</span>
+          </div>
+          <h1>[Template] Article Title: What I Tested and Learned on the Bench</h1>
+          <p class="hero-lead">
+            <strong>Summary:</strong> This page is a clearly labeled static HTML template for future blog posts. Copy this file whenever you want to publish a new build log, C programming note, or circuit experiment.
+          </p>
+          <ul class="tag-list" aria-label="Article tags">
+            <li><span class="tag">template</span></li>
+            <li><span class="tag">draft</span></li>
+            <li><span class="tag">embedded-learning</span></li>
+            <li><span class="tag">c-programming</span></li>
+          </ul>
+        </header>
+
+        <div class="callout-box amber">
+          <span class="callout-title">Template Notice</span>
+          <p style="margin-bottom:0;">
+            This entry is a reusable <strong>Template / Draft</strong> kept in the repository so creating new posts requires only copying a single HTML file—no CMS, database, or build script needed.
+          </p>
+        </div>
+
+        <section class="section-block" aria-labelledby="tpl-sec-1">
+          <h2 id="tpl-sec-1">1. Goal of the Experiment or Build Step</h2>
+          <p>
+            Write a short paragraph explaining what you set out to build, test, or investigate. Keep it personal and honest—just like explaining the setup to a friend or engineering teammate.
+          </p>
+        </section>
+
+        <section class="section-block" aria-labelledby="tpl-sec-2">
+          <h2 id="tpl-sec-2">2. Hardware &amp; Software Setup</h2>
+          <p>
+            List only the confirmed hardware components, tools, or code files you actually used during this session.
+          </p>
+          <pre><code>/* Example C code snippet or terminal note */
+// Document register settings, MIDI array structures, or test logic here.</code></pre>
+        </section>
+
+        <section class="section-block" aria-labelledby="tpl-sec-3">
+          <h2 id="tpl-sec-3">3. What Worked and What Failed</h2>
+          <p>
+            Documenting what failed is just as valuable as documenting what worked. Note any wiring mistakes, timing bugs, or AI-generated code assumptions that needed manual debugging.
+          </p>
+        </section>
+
+        <section class="section-block" aria-labelledby="tpl-sec-4">
+          <h2 id="tpl-sec-4">4. Next Step &amp; Related Projects</h2>
+          <p>
+            Link this post back to the relevant project detail page so visitors can follow the full story:
+          </p>
+          <ul>
+            <li><a href="../projects/midi-breadboard-instrument.html">Related Project: MIDI Breadboard Instrument</a></li>
+            <li><a href="../projects/multi-functional-controller.html">Related Project: Multi-Functional RC Controller</a></li>
+            <li><a href="../projects/rc-autonomous-vehicle.html">Related Project: RC and Autonomous Vehicle</a></li>
+          </ul>
+          <div class="button-row">
+            <a class="btn btn-secondary" href="index.html">← Back to Blog Index</a>
+          </div>
+        </section>
+      </article>
+
+    </div>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container footer-inner">
+      <div>
+        <strong>Ertunç Özbay</strong> — Personal workshop, project lab, and learning notebook.
+      </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://github.com/ertunc-ozbay" rel="noopener noreferrer">GitHub</a></li>
+      </ul>
+    </div>
+  </footer>
+
+  <script src="../assets/js/main.js"></script>
+</body>
+</html>
diff --git a/rc-autonomous-vehicle.html b/rc-autonomous-vehicle.html
new file mode 100644
index 0000000..c4eb311
--- /dev/null
+++ b/rc-autonomous-vehicle.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>RC and Autonomous Vehicle — Projects — Ertunç Özbay</title>
+  <meta name="description" content="Project notes for the RC and Autonomous Vehicle by Ertunç Özbay: exploring RC control, autonomous behavior, electronics, control logic, and software.">
+  <link rel="icon" type="image/svg+xml" href="../assets/images/favicon.svg">
+  <link rel="stylesheet" href="../assets/css/style.css">
+</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">workshop // notebook // lab</span>
+        </span>
+      </a>
+
+      <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" aria-current="page">Projects</a></li>
+            <li><a class="nav-link" href="../blog/index.html">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>
+  </header>
+
+  <main id="main-content">
+    <div class="container">
+      <nav class="breadcrumb" aria-label="Breadcrumb">
+        <a href="index.html">← Back to Projects</a>
+      </nav>
+
+      <article>
+        <header class="workshop-hero">
+          <div class="card-meta">
+            <span class="badge badge-progress">Status: In progress</span>
+            <span>Project 02 // Electronics, Control Logic &amp; Software</span>
+          </div>
+          <h1>RC and Autonomous Vehicle</h1>
+          <p class="hero-lead">
+            An ongoing project exploring RC control and autonomous vehicle behavior. This project is part of my effort to understand systems across electronics, control logic, and software.
+          </p>
+          <div class="button-row">
+            <a class="btn btn-secondary" href="index.html">All Projects</a>
+            <a class="btn btn-secondary" href="../lab.html">Related Lab Notes</a>
+          </div>
+        </header>
+
+        <section class="section-block reading-width" aria-labelledby="p2-overview">
+          <span class="section-label">01 // Overview</span>
+          <h2 id="p2-overview">Why I Am Building This</h2>
+          <p>
+            A vehicle project sits right at the intersection of the subjects I care about most: physical electronics, control logic, and software decision-making. If a software routine makes a bad assumption, you see it immediately in how the physical vehicle behaves.
+          </p>
+          <p>
+            Through this ongoing build, I want to explore both manual RC control and autonomous behavior step by step, connecting what I study in circuit analysis and embedded programming to a moving system.
+          </p>
+        </section>
+
+        <section class="section-block reading-width" aria-labelledby="p2-confirmed">
+          <span class="section-label">02 // Confirmed Information</span>
+          <h2 id="p2-confirmed">Current Documentation Status</h2>
+          <table class="spec-table">
+            <thead>
+              <tr>
+                <th scope="col">Attribute</th>
+                <th scope="col">Confirmed Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><strong>Project Name</strong></td>
+                <td>RC and Autonomous Vehicle</td>
+              </tr>
+              <tr>
+                <td><strong>Status</strong></td>
+                <td>In progress</td>
+              </tr>
+              <tr>
+                <td><strong>Areas Explored</strong></td>
+                <td>RC control, autonomous behavior, electronics, control logic, and software</td>
+              </tr>
+              <tr>
+                <td><strong>Specific Hardware &amp; Algorithms</strong></td>
+                <td>Details will be documented as the project develops and components are confirmed through testing.</td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+
+        <section class="section-block reading-width" aria-labelledby="p2-learning">
+          <span class="section-label">03 // Workshop Notes</span>
+          <h2 id="p2-learning">What I Am Currently Learning &amp; Next Steps</h2>
+          <div class="callout-box amber">
+            <span class="callout-title">What I Am Currently Learning</span>
+            <p>
+              Understanding how electronics, control logic, and software layers depend on one another when transitioning between manual remote control and autonomous vehicle behavior.
+            </p>
+            <span class="callout-title">Next Step</span>
+            <p style="margin-bottom:0;">
+              Details will be documented as the project develops. I am keeping this page strictly grounded—only adding sensors, microcontrollers, communication protocols, and test results after I confirm them on the workbench.
+            </p>
+          </div>
+        </section>
+      </article>
+
+    </div>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container footer-inner">
+      <div>
+        <strong>Ertunç Özbay</strong> — Personal workshop, project lab, and learning notebook.
+      </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://github.com/ertunc-ozbay" rel="noopener noreferrer">GitHub</a></li>
+      </ul>
+    </div>
+  </footer>
+
+  <script src="../assets/js/main.js"></script>
+</body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..91161b5
--- /dev/null
+++ b/style.css
@@ -0,0 +1,766 @@
+/* ==========================================================================
+   Ertunç Özbay — Personal Workshop, Project Lab & Technical Notebook
+   Dark Metallic Engineering / Workshop Aesthetic
+   Plain CSS • Accessible • Responsive • Reduced-Motion Ready
+   ========================================================================== */
+
+:root {
+  /* Core Metallic & Workshop Surfaces */
+  --bg-primary: #0d1117;
+  --bg-secondary: #131922;
+  --bg-card: #171f2b;
+  --bg-card-hover: #1c2635;
+  --bg-code: #0a0d12;
+
+  /* Brushed Steel Borders & Hairlines */
+  --border-subtle: #253041;
+  --border-strong: #37465d;
+  --border-accent: #e5a93c;
+
+  /* High-Contrast Typography (WCAG AA/AAA compliant on dark surfaces) */
+  --text-primary: #e6edf3;
+  --text-secondary: #b1bfd0;
+  --text-muted: #8494a7;
+
+  /* Workshop Indicator Accents */
+  --accent-amber: #e5a93c;
+  --accent-amber-soft: rgba(229, 169, 60, 0.14);
+  --accent-teal: #4db6ac;
+  --accent-teal-soft: rgba(77, 182, 172, 0.14);
+  --accent-blue: #6ea8fe;
+  --status-progress: #e5a93c;
+  --status-experimental: #4db6ac;
+
+  /* Typography & Rhythm */
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+  --max-width: 1040px;
+  --max-reading-width: 72ch;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+/* Base Reset */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 100%;
+  scroll-behavior: smooth;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  line-height: 1.65;
+  background-color: var(--bg-primary);
+  background-image:
+    radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(180deg, #0d1117 0%, #10161f 100%);
+  background-size: 28px 28px, 100% 100%;
+  color: var(--text-primary);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Accessibility: Skip Link */
+.skip-link {
+  position: absolute;
+  top: -100px;
+  left: 1rem;
+  z-index: 1000;
+  background-color: var(--accent-amber);
+  color: #0d1117;
+  padding: 0.65rem 1.1rem;
+  font-weight: 700;
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+  box-shadow: var(--shadow-panel);
+}
+
+.skip-link:focus {
+  top: 1rem;
+  outline: 3px solid #ffffff;
+  outline-offset: 2px;
+}
+
+/* Accessibility: Visible Keyboard Focus States */
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+summary:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--accent-amber);
+  outline-offset: 3px;
+  border-radius: 3px;
+}
+
+/* Typography Hierarchy */
+h1, h2, h3, h4 {
+  color: var(--text-primary);
+  line-height: 1.25;
+  margin-top: 0;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+}
+
+h1 {
+  font-size: clamp(1.85rem, 3.5vw, 2.55rem);
+  margin-bottom: 1rem;
+}
+
+h2 {
+  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
+  margin-bottom: 0.85rem;
+}
+
+h3 {
+  font-size: 1.18rem;
+  margin-bottom: 0.55rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1.15rem;
+  color: var(--text-secondary);
+}
+
+ul, ol {
+  margin-top: 0;
+  margin-bottom: 1.15rem;
+  padding-left: 1.35rem;
+  color: var(--text-secondary);
+}
+
+li {
+  margin-bottom: 0.4rem;
+}
+
+strong {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+code, pre {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+}
+
+code {
+  background-color: var(--bg-code);
+  color: var(--accent-amber);
+  padding: 0.15rem 0.4rem;
+  border-radius: 4px;
+  border: 1px solid var(--border-subtle);
+}
+
+pre {
+  background-color: var(--bg-code);
+  color: var(--text-primary);
+  padding: 1rem 1.2rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-subtle);
+  overflow-x: auto;
+  line-height: 1.5;
+}
+
+pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+}
+
+a {
+  color: var(--accent-amber);
+  text-decoration: underline;
+  text-underline-offset: 0.22em;
+  transition: color 0.15s ease;
+}
+
+a:hover {
+  color: #f3c66f;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Layout Containers */
+.container {
+  width: 100%;
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 0 1.25rem;
+}
+
+.reading-width {
+  max-width: var(--max-reading-width);
+}
+
+main {
+  flex: 1;
+  padding: 2.5rem 0 4rem;
+}
+
+/* Header & Navigation */
+.site-header {
+  background-color: rgba(19, 25, 34, 0.94);
+  border-bottom: 1px solid var(--border-subtle);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  backdrop-filter: blur(8px);
+}
+
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 4.25rem;
+  gap: 1rem;
+}
+
+.site-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.65rem;
+  text-decoration: none;
+  color: var(--text-primary);
+  font-weight: 700;
+  font-size: 1.05rem;
+}
+
+.site-brand:hover {
+  color: var(--accent-amber);
+}
+
+.brand-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  color: var(--accent-amber);
+}
+
+.brand-subtitle {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  font-weight: 400;
+  color: var(--text-muted);
+}
+
+/* Mobile Navigation Button */
+.nav-toggle {
+  display: none;
+  align-items: center;
+  gap: 0.45rem;
+  background-color: var(--bg-card);
+  color: var(--text-primary);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  padding: 0.5rem 0.8rem;
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+
+.nav-toggle:hover {
+  border-color: var(--accent-amber);
+  color: var(--accent-amber);
+}
+
+.nav-list {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-list li {
+  margin: 0;
+}
+
+.nav-link {
+  display: inline-block;
+  padding: 0.45rem 0.8rem;
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 0.95rem;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+.nav-link:hover {
+  color: var(--text-primary);
+  background-color: var(--bg-card);
+  border-color: var(--border-subtle);
+}
+
+.nav-link[aria-current="page"] {
+  color: var(--accent-amber);
+  background-color: var(--accent-amber-soft);
+  border-color: rgba(229, 169, 60, 0.4);
+  font-weight: 600;
+}
+
+/* Workshop Hero / Intro Panel */
+.workshop-hero {
+  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-card) 100%);
+  border: 1px solid var(--border-strong);
+  border-left: 4px solid var(--accent-amber);
+  border-radius: var(--radius-md);
+  padding: clamp(1.5rem, 3.5vw, 2.5rem);
+  margin-bottom: 2.5rem;
+  box-shadow: var(--shadow-panel);
+}
+
+.workshop-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  color: var(--accent-teal);
+  background-color: var(--accent-teal-soft);
+  border: 1px solid rgba(77, 182, 172, 0.35);
+  padding: 0.25rem 0.65rem;
+  border-radius: 999px;
+  margin-bottom: 1rem;
+}
+
+.hero-lead {
+  font-size: clamp(1.1rem, 2vw, 1.28rem);
+  color: var(--text-primary);
+  max-width: 65ch;
+  margin-bottom: 1rem;
+}
+
+.hero-supporting-line {
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+  color: var(--accent-amber);
+  margin-top: 1.1rem;
+  margin-bottom: 1.5rem;
+}
+
+.button-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1.25rem;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  padding: 0.6rem 1.1rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.btn-primary {
+  background-color: var(--accent-amber);
+  color: #0d1117;
+  border-color: var(--accent-amber);
+}
+
+.btn-primary:hover {
+  background-color: #f0b954;
+  color: #0d1117;
+}
+
+.btn-secondary {
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  border-color: var(--border-strong);
+}
+
+.btn-secondary:hover {
+  background-color: var(--bg-card-hover);
+  border-color: var(--accent-amber);
+  color: var(--accent-amber);
+}
+
+/* Section Headers & Grid Layouts */
+.section-block {
+  margin-bottom: 3rem;
+}
+
+.section-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border-bottom: 1px solid var(--border-subtle);
+  padding-bottom: 0.6rem;
+  margin-bottom: 1.35rem;
+}
+
+.section-label {
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--accent-teal);
+  display: block;
+  margin-bottom: 0.25rem;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
+  gap: 1.25rem;
+}
+
+.card-grid-2 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 1.25rem;
+}
+
+/* Metallic Workshop Cards */
+.card {
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: 1.4rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.card:hover {
+  border-color: var(--border-strong);
+  background-color: var(--bg-card-hover);
+}
+
+.card-top {
+  margin-bottom: 1rem;
+}
+
+.card-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--text-muted);
+}
+
+/* Badges & Tags */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.2rem 0.55rem;
+  border-radius: 4px;
+  border: 1px solid transparent;
+}
+
+.badge-progress {
+  background-color: var(--accent-amber-soft);
+  color: var(--accent-amber);
+  border-color: rgba(229, 169, 60, 0.4);
+}
+
+.badge-experimental {
+  background-color: var(--accent-teal-soft);
+  color: var(--accent-teal);
+  border-color: rgba(77, 182, 172, 0.4);
+}
+
+.badge-draft {
+  background-color: rgba(110, 168, 254, 0.14);
+  color: var(--accent-blue);
+  border-color: rgba(110, 168, 254, 0.4);
+}
+
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  list-style: none;
+  padding: 0;
+  margin: 0.75rem 0 1rem;
+}
+
+.tag-list li {
+  margin: 0;
+}
+
+.tag {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: 0.76rem;
+  color: var(--text-secondary);
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-subtle);
+  padding: 0.18rem 0.55rem;
+  border-radius: 4px;
+}
+
+/* Project Card Learning / Next Step Callouts */
+.project-notes {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 0.85rem 1rem;
+  margin: 0.85rem 0 1.1rem;
+  font-size: 0.92rem;
+}
+
+.project-notes p {
+  margin-bottom: 0.45rem;
+}
+
+.project-notes p:last-child {
+  margin-bottom: 0;
+}
+
+.card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  padding-top: 0.85rem;
+  border-top: 1px solid var(--border-subtle);
+}
+
+/* Callout / Philosophy Panels */
+.callout-box {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-strong);
+  border-left: 4px solid var(--accent-teal);
+  border-radius: var(--radius-md);
+  padding: 1.35rem 1.5rem;
+  margin: 1.5rem 0;
+}
+
+.callout-box.amber {
+  border-left-color: var(--accent-amber);
+}
+
+.callout-title {
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--accent-teal);
+  margin-bottom: 0.5rem;
+  display: block;
+}
+
+.callout-box.amber .callout-title {
+  color: var(--accent-amber);
+}
+
+/* Figure & Schematic Frames */
+.schematic-frame {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: 1rem;
+  margin: 1.5rem 0;
+}
+
+.schematic-caption {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  margin-top: 0.65rem;
+  text-align: center;
+}
+
+/* Breadcrumb / Back Navigation */
+.breadcrumb {
+  margin-bottom: 1.25rem;
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+}
+
+.breadcrumb a {
+  color: var(--text-secondary);
+  text-decoration: none;
+}
+
+.breadcrumb a:hover {
+  color: var(--accent-amber);
+  text-decoration: underline;
+}
+
+/* Filter Toolbar for Blog */
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.filter-btn {
+  background-color: var(--bg-secondary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-subtle);
+  padding: 0.4rem 0.85rem;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  cursor: pointer;
+}
+
+.filter-btn:hover {
+  border-color: var(--border-strong);
+  color: var(--text-primary);
+}
+
+.filter-btn[aria-pressed="true"] {
+  background-color: var(--accent-amber-soft);
+  color: var(--accent-amber);
+  border-color: var(--accent-amber);
+  font-weight: 600;
+}
+
+/* Spec / Component Table */
+.spec-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0 1.5rem;
+  font-size: 0.95rem;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.spec-table th,
+.spec-table td {
+  text-align: left;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.spec-table th {
+  background-color: var(--bg-card);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  text-transform: uppercase;
+}
+
+.spec-table td {
+  color: var(--text-secondary);
+}
+
+/* Footer */
+.site-footer {
+  background-color: var(--bg-secondary);
+  border-top: 1px solid var(--border-subtle);
+  padding: 2rem 0;
+  margin-top: auto;
+  font-size: 0.9rem;
+}
+
+.footer-inner {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.footer-links li {
+  margin: 0;
+}
+
+/* Responsive Mobile Navigation */
+@media (max-width: 760px) {
+  .nav-toggle {
+    display: inline-flex;
+  }
+
+  .site-nav {
+    width: 100%;
+    display: none;
+  }
+
+  .site-nav.is-open {
+    display: block;
+    padding: 0.75rem 0 1rem;
+    border-top: 1px solid var(--border-subtle);
+  }
+
+  .header-inner {
+    flex-wrap: wrap;
+    padding-top: 0.6rem;
+    padding-bottom: 0.6rem;
+  }
+
+  .nav-list {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.25rem;
+  }
+
+  .nav-link {
+    display: block;
+    padding: 0.65rem 0.85rem;
+  }
+}
+
+/* Accessibility: Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
diff --git a/welcome-to-my-workshop-note.html b/welcome-to-my-workshop-note.html
new file mode 100644
index 0000000..7c79599
--- /dev/null
+++ b/welcome-to-my-workshop-note.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Why I Built This Personal Workshop & Learning Notebook — Blog — Ertunç Özbay</title>
+  <meta name="description" content="Starter note explaining why Ertunç Özbay built a static workshop notebook for hardware, software, and open-source learning.">
+  <link rel="icon" type="image/svg+xml" href="../assets/images/favicon.svg">
+  <link rel="stylesheet" href="../assets/css/style.css">
+</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">workshop // notebook // lab</span>
+        </span>
+      </a>
+
+      <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>
+  </header>
+
+  <main id="main-content">
+    <div class="container">
+      <nav class="breadcrumb" aria-label="Breadcrumb">
+        <a href="index.html">← Back to Blog</a>
+      </nav>
+
+      <article class="reading-width">
+        <header class="workshop-hero">
+          <div class="card-meta">
+            <span class="badge badge-draft">Example • Starter Note</span>
+            <time datetime="2026-10-14">October 14, 2026</time>
+            <span>• Category: Personal Learning Reflections</span>
+            <span>• Reading time: 3 min read</span>
+          </div>
+          <h1>Why I Built This Personal Workshop &amp; Learning Notebook</h1>
+          <p class="hero-lead">
+            A short starter note on why I want my website to feel like an open engineering workbench rather than a polished corporate résumé.
+          </p>
+          <ul class="tag-list" aria-label="Article tags">
+            <li><span class="tag">workshop</span></li>
+            <li><span class="tag">hardware-software</span></li>
+            <li><span class="tag">open-source</span></li>
+            <li><span class="tag">learning-in-public</span></li>
+          </ul>
+        </header>
+
+        <section class="section-block" aria-labelledby="note-sec-1">
+          <h2 id="note-sec-1">Starting With Curiosity Instead of Pretending to Know Everything</h2>
+          <p>
+            When people build personal websites, it is easy to fall into the trap of trying to sound like a large company or a finished expert. I wanted the exact opposite. I am a student studying Electrical and Electronics Engineering, and what makes my journey exciting to me is what I am currently learning, testing, and figuring out.
+          </p>
+          <p>
+            I built this static site on GitHub Pages with plain HTML, CSS, and JavaScript so that I can understand every file in the repository and maintain it myself without a complex backend or framework getting in the way.
+          </p>
+        </section>
+
+        <section class="section-block" aria-labelledby="note-sec-2">
+          <h2 id="note-sec-2">Hardware, Software, and Responsibility</h2>
+          <p>
+            Whether I am working on my <a href="../projects/midi-breadboard-instrument.html">MIDI Breadboard Instrument</a>, my <a href="../projects/multi-functional-controller.html">Multi-Functional RC Controller</a>, or my <a href="../projects/rc-autonomous-vehicle.html">RC and Autonomous Vehicle</a> project, my goal is to understand how the physical circuit and the code interact.
+          </p>
+          <p>
+            Just like understanding a car’s steering, brakes, and dynamics makes you a more responsible driver, understanding both hardware and software helps me ask better questions, evaluate AI output critically, spot mistakes, and take responsibility for what I build.
+          </p>
+        </section>
+
+        <section class="section-block" aria-labelledby="note-sec-3">
+          <h2 id="note-sec-3">Related Projects</h2>
+          <ul>
+            <li><a href="../projects/multi-functional-controller.html">Multi-Functional RC Controller</a> (In progress)</li>
+            <li><a href="../projects/rc-autonomous-vehicle.html">RC and Autonomous Vehicle</a> (In progress)</li>
+            <li><a href="../projects/midi-breadboard-instrument.html">MIDI Breadboard Instrument</a> (In progress / Experimental)</li>
+          </ul>
+          <div class="button-row">
+            <a class="btn btn-secondary" href="index.html">← Back to Blog Index</a>
+          </div>
+        </section>
+      </article>
+
+    </div>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container footer-inner">
+      <div>
+        <strong>Ertunç Özbay</strong> — Personal workshop, project lab, and learning notebook.
+      </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://github.com/ertunc-ozbay" rel="noopener noreferrer">GitHub</a></li>
+      </ul>
+    </div>
+  </footer>
+
+  <script src="../assets/js/main.js"></script>
+</body>
+</html>