Political Campaign Website

A modern, responsive political campaign website built with 11ty (Eleventy) static site generator, using Markdown for content and Nunjucks templates for layouts.

Features

• Markdown-Based Content: Easy to edit content files without touching HTML
• Nunjucks Templates: Reusable layouts and components
• Data Files: All dynamic content managed through JavaScript data files
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• Bold Visual Identity: Custom design with distinctive typography and colors
• Key Pages:
  • Home: Hero section with campaign message, priorities, and latest news
  • About: Candidate story, values, and timeline
  • Events: Upcoming campaign events and rallies
  • Contact: Contact form and campaign office information
• Interactive Donate Modal: Integrated donation widget
• Social Media Integration: Links to all major platforms
• Accessibility: Semantic HTML and ARIA labels
• Performance Optimized: Static site generation for fast loading

Installation

1. Install dependencies:

npm install

2. Build the site:

npm run build

3. Serve locally with hot reload:

npm start

The site will be available at http://localhost:8080

Project Structure

campaign-site/
├── src/
│   ├── _layouts/              # Nunjucks page layouts
│   │   ├── base.njk          # Base template with nav/footer
│   │   ├── home.njk          # Home page layout
│   │   └── page.njk          # Standard page layout
│   ├── _includes/
│   │   └── components/       # Reusable Nunjucks components
│   │       ├── priorities.njk
│   │       ├── cta-banner.njk
│   │       ├── news.njk
│   │       └── donate-modal.njk
│   ├── _data/                # JSON data files
│   │   ├── home.json         # Home page content
│   │   ├── about.json        # About page data
│   │   ├── events.json       # Events list
│   │   └── contact.json      # Contact information
│   ├── css/
│   │   └── style.css         # Main stylesheet
│   ├── js/
│   │   └── main.js           # Interactive functionality
│   ├── images/               # Images and assets
│   ├── about/
│   │   └── index.md          # About page (Markdown)
│   ├── events/
│   │   └── index.md          # Events page (Markdown)
│   ├── contact/
│   │   └── index.md          # Contact page (Markdown)
│   └── index.md              # Home page (Markdown)
├── public/                   # Built site (generated)
├── .eleventy.js              # 11ty configuration
└── package.json

Customization

Editing Content

All content is managed through easy-to-edit JSON files:

Home Page Content - Edit src/_data/home.json:

{
  "hero": {
    "title": [
      { "text": "Building a Better", "highlight": false },
      { "text": "Tomorrow", "highlight": true },
      { "text": "Together", "highlight": false }
    ],
    "subtitle": "Your campaign message here...",
    "image": "/images/hero-photo.jpg"
  }
}

Events - Edit src/_data/events.json:

[
  {
    "month": "FEB",
    "day": "18",
    "title": "Your Event Title",
    "description": "Event description..."
  }
]

About Page - Edit src/_data/about.json for values and timeline

Contact Info - Edit src/_data/contact.json

Colors

Edit the CSS variables in src/css/style.css:

:root {
  --primary: #003b71;        /* Your dark blue */
  --secondary: #65b2e8;      /* Your light blue */
  --accent: #FBC02D;         /* Accent color */
}

Logo

Replace the text logo in src/_layouts/base.njk:

<a href="/" class="logo">
  <img src="/images/logo.svg" alt="Campaign Logo" style="height: 50px;">
</a>

Hero Image

1. Add your image to src/images/hero-photo.jpg
2. Update the path in src/_data/home.json:

{
  "hero": {
    "image": "/images/hero-photo.jpg",
    "imageAlt": "Description of your image"
  }
}

Social Media Links

Edit in src/_layouts/base.njk - find the footer section and update URLs:

<a href="https://facebook.com/yourpage" ...>
<a href="https://mastodon.social/@yourusername" ...>

How It Works

Markdown + Data Files

Pages are written in Markdown (.md) which makes them easy to edit:

• src/index.md - Home page
• src/about/index.md - About page
• src/events/index.md - Events page
• src/contact/index.md - Contact page

Dynamic content (events, priorities, news) comes from JSON files in src/_data/ which are automatically available in templates.

Nunjucks Templates

Templates in src/_layouts/ define the HTML structure:

• base.njk - Navigation and footer (used by all pages)
• home.njk - Home page specific layout with hero
• page.njk - Standard page layout with page hero

Components in src/_includes/components/ are reusable pieces that can be included in any page.

Example Workflow

To add a new event:

1. Open src/_data/events.json
2. Add a new object to the array:

{
  "month": "MAR",
  "day": "15",
  "type": "Rally",
  "title": "Spring Campaign Rally",
  "time": "2:00 PM - 5:00 PM",
  "location": "City Park",
  "description": "Join us for our biggest rally yet!",
  "buttonText": "Register Now",
  "buttonUrl": "#"
}

3. Save and rebuild - the event automatically appears on the Events page!

Deployment

Netlify

1. Connect your Git repository to Netlify
2. Build command: npm run build
3. Publish directory: public

Vercel

1. Import your repository
2. Build command: npm run build
3. Output directory: public

GitHub Pages

1. Build the site: npm run build
2. Deploy the public folder to your GitHub Pages branch

Browser Support

• Chrome (last 2 versions)
• Firefox (last 2 versions)
• Safari (last 2 versions)
• Edge (last 2 versions)
• Mobile browsers (iOS Safari, Chrome Android)

Legal Disclaimer

This is a template for political campaign websites. Ensure compliance with:

• FEC regulations for political advertising
• Campaign finance disclosure requirements
• Data privacy laws (GDPR, CCPA where applicable)
• Accessibility standards (WCAG 2.1 AA)

License

ISC License - Free to use and modify for your campaign needs.