%20%7C%20React%20%7C%20Recharts-blueviolet){kind=icon}
A modern Data Product Portfolio designed to bridge the gap between static analysis and interactive software engineering. It is structured as a high-performance, full-stack data application.
Live Site: https://patrick.mp.ls
This platform is a custom-engineered Hybrid Data Application Platform built on the modern Astro Islands Architecture. It is engineered to host complex, interactive dashboards and technical case studies, demonstrating full-stack engineering skills.
- Hybrid Architecture: Uses Astro for server-side generated HTML content (SEO/Speed) and hydrates React components for interactivity on-demand (Islands).
- Spotlight Search: Global, client-side fuzzy search (triggered by
Cmd+KorCtrl+K) that instantly filters all blog posts and tags. - Dynamic Tagging: Automatic generation of tag-specific pages (
/tags/[tag].astro) for improved content discovery. - Advanced SEO: Utilizes dynamic Open Graph (OG) image generation via an Edge function (
/api/og/[slug].tsx) and comprehensive JSON-LD schema for all articles and pages. - Modular Design: Decoupled logic and styling (
/src/styles) for maintainability.
An interactive deep-dive into 120+ years of Minnesota Twins/Washington Senators history.
Goal: Move beyond static Excel charts to allow users to ask their own questions about the data.
- Live Data Source: Data is dynamically fetched on page load from a Live Google Sheet via its CSV export API using
PapaParse, requiring zero code changes for data updates. - The Time Machine: Users can scrub the
Focus Yearslider to instantly update all metric cards and chart reference lines for any season from 1901–2025. - Deep-Dive Modals: Click any metric card (e.g., Wins, Payroll, Attendance) to open a full-screen modal showing a zoomable Area Chart for that metric's historical trend and all-time ranking.
- Export: Data for the currently filtered range can be exported directly to a CSV file.
A forward-looking 2026 Season Scenario Planner that uses Pythagorean Expectation models to forecast team performance.
Goal: Simulate the impact of roster volatility and player health on playoff probabilities.
- Probability Engine: Calculates projected Win/Loss records and Playoff Odds in real-time based on adjustable Team wRC+ (Offense) and FIP (Pitching) inputs.
- Scenario Presets: Instantly toggle between "Optimistic," "Realistic," and "Doomsday" scenarios to see the floor and ceiling of the current roster.
- The "Buxton Factor": A dedicated logic toggle that adjusts the model's offensive efficiency based on the historical availability of star player Byron Buxton.
- Visual Identity: Features a dynamic "Glassmorphism" UI with real-time feedback loops.
- Framework: Astro (
output: 'server'with Node.js Adapter) - UI Library: React (Component Logic)
- Visualization: Recharts (SVG-based charting)
- Data Fetching:
PapaParsefor CSV streaming - Contact Form: Handled by a server endpoint using Nodemailer
- Server: Ubuntu VPS
- Adapter:
@astrojs/node - Process Manager: PM2 (Keeps the Node.js process running and handles restarts)
- Web Server: Nginx (Acts as a reverse proxy)
- CI/CD: GitHub Actions (Auto-deploys on push to
main)
src/
├── components/ # React Widgets (Search, Dashboards, Scenario Planner)
├── content/ # Markdown Blog Posts (CMS)
├── layouts/ # Astro Layout Shells (Header, Footer)
├── pages/ # File-based Routing
│ ├── api/ # Dynamic Server Endpoints (OG Images, Email)
│ ├── blog/ # Dynamic Blog Routes ([...slug].astro)
│ └── dashboards/ # Dashboard Pages
└── styles/ # Modular CSS Files (global, cards, search, etc.)
To run this portfolio locally:
Clone the repo:
git clone https://github.com/patbritton/portfolio.git
cd portfolioInstall dependencies:
npm installRun the Dev Server:
npm run devVisit http://localhost:4321 to see the app!