Biblical Character Profile Template Documentation

📋 Quick Start Decision Matrix

1️⃣ Character Type Classification

2️⃣ Complexity Assessment

• SIMPLE (1-2 chapters): Core sections, no enhancements, auto-generated mobile tabs
• MODERATE (3-5 chapters): All required + 1-2 enhancements, auto-generated mobile tabs
• COMPLEX (6+ chapters): All sections + 3-5 enhancements, auto-generated mobile tabs
• BOOK-SPANNING: Full treatment with all enhancements, priority-based mobile tabs

3️⃣ Essential Metadata Setup

<meta name="character-gender" content="[male/female]">
<meta name="profile-type" content="[single-page/multi-page]">
<meta name="character-id" content="[character-id]">
<meta name="book-id" content="[book-id]">
<meta name="template-version" content="5.8.1">

🆕 Version 5.8.1 Key Features

• No manual configuration needed - tabs adapt to your content
• Smart prioritization - shows most important sections when many exist
• Maximum 5 tabs for optimal mobile usability
• Swipe gestures for navigation between sections
• Hide on scroll down, show on scroll up
• Priority system ensures key sections always appear:
  1. Overview (priority 1)
  2. Narrative/Journey (priority 2)
  3. Biblical Theology (priority 2)
  4. Application (priority 2)
  5. Themes (priority 3)

How It Works

// Automatic detection and generation
// No HTML needed - just include your sections
// character-page.js handles everything:
- Detects all sections with IDs
- Applies icon and label mapping
- Prioritizes if >5 sections exist
- Generates responsive tab interface

🏗️ Core Section Guidelines

Section 1: Overview

Section 2: Narrative Journey

Section 3: Literary Context & Structure

🔍 Advanced Literary Analysis

Chiastic Structure Analysis

Documentation Format:

<div class="chiasm-structure">
  <div class="chiasm-line">A  [Opening theme]</div>
  <div class="chiasm-line indent-1">B  [Development]</div>
  <div class="chiasm-line indent-2">C  [Crisis/conflict]</div>
  <div class="chiasm-center">CENTER: [Theological pivot point]</div>
  <div class="chiasm-line indent-2">C′ [Resolution mirrors]</div>
  <div class="chiasm-line indent-1">B′ [Development mirrors]</div>
  <div class="chiasm-line">A′ [Closing theme]</div>
</div>

Comprehensive Literary Techniques Checklist

⚡ Enhancement Sections (Complex Characters)

When to Include Enhancement Sections

<div class="word-study">
  <h4>[Hebrew/Greek Term]</h4>
  <p><strong>Pattern:</strong> [Description of wordplay]</p>
  <p><strong>Progression:</strong> [How usage develops]</p>
  <p><strong>Significance:</strong> [Theological impact]</p>
</div>

📜 Second Temple Literature Section

High Priority Characters

Transformation Techniques Taxonomy

1. Presumed Fluency: NT assumes audience knows tradition
2. Temporal Collapse: Future expectations → present reality
3. Textual Braiding: Multiple texts → single claim
4. Authority Demonstration: Shows rather than argues
5. Ethical Surprise: Apocalyptic serves unexpected mercy
6. Role Reversal: Power dynamics inverted
7. Embodied Fulfillment: Abstract becomes concrete
8. Personal Identification: Divine identifies with human

🎵 Songs & Poetry Section

Biblical Women with Songs (Mandatory Inclusion)

📱 Mobile Navigation (New in v5.8.1)

1. Detects Present Sections
   • Scans for all sections with IDs
   • Matches against configuration database
   • Applies appropriate icons and labels
2. Smart Selection (if >5 sections)
   • Uses priority system (1-5)
   • Always includes Overview if present
   • Balances coverage vs. usability
3. Priority Levels

   Priority 1: Overview
   Priority 2: Narrative, Biblical Theology, Application
   Priority 3: Themes, Messianic, Literary Context
   Priority 4: ANE Context, Intertext, Questions, Chiasm
   Priority 5: Enhancement sections (Eden, Wordplay, etc.)

4. User Experience Features
   • Hide on scroll down, show on scroll up
   • Swipe left/right between sections
   • Active state tracking
   • Smooth scroll to sections
   • Maximum 5 tabs for usability

✅ Comprehensive Quality Assurance

Pre-Publication Checklist

Content Quality Standards

📚 Bibliography & Sources Guidelines

Source Categories (Required Order)

1. Primary Sources
   • Hebrew Bible (BHS)
   • Greek New Testament (NA28) if applicable
   • LXX if theologically relevant
2. Major Commentaries
   • Minimum 2 required for any character
   • Academic series preferred (ICC, WBC, NICOT, etc.)
3. Literary & Narrative Analysis
   • Required for all characters
   • Include literary specialists (Alter, Fokkelman, etc.)
4. Second Temple & Jewish Sources (Conditional)
   • Include when Second Temple section present
   • Charlesworth (OT Pseudepigrapha) essential
   • Specific text studies relevant to character
5. Ancient Near Eastern Context
   • Include when ANE parallels significant
   • Archaeological evidence when available
6. Theological & Thematic Studies
   • Biblical theology perspectives
   • Systematic theology connections
7. Reference Works
   • Hebrew/Greek lexicons
   • Dictionaries and encyclopedias

Citation Best Practices

• Chicago Manual of Style, 17th edition
• Descriptive usage tags: Never use section numbers
• Specific page references: When citing particular insights
• Multiple usage: Tag with all relevant sections

Usage Tag Standards

<span class="usage-tag">Narrative Journey, Themes, Biblical Theology</span>
<span class="usage-note">Character development and theological themes, pp. 156-178</span>

🔧 Technical Implementation

Required CSS Classes

JavaScript Features

• Reading Progress: Calculates scroll percentage
• Quick Navigation: Active section highlighting
• Intersection Observer: Lazy-load animations
• Mobile Menu: Responsive navigation
• Bibliography Toggle: Expand/collapse functionality
• Dynamic Mobile Tabs: Auto-generation based on content (v5.8.1)

Performance Optimization

🧰 Advanced Techniques & Best Practices

Character-Specific Optional Sections

<div class="theology-card animate-on-scroll">
  <h3>Prophetic Messages & Fulfillment</h3>
  <table>
    <thead>
      <tr><th>Oracle</th><th>Context</th><th>Fulfillment</th></tr>
    </thead>
    <tbody>
      <tr><td>[Prophecy]</td><td>[Historical context]</td><td>[How fulfilled]</td></tr>
    </tbody>
  </table>
</div>

<div class="theology-card animate-on-scroll">
  <h3>Reign Summary & Evaluation</h3>
  <div class="grid-2">
    <div>
      <h4>Political Context</h4>
      <ul><li>[Major political events]</li></ul>
    </div>
    <div>
      <h4>Theological Evaluation</h4>
      <ul><li>[Did what was right/evil in LORD's sight]</li></ul>
    </div>
  </div>
</div>

<div class="theology-card animate-on-scroll">
  <h3>Gender Dynamics & Power Structures</h3>
  <div class="grid-2">
    <div>
      <h4>👩 Female Agency</h4>
      <ul><li>[Evidence of authority/decision-making]</li></ul>
    </div>
    <div>
      <h4>⚡ Patriarchal Subversion</h4>
      <ul><li>[How story challenges/affirms norms]</li></ul>
    </div>
  </div>
</div>

Multi-Page Profile Structure

File Structure:

/studies/characters/[book]/[character]/[character].html (main)
/studies/characters/[book]/[character]/early-life.html
/studies/characters/[book]/[character]/ministry.html
/studies/characters/[book]/[character]/legacy.html

Navigation Between Pages:

<div class="page-navigation">
  <h3>Multi-Page Study Navigation</h3>
  <div class="page-nav-grid">
    <a href="[character].html" class="page-nav-item current">
      <h4>Main Profile</h4>
      <p class="nav-subtitle">Overview & core analysis</p>
    </a>
    <a href="early-life.html" class="page-nav-item">
      <h4>Early Life</h4>
      <p class="nav-subtitle">Formative experiences</p>
    </a>
  </div>
</div>

🎯 Common Pitfalls & Solutions

📝 Template Files & Examples

Available Templates

• biblical-character-template-v5-8-1.html - Current template with dynamic mobile tabs
• character-page-v5-8.js - Enhanced with auto-generating mobile navigation
• sarah.html - Complete example (complex character)
• hagar.html - Example with Second Temple section
• delilah.html - Moderate character example

Hub Integration

• Characters automatically appear in appropriate hubs
• JSON data structure for hub display
• Search functionality integration
• Cross-reference system
• Mobile-optimized hub navigation

Testing Checklist

// Console verification commands
console.log('Template Version:', document.querySelector('meta[name="template-version"]')?.content);
console.log('Character ID:', document.querySelector('[data-character-id]')?.getAttribute('data-character-id'));
console.log('Quick Nav Items:', document.querySelectorAll('.quick-nav-item').length);
console.log('Animate Elements:', document.querySelectorAll('.animate-on-scroll').length);
console.log('Mobile Tabs:', document.querySelectorAll('.mobile-section-tabs .tab-item').length);
console.log('Tab Priority:', window.innerWidth <= 768 ? 'Active' : 'Desktop mode');

📖 Resources & Tools

📊 Version Changelog