Add complete Context Lab website

- All HTML pages: index, research, people, publications, software, contact, news
- CSS styling with green theme and responsive design
- JavaScript for modals, navigation, forms, and animations
- Images for people, publications, research, software, and news
- Jeremy Manning's CV hosted locally
- README with site documentation for maintainers

Design by Chameleon Studios (chamstudios.com)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: jeremymanning

.gitignore

@@ -5,3 +5,7 @@ _site/
 # Ignore folders generated by Bundler
 .bundle/
 vendor/
+
+# Claude Code instructions (local only)
+CLAUDE.md
+notes/

README.md

@@ -1,2 +1,181 @@
-# contextlab.github.io
-Contextual Dynamics Lab website
+# Contextual Dynamics Lab Website
+
+The official website for the Contextual Dynamics Lab at Dartmouth College, hosted on GitHub Pages.
+
+**Live site:** [https://contextlab.github.io](https://contextlab.github.io)
+
+## Site Structure
+
+```
+contextlab.github.io/
+├── index.html          # Homepage with animated brain
+├── research.html       # Research interests and projects
+├── people.html         # Current members and alumni
+├── publications.html   # Papers, talks, posters, and course materials
+├── software.html       # Open-source software projects
+├── contact.html        # Contact form
+├── news.html           # Lab news and updates
+├── css/
+│   └── style.css       # Main stylesheet
+├── js/
+│   └── main.js         # Interactive components
+├── images/
+│   ├── brain/          # Animated brain frames
+│   ├── people/         # Team member photos
+│   ├── publications/   # Publication thumbnails
+│   └── software/       # Software project images
+└── documents/
+    └── JRM_CV.pdf      # Jeremy Manning's CV
+```
+
+## Design & Theming
+
+Site design by [Chameleon Studios](https://www.chamstudios.com/).
+
+### Color Palette
+
+The site uses a green-based color scheme defined in CSS variables:
+
+```css
+:root {
+    --primary-green: rgb(0, 112, 60);        /* Main brand color */
+    --primary-green-light: rgba(0, 112, 60, 0.6);
+    --bg-green: rgba(0, 112, 60, 0.2);       /* Page backgrounds */
+    --white: #FFFFFF;
+    --dark-text: rgba(0, 0, 0, 0.7);
+}
+```
+
+### Typography
+
+- **Body text:** Nunito Sans (300 weight)
+- **Headings:** Nunito Sans (300-700 weight), lowercase with letter-spacing
+- Base font size: 14px with 1.7 line-height
+
+### Key Design Elements
+
+1. **Sticky Footer Navigation** - Fixed navigation bar at the bottom of the viewport
+2. **Animated Brain** - Homepage features a rotating brain animation (GIF frames)
+3. **Info Panel Toggle** - Homepage "i" button reveals lab description with smooth animation
+4. **Modal Forms** - Contact and join-us forms appear in centered modals
+5. **Publication Cards** - Hover effects reveal additional information
+
+## Pages
+
+### Homepage (index.html)
+- Animated brain image that scales with viewport
+- "Info" button toggles descriptive panel
+- Brain and text resize responsively
+
+### People (people.html)
+- Lab director section
+- Grid of current members
+- "Join Us" modal for prospective members
+- Alumni section with past lab members
+- Collaborators list
+
+### Publications (publications.html)
+- Peer-reviewed articles with thumbnails
+- Talks section with video/PDF links
+- Course materials
+- Conference abstracts and posters
+
+### Contact (contact.html)
+- Contact form (Formspree integration)
+- Physical address and email
+
+## JavaScript Components
+
+Located in `js/main.js`:
+
+- **initDropdowns()** - Dropdown menu behavior
+- **initStickyNav()** - Footer nav visibility on scroll
+- **initSlideshow()** - Image carousel with autoplay
+- **initModal()** - Modal open/close handling
+- **initSmoothScroll()** - Anchor link smooth scrolling
+- **initInfoPanel()** - Homepage info toggle with animations
+- **initContactForms()** - AJAX form submission
+- **initMobileMenu()** - Mobile navigation toggle
+- **initCustomValidation()** - Styled form validation messages
+
+## Forms
+
+Contact forms use [Formspree](https://formspree.io/) for processing. Form validation messages are styled to match the site's green theme.
+
+To update the form endpoint:
+1. Create a Formspree account
+2. Create a new form
+3. Replace the `action` URL in the form HTML
+
+## Adding Content
+
+### New Team Member
+
+1. Add photo to `images/people/` (recommended: 400x400px)
+2. Edit `people.html`, add to appropriate section:
+
+```html
+<div class="team-member">
+    <img src="images/people/name.jpg" alt="Name">
+    <h3>name | role</h3>
+    <p>Bio text here.</p>
+</div>
+```
+
+### New Publication
+
+1. Add thumbnail to `images/publications/` (recommended: 500x500px with green border)
+2. Edit `publications.html`, add to publications grid:
+
+```html
+<div class="publication-card">
+    <img src="images/publications/thumbnail.png" alt="Paper title">
+    <div class="publication-info">
+        <h3>Paper Title</h3>
+        <p>Authors (Year). Journal Name.</p>
+        <a href="https://doi.org/..." target="_blank">PDF</a>
+    </div>
+</div>
+```
+
+### New Software Project
+
+1. Add screenshot to `images/software/`
+2. Edit `software.html`, add to software grid
+
+## Mobile Responsiveness
+
+The site is fully responsive with breakpoints at:
+- **768px** - Tablet layout
+- **480px** - Mobile layout
+
+Key mobile adaptations:
+- Collapsible navigation menu
+- Single-column layouts
+- Adjusted font sizes
+- Touch-friendly tap targets
+
+## Deployment
+
+The site deploys automatically via GitHub Pages when changes are pushed to the `main` branch.
+
+To test locally, open any HTML file directly in a browser or use a local server:
+
+```bash
+python3 -m http.server 8000
+# Then visit http://localhost:8000
+```
+
+## Browser Support
+
+Tested and supported in:
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Credits
+
+- **Design:** [Chameleon Studios](https://www.chamstudios.com/)
+- **Development:** Contextual Dynamics Lab
+- **Hosting:** GitHub Pages

contact.html

@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact — Contextual Dynamics Lab</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body class="contact-page">
+    <!-- Header -->
+    <header class="site-header">
+        <div class="header-inner">
+            <a href="index.html" class="logo">
+                <img src="images/CDL_Avatar.png" alt="Contextual Dynamics Lab">
+                <span class="logo-text">contextual dynamics lab</span>
+            </a>
+            <nav class="main-nav">
+                <ul>
+                    <li><a href="index.html">contextual dynamics lab</a></li>
+                    <li class="dropdown">
+                        <span class="dropdown-toggle">about</span>
+                        <ul class="dropdown-menu">
+                            <li><a href="research.html">research</a></li>
+                            <li><a href="people.html">people</a></li>
+                            <li><a href="news.html">news</a></li>
+                        </ul>
+                    </li>
+                    <li><a href="publications.html">publications</a></li>
+                    <li><a href="software.html">software</a></li>
+                    <li><a href="contact.html">contact</a></li>
+                </ul>
+                <div class="social-icons">
+                    <a href="https://github.com/organizations/ContextLab" target="_blank" title="GitHub">
+                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+                        </svg>
+                    </a>
+                    <a href="http://x.com/contextmemlab/" target="_blank" title="X (Twitter)">
+                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+                        </svg>
+                    </a>
+                    <a href="mailto:contextualdynamics@gmail.com" title="Email">
+                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+                        </svg>
+                    </a>
+                </div>
+            </nav>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        <div class="page-header">
+            <h2>contact</h2>
+            <h3>Like a pack of roving zombies, our lab is always on the lookout for <strong>fresh new brains</strong>.</h3>
+            <p class="page-intro">Are you a <strong>psychology nut</strong> who wants to help crack the mysteries of the mind? Are you a <strong>computer nerd</strong> who wants to code up awesome experiments or use cutting-edge machine learning algorithms to understand cognition? Do you want to <strong>participate</strong> in one of the lab's ongoing studies? Or join our illustrious <strong>fan club</strong>?</p>
+        </div>
+
+        <div class="contact-cta-row">
+            <button class="btn-outline modal-open" data-modal="contact-modal">GET IN TOUCH</button>
+            <img src="images/zombie.png" alt="Zombie illustration" class="zombie-illustration">
+        </div>
+
+        <hr>
+
+        <!-- Contact Information -->
+        <section class="content-section contact-info-section">
+            <div class="contact-info-row">
+                <img src="images/tree-icon.png" alt="Tree illustration" class="tree-illustration">
+                <div class="contact-details">
+                    <h1>contextual dynamics lab</h1>
+                    <h3>professor jeremy r. manning, lab director</h3>
+                    <p>
+                        <a href="http://pbs.dartmouth.edu/" target="_blank">Department of Psychological and Brain Sciences</a><br>
+                        <a href="http://www.dartmouth.edu/" target="_blank">Dartmouth College</a><br>
+                        349 Moore Hall, HB 6207<br>
+                        Hanover, NH 03755<br>
+                        [<a href="https://goo.gl/maps/PST5bTztEUu" target="_blank">map</a>]
+                    </p>
+                    <p>
+                        <a href="mailto:contextualdynamics@gmail.com">contextualdynamics@gmail.com</a><br>
+                        603.646.0070
+                    </p>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Contact Modal -->
+    <div id="contact-modal" class="modal">
+        <div class="modal-content">
+            <button class="modal-close">&times;</button>
+            <h2>get in touch</h2>
+            <form class="contact-form" action="https://formspree.io/f/mzznjnzd" method="POST">
+                <input type="hidden" name="_source" value="Contact Page">
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="first-name">First Name <span class="required">*</span></label>
+                        <input type="text" id="first-name" name="first-name" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="last-name">Last Name <span class="required">*</span></label>
+                        <input type="text" id="last-name" name="last-name" required>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="email">Email Address <span class="required">*</span></label>
+                    <input type="email" id="email" name="email" required>
+                </div>
+
+                <div class="form-group">
+                    <label for="subject">Subject <span class="required">*</span></label>
+                    <input type="text" id="subject" name="subject" required>
+                </div>
+
+                <div class="form-group">
+                    <label for="role">I am a... <span class="required">*</span></label>
+                    <select id="role" name="role" required>
+                        <option value="">Select an option</option>
+                        <option value="psychology-nut">Psychology Nut</option>
+                        <option value="computer-nerd">Computer Nerd</option>
+                        <option value="study-participant">Study Participant</option>
+                        <option value="fan-club">Illustrious Fan Club Member</option>
+                        <option value="lab-manager">Lab Manager/Zombie Herder</option>
+                        <option value="grad-student">Grad Student</option>
+                        <option value="postdoc">Postdoc</option>
+                        <option value="question">Question Inquiry</option>
+                        <option value="funding">Funding Interest</option>
+                        <option value="other">Other</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label for="message">Message <span class="required">*</span></label>
+                    <p class="textarea-helper">If you're interested in joining the lab, please include a paragraph or two about your research interests. Undergraduates should specify how much time you are able to commit to research per week.</p>
+                    <textarea id="message" name="message" rows="6" required></textarea>
+                </div>
+
+                <button type="submit" class="btn-primary">Submit</button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Footer Navigation -->
+    <nav class="footer-nav">
+        <div class="footer-nav-inner">
+            <button class="mobile-menu-toggle" aria-label="Toggle menu">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+            <a href="index.html" class="logo">
+                <img src="images/CDL_Avatar.png" alt="CDL">
+            </a>
+            <ul>
+                <li><a href="index.html">contextual dynamics lab</a></li>
+                <li class="dropdown">
+                    <span class="dropdown-toggle">about</span>
+                    <ul class="dropdown-menu">
+                        <li><a href="research.html">research</a></li>
+                        <li><a href="people.html">people</a></li>
+                        <li><a href="news.html">news</a></li>
+                    </ul>
+                </li>
+                <li><a href="publications.html">publications</a></li>
+                <li><a href="software.html">software</a></li>
+                <li class="active"><a href="contact.html">contact</a></li>
+            </ul>
+        </div>
+    </nav>
+
+    <script src="js/main.js"></script>
+</body>
+</html>