improve performance: less shadow; fix horizontal scrollbar

Author: naltatis

CLAUDE.md

@@ -0,0 +1,76 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is **The Tractor Store** - a micro frontend demonstration project built with Astro. It serves as a blueprint for experimenting with micro frontend architecture, similar to TodoMVC but focused on micro frontends. The project is a showcase website that documents the concept and displays various implementation examples.
+
+## Development Commands
+
+- `npm run dev` / `npm start` - Start development server on port 3000
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build locally
+- `npm run clean` - Remove dist directory
+
+## Code Formatting
+
+- `prettier` - Format code using Prettier with Astro plugin
+- Configuration in `.prettierrc.mjs` includes special handling for `.astro` files
+
+## Architecture
+
+### Tech Stack
+- **Astro** - Static site generator with component islands
+- **TypeScript** - Type safety throughout
+- **Tailwind CSS** - Utility-first styling with custom design system
+- **React** (via @astrojs/react) - For interactive components
+
+### Project Structure
+```
+src/
+├── components/          # Reusable UI components
+│   ├── content/        # Page-specific content components
+│   └── *.astro         # Various UI components (Header, Footer, Nav, etc.)
+├── layouts/            # Page layout templates
+│   ├── PageLayout.astro    # Main layout with header/footer
+│   └── ContentLayout.astro # Content-focused layout
+├── pages/              # File-based routing
+│   ├── index.astro     # Homepage
+│   └── projects.astro  # Projects page
+├── lib/                # Utilities and helpers
+│   ├── seo.ts          # SEO meta generation
+│   └── markdoc/        # Markdoc configuration
+├── styles/             # Global styles
+└── config.ts           # Site configuration
+```
+
+### Key Architecture Patterns
+- **Component-based design**: Heavy use of Astro components for modularity
+- **Layout composition**: Main layout provides header/footer, content layouts handle page structure
+- **SEO-first**: Comprehensive meta tag generation via `lib/seo.ts`
+- **Theme system**: CSS custom properties for colors, dark mode support
+- **Static generation**: Built for GitHub Pages deployment
+
+### Styling System
+- Custom CSS properties defined in theme classes (`theme-bubblegum`)
+- Tailwind extended with custom color palette using CSS variables
+- Typography plugin for content styling
+- Custom font loading for Raleway family
+
+### Configuration Details
+- Base URL configured for GitHub Pages (`/tractor-store/`)
+- Assets prefix for CDN deployment
+- Sitemap and RSS generation enabled
+- Prism syntax highlighting included
+
+## Deployment
+
+Automated deployment to GitHub Pages via GitHub Actions (`.github/workflows/deploy.yml`). Builds are triggered on pushes to `main` branch.
+
+## Development Notes
+
+- The site showcases micro frontend concepts but is itself a traditional Astro site
+- Content is primarily static with some interactive elements
+- Font assets are loaded from external CDN
+- Project includes markdoc integration for potential content management

src/components/MFExample.astro

@@ -155,18 +155,16 @@ import { Image } from "astro:assets";
   }
 
   .c_shadow {
-    filter: drop-shadow(-3px -3px 3px rgba(255, 255, 255, 0.4))
-      drop-shadow(2px 3px 2px #edcdcd) drop-shadow(3px 6px 4px #edcdcd)
-      drop-shadow(4px 9px 6px #edcdcd)
-      drop-shadow(0px 4px 40px rgba(255, 90, 85, 0.3));
+    filter: drop-shadow(2px 4px 8px rgba(237, 205, 205, 0.8))
+           drop-shadow(0px 8px 32px rgba(255, 90, 85, 0.25));
+    will-change: transform;
     transform: translateZ(0);
   }
 
   :global(.dark) .c_shadow {
-    filter: drop-shadow(-3px -3px 3px rgba(255, 255, 255, 0.1))
-      drop-shadow(2px 3px 2px #322030) drop-shadow(3px 6px 4px #322030)
-      drop-shadow(4px 9px 6px #322030)
-      drop-shadow(0px 4px 40px rgba(255, 90, 85, 0.3));
+    filter: drop-shadow(2px 4px 8px rgba(50, 32, 48, 0.8))
+           drop-shadow(0px 8px 32px rgba(255, 90, 85, 0.25));
+    will-change: transform;
     transform: translateZ(0);
   }
 

src/components/content/Hero.astro

@@ -104,13 +104,24 @@ import qwikLogo from "../../../public/images/tech/qwik.svg";
 
   .image {
     @media (max-width: 999px) {
-      filter: drop-shadow(-30px -10px 50px rgba(255, 90, 85, 0.53));
+      filter: drop-shadow(-20px -8px 40px rgba(255, 90, 85, 0.5));
     }
 
     @media (min-width: 1000px) {
-      filter: drop-shadow(-30px -10px 100px rgba(255, 90, 85, 0.33));
+      filter: drop-shadow(-20px -8px 60px rgba(255, 90, 85, 0.35));
     }
     transform: translateZ(0);
+    will-change: transform;
+  }
+
+  :global(.dark) .image {
+    @media (max-width: 999px) {
+      filter: drop-shadow(-20px -8px 40px rgba(255, 90, 85, 0.8));
+    }
+
+    @media (min-width: 1000px) {
+      filter: drop-shadow(-20px -8px 60px rgba(255, 90, 85, 0.6));
+    }
     width: 100%;
   }
 

src/styles/global.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  overflow-x: hidden;
+}
+
 /* 
     Tailwind colors listed here: https://tailwindcss.com/docs/customizing-colors