Attention Visualization Demo
+
+
+
+ Description of your research.
+Methods for understanding and visualizing attention mechanisms in transformer models.
+Interactive Python notebook exploring circuit analysis techniques.
+ Open Notebook +${paper.description}
+ Read More + `; + container.appendChild(card); + }); +} +``` + +### Example 2: Interactive Filters + +```javascript +// Add filtering functionality +function setupFilters() { + const filterButtons = document.querySelectorAll('.filter-btn'); + const cards = document.querySelectorAll('.research-card'); + + filterButtons.forEach(button => { + button.addEventListener('click', () => { + const category = button.dataset.category; + + cards.forEach(card => { + if (category === 'all' || card.dataset.category === category) { + card.style.display = 'block'; + } else { + card.style.display = 'none'; + } + }); + }); + }); +} +``` + +## Common Patterns + +### Responsive Images + +```html +
+```
+
+### Modal Dialogs
+
+```javascript
+function createModal(title, content) {
+ const modal = document.createElement('div');
+ modal.className = 'modal';
+ modal.innerHTML = `
+
+ `;
+ document.body.appendChild(modal);
+
+ modal.querySelector('.close').onclick = () => modal.remove();
+}
+```
+
+## Best Practices
+
+1. **Keep it Simple**: Start with simple examples and add complexity gradually
+2. **Mobile First**: Design for mobile devices first, then enhance for desktop
+3. **Accessibility**: Use semantic HTML and ARIA labels
+4. **Performance**: Optimize images and minimize JavaScript
+5. **Documentation**: Comment your code and update docs when adding features
+
+## Additional Resources
+
+- [MDN Web Docs](https://developer.mozilla.org/) - Web development reference
+- [D3.js Gallery](https://observablehq.com/@d3/gallery) - Visualization examples
+- [Three.js Examples](https://threejs.org/examples/) - 3D visualization examples
diff --git a/docs/getting-started.md b/docs/getting-started.md
new file mode 100644
index 0000000..03bfab8
--- /dev/null
+++ b/docs/getting-started.md
@@ -0,0 +1,99 @@
+# Getting Started
+
+## Quick Start
+
+This guide will help you get started with the Mechanistic Interpretability Showcase.
+
+### Viewing the Showcase
+
+The easiest way to view the showcase is to open `index.html` in your web browser.
+
+#### Method 1: Direct File Opening
+
+Simply double-click the `index.html` file in your file explorer, and it will open in your default browser.
+
+#### Method 2: Local Web Server (Recommended)
+
+Using a local web server provides a better development experience:
+
+**Using Python:**
+```bash
+# Navigate to the project directory
+cd MechanisticInterpretabilityShowcase
+
+# Start a simple HTTP server
+python -m http.server 8000
+
+# Open http://localhost:8000 in your browser
+```
+
+**Using Node.js:**
+```bash
+# Install http-server globally (one-time setup)
+npm install -g http-server
+
+# Start the server
+http-server
+
+# Open http://localhost:8080 in your browser
+```
+
+**Using VS Code:**
+1. Install the "Live Server" extension
+2. Right-click `index.html`
+3. Select "Open with Live Server"
+
+### Project Structure
+
+```
+MechanisticInterpretabilityShowcase/
+├── index.html # Main HTML page
+├── styles.css # Styling and layout
+├── script.js # Interactive functionality
+├── docs/ # Documentation
+│ ├── README.md # Documentation home
+│ ├── getting-started.md # This file
+│ └── examples.md # Example use cases
+├── .gitignore # Git ignore file
+├── README.md # Project README
+└── LICENSE # License information
+```
+
+### Customizing the Showcase
+
+#### 1. Update Content
+
+Edit `index.html` to modify:
+- Hero section text
+- Research topics
+- Demo descriptions
+- About section
+
+#### 2. Change Styling
+
+Edit `styles.css` to customize:
+- Colors (defined in CSS variables)
+- Fonts
+- Layout
+- Animations
+
+#### 3. Add Interactivity
+
+Edit `script.js` to add:
+- Custom animations
+- Interactive features
+- Data visualizations
+- User interactions
+
+### Next Steps
+
+1. Explore the [Examples](examples.md) to see what you can build
+2. Check out the main [README](../README.md) for contribution guidelines
+3. Visit the showcase page to see the interface
+
+## Need Help?
+
+If you encounter any issues or have questions:
+- Check the documentation in the `docs/` folder
+- Open an issue on [GitHub](https://github.com/PrecisionNeuroLab/MechanisticInterpretabilityShowcase/issues)
+- Review the examples for common patterns
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c9e289b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,99 @@
+
+
+
+
+
+ Exploring and understanding the inner workings of neural networks
+ ++ We develop cutting-edge tools and techniques for understanding how neural networks process information + and make decisions. Our work focuses on making AI systems more transparent and interpretable. +
+Tools for visualizing what neurons and layers learn in neural networks.
+Methods for identifying and understanding computational circuits within models.
+Techniques for analyzing how information flows through network architectures.
++ Explore our interactive demonstrations to see mechanistic interpretability in action. +
+Interactive demos will be added here to showcase our interpretability tools.
++ This showcase presents mechanistic interpretability tools developed by the Precision Neuro Lab. + Our mission is to make neural networks more understandable and transparent through rigorous + analysis and visualization techniques. +
+Check out our GitHub repository to learn more or contribute.
+