Add Office Space gallery page with all 23 images
- Create gallery.mdx showcasing all Office Space images organized by scene - Add Cinema Enthusiast flair badge for gallery visitors - Create cinema.svg badge (film reel design) - Update flair count to 13 badges - Add gallery to sidebar navigation with "New" badge Features Peter, Lumbergh, The Bobs, the printer destruction scene, Milton's stapler, Chotchkie's flair, and more iconic moments.
This commit is contained in:
parent
c2a9aa6bbf
commit
f8b67b018e
5 changed files with 263 additions and 2 deletions
212
src/content/docs/community/gallery.mdx
Normal file
212
src/content/docs/community/gallery.mdx
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
---
|
||||
title: The Gallery
|
||||
description: A tribute to the film that inspired it all.
|
||||
---
|
||||
|
||||
import { Aside, Card, CardGrid } from '@astrojs/starlight/components';
|
||||
|
||||
> *"I'd say in a given week I probably only do about fifteen minutes of real, actual work."*
|
||||
|
||||
Welcome to the mcwaddams gallery — a loving tribute to Office Space (1999), the film that understands corporate life better than any management consultant ever could.
|
||||
|
||||
---
|
||||
|
||||
## The Initech Crew
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/Peter.webp" alt="Peter Gibbons" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"I did nothing. I did absolutely nothing, and it was everything I thought it could be."</p>
|
||||
<small>Peter Gibbons</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/peter-zen.webp" alt="Peter in his zen state" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"I don't like my job, and I don't think I'm gonna go anymore."</p>
|
||||
<small>Post-hypnotherapy Peter</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/Peter-Computing-Surprised.webp" alt="Peter surprised at computer" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"I have eight different bosses right now."</p>
|
||||
<small>The moment of realization</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## Management
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/Peter-Lumberg-At-Cubicle.webp" alt="Lumbergh at Peter's cubicle" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"Yeahhh, I'm gonna need you to come in on Saturday..."</p>
|
||||
<small>Bill Lumbergh</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/TheBobs.webp" alt="The Bobs" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"What would you say... you do here?"</p>
|
||||
<small>The Bobs — efficiency experts</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/management-disapproval.webp" alt="Management disapproval" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"We're gonna have to go ahead and move you downstairs into Storage B."</p>
|
||||
<small>The look of corporate disappointment</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/Lumbergh-cake-sign.webp" alt="Lumbergh with cake sign" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"Hello Peter, what's happening?"</p>
|
||||
<small>Passive-aggressive celebration</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## The Iconic Scenes
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/Printer.webp" alt="The printer destruction scene" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"PC LOAD LETTER? What the f*** does that mean?!"</p>
|
||||
<small>The printer gets what it deserves</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/stapler-theft.webp" alt="Milton's stapler" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"I believe you have my stapler..."</p>
|
||||
<small>The red Swingline</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/Ohface.webp" alt="The O-Face" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"O-O-O-OHHHHH!"</p>
|
||||
<small>Drew's... moment</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/Cakepass.webp" alt="The cake scene" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"Milton, we're gonna need you to move your desk again..."</p>
|
||||
<small>Another office milestone ignored</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## Chotchkie's & The Flair
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/Stan.webp" alt="Stan the manager" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"We need to talk about your flair."</p>
|
||||
<small>Stan — the flair enforcer</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/box-of-flair.webp" alt="Box of flair" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"You know, the Nazis had pieces of flair they made the Jews wear."</p>
|
||||
<small>The official flair collection</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/fu-Flair.webp" alt="Joanna's statement" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"There's my flair."</p>
|
||||
<small>Joanna's final day at Chotchkie's</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/chotchkies-logo.webp" alt="Chotchkie's logo" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"Sounds like somebody's got a case of the Mondays."</p>
|
||||
<small>Where dreams go to die</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## The Supporting Cast
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/Lawrence.webp" alt="Lawrence" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"Hey Peter, man, check out Channel 9!"</p>
|
||||
<small>Lawrence — the neighbor</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/Lawrence-couch.webp" alt="Lawrence on the couch" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"Two chicks at the same time, man."</p>
|
||||
<small>Lawrence's dream</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/Nina.webp" alt="Nina" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"Uh-oh. Sounds like somebody's got a case of the Mondays."</p>
|
||||
<small>Nina — the cheerful coworker</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/peter-hard-hat-samir-michael-GroupPic.webp" alt="Peter, Samir, and Michael Bolton" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"Why should I change? He's the one who sucks."</p>
|
||||
<small>The crew at work</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## Initech
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/Initech.webp" alt="Initech building" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"Corporate accounts payable, Nina speaking. Just a moment."</p>
|
||||
<small>Initech — where TPS reports are born</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/peter-initech-sign.webp" alt="Peter arriving at Initech" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"Every single day of my life has been worse than the day before it."</p>
|
||||
<small>Another day at Initech</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/empty-office.webp" alt="Empty Initech office" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"I'd like to move us right along to a Peter Gibbons."</p>
|
||||
<small>The cubicle farm</small>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/burned-stapler-recover.webp" alt="Milton's stapler recovered" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);" />
|
||||
<p style="margin-top: 0.5rem; font-style: italic;">"I could set the building on fire..."</p>
|
||||
<small>The stapler survived</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
<Aside type="note" title="Attribution">
|
||||
All images are from Office Space (1999), directed by Mike Judge. Copyright © 20th Century Fox. Used for educational and tribute purposes. mcwaddams is not affiliated with 20th Century Fox.
|
||||
</Aside>
|
||||
|
||||
<div style="text-align: center; margin-top: 2rem; font-style: italic; opacity: 0.7;">
|
||||
|
||||
*"I don't like my job, and I don't think I'm gonna go anymore."*
|
||||
|
||||
<br/>
|
||||
|
||||
<small>— Peter Gibbons, speaking for all of us</small>
|
||||
|
||||
</div>
|
||||
|
|
@ -19,7 +19,7 @@ We don't require 37 pieces of flair like Brian. Just the minimum — but we enco
|
|||
|
||||
Click the **flair counter** in the bottom-right corner of any page to see your collection. Badges are earned by spending 15+ seconds reading each page.
|
||||
|
||||
## Available Flair (12 Badges)
|
||||
## Available Flair (13 Badges)
|
||||
|
||||
<CardGrid>
|
||||
<Card title="📄 I Was Told There Would Be Extraction" icon="document">
|
||||
|
|
@ -58,13 +58,16 @@ Click the **flair counter** in the bottom-right corner of any page to see your c
|
|||
<Card title="🎖️ 37 Pieces of Flair" icon="external">
|
||||
Discover the flair leaderboard
|
||||
</Card>
|
||||
<Card title="🎬 Cinema Enthusiast" icon="star">
|
||||
Explore the Office Space gallery
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
---
|
||||
|
||||
## The Goal
|
||||
|
||||
Collect all 12 pieces of flair. Brian from accounting has 37, but we only ask for the minimum.
|
||||
Collect all 13 pieces of flair. Brian from accounting has 37, but we only ask for the minimum.
|
||||
|
||||
<Aside type="tip" title="Persistence">
|
||||
Your flair collection is stored in localStorage — it persists across sessions but stays on your device.
|
||||
|
|
|
|||
|
|
@ -97,6 +97,14 @@
|
|||
"placeholder": "🎖️",
|
||||
"image": "/flair/flair-badge.svg",
|
||||
"description": "Discovered the flair leaderboard"
|
||||
},
|
||||
{
|
||||
"id": "gallery",
|
||||
"path": "/community/gallery/",
|
||||
"name": "Cinema Enthusiast",
|
||||
"placeholder": "🎬",
|
||||
"image": "/flair/cinema.svg",
|
||||
"description": "Explored the Office Space gallery"
|
||||
}
|
||||
],
|
||||
"completionMessage": "You've got more than the minimum 15 pieces of flair!",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue