60 lines
3.1 KiB
Markdown
60 lines
3.1 KiB
Markdown
# PROJECT.md — autotq-modern-ejs
|
||
|
||
## 1) Site overview
|
||
- Stack: Node/Express + EJS templates + global CSS/JS.
|
||
- Brand/entity: **AutoTQ** / Golden Hour Medical, Inc.
|
||
- Content source remains `site.config.js` for factual data (team, literature, testimonials, news, contact).
|
||
- This revision focused on UX/content-structure consistency for people imagery and team bio presentation.
|
||
|
||
## 2) Updated file structure notes (files changed in this pass)
|
||
- `views/company.ejs`
|
||
- `public/css/style.css`
|
||
- `public/js/main.js`
|
||
- `PROJECT.md`
|
||
|
||
## 3) Navigation/routes
|
||
- Primary nav remains: `/`, `/about-autotq`, `/company`, `/research`, `/literature`, `/news`, `/testimonials`, `/contact`.
|
||
- Team profile links from the Company roster continue to use slug routes (e.g., `/<member.slug>`).
|
||
|
||
## 4) Design system notes (this revision)
|
||
- Reinforced visual logic: profile/headshot treatment is now isolated to the team roster cards.
|
||
- Narrative sections (Company mission and Operating mission) continue using neutral/non-profile supporting media (`company4`, `company5`).
|
||
- Added dedicated team-roster card styles and a clear CTA hierarchy for bio reveal (`Read bio` button + collapsible panel).
|
||
|
||
## 5) Component patterns now used
|
||
- Existing split sections and capability cards retained for company narrative blocks.
|
||
- New team-specific component set:
|
||
- `.team-roster` (2-column responsive grid)
|
||
- `.team-person-card` (headshot + person details)
|
||
- `.btn-team-bio` (bio reveal control)
|
||
- `.team-bio-panel` (collapsible bio region)
|
||
- Bio reveal behavior is managed by progressive JS and keeps native button keyboard behavior.
|
||
|
||
## 6) Content/layout updates by page
|
||
- **Company (`company.ejs`)**
|
||
- Kept non-team sections free of employee portraits in mission/operating mission blocks.
|
||
- Reworked “Leadership and specialists” into a true roster with each person’s headshot, name, role, and a `Read bio` button.
|
||
- Added collapsible bio panel per person instead of displaying long bios inline by default.
|
||
- **Audit pass completed (no edits required):**
|
||
- `views/literature.ejs`
|
||
- `views/testimonials.ejs`
|
||
- `views/about-autotq.ejs`
|
||
- `views/research.ejs`
|
||
- `views/index.ejs`
|
||
- These pages were verified to use non-employee support visuals in narrative sections.
|
||
|
||
## 7) JS behavior updates
|
||
- `public/js/main.js` now includes a scoped team bio accordion behavior:
|
||
- Uses `.team-bio-toggle` buttons with `aria-expanded` + `aria-controls`.
|
||
- Toggles `hidden` state on associated `.team-bio-panel`.
|
||
- Keeps one bio open at a time within the company roster for cleaner scanning.
|
||
- Button labels switch between **Read bio** / **Hide bio**.
|
||
|
||
## 8) Accessibility/UX notes
|
||
- Team bio interaction is button-based and keyboard accessible by default.
|
||
- ARIA state and controlled-region linkage are implemented per card.
|
||
- Visual hierarchy now clearly separates abstract/company claims from individual people content.
|
||
|
||
## 9) Known TODOs
|
||
- Optional next pass: animate panel expansion/collapse while preserving reduced-motion preferences.
|
||
- Optional next pass: consolidate legacy unused classes (`.people-list`, `.person-row`, `.team-grid`, `.team-card`) if no longer referenced elsewhere.
|