HerStory Developer Instructionsv2.0 Enhanced

Comprehensive Guide for Creating Individual HerStory Pages

What's New in Enhanced Version 2.0

🎉 Major Enhancements Delivered! The enhanced template system now accommodates ALL types of women leaders - from elected officials to grassroots organizers to movement builders.

Key Enhancements

1. Unified Template Approach

Before: One template assumed elected officials with linear career paths

Now: ONE template accommodates ALL story types through flexible optional sections

How it works:

2. Five New Optional Sections

Early Life & Context

For: Leaders with compelling backstories

Shows: How their journey shaped their leadership

Example: Immigration story, overcoming barriers, historical context

Leadership Journey

For: Leaders with clear progression narrative

Shows: Evolution from citizen to leader

Structure: 3-5 steps (Awakening → First Steps → Building → Leading)

Stories of Impact ⭐

For: Leaders with great anecdotes

Shows: Detailed narratives of specific achievements

Example: The Pyramid Lunch fundraising innovation

In Their Own Words

For: Leaders with rich reflections/wisdom

Shows: Extended first-person philosophical insights

Format: 3-6 paragraphs in their voice

Legacy & Ripple Effects

For: Movement builders who enabled others

Shows: Who they mentored, what institutions they built

Example: Listing leaders supported and their achievements

3. Flexible Timeline System

Five Milestone Types:

Type Badge Color Use For Example
POSITION Teal Elected/appointed offices "Elected to City Council"
MOVEMENT Green Organization founding, coalition building "Co-Founded NWPC Chapter"
CAMPAIGN Coral Campaign work, supporting candidates "Managed Smith Campaign"
INNOVATION Amber New strategies, programs, models "Launched Pyramid Fundraising"
RECOGNITION Purple Awards, honors, significant recognition "Woman of the Year Award"
Why This Matters The timeline no longer assumes linear career progression. It now works for organizers, activists, and hybrid leaders by accepting diverse milestone types with visual badges.

4. Expanded Stats Card Options

For Elected Officials

  • Years of service
  • Terms served
  • Bills/initiatives passed
  • Constituent services
  • Levels of government

For Organizers/Activists

  • Years in movement
  • Organizations founded
  • Campaigns supported
  • Leaders mentored
  • Communities served

Example Stats (Elaine Jegi - Organizer):

5. Comprehensive Inline Documentation

Every section in the template now includes:

Project Overview

The Contra Costa HerStory Project documents and celebrates the contributions of women leaders in local politics over the past 50 years. This enhanced document provides comprehensive instructions for creating individual HerStory pages that honor diverse types of women leaders.

Purpose of a HerStory Page

Each HerStory page serves multiple critical functions:

  1. Historical Documentation: Preserve career trajectories and accomplishments for future generations
  2. Inspirational Storytelling: Present compelling narratives that inspire current and future leaders
  3. Educational Resource: Provide detailed information about women's political leadership evolution
  4. Visual Engagement: Create immersive, respectful, celebratory experiences
  5. Legacy Preservation: Ensure contributions are accessible to researchers and students
  6. Inclusive Recognition: Honor ALL types of leadership - elected officials, organizers, activists, and movement builders

Understanding Different Story Types

Start Here! Before choosing which sections to include, first identify what type of story you're telling.

Type 1: Elected Official

Characteristics

  • Held elected office (City Council, Board of Supervisors, State Legislature, etc.)
  • Clear career progression through positions
  • Focus on policy achievements and governance
  • Linear timeline of positions held

Example: Karen Mitchoff (County Supervisor, 12 years)

Sections to Include:

Type 2: Movement Builder/Organizer

Characteristics

  • Founded or led organizations
  • Organized campaigns and movements
  • Enabled other leaders
  • Behind-the-scenes leadership
  • Network building and coalition work

Example: Elaine Jegi (NWPC Co-Founder, 50 years in movement)

Sections to Include:

Type 3: Hybrid Leader

Characteristics

  • Held elected office AND did significant organizing
  • Career includes both public positions and movement work
  • Rich personal journey alongside political career
  • Multiple types of contributions

Example: A County Supervisor who also founded advocacy organizations

Sections to Include:

Type 4: Community Activist

Characteristics

  • Focused on issue advocacy
  • Led grassroots movements
  • May not have held formal positions
  • Impact through organizing and activism

Sections to Include:

Standard Page Structure

REQUIRED SECTIONS (Always Include)

Every HerStory page MUST include these 6 core sections:

1. Hero Section

Purpose: Immediate visual impact and introduction

Components:

2. Stats Cards

Purpose: Quick, memorable facts at a glance

Components: 3-5 statistical cards (4 recommended)

3. Timeline ⭐ STAR FEATURE

Purpose: THE MOST CRITICAL SECTION - chronological journey through milestones

Components: 5-8 timeline entries (minimum 5, maximum 10)

Each Entry Includes:

  • Year badge (circular, on spine)
  • Type badge (Position/Movement/Campaign/Innovation/Recognition)
  • Milestone title
  • Detailed description (2-4 sentences)

4. Major Achievements

Purpose: Highlight 4 key accomplishments or impact areas

Components: 3-6 achievement cards (4 recommended)

5. Inspirational Quote

Purpose: Capture leadership philosophy in their own words

Components: Featured quote (1-3 sentences) + Attribution

6. Footer

Purpose: Connect to broader HerStory Project

Components: Project name, description, copyright, NWPC affiliation

Optional Sections (Include as Needed)

Key Principle Only include optional sections where you have substantial, unique content. Delete unused sections completely from the template.

Optional Section A: Early Life & Context

When to Include:

When to Delete:

Components:

Optional Section B: Leadership Journey

When to Include:

Components:

Optional Section C: Stories of Impact

When to Include:

Components:

Example: The Pyramid Lunch fundraising innovation - How Elaine Jegi's creative approach raised thousands for women candidates through exponential grassroots networking.

Optional Section D: In Their Own Words

When to Include:

Components:

Optional Section E: Legacy & Ripple Effects

When to Include:

Components:

Legacy Categories:

The Timeline Feature - Critical Implementation

⭐ STAR FEATURE - Timeline is the Heart of Every Page

The vertical timeline is the most important element and requires careful attention to detail.

Desktop Layout (>768px)

  1. Spine: Vertical gradient line, 6px wide, centered at left: 50%
  2. Alternating Pattern:
    • Odd entries: Content LEFT, badge CENTER, space RIGHT
    • Even entries: Space LEFT, badge CENTER, content RIGHT
  3. Year Badges:
    • 100px diameter circles
    • Centered on spine with transform
    • 5px white border + 4px colored ring
    • Hover: Scale 1.15x + rotate 5deg
  4. Content Cards:
    • 42% width
    • Colorful left/right border (alternates)
    • 2rem padding
    • 50px connector line to badge
    • Hover: Rise 8px with enhanced shadow

Mobile Layout (<768px)

CRITICAL CHANGES for Mobile
  1. Spine repositions: left: 30px (NOT centered)
  2. ALL entries left-align: No alternation
  3. Year badges: 70px diameter, positioned on left spine
  4. Content cards:
    • Width: calc(100% - 80px)
    • Left margin: 80px
    • ALL have left border (no right borders)
  5. Connector lines: ALL extend from left

Type Badges (New Feature)

Visual indicators showing milestone category:

<span class="timeline-type-badge">POSITION</span>

Badge Options:

Usage: Optional but recommended for mixed timelines

Technical Specifications

Color Palette

:root {
    --primary-teal: #006D77;
    --bright-turquoise: #00C9B7;
    --sunset-coral: #FF6B6B;
    --golden-amber: #F4A261;
    --deep-purple: #4A148C;
    --forest-green: #2D6A4F;
    --warm-cream: #FFF8E7;
    --charcoal: #2C3E50;
}

Color Usage Guidelines:

Typography

Font Families:

/* Headings & Display Text */
font-family: 'Playfair Display', serif;

/* Body Text & Navigation */
font-family: 'Open Sans', sans-serif;

Font Sizes:

Element Desktop Mobile
Hero H1 4.5rem 2.5rem
Section H2 3.5rem 2.5rem
Timeline titles 1.5rem
Body text 1rem - 1.15rem
Stats numbers 3.5rem

Layout Dimensions

Property Value
Max content width 1200px centered
Standard padding 40px horizontal, 80px vertical
Grid gaps 25-60px depending on section
Border radius 15-30px
Box shadows 0 10px 35px rgba(0, 0, 0, 0.08)

Images

Hero Image:

Content Guidelines

Writing Style

Example Content: Timeline Entry

Here's a fully-formed timeline entry showing proper structure:

<div class="timeline-entry">
    <div class="timeline-year-badge">1998</div>
    <div class="timeline-card">
        <span class="timeline-type-badge">POSITION</span>
        <h3>Elected to Pleasant Hill City Council</h3>
        <p>Karen was elected to the Pleasant Hill City Council, 
        becoming one of the few women in East Contra Costa County 
        to hold elected office at that time. During her tenure, 
        she championed improved public transportation access, 
        worked to preserve open space in the rapidly developing 
        eastern suburbs, and established the city's first 
        comprehensive youth programs. Her ability to build 
        consensus among diverse constituencies earned her respect 
        across party lines and set the foundation for her later 
        county-level leadership.</p>
    </div>
</div>

What makes this effective:

Quality Checklist

Before publishing a HerStory page, verify:

Content Completeness

  • All placeholder text replaced
  • No "[PROMPT:" or brackets visible
  • Hero section complete
  • 3-5 stats cards with relevant numbers
  • 5-8 timeline entries in chronological order
  • Timeline type badges match entry types
  • 3-6 achievement cards with meaningful content
  • Inspirational quote section complete
  • Optional sections either complete OR deleted entirely
  • Footer information accurate

Technical Quality

  • All images load with appropriate alt text
  • Page title updated in title tag
  • All navigation links functional
  • Responsive design tested (mobile, tablet, desktop)
  • Timeline displays correctly on all screen sizes
  • Timeline spine positioned correctly
  • Year badges aligned properly
  • Hover effects work smoothly
  • No JavaScript errors
  • Page loads in under 3 seconds

Design Consistency

  • Colors from established palette only
  • Typography sizes and weights consistent
  • Spacing and padding uniform
  • Alignment precise (especially timeline)
  • Visual hierarchy clear
  • Accessibility: WCAG AA contrast ratios met
  • All sections use consistent styling

Content Quality

  • No spelling or grammatical errors
  • Tone appropriate and consistent
  • Facts verified and accurate
  • Dates and numbers correct
  • Quotes properly attributed
  • Timeline in chronological order
  • Achievements meaningful and specific
  • Writing clear and engaging
  • Story type clear from content
  • Optional sections add value

File Naming Convention

[FirstName]_[LastName]_HerStory.html

Examples:

Testing Protocol

Test on these browsers and devices before publishing:

Browsers

Devices

Workflow Summary

Step-by-Step Process

1. Preparation & Story Type Identification

2. Template Selection & Customization

3. Content Entry

4. Timeline Construction (Most Critical)

5. Quality Review

6. Testing

7. Publication

Final Notes

Philosophy Each HerStory page honors real women who made real differences. Approach with respect, accuracy, artistry, inclusivity, and purpose.

The Timeline Is Central

The timeline remains the heart of every HerStory page, whether it shows:

Get the timeline right, and the story will be clear.

Optional Sections Add Depth

The new optional sections allow you to:

Use them wisely. Every section should add unique value.

Remember: These pages honor pioneers who changed history. Treat their stories with the care, professionalism, and creativity they deserve. Whether they held office or organized campaigns, ran for election or supported others who did—every woman leader documented here made the path easier for those who followed.

Document Version

Property Value
Version 2.0 (Enhanced)
Date December 2025
Project Contra Costa HerStory
Organization Contra Costa National Women's Political Caucus

Changes from Version 1.0