feat(frontend): add rotating camera-roll backgrounds for home and about

Agent-Logs-Url: https://github.com/conorheffron/ironoc/sessions/1df5c7f9-1706-4315-bf90-c186f1872a8d

Co-authored-by: conorheffron <8218626+conorheffron@users.noreply.github.com>

Author: Copilot

frontend/README.md

@@ -72,6 +72,23 @@ frontend
     └── setupTests.js
 ```
 
+## Camera Roll Background Config
+
+Home and About background image rotation is driven by `public/camera-roll.yml`.
+
+Example:
+
+```yml
+home:
+  - teal-bg
+  - navy-bg
+about:
+  - navy-bg
+  - red-bg
+```
+
+Supported keys are `teal-bg`, `navy-bg`, and `red-bg`.
+
 #### Quick start
 ```shell
 cd frontend

frontend/public/camera-roll.yml

@@ -0,0 +1,9 @@
+# Camera roll keys for rotating Home/About backgrounds
+home:
+  - teal-bg
+  - navy-bg
+  - red-bg
+about:
+  - navy-bg
+  - red-bg
+  - teal-bg

frontend/src/App.css

@@ -26,6 +26,23 @@
     border-bottom-left-radius: 18%;
 }
 
+.App-header-camera-roll {
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    transition: background-image 1.1s ease-in-out;
+    animation: subtle-camera-roll-pan 24s ease-in-out infinite alternate;
+    box-shadow: inset 0 0 0 1000px rgba(12, 31, 66, 0.15);
+}
+
+.App-header-camera-roll--home {
+    background-color: #1b3f83;
+}
+
+.App-header-camera-roll--about {
+    background-color: #16356c;
+}
+
 .App-link {
     color: #61dafb;
 }
@@ -34,6 +51,17 @@
     from {
         transform: rotate(0deg);
     }
+
+    @keyframes subtle-camera-roll-pan {
+        from {
+            background-position: 48% 50%;
+            background-size: 104%;
+        }
+        to {
+            background-position: 52% 46%;
+            background-size: 110%;
+        }
+    }
     to {
         transform: rotate(360deg);
     }

frontend/src/components/About.js

@@ -2,8 +2,48 @@ import React, { Component } from 'react';
 import { Container } from 'reactstrap';
 import '.././App.css';
 import AppNavbar from '.././AppNavbar';
+import { loadCameraRollImages } from '../utils/cameraRollConfig';
 
 class About extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            backgroundImages: [],
+            backgroundImageIndex: 0
+        };
+
+        this.rotateCameraRollImage = this.rotateCameraRollImage.bind(this);
+        this.rotationIntervalId = null;
+        this.isMountedView = false;
+    }
+
+    async componentDidMount() {
+        this.isMountedView = true;
+        const backgroundImages = await loadCameraRollImages('about');
+
+        if (this.isMountedView) {
+            this.setState({ backgroundImages, backgroundImageIndex: 0 });
+
+            if (backgroundImages.length > 1) {
+                this.rotationIntervalId = setInterval(this.rotateCameraRollImage, 10000);
+            }
+        }
+    }
+
+    componentWillUnmount() {
+        this.isMountedView = false;
+
+        if (this.rotationIntervalId) {
+            clearInterval(this.rotationIntervalId);
+        }
+    }
+
+    rotateCameraRollImage() {
+        this.setState((prevState) => ({
+            backgroundImageIndex: (prevState.backgroundImageIndex + 1) % prevState.backgroundImages.length
+        }));
+    }
+
     render() {
         const {
             link = "https://www.linkedin.com/in/conorheffron",
@@ -15,12 +55,21 @@ class About extends Component {
             stravaImgSrc = 'https://badges.strava.com/logo-strava.png',
             stravaImgAlt = 'Strava'
         } = this.props;
+        const { backgroundImages, backgroundImageIndex } = this.state;
+        const activeBackgroundImage = backgroundImages[backgroundImageIndex];
+        const headerStyle = activeBackgroundImage
+            ? { backgroundImage: `linear-gradient(rgba(8, 36, 74, 0.6), rgba(8, 36, 74, 0.6)), url(${activeBackgroundImage})` }
+            : undefined;
 
         return (
             <div className="App">
                 <AppNavbar />
                 <Container>
-                    <header className="App-header">
+                    <header
+                        data-testid="about-header"
+                        className="App-header App-header-camera-roll App-header-camera-roll--about"
+                        style={headerStyle}
+                    >
                         <br /><br />
                         <a href={link} target="_blank" rel="noreferrer">
                             <img src={imgSrc} width={imgWidth} height={imgHeight} border="0" alt={imgAlt}></img>

frontend/src/components/Home.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Container } from 'reactstrap';
 import '.././App.css';
 import AppNavbar from '.././AppNavbar';
+import { loadCameraRollImages } from '../utils/cameraRollConfig';
 
 class Home extends Component {
     constructor(props) {
@@ -17,18 +18,59 @@ class Home extends Component {
             className,
             headerClassName,
             introId,
-            welcomeMessage
+            welcomeMessage,
+            backgroundImages: [],
+            backgroundImageIndex: 0
         };
+
+        this.rotateCameraRollImage = this.rotateCameraRollImage.bind(this);
+        this.rotationIntervalId = null;
+        this.isMountedView = false;
+    }
+
+    async componentDidMount() {
+        this.isMountedView = true;
+        const backgroundImages = await loadCameraRollImages('home');
+
+        if (this.isMountedView) {
+            this.setState({ backgroundImages, backgroundImageIndex: 0 });
+
+            if (backgroundImages.length > 1) {
+                this.rotationIntervalId = setInterval(this.rotateCameraRollImage, 10000);
+            }
+        }
+    }
+
+    componentWillUnmount() {
+        this.isMountedView = false;
+
+        if (this.rotationIntervalId) {
+            clearInterval(this.rotationIntervalId);
+        }
+    }
+
+    rotateCameraRollImage() {
+        this.setState((prevState) => ({
+            backgroundImageIndex: (prevState.backgroundImageIndex + 1) % prevState.backgroundImages.length
+        }));
     }
 
     render() {
-        const { className, headerClassName, introId, welcomeMessage } = this.state;
+        const { className, headerClassName, introId, welcomeMessage, backgroundImages, backgroundImageIndex } = this.state;
+        const activeBackgroundImage = backgroundImages[backgroundImageIndex];
+        const headerStyle = activeBackgroundImage
+            ? { backgroundImage: `linear-gradient(rgba(10, 34, 80, 0.55), rgba(10, 34, 80, 0.55)), url(${activeBackgroundImage})` }
+            : undefined;
 
         return (
             <div className={className}>
                 <AppNavbar />
                 <Container>
-                    <header className={headerClassName}>
+                    <header
+                        data-testid="home-header"
+                        className={`${headerClassName} App-header-camera-roll App-header-camera-roll--home`}
+                        style={headerStyle}
+                    >
                         <br /><br />
                         <p id={introId}>
                             {welcomeMessage}<br /><br />

frontend/src/components/__tests__/About.test.js

@@ -1,15 +1,28 @@
-import { screen, render } from '@testing-library/react';
+import { screen, render, waitFor, act } from '@testing-library/react';
 import About from '../About';
 
 describe('About Component', () => {
-  test('renders with default props', () => {
-    render(<About />);
+  beforeEach(() => {
+    jest.spyOn(global, 'fetch').mockResolvedValue({
+      ok: true,
+      text: async () => `about:\n  - navy-bg\n  - red-bg`,
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test('renders with default props', async () => {
+    await act(async () => {
+      render(<About />);
+    });
 
     expect(screen.getByAltText("View Conor Heffron's profile on LinkedIn")).toBeInTheDocument();
     expect(screen.getByAltText('Strava')).toBeInTheDocument();
   });
 
-  test('renders with provided props', () => {
+  test('renders with provided props', async () => {
     const props = {
       link: 'https://example.com',
       imgSrc: 'https://example.com/image.png',
@@ -18,8 +31,20 @@ describe('About Component', () => {
       stravaImgSrc: 'https://example.com/strava-image.png',
       stravaImgAlt: 'Example Strava',
     };
-    render(<About {...props} />);
+    await act(async () => {
+      render(<About {...props} />);
+    });
     expect(screen.getByAltText('Example Image')).toBeInTheDocument();
     expect(screen.getByAltText('Example Strava')).toBeInTheDocument();
   });
+
+  test('requests camera roll config on mount', async () => {
+    await act(async () => {
+      render(<About />);
+    });
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith('/camera-roll.yml', { cache: 'no-store' });
+    });
+  });
 });

frontend/src/components/__tests__/Home.test.js

@@ -1,12 +1,31 @@
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, act, waitFor } from '@testing-library/react';
 import Home from '../Home';
 
 describe('Home', () => {
+  beforeEach(() => {
+    jest.spyOn(global, 'fetch').mockResolvedValue({
+      ok: true,
+      text: async () => `home:\n  - red-bg\n  - teal-bg`,
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   test('renders Home component', async () => {
     await act(async () => {
       render(<Home />);
     });
     const element = screen.getByText(/Home/i);
     expect(element).toBeInTheDocument();
   });
+
+  test('requests camera roll config on mount', async () => {
+    render(<Home />);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith('/camera-roll.yml', { cache: 'no-store' });
+    });
+  });
 });

frontend/src/utils/__tests__/cameraRollConfig.test.js

@@ -0,0 +1,29 @@
+import { loadCameraRollImages } from '../cameraRollConfig';
+
+describe('cameraRollConfig', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test('loads configured images for a section from camera-roll.yml', async () => {
+    jest.spyOn(global, 'fetch').mockResolvedValue({
+      ok: true,
+      text: async () => `home:\n  - red-bg\n  - teal-bg`,
+    });
+
+    const images = await loadCameraRollImages('home');
+
+    expect(images).toHaveLength(2);
+    expect(images[0]).toContain('red-bg');
+    expect(images[1]).toContain('teal-bg');
+  });
+
+  test('falls back to defaults when config fetch fails', async () => {
+    jest.spyOn(global, 'fetch').mockRejectedValue(new Error('network error'));
+
+    const images = await loadCameraRollImages('about');
+
+    expect(images).toHaveLength(3);
+    expect(images[0]).toContain('darkblue-bg');
+  });
+});