docs: add team section (#201)

Add team members to documentation

Author: rainerhahnekamp

docs/docs/team.md

@@ -0,0 +1,18 @@
+---
+title: Team
+description: Meet the NgRx Toolkit team
+---
+
+# Meet the Team
+
+The NgRx Toolkit is developed and maintained by a dedicated team of Angular enthusiasts who are passionate about the NgRx SignalStore and developer experience.
+
+## Team Members (randomized order)
+
+import Team from '@site/src/components/Team';
+
+<Team />
+
+## Contribute
+
+We welcome contributions from the community! If you're interested in contributing to NgRx Toolkit, check out our [GitHub repository](https://github.com/angular-architects/ngrx-toolkit) and our [contribution guidelines](https://github.com/angular-architects/ngrx-toolkit/blob/main/CONTRIBUTING.md).

docs/docusaurus.config.ts

@@ -88,6 +88,12 @@ const config: Config = {
           label: 'API',
           position: 'left',
         },
+        {
+          type: 'docSidebar',
+          sidebarId: 'teamSidebar',
+          position: 'left',
+          label: 'Team',
+        },
         {
           href: 'https://github.com/angular-architects/ngrx-toolkit',
           label: 'GitHub',

docs/sidebars.ts

@@ -34,6 +34,7 @@ const sidebars: SidebarsConfig = {
       items: ['create-redux-state'],
     },
   ],
+  teamSidebar: ['team'],
 
   // But you can create a sidebar manually
   /*

docs/src/components/Team/index.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+interface TeamMember {
+  name: string;
+  image: string;
+  description: string;
+}
+
+const teamMembers: TeamMember[] = [
+  { 
+    name: 'Manfred Steyer', 
+    image: '/img/team/manfred-steyer.jpg',
+    description: 'Trainer, consultant, and programming architect with a focus on Angular, Google Developer Expert (GDE) who writes for O\'Reilly, the German Java Magazine, and windows.developer. Regularly speaks at conferences.'
+  },
+  { 
+    name: 'Rainer Hahnekamp', 
+    image: '/img/team/rainer-hahnekamp.jpg',
+    description: 'Google Developer Expert (GDE) and a trusted collaborator on the NgRx team. Trainer and consultant in the Angular Architects expert network and runs ng-news, a weekly Angular newsletter.'
+  },
+  { 
+    name: 'Michael Small', 
+    image: '/img/team/michael-small.jpg',
+    description: 'Angular nerd. Answers questions on both of the Angular subreddits. Dabbling in open source discussions and contributions. Looking to get more involved in the community than before.'
+  },
+];
+
+function shuffleArray<T>(array: T[]): T[] {
+  const shuffled = [...array];
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+  }
+  return shuffled;
+}
+
+export default function Team(): React.JSX.Element {
+  const [shuffledTeam, setShuffledTeam] = React.useState<TeamMember[]>(() => 
+    shuffleArray(teamMembers)
+  );
+  const [expandedMember, setExpandedMember] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    // Re-shuffle when component mounts
+    setShuffledTeam(shuffleArray(teamMembers));
+  }, []);
+
+  const handleMemberClick = (memberName: string) => {
+    setExpandedMember(expandedMember === memberName ? null : memberName);
+  };
+
+  return (
+    <section className={styles.teamSection}>
+      <div className={styles.teamGrid}>
+        {shuffledTeam.map((member) => (
+          <div 
+            key={member.name} 
+            className={`${styles.teamMember} ${expandedMember === member.name ? styles.expanded : ''}`}
+            onClick={() => handleMemberClick(member.name)}
+          >
+            <div className={styles.memberAvatar}>
+              <img 
+                src={member.image} 
+                alt={`${member.name} profile photo`}
+                className={styles.profileImage}
+              />
+            </div>
+            <h3 className={styles.memberName}>{member.name}</h3>
+            {expandedMember === member.name && (
+              <p className={styles.memberDescription}>{member.description}</p>
+            )}
+            <div className={styles.expandIndicator}>
+              {expandedMember === member.name ? '−' : '+'}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

docs/src/components/Team/styles.module.css

@@ -0,0 +1,93 @@
+.teamSection {
+  padding: 2rem 0;
+}
+
+.teamGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.teamMember {
+  text-align: center;
+  padding: 1.5rem;
+  border-radius: 8px;
+  background: var(--ifm-card-background-color);
+  box-shadow: var(--ifm-global-shadow-lw);
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  cursor: pointer;
+  position: relative;
+}
+
+.teamMember:hover {
+  transform: translateY(-5px);
+  box-shadow: var(--ifm-global-shadow-md);
+}
+
+.teamMember.expanded {
+  box-shadow: var(--ifm-global-shadow-md);
+}
+
+.memberAvatar {
+  margin-bottom: 1rem;
+  position: relative;
+}
+
+.profileImage {
+  width: 120px;
+  height: 120px;
+  border-radius: 60px;
+  object-fit: cover;
+  margin: 0 auto;
+  display: block;
+}
+
+.memberName {
+  margin: 0;
+  font-size: 1.2rem;
+  color: var(--ifm-heading-color);
+}
+
+.memberDescription {
+  margin: 0.5rem 0 0;
+  font-size: 0.9rem;
+  color: var(--ifm-color-emphasis-600);
+  line-height: 1.4;
+  text-align: center;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.expandIndicator {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--ifm-color-primary);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 1.2rem;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.teamMember:hover .expandIndicator {
+  background: var(--ifm-color-primary-darker);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}