ertunc-ozbay/ertuncozbay.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Deploying the site files

Browse source
This commit is contained in:
ertunc-ozbay 2026-10-15 00:42:24 +03:00
commit 463e128f60
16 changed files with 2491 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CNAME Normal file
View file

@ -0,0 +1 @@
ertuncozbay.dev

113
README.md Normal file
View file

@ -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.

179
about.html Normal file
View file

@ -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>

129
contact.html Normal file
View file

@ -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>

8
favicon.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 540 B

26
hardware-software-bridge.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

180
index.html Normal file
View file

@ -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>

230
lab.html Normal file
View file

@ -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>

73
main.js Normal file
View file

@ -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.");
}
});
});
}
})();

172
midi-breadboard-instrument.html Normal file
View file

@ -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>

59
midi-breadboard-layout.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 4.4 KiB

146
multi-functional-controller.html Normal file
View file

@ -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>

146
post-template.html Normal file
View file

@ -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>

142
rc-autonomous-vehicle.html Normal file
View file

@ -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>

766
style.css Normal file
View file

@ -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;
}
}

121
welcome-to-my-workshop-note.html Normal file
View file

@ -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>