Stefan Peele: The Digital Archive

Project Case Study & Feature Highlights

Timeline: 5 Days

Architecture: Next.js, React, TypeScript, Tailwind CSS, Sanity Headless CMS, Vercel

1. Elite Engineering & Performance Metrics

• Perfect Lighthouse Scores: Achieved 100/100 across Performance, Accessibility, Best Practices, and SEO despite heavy image loads and complex animations.
• Automated Headless CMS Pipeline: Engineered a content architecture using Sanity.io. All data (projects, blogs, photography) is dynamically fetched, with webhooks triggering automated Vercel deployments upon publishing.
• Strict Type Safety: Implemented rigorous TypeScript interfaces across the entire stack, eliminating runtime errors and ensuring perfectly typed data payloads from the backend CMS to the frontend UI components.

2. The "Digital Darkroom" Photography Experience

• Cinematic Vignette & Spotlight Grid: Designed a custom masonry grid featuring a "spotlight" effect—images sit desaturated in a charcoal vignette and breathe back to 100% vibrant color and scale up upon hover.
• The "Darkroom Develop" Loading State: Replaced standard image spinners with CSS filter animations (brightness, contrast, sepia, blur) so images organically "develop" into grayscale on load, mimicking analog film.
• Museum Placard Lightbox: Built an interactive, swipeable lightbox that extracts dynamic metadata. It features an editorial sidebar displaying extracted camera EXIF data (Camera, Lens, Exposure, ISO).
• Dynamic Color Extraction: Engineered an algorithm that extracts the top 4 dominant colors from any active photograph and displays them as sleek swatches in the UI.
• The "Breathing" Image Engine: Applied a microscopic, ultra-slow 20-second Ken Burns scale/pan effect to images inside the lightbox to give static memories a cinematic "heartbeat".

3. "S.P. Digital Archive" IT Insights Blog

• Academic Utility Suite: Built custom hacker/academic utilities for IT professionals reading the blog, including a "Cite this article" engine that auto-generates APA/MLA citations with today's retrieval date.
• Advanced Content Parsing: Implemented dynamic reading time calculations, a scroll progress bar, and a sticky table of contents for long-form technical documentation.
• Cinematic Headers: Engineered a CSS gradient mask that seamlessly fades the featured article cover images into the deep black background of the page.

4. Immersive Micro-Interactions

• Mechanical Shutter Routing: Developed a custom page transition engine where two pure black divs act as physical "shutter blades," slamming shut and sliding open smoothly when navigating into the photography gallery.
• Blend-Mode Custom Cursor: Hid the default system pointer in favor of a custom Framer Motion dot that dynamically expands into a "VIEW" cursor using mix-blend-mode: difference, perfectly adapting to whatever content it hovers over.
• "Director's Cut" Image Scaling: Implemented high-end, subtle scaling transforms inside rigid CSS clipping masks for an elevated, award-winning visual feel.