113 lines
6.7 KiB
Markdown
113 lines
6.7 KiB
Markdown
# 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.
|