Merge pull request open-neuromorphic#224 from neural-loop/design-adjustments

Design adjustments

Author: neural-loop

CONTRIBUTING.md

@@ -0,0 +1,183 @@
+# Contributing to Open Neuromorphic
+
+First off, thank you for considering contributing to the Open Neuromorphic (ONM) website! We're thrilled you're here and appreciate you taking the time to help us grow. This is a community-driven project, and every contribution, no matter how small, is valuable.
+
+This document provides guidelines for contributing to the ONM website. Please read it carefully to ensure a smooth and effective collaboration process.
+
+Before you start, please read our [Code of Conduct](./CODE_OF_CONDUCT.md). We expect all contributors to adhere to it in all interactions with the project.
+
+## Table of Contents
+- [Ways to Contribute](#ways-to-contribute)
+- [Getting Started: Local Development Setup](#getting-started-local-development-setup)
+- [How to Submit Changes](#how-to-submit-changes)
+  - [Reporting Bugs and Suggesting Enhancements](#reporting-bugs-and-suggesting-enhancements)
+  - [Your First Code Contribution](#your-first-code-contribution)
+  - [Submitting a Pull Request](#submitting-a-pull-request)
+- [Content Contribution Guide](#content-contribution-guide)
+  - [General Guidelines](#general-guidelines)
+  - [Adding Blog Posts](#adding-blog-posts)
+  - [Adding Events (Workshops, Student Talks, etc.)](#adding-events-workshops-student-talks-etc)
+  - [Adding Hardware or Software Pages](#adding-hardware-or-software-pages)
+  - [Adding Contributor Profiles](#adding-contributor-profiles)
+- [Image Guidelines](#image-guidelines)
+- [Style and Coding Guidelines](#style-and-coding-guidelines)
+  - [Commit Messages](#commit-messages)
+
+## Ways to Contribute
+
+There are many ways to contribute to the ONM website:
+
+*   **Reporting Bugs:** If you find a bug on the site, please report it in our [GitHub Issues](https://github.com/open-neuromorphic/open-neuromorphic.github.io/issues).
+*   **Suggesting Enhancements:** Have an idea for a new feature or an improvement? Open an issue to start a discussion.
+*   **Adding Content:** Contribute a blog post, add a new neuromorphic hardware or software entry, or update an existing page.
+*   **Improving Code:** Help us improve the website's templates, styles, or functionality.
+
+For a more user-friendly overview of how to get involved with the community, please visit our [Getting Involved page](https://open-neuromorphic.org/getting-involved/).
+
+## Getting Started: Local Development Setup
+
+To work on the website locally, you'll need to set up a development environment.
+
+### Prerequisites
+
+*   **Hugo (Extended version):** `0.147.7` or later.
+*   **Node.js:** `22.16.0` or later (which includes `npm`).
+*   **Go:** `1.24.3` or later.
+
+### Setup Steps
+
+1.  **Fork and Clone the Repository:**
+    First, fork the repository to your own GitHub account, then clone it to your local machine.
+
+    ```bash
+    git clone https://github.com/YOUR_USERNAME/open-neuromorphic.github.io.git
+    cd open-neuromorphic.github.io
+    ```
+
+2.  **Install Dependencies:**
+    This project uses `npm` to manage development tools like Tailwind CSS.
+
+    ```bash
+    npm install
+    ```
+
+3.  **Run the Development Server:**
+    This command starts Hugo's local server, which will watch for changes and automatically refresh your browser.
+
+    ```bash
+    npm run dev
+    ```
+
+    The site will be available at `http://localhost:1313/`.
+
+## How to Submit Changes
+
+### Reporting Bugs and Suggesting Enhancements
+
+Use [GitHub Issues](https://github.com/open-neuromorphic/open-neuromorphic.github.io/issues) to report bugs or suggest new features. Please provide as much detail as possible, including steps to reproduce for bugs.
+
+### Submitting a Pull Request
+
+All code and content changes should be submitted via a Pull Request (PR).
+
+1.  **Create a Branch:** Create a new branch from `main` for your changes. Use a descriptive name like `feature/new-hardware-page` or `fix/mobile-menu-bug`.
+    ```bash
+    git checkout -b feature/your-feature-name
+    ```
+
+2.  **Make Your Changes:** Edit or add files as needed.
+
+3.  **Commit Your Changes:** Write clear, concise commit messages. See our [Commit Message Guidelines](#commit-messages).
+    ```bash
+    git commit -m "feat(hardware): Add page for Intel Loihi 2"
+    ```
+
+4.  **Push to Your Fork:**
+    ```bash
+    git push origin feature/your-feature-name
+    ```
+
+5.  **Open a Pull Request:** Go to the original repository on GitHub and open a Pull Request from your forked branch to the `main` branch. Provide a clear title and description for your PR. If it resolves an existing issue, link it using `Closes #issue-number`.
+
+## Content Contribution Guide
+
+Adding new content is one of the best ways to contribute. We use Hugo's [archetypes](https://gohugo.io/content-management/archetypes/) to ensure new content has the correct structure.
+
+### General Guidelines
+
+*   **Use Archetypes:** Always create new content with `hugo new <path>`. This pre-fills the necessary front matter. For content that should have its own images and assets, create a page bundle by adding `index.md` to the path.
+    *   Example: `hugo new blog/my-new-post/index.md`
+*   **Draft Status:** New content is created with `draft: true`. This prevents it from being published. When your content is ready, change this to `draft: false`.
+*   **SEO is Key:**
+    *   **`title`:** 50-60 characters. Make it descriptive and keyword-rich.
+    *   **`description`:** 120-160 characters. This is the summary shown in search engine results.
+
+### Adding Blog Posts
+
+1.  **Create the file:**
+    ```bash
+    hugo new blog/your-post-title-slug/index.md
+    ```
+2.  **Location:** `content/blog/your-post-title-slug/index.md`
+3.  **Images:** Place images for the post inside the `content/blog/your-post-title-slug/` directory.
+4.  **Front Matter:** Fill in the `title`, `description`, `author`, and `image` (for the banner).
+
+### Adding Events (Workshops, Student Talks, etc.)
+
+1.  **Create the file:**
+    *   **Workshop:** `hugo new workshops/your-event-slug/index.md`
+    *   **Student Talk:** `hugo new neuromorphic-computing/student-talks/your-talk-slug/index.md`
+    *   **Hacking Hour:** `hugo new neuromorphic-computing/software/hacking-hours/your-session-slug/index.md`
+2.  **Front Matter:** Fill in all event-specific fields: `title`, `author`, `date` (event date), `start_time`, `end_time`, `time_zone`, `upcoming`, `video` (add YouTube ID after the event), `image`, `speaker_photo`, and `speaker_bio`. Ensure the `type` field is set correctly (`workshops`, `student-talks`, or `hacking-hours`).
+
+### Adding Hardware or Software Pages
+
+1.  **Create the file:**
+    *   **Hardware:** `hugo new neuromorphic-computing/hardware/manufacturer-chip-name/index.md`
+    *   **Software:** `hugo new neuromorphic-computing/software/snn-frameworks/software-name/index.md`
+2.  **Front Matter:** Follow the structure in the respective archetype. These pages have detailed front matter for specifications.
+3.  **Images:** Place logos and product images inside the new directory.
+
+### Adding Contributor Profiles
+
+To link content to an author, a contributor profile is required.
+
+1.  **Create the file:**
+    ```bash
+    hugo new contributors/full-name-slug/index.md
+    ```
+    The slug should be the person's name, lowercase and hyphenated (e.g., `jens-e-pedersen`).
+2.  **Front Matter:**
+    *   The **`title`** field **must be the person's full name**. This exact string is used to link them from the `author` field in other content.
+    *   Add a profile `image` (square) and `social` links.
+
+## Image Guidelines
+
+*   **Placement:** For content-specific images (banners, figures, speaker photos), place them inside the page bundle directory (e.g., `content/blog/my-post/`).
+*   **Global Images:** For general site images, use the `static/images/` directory.
+*   **Dimensions:**
+    *   **Banners / Open Graph (OG) Images:** 1200x630px.
+    *   **Profile / Speaker Photos:** Square (e.g., 200x200px).
+*   **OG Images:** The site automatically generates Open Graph images for social sharing based on the page's `title` and `description`. Providing a high-quality `image` in the front matter (1200x630px) will override the generated one for that page.
+
+## Style and Coding Guidelines
+
+*   **Templates:** Hugo templates are located in `layouts/`.
+*   **Styling:** We use Tailwind CSS. Custom styles are in `assets/scss/`. Add project-specific overrides to `assets/scss/custom.scss`.
+*   **JavaScript:** Custom scripts are in `assets/js/main.js`.
+
+### Commit Messages
+
+Please follow a conventional commit format to keep the history clean and understandable.
+
+*   `feat`: A new feature (e.g., `feat(search): Add live search functionality`).
+*   `fix`: A bug fix (e.g., `fix(css): Correct mobile menu alignment`).
+*   `docs`: Documentation-only changes (e.g., `docs: Update contribution guide`).
+*   `style`: Code style changes (e.g., `style: Format SCSS files`).
+*   `refactor`: Code changes that neither fix a bug nor add a feature.
+*   `content`: For adding or updating content (e.g., `content(blog): Add post on hardware trends`).
+*   `chore`: Build process or tooling changes (e.g., `chore: Upgrade Tailwind CSS to v3.4`).
+
+---
+
+Thank you again for your interest in contributing. We look forward to your pull requests!

assets/images/team/alexander-hadjiivanov.webp

@@ -28,15 +28,67 @@ h1.homepage {
 }
 
 nav#TableOfContents {
-  li.active a {
-    color: #022b4a !important;
+  background-color: transparent !important;
+
+  ul, ol {
+    @apply list-none p-0 m-0 space-y-1;
+  }
+
+  li {
+    @apply m-0 p-0;
+  }
+
+  a {
+    @apply block rounded-md text-sm transition-all duration-200 ease-in-out;
+    padding: 0.4rem 0.75rem;
+    color: theme('colors.light');
     text-decoration: none !important;
-    font-weight: 550 !important;
+    font-weight: 500 !important;
+    border-left: 3px solid transparent;
+    line-height: 1.4;
+
+    &:hover {
+      background-color: theme('colors.body');
+      color: var(--color-primary-new);
+      border-left-color: theme('colors.border');
+    }
   }
 
-  ol ol li {
-    margin-left: 10px;
-    margin-bottom: 10px;
+  li.active > a {
+    color: var(--color-primary-new) !important;
+    background-color: rgba(102, 126, 234, 0.1); // Tint of primary color
+    font-weight: 600 !important;
+    border-left-color: var(--color-primary-new);
+  }
+
+  ul ul, ol ol {
+    @apply pl-4 mt-1 mb-1;
+    border-left: 1px solid theme('colors.border');
+  }
+}
+
+// Dark Mode Overrides for ToC
+.dark {
+  nav#TableOfContents {
+    a {
+      color: theme('colors.darkmode.light');
+
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.05);
+        color: theme('colors.darkmode.primary');
+        border-left-color: theme('colors.darkmode.border');
+      }
+    }
+
+    li.active > a {
+      color: theme('colors.darkmode.primary') !important;
+      background-color: rgba(188, 251, 255, 0.1); // Tint of dark primary
+      border-left-color: theme('colors.darkmode.primary');
+    }
+
+    ul ul, ol ol {
+      border-left-color: theme('colors.darkmode.border');
+    }
   }
 }
 

assets/images/team/alexander-henkes.jpg

@@ -41,7 +41,7 @@ main {
 // content style
 .content {
   @apply prose max-w-none;
-  @apply prose-headings:mb-[.3em] prose-headings:mt-[.6em];
+  @apply prose-headings:mb-[.6em] prose-headings:mt-[.6em];
   // Re-map prose heading sizes for better hierarchy within content
   @apply prose-h1:text-h2-sm md:prose-h1:text-h2; // Markdown '#' will be like a global H2
   @apply prose-h2:text-h3-sm md:prose-h2:text-h3; // Markdown '##' will be like a global H3

assets/images/team/catherine-schuman.jpg

@@ -72,11 +72,6 @@ section.section-sm.hero {
 
 nav#TableOfContents {
   background-color: transparent !important;
-
-  ol ol li {
-    margin-left: 10px;
-    margin-bottom: 10px;
-  }
 }
 
 .content img {

assets/images/team/charlotte-frenkel.jpg

@@ -11,6 +11,7 @@ author:
   - Jens E. Pedersen
   - Danny Rosen
   - Justin Riddiough
+show_author_bios: true
 ---
 
 **TL;DR** We are reorganizing the Open Neuromorphic community around our vision for an **open and accessible neuromorphic ecosystem**.

assets/images/team/fabrizio-ottati.jpg

@@ -1,6 +1,6 @@
 ---
 title: "Justin Riddiough"
-description: "Experienced in scalable web applications & open-source growth. Created aimodels.org. Active supporter of ONM and related community initiatives."
+description: "Strategic digital solutions partner and open-source advocate. As Vice-Chair of the ONM Executive Committee, Justin focuses on building robust digital infrastructure and fostering community growth."
 image: "justin-riddiough.png"
 social:
   - icon: "fa-brands fa-github"
@@ -14,5 +14,8 @@ social:
     title: "website"
 draft: false
 ---
-With over two decades of experience, Justin brings a wealth of knowledge in collaborating with in-house developers, technologists, and strategists. His expertise extends to crafting and deploying robust, scalable web applications and strategically coordinating growth across various Open Source initiatives.<br><br>Justin created and nurtured the AI Models project ([aimodels.org](https://aimodels.org)), a dedicated resource for exploring and advancing ONM and related initiatives like the Foundation Models Cheatsheet ([fmcheatsheet.org](https://fmcheatsheet.org)),
-prior to AI Models acquisition in late 2024. He remains an active supporter of the community and the ongoing development of these initiatives.
+Justin Riddiough is a strategic digital solutions partner and dedicated open-source advocate. As the Vice-Chair of the Open Neuromorphic Executive Committee, he plays a key role in shaping the community's growth and digital strategy.
+
+He designed and built the Open Neuromorphic website, creating the central hub for our resources, events, and community engagement.
+
+With over two decades of experience deploying robust, scalable web applications, Justin brings a wealth of technical and strategic knowledge to the team. He is a strong proponent of connectivism, applying its principles of networked learning to help build a collaborative and accessible ecosystem for neuromorphic computing. His work focuses on creating powerful digital tools and coordinating growth across open-source initiatives to empower communities and advance shared knowledge.

assets/images/team/giulia-dangelo.jpg

@@ -1,6 +1,6 @@
 ---
 active_product: true
-description: 'Learn about BrainChip''s neuromorphic hardware: Akida'
+description: "Learn about BrainChip's neuromorphic hardware: Akida"
 type: neuromorphic-hardware
 image: akida.png
 organization:

assets/images/team/gregor-lenz.jpeg

@@ -1,6 +1,6 @@
 ---
 active_product: true
-description: 'Learn about Universität Heidelberg''s neuromorphic hardware: BrainScaleS 2'
+description: "Learn about Universität Heidelberg's neuromorphic hardware: BrainScaleS 2"
 type: neuromorphic-hardware
 image: brainscales-2.jpg
 organization:

assets/images/team/henning-wessels.jpg

@@ -1,6 +1,6 @@
 ---
 active_product: true
-description: 'Learn about Institute of Neuroinformatics''s neuromorphic hardware: DYNAP-SE2'
+description: "Learn about Institute of Neuroinformatics's neuromorphic hardware: DYNAP-SE2"
 type: neuromorphic-hardware
 image: dynap-se2.jpg
 organization:

assets/images/team/jason-eshraghian.jpg

@@ -1,6 +1,6 @@
 ---
 active_product: true
-description: 'Learn about Intel''s neuromorphic hardware: Loihi 2'
+description: "Learn about Intel's neuromorphic hardware: Loihi 2"
 type: neuromorphic-hardware
 image: loihi2.png
 organization:

assets/images/team/jason-eshraghian.webp

@@ -1,6 +1,6 @@
 ---
 active_product: false
-description: 'Learn about Intel''s neuromorphic hardware: Loihi 1'
+description: "Learn about Intel's neuromorphic hardware: Loihi 1"
 type: neuromorphic-hardware
 image: loihi-nahuku-board.jpg
 organization:

assets/images/team/justin-riddiough.png

@@ -1,6 +1,6 @@
 ---
 active_product: false
-description: 'Learn about Stanford''s neuromorphic hardware: NeuroGrid (BrainDrop)'
+description: "Learn about Stanford's neuromorphic hardware: NeuroGrid (BrainDrop)"
 type: neuromorphic-hardware
 image: neurogrid.jpg
 organization:

assets/images/team/melika-payvand.jpg

@@ -1,6 +1,6 @@
 ---
 active_product: true
-description: 'Learn about Charlotte Frenkel''s neuromorphic hardware: ODIN'
+description: "Learn about Charlotte Frenkel's neuromorphic hardware: ODIN"
 type: neuromorphic-hardware
 image: odin.png
 organization: