mmintelandClaude Opus 5.5
c70833a725
The homepage was too long and read as a list of sections. The technical ones (project fit, tools, how a change is secured) move to a page of their own, /freelance and /en/freelance, linked from the header, the footer and a pointer on the homepage. The rest is reordered into one story (who, what you need, examples, how working together goes, results, questions, contact) and each section opens with a sentence that leads over from the one before. routes.ts: a page may now have the same name in both languages. Before, /en/<german name> was always moved to the English name, which for such a page would have redirected the address onto itself. Design: list titles such as "Passt gut" are real headings instead of small grey labels. The automation examples, their description and the run are one box, so it is clear they belong together. Digits on light backgrounds are the blue of the panels instead of black. The square corner marks on the rounded service cards are gone. The years in the career line are readable. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Technical Problem Solver's Blog
A clean, readable blog built with Astro and React. Focus on practical insights and learning notes.
Features
- Clean Architecture: Modular React components for article elements
- TypeScript: Full type safety throughout
- MDX Support: Write content with JSX components
- Fast: Static site generation with Astro
- Readable: Carefully designed typography and spacing
Project Structure
src/
├── components/ # Modular React components
│ ├── ArticleHeading.tsx
│ ├── ArticleParagraph.tsx
│ ├── ArticleList.tsx
│ ├── ArticleBlockquote.tsx
│ ├── BlogPostCard.tsx
│ └── Container.tsx
├── data/
│ └── blogPosts.ts # Blog post metadata
├── layouts/ # Astro layouts
│ ├── BaseLayout.astro
│ └── BlogLayout.astro
└── pages/ # Routes
├── index.astro # Home page
└── blog/ # Blog posts
├── first-note.astro
└── debugging-tips.astro
Development
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
Writing Posts
- Add post metadata to
src/data/blogPosts.ts - Create a new
.astrofile insrc/pages/blog/ - Import and use the modular components
- The post will automatically appear on the home page
Components
The blog uses modular React components for article elements:
H1,H2,H3- Headings with consistent stylingParagraph,LeadParagraph- Text with proper spacingUL,OL,LI- Lists with proper indentationBlockquote,CodeBlock,InlineCode- Code and quotes
Design Philosophy
- Readability First: Clear typography, generous spacing
- No Distractions: Clean layout, focus on content
- Practical: Tools and techniques that work
- Calm: No hype, just facts
🎥 UI Showcase Toolkit
A Remotion-based toolkit for creating high-quality, deterministic showcase videos of our React components.
- Source of Truth: Renders real project components.
- Automated: CLI-driven rendering for LinkedIn-ready videos.
- Pixel-Perfect: 60fps, crisp text, brand-aligned style.
Quick Start
# Preview compositions
npm run video:preview
# Render the showcase video
npm run video:render
See .agent/workflows/video-toolkit.md for more details.
🤖 Industrial AI Estimation System
A multi-pass AI consultation engine for generating technical project estimations and professional PDFs.
- Context-Aware: Crawls existing customer websites to understand company DNA.
- Industrial Standards: Strictly follows "Industrial Engineering" aesthetics and technical wording.
- Transparent: Maps scope directly to a modular pricing model.
Quick Start
# Generate estimation with website crawl
npm run ai-estimate -- "Project Briefing" --url https://example.com
See ESTIMATION_GUIDE.md for full documentation.