Remove GitHub pages conflict code (#565)

The GitHub pages were failing to deploy due to some block code that was
causing issues with GitHub pages deployment, rewrote those segments of
the documentation.

Author: AlexJSully

docs/architecture/app-directory.md

@@ -138,7 +138,7 @@ export default function Home() {
 	}, []);
 
 	return (
-		<Box component='div' sx={{ /* styles */ }}>
+		<Box component='div' sx={/* styles */}>
 			<Banner aria-label='Landing banner' />
 			<ProjectsGrid aria-label='Grid showing projects worked on' />
 			<Publications aria-label='List of scientific publications' />
@@ -251,13 +251,15 @@ import { CircularProgress } from '@mui/material';
 
 export default function Loading() {
 	return (
-		<div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}>
+		<div style={centeredContainerStyles}>
 			<CircularProgress />
 		</div>
 	);
 }
 ```
 
+The container uses inline styles with flexbox centering: `display: 'flex'`, `justifyContent: 'center'`, and `padding: '2rem'`.
+
 ## 404 Not Found
 
 Location: [`src/app/not-found.tsx`](../../src/app/not-found.tsx)

docs/architecture/components/avatar.md

@@ -179,17 +179,19 @@ useEffect(() => {
 
 ### Accessibility
 
-```tsx
-<Box
-	data-testid='profile_pic'
-	aria-label='Profile picture'
-	role='img'
-	onMouseEnter={debounceHover}
-	sx={{ cursor: 'pointer' }}
->
-	<Image src={image} alt='Alexander Sullivan profile picture' width={200} height={200} priority />
-</Box>
-```
+The avatar container includes proper accessibility attributes:
+
+- `data-testid='profile_pic'` - Testing identifier
+- `aria-label='Profile picture'` - Screen reader label
+- `role='img'` - Semantic role for assistive technologies
+- `onMouseEnter={debounceHover}` - Hover interaction handler
+- `sx` prop with `cursor: 'pointer'` to indicate interactivity
+
+The nested `Image` component includes:
+
+- `alt='Alexander Sullivan profile picture'` - Descriptive alt text
+- `width={200}` and `height={200}` - Explicit dimensions
+- `priority` - Next.js optimization for above-the-fold content
 
 ## Component Interaction
 

docs/architecture/components/cookie-snackbar.md

@@ -177,15 +177,14 @@ To customize the cookie snackbar:
 4. **Severity:** Change `severity='info'` to `success`, `warning`, or `error`
 5. **Position:** Add `anchorOrigin` prop to Snackbar for positioning
 
-**Example Custom Position:**
+**Custom Position Configuration:**
 
-```tsx
-<Snackbar
-	onClose={handleClose}
-	open={open}
-	anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
->
-```
+The `anchorOrigin` prop accepts an object with two properties:
+
+- `vertical`: Position on vertical axis (`'top'`, `'bottom'`)
+- `horizontal`: Position on horizontal axis (`'left'`, `'center'`, `'right'`)
+
+Example: To center the snackbar at the bottom, set `anchorOrigin` to `vertical: 'bottom'` and `horizontal: 'center'`.
 
 ## Related Documentation
 

docs/architecture/components/navbar.md

@@ -61,28 +61,22 @@ logAnalyticsEvent('navbar_home', {
 
 ### 3. Responsive Design
 
-Built with Material-UI AppBar and Toolbar:
+Built with Material-UI AppBar and Toolbar components:
 
-```typescript
-<AppBar
-	sx={{
-		backgroundColor: '#131518',
-		transition: 'all 0.5s ease-in-out',
-	}}
->
-	<Toolbar
-		sx={{
-			fontSize: '1.25rem',
-			height: '2rem',
-			justifyContent: 'space-between',
-			transition: 'all 0.5s ease-in-out',
-			zIndex: 10,
-		}}
-	>
-		{/* Navigation items */}
-	</Toolbar>
-</AppBar>
-```
+**AppBar Styling:**
+
+- `backgroundColor: '#131518'` - Dark background matching site theme
+- `transition: 'all 0.5s ease-in-out'` - Smooth transitions for state changes
+
+**Toolbar Styling:**
+
+- `fontSize: '1.25rem'` - Larger text for better readability
+- `height: '2rem'` - Compact height for minimal header footprint
+- `justifyContent: 'space-between'` - Distributes navigation items evenly
+- `transition: 'all 0.5s ease-in-out'` - Smooth transitions
+- `zIndex: 10` - Ensures navbar stays above other content
+
+Both components use the MUI `sx` prop for styling with these properties.
 
 ### 4. Path-aware Behavior
 

docs/architecture/components/stars.md

@@ -70,16 +70,12 @@ Each star has:
 
 ### 3. Twinkle Animation
 
-Stars twinkle using CSS animations:
+Stars twinkle using CSS animations applied through the `sx` prop. Each star receives:
 
-```typescript
-sx={{
-	animation: `twinkle ${star.animationDuration} infinite`,
-	animationDelay: star.animationDelay,
-}};
-```
+- **animation:** `twinkle` with dynamic duration (using template literal with `star.animationDuration`) set to infinite
+- **animationDelay:** Random delay from `star.animationDelay` for staggered effect
 
-The `twinkle` animation should be defined in global styles:
+The `twinkle` keyframe animation should be defined in global styles:
 
 ```scss
 @keyframes twinkle {
@@ -162,15 +158,11 @@ sequenceDiagram
 
 The component uses proper ARIA attributes for screen readers:
 
-```tsx
-<Box
-  id='sky'
-  aria-label='Starry background'
-  component='div'
-  role='img'
-  sx={{...}}
->
-```
+- `id='sky'` - Unique identifier for the container
+- `aria-label='Starry background'` - Descriptive label for assistive technologies
+- `component='div'` - Renders as a div element
+- `role='img'` - Identifies as an image for screen readers
+- `sx` prop contains styling with spread operator for dynamic styles
 
 **Note:** Unlike decorative backgrounds that use `aria-hidden='true'`, this component uses `role='img'` with an `aria-label` because it's a significant visual element of the user experience.
 

package-lock.json

@@ -53,7 +53,7 @@
 		"@svgr/webpack": "^8.1.0",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@testing-library/react": "^16.3.1",
-		"@trivago/prettier-plugin-sort-imports": "^6.0.0",
+		"@trivago/prettier-plugin-sort-imports": "^6.0.1",
 		"@types/jest": "^30.0.0",
 		"@types/lodash": "^4.17.21",
 		"@types/node": "^25.0.3",