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