# Site documentation — how this website works

How to **update**, **maintain**, and **understand** the static portfolio for Yongluan Ye.

**Live site:** https://portfolio.yongluanye.com  
**Hosting:** Cloudflare Pages (static — no build step)  
**Reference (legacy):** [Wix portfolio](https://purpleveyyl.wixsite.com/portfolio-of-yonglua) · [Netlify Creative Works](https://transcendent-cannoli-834195.netlify.app/creativeworks)

---

## Directory structure

```text
eve-website/                      ← git repo root (= Pages root)
├── index.html                    ← Home
├── 404.html                      ← Not-found page
├── css/styles.css                ← Design system
├── js/main.js                    ← Mobile nav + form success banner
├── assets/
│   ├── images/
│   │   ├── about-*.jpg / hero / favicon
│   │   ├── creative/             ← Creative Works covers
│   │   └── presentations/        ← Talk thumbnails (left of entries)
│   ├── docs/
│   │   ├── CV-resume-2026.pdf
│   │   └── creative/             ← Job-aid PDF, etc.
│   └── videos/                   ← VR demo (mp4 + webm)
├── pages/
│   ├── about.html
│   ├── research.html
│   ├── presentations.html
│   ├── creative.html             ← Project list
│   ├── creative-*.html           ← Project detail pages
│   ├── cv.html
│   └── connect.html
├── docs/
│   ├── MAINTENANCE.md            ← This file
│   └── ROADMAP.md                ← What to improve next
└── README.md                     ← Cloudflare deploy settings
```

| Piece | Role |
| --- | --- |
| Root `index.html` | Served at `/` with no extra config |
| `pages/` | One topic per page |
| `css/` + `js/` | Shared styles and small UI behavior |
| `assets/` | Images, PDFs, video |
| `docs/` | Human docs (not required for the public site) |

---

## What each page does

| Page | Purpose | Main sources |
| --- | --- | --- |
| **Home** | Brand-first hero + site map | Portfolio intro |
| **About** | Bio, skills chips, education snapshot, portrait | CV 2026 |
| **Research** | Published / under review / in progress | CV + Wix Articles |
| **Presentations** | Talks (with left thumbnails where available) + teacher PD | CV + Wix Presentations |
| **Creative Works** | Title-first project list → detail pages | Netlify creative works |
| **CV** | Highlights + PDF download | `assets/docs/CV-resume-2026.pdf` |
| **Connect** | LinkedIn, ResearchGate, email, contact form | Professional profiles |

**Vs Wix**

- Cleaner nav (no duplicate Portfolio links).
- Articles → **Research**; Presentations and Trainings → **Presentations**.
- Dedicated **About** and **Connect** (Wix only had home sections / broken socials).
- Creative Works uses real projects (Wix Creative page was still placeholders).

---

## How to update common things

### Change text on a page

1. Edit content inside `<main>…</main>` in `pages/*.html` or `index.html`.
2. Keep header/footer nav lists in sync if you add or rename a page.
3. Prefer title case for page headings and section labels; keep published paper titles in their original casing.
4. Commit and push — Cloudflare Pages redeploys from Git.

### Update the CV PDF

1. Replace `assets/docs/CV-resume-2026.pdf` (or rename and update every link).
2. Refresh highlights on `cv.html`, and sync `research.html` / `presentations.html` / `about.html` if needed.
3. Keep LinkedIn and email consistent with the PDF.

### Add a publication

- Open `pages/research.html`.
- Add an `<article class="entry">` under Published, Under Review, or In Progress.
- Include DOI links when available.

### Add a presentation (with optional thumbnail)

1. Add an `<article class="entry">` (or `entry entry--with-media`) on `pages/presentations.html`.
2. For a left thumbnail:
   - Save a ~800×600 JPEG under `assets/images/presentations/`.
   - Use:

```html
<article class="entry entry--with-media">
  <button type="button" class="entry-thumb-trigger" aria-label="View full-size image">
    <img class="entry-thumb" src="../assets/images/presentations/your-image.jpg" alt="" width="800" height="600" loading="lazy" />
  </button>
  <div class="entry-body">
    <!-- title, date, co-presenters, abstract -->
  </div>
</article>
```

Clicking a thumb opens a full-size lightbox (`js/main.js`).

3. Rows without images stay as plain `<article class="entry">`.

### Add or edit a Creative Works project

1. Add a row on `pages/creative.html` (title first, small thumb on the right).
2. Add a detail page `pages/creative-your-project.html` (copy an existing creative detail page).
3. Put covers in `assets/images/creative/`; PDFs in `assets/docs/creative/`; video in `assets/videos/`.

### About focus-area chips

Edit the `.chip-row` on `pages/about.html`. Current chips include curriculum, teaching with technology, teacher training, immersive learning, data analysis, research design and implementation, and quantitative and qualitative data collection.

### Change colors or fonts

- CSS variables: top of `css/styles.css` (`:root`).
- Fonts (Google Fonts in each HTML `<head>`): **Source Serif 4** (headings) + **Source Sans 3** (body).

### Images inventory

| Path / file | Used on |
| --- | --- |
| `about-portrait.jpg` | About, Connect |
| `about-xr-journey.jpg` | Research (captioned) |
| `about-scene.jpg` | Presentations hero |
| `about-creative.jpg` | Optional / legacy |
| `creative/*` | Creative Works list + details |
| `presentations/*` | Presentations entry thumbs |
| `favicon.svg` | All pages |
| `hero-atmosphere.svg` | Home hero background |

**Creative Works assets**

| Path | Project |
| --- | --- |
| `images/creative/new-j1-teacher-training.jpg` | J1 cover |
| `docs/creative/new-j1-teacher-job-aid.pdf` | J1 job aid |
| [Canva — Classroom management](https://www.canva.com/design/DAGGZK8SngM/7fXJqRY1rIzsjEsAzbVg0w/view) | J1 slides |
| `images/creative/ux-for-teachers.jpg` | UX video cover |
| [youtu.be/Y48Mtdl0WuQ](https://youtu.be/Y48Mtdl0WuQ) | UX video |
| `images/creative/cal-website*.jpg` | DoDEA screenshots |
| [iltexas.org DoDEA grants](https://www.iltexas.org/about-us/grants/dodea-grants) | Live grant page |
| `images/creative/vr-game*.jpg` | VR stills |
| `videos/vr-game-demo.mp4` / `.webm` | VR demo |

Detail pages: `creative-j1-training.html`, `creative-ux-video.html`, `creative-dodea-webpage.html`, `creative-vr-game.html`.

**Presentation thumbnails** (`assets/images/presentations/`)

| File | Talk |
| --- | --- |
| `systematic-review.jpg` | Follow-up VRALL systematic review (July 2026) |
| `interweaving.jpg` | Interweaving immersive realities (May 2025) |
| `mediating-reading.jpg` | Mediating online reading (May 2025) |
| `ai-powered-vr.jpg` | AI-powered VR (May 2025) |
| `large-scale-vr.jpg` | Large-scale VR implementation (May 2024) |
| `listening-tasks.jpg` | High-immersion VR listening (Oct 2023) |
| `gamification-aect.jpg` | Gamification / senior adults — AECT (Oct 2023) |
| `gamification-infinity.jpg` | Gamification — Infinity Festival (Nov 2022) |

### Social links

On `pages/connect.html`:

- LinkedIn: https://www.linkedin.com/in/yongluan-ye/
- ResearchGate: https://www.researchgate.net/profile/Yongluan-Ye

### Contact form (FormSubmit)

Posts to [FormSubmit](https://formsubmit.co) → `yongluan.eve.ye@gmail.com`.

1. Submit a **test message** on the live Connect page.
2. Open the **activation email** once and confirm.
3. Later submissions arrive as normal email.

To change the inbox: update the form `action` (`https://formsubmit.co/YOUR@EMAIL`) and the `mailto:` links. Hidden fields set the subject and `?sent=1` success redirect (`js/main.js` shows the thank-you banner).

### Open Graph / canonical URLs

If the domain changes, search for `portfolio.yongluanye.com` and update `og:url`, `og:image`, and `link rel="canonical"` on each page.

---

## Local preview

From the repo root (no build tools):

```bash
python -m http.server 8080
# or: npx --yes serve .
```

Open http://localhost:8080

---

## Cloudflare Pages notes

| Setting | Value |
| --- | --- |
| Framework preset | None |
| Build command | *(empty)* or `exit 0` |
| Build output directory | `/` or `.` |
| Root directory | blank / `/` |
| Production branch | `main` |

See `README.md` for the full deploy walkthrough.

---

## Privacy

Connect shows **email only** (no phone) plus the contact form. The CV PDF may still contain a phone number if it appears in the résumé file itself.