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:

  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

/
├── 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.