Added a rotating orgs thing

Author: johnpatek

package-lock.json

@@ -13,9 +13,11 @@
     "deploy": "gh-pages -d dist -b master"
   },
   "dependencies": {
+    "@carbon/charts-react": "^1.27.2",
     "@carbon/icons-react": "^11.74.0",
     "@carbon/react": "^1.100.0",
     "gh-pages": "^6.3.0",
+    "motion": "^12.34.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.0.1"

package.json

@@ -0,0 +1,5 @@
+[
+    "https://github.com/lariat-app",
+    "https://github.com/PreGuardAI",
+    "https://github.com/wxWidgets"
+]

src/assets/organizations.json

@@ -0,0 +1,94 @@
+import { Link, Tile } from '@carbon/react';
+import * as motion from "motion/react-client"
+
+const AvatarLink = ({ href, size = 96, linkProps = {} }) => {
+    const iconSrc = `${href}.png`;
+    return (
+        <Link
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={href}
+            className="org-graph__avatar-link"
+            style={{ display: 'inline-flex' }}
+            {...linkProps}
+        >
+            <img
+                src={iconSrc}
+                alt=""
+                width={size}
+                height={size}
+                style={{ borderRadius: '50%', boxShadow: '0 0 0 4px rgba(0,0,0,0.2)' }}
+            />
+        </Link>
+    );
+};
+
+const ORBIT_RADIUS = 140;
+const ORBIT_DURATION = 24;
+
+const OrbitingAvatar = ({ href, index, total }) => {
+    const startAngle = (index / total) * 360;
+    const avatarSize = 72;
+
+    return (
+        // 1. Position the pivot at the exact center of the container
+        <div
+            style={{
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                marginTop: 0,
+                marginLeft: 0,
+                width: 0,
+                height: 0,
+            }}
+        >
+            {/* 2. Rotate around the pivot (Motion only handles rotation here) */}
+            <motion.div
+                initial={{ rotate: startAngle }}
+                animate={{ rotate: startAngle + 360 }}
+                transition={{ repeat: Infinity, ease: 'linear', duration: ORBIT_DURATION }}
+            >
+                {/* 3. Push outward by orbit radius */}
+                <div style={{ transform: `translateX(${ORBIT_RADIUS}px)` }}>
+                    {/* 4. Counter-rotate to keep avatar upright */}
+                    <motion.div
+                        initial={{ rotate: -startAngle }}
+                        animate={{ rotate: -(startAngle + 360) }}
+                        transition={{ repeat: Infinity, ease: 'linear', duration: ORBIT_DURATION }}
+                    >
+                        {/* 5. Offset by half the avatar size so its center sits on the orbit path */}
+                        <div style={{ marginLeft: -avatarSize / 2, marginTop: -avatarSize / 2 }}>
+                            <AvatarLink href={href} size={avatarSize} />
+                        </div>
+                    </motion.div>
+                </div>
+            </motion.div>
+        </div>
+    );
+};
+
+const OrgGraph = ({ members = [] }) => (
+    <Tile>
+        <div
+            style={{
+                position: 'relative',
+                width: '100%',
+                maxWidth: 420,
+                aspectRatio: '1 / 1',
+                margin: '0 auto',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
+            <AvatarLink href="https://github.com/maxtek6" size={112} />
+            {members.map((member, index) => (
+                <OrbitingAvatar key={member} href={member} index={index} total={members.length} />
+            ))}
+        </div>
+    </Tile>
+);
+
+export default OrgGraph;

src/components/OrgGraph.jsx

@@ -26,7 +26,6 @@ function ProjectTile({ name, description, documentation }) {
     const projectLink = `https://github.com/maxtek6/${name}`;
     return (
         <Tile className='project-tile'>
-            <Column span={4}>
                 <Stack gap={3}>
                     <Grid>
                         <Column span={2}>
@@ -41,7 +40,6 @@ function ProjectTile({ name, description, documentation }) {
                     </Grid>
                     <LinkStack projectLink={projectLink} documentation={documentation} />
                 </Stack>
-            </Column>
         </Tile>
     )
 }

src/components/ProjectTile.jsx

@@ -34,7 +34,7 @@ function Contact() {
                 xlg={6}
                 max={6}  // max width: full width (4-column grid)
             >
-                <Stack>
+                <Stack gap={3}>
                     <h3>How can we help you?</h3>
                     <p>Whether you are an open source developer looking for guidance, or a business seeking consulting services, we're here to assist you. We offer expertise in the following areas:</p>
                     <UnorderedList>

src/content/Contact.jsx

@@ -1,22 +1,22 @@
-import { Column, Content, Grid } from '@carbon/react';
+import { Column, Grid, Stack, Tile } from '@carbon/react';
+import OrgGraph from '../components/OrgGraph';
+
+import organizations from '../assets/organizations.json';
 
 function Home() {
     return (
         <Grid>
-            <Column
-                sm={4}   // mobile: full width (4-column grid)
-                md={4}   // tablet: full width
-                lg={6}   // desktop: half width (2 columns total)
-            >
-                <h3>Maxtek</h3>
+            <Column sm={0} md={1} lg={2} xlg={2} max={2} />
+            <Column sm={4} md={4} lg={6} xlg={6} max={6}>
+                <OrgGraph members={organizations} />
             </Column>
-            <Column
-                sm={4}   // mobile: full width (4-column grid)
-                md={4}   // tablet: full width
-                lg={6}   // desktop: half width (2 columns total)
-            >
-                <h3>Consulting</h3>
+            <Column sm={4} md={4} lg={6} xlg={6} max={6}>
+                <Stack gap={3}>
+                    <h3>Maxtek Consulting</h3>
+                    <p>US-based consulting firm specializing in open source software.</p>
+                </Stack>
             </Column>
+            <Column sm={0} md={1} lg={2} xlg={2} max={2} />
         </Grid>
     );
 }

src/content/Home.jsx

@@ -2,16 +2,26 @@ import projects from '../assets/projects.json';
 import ProjectTile from '../components/ProjectTile';
 import { Column, Grid } from '@carbon/react';
 
+function ProjectColumn({ children }) {
+    return (
+        <Column span={4} style={{ marginLeft: -1, marginTop: -1, marginRight: 0, paddingLeft: 0, paddingRight: 0 }}>
+            {children}
+        </Column>
+    )
+}
+
 function Projects() {
     return (
-        <Grid>
+        <Grid condensed>
             <Column sm={0} md={2} lg={2} xlg={2} max={2} />
             <Column sm={4} md={4} lg={12} xlg={12} max={12}>
-                <Grid sm={4} md={4} lg={12} xlg={12} max={12}>
-                {projects.map(({ name, description, documentation }) => (
-                    <ProjectTile name={name} description={description} documentation={documentation} />
-                ))}
-                </Grid>
+            <Grid condensed>
+                    {projects.map(({ name, description, documentation }) => (
+                        <ProjectColumn>
+                        <ProjectTile name={name} description={description} documentation={documentation} />
+                        </ProjectColumn>
+                    ))}
+            </Grid>
             </Column>
             <Column sm={0} md={2} lg={2} xlg={2} max={2} />
         </Grid >

src/content/Projects.jsx

@@ -8,6 +8,5 @@
 
 .project-tile {
   min-height: 144px;
-  margin-bottom: $spacing-01;
-  //border: 1px solid theme.$border-strong-01;
+  border: 1px solid theme.$border-strong-01;
 }