vs-branch-10

.gitignore

@@ -31,5 +31,4 @@ scripts/blog_content.json
 .Spotlight-V100
 .Trashes
 ehthumbs.db
-Thumbs.db
-CLAUDE.md
+Thumbs.db

.windsurf/rules/css-style.md

@@ -0,0 +1,62 @@
+---
+trigger: model_decision
+description: whenever any *.css file is changed
+globs: 
+---
+## Introduction
+
+These guidelines establish consistent CSS coding practices, ensuring maintainable and responsive styles across the website.
+
+## Guidelines
+
+### CSS Variables
+- Define colors and typography in `:root`
+```css
+:root {
+  --primary-color: #007bff;
+  --font-family-base: 'Arial', sans-serif;
+  --spacing-unit: 1rem;
+}
+```
+
+### Responsive Design
+- Use mobile-first approach for media queries
+- Implement breakpoints at:
+  - 500px (mobile)
+  - 768px (tablet portrait)
+  - 900px (tablet landscape)
+  - 1300px (desktop)
+  - 1700px (large desktop)
+
+### Units and Measurements
+- Use `rem` units for font sizes and spacing
+- Use relative units for flexible layouts
+- Use percentages for fluid widths
+
+### Example Media Query Structure
+```css
+/* Mobile first base styles */
+.component {
+  width: 100%;
+}
+
+/* Tablet portrait */
+@media (min-width: 768px) {
+  .component {
+    width: 50%;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1300px) {
+  .component {
+    width: 33.33%;
+  }
+}
+```
+
+## Common Pitfalls
+- Using pixel units instead of relative units
+- Not following mobile-first approach
+- Hardcoding colors and typography instead of using CSS variables
+- Inconsistent breakpoint usage 

.windsurf/rules/general-code-style.md

@@ -0,0 +1,45 @@
+---
+trigger: always_on
+description: 
+globs: 
+---
+## Introduction
+
+These guidelines establish fundamental coding standards that apply across all file types in the project, ensuring consistency and maintainability.
+
+## Guidelines
+
+### Indentation and Formatting
+- Use 2-space indentation consistently across all files
+- Maintain consistent spacing around operators and blocks
+- Follow language-specific formatting conventions
+
+### Code Organization
+- Follow DRY (Don't Repeat Yourself) principles
+- Reuse components, variables, and styles where possible
+- Keep related code grouped together logically
+
+### Documentation
+- Add comments for complex logic
+- Write self-documenting code where possible
+- Use clear, descriptive names for variables, functions, and components
+
+## Examples
+
+```javascript
+// Good - Self-documenting code with clear naming
+const calculateTotalPrice = (basePrice, taxRate) => {
+  return basePrice * (1 + taxRate);
+};
+
+// Bad - Unclear naming and unnecessary comments
+const calc = (p, t) => {
+  // multiply price by tax
+  return p * (1 + t);
+};
+```
+
+## Common Pitfalls
+- Inconsistent indentation across different file types
+- Code duplication instead of component reuse
+- Over-commenting obvious code while under-documenting complex logic 

.windsurf/rules/html-markdown-style.md

@@ -0,0 +1,44 @@
+---
+trigger: always_on
+description: 
+globs: 
+---
+ ## Introduction
+
+These guidelines ensure consistent and semantic markup across HTML templates and Markdown content files, promoting accessibility and maintainability.
+
+## Guidelines
+
+### HTML Structure
+- Use semantic HTML elements appropriately
+  - `<header>` for page headers
+  - `<nav>` for navigation
+  - `<main>` for primary content
+  - `<article>` for self-contained content
+  - `<section>` for thematic grouping
+  - `<footer>` for page footers
+
+### CSS Class Naming
+- Follow BEM (Block Element Modifier) naming convention
+  ```html
+  <!-- Example of BEM naming -->
+  <nav class="s-header__nav">
+    <ul class="s-header__nav-list">
+      <li class="s-header__nav-item">
+        <a class="s-header__nav-link s-header__nav-link--active" href="#">Home</a>
+      </li>
+    </ul>
+  </nav>
+  ```
+
+### Markdown Usage
+- Keep content files in Markdown format where possible
+- Use appropriate heading levels (h1-h6)
+- Maintain consistent spacing between sections
+- Use lists and tables for structured content
+
+## Common Pitfalls
+- Using non-semantic div elements instead of appropriate HTML5 elements
+- Inconsistent BEM naming patterns
+- Converting Markdown content to HTML unnecessarily
+- Skipping heading levels in document structure

.windsurf/rules/image-guidelines.md

@@ -0,0 +1,53 @@
+---
+trigger: model_decision
+description: working with images
+globs: 
+---
+ ## Introduction
+
+These guidelines ensure consistent image handling, optimization, and accessibility across the website.
+
+## Guidelines
+
+### Image Optimization
+- Compress all images to reduce file size while maintaining acceptable quality
+- Choose appropriate image formats:
+  - JPEG for photographs
+  - PNG for images with transparency
+  - SVG for icons and logos
+  - WebP as a modern alternative when browser support allows
+
+### Naming Convention
+- Follow the pattern: `[name]-[descriptor].[extension]`
+- Examples:
+  ```
+  profile-photo.jpg
+  hero-banner-large.png
+  icon-search.svg
+  ```
+
+### Accessibility
+- Include meaningful alt text for all images
+- Use empty alt="" for decorative images
+- Provide descriptive filenames that indicate image content
+
+### Example Implementation
+```html
+<!-- Good -->
+<img 
+  src="team-member-john.jpg" 
+  alt="Dr. John Smith, Lead Researcher"
+  width="300"
+  height="400"
+/>
+
+<!-- Bad -->
+<img src="IMG001.jpg" />
+```
+
+## Common Pitfalls
+- Uploading uncompressed images
+- Missing alt text on important images
+- Using generic or numbered filenames
+- Not following the naming convention
+- Forgetting to specify image dimensions

.windsurf/rules/javascript-style.md

@@ -0,0 +1,58 @@
+---
+trigger: model_decision
+description: making js related edits
+globs: 
+---
+## Introduction
+
+These guidelines establish modern JavaScript coding practices, ensuring consistent and maintainable code across the project.
+
+## Guidelines
+
+### Modern JavaScript Features
+- Use ES6+ features consistently:
+  - Arrow functions for callbacks and methods
+  - Template literals for string interpolation
+  - Destructuring for object and array manipulation
+  - Spread/rest operators where appropriate
+
+### Code Structure
+- Always include 'use strict' mode
+- Use `const` by default, `let` when reassignment is needed
+- Never use `var`
+- Use camelCase for variable and function names
+
+### Asynchronous Code
+- Use async/await for asynchronous operations
+- Implement proper error handling with try/catch blocks
+```javascript
+// Good
+async function fetchData() {
+  try {
+    const response = await api.getData();
+    return response;
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    throw error;
+  }
+}
+
+// Bad
+function fetchData() {
+  return api.getData()
+    .then(response => response)
+    .catch(error => console.error(error));
+}
+```
+
+### Event Handling
+- Prefer event delegation for multiple similar elements
+- Use descriptive event handler names
+- Remove event listeners when components are destroyed
+
+## Common Pitfalls
+- Not using strict mode
+- Mixing async/await with .then() chains
+- Missing error handling in async operations
+- Using var instead of const/let
+- Direct event binding instead of delegation for multiple elements 

.windsurf/rules/project-structure.md

@@ -0,0 +1,29 @@
+---
+trigger: always_on
+description: 
+globs: 
+---
+## Introduction
+
+These guidelines ensure consistent project organization and documentation maintenance across the CoMPhy Lab website codebase.
+
+## Guidelines
+
+### Repository Structure
+- The README.md file at repository root serves as the primary documentation
+- Templates are located in `_layouts/*.html`
+- Each template has a corresponding CSS file:
+  - `default.html` → `assets/css/styles.css`
+  - `research.html` → `assets/css/research.css`
+  - `team.html` → `assets/css/team.css`
+  - All templates use `search.css` and `styles.css`
+
+### Documentation Maintenance
+- Keep README.md up-to-date with any structural changes
+- Document any new files or directories added to the project
+- Manual control over Jekyll server deployment is preferred
+
+## Common Pitfalls
+- Forgetting to update README.md after structural changes
+- Inconsistent template-to-CSS file mapping
+- Running Jekyll server automatically instead of manual control