# Harald Binkle
@@ -82,8 +83,8 @@ Recent public touchpoints include **Sessionize**, **Xebia**, **Microsoft MVP**,
These blocks fit the intended modern style and can be enabled in the final profile repository:
-
-
+
+
## Content basis
From 4700491e747a7b2be47624fffb0b21c77a59f518 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 3 Jul 2026 22:54:40 +0000
Subject: [PATCH 4/5] docs: polish GitHub profile proposal
---
PROFILE-README-PROPOSAL.md | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/PROFILE-README-PROPOSAL.md b/PROFILE-README-PROPOSAL.md
index 2ccd062..47129d4 100644
--- a/PROFILE-README-PROPOSAL.md
+++ b/PROFILE-README-PROPOSAL.md
@@ -1,9 +1,9 @@
> Proposal for the future GitHub profile README of **@harrybin**.
> This draft is designed to be copied later into the dedicated GitHub profile repository.
-> For the final profile repository, copy the logo into that repository and replace the raw asset URL with a local path.
+> For the final profile repository, copy the logo into that repository and replace the current absolute asset URL with a local path.
-
+
# Harald Binkle
@@ -63,7 +63,7 @@ Recent public touchpoints include **Sessionize**, **Xebia**, **Microsoft MVP**,
-
+
From 249a359e9b8994052fffa0adac81203d22de1c9b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 6 Jul 2026 06:10:28 +0000
Subject: [PATCH 5/5] docs: rename proposal to README.md, reorder badges, mark
react-common as outdating
---
PROFILE-README-PROPOSAL.md | 96 ------------
README.md | 296 +++++++++++--------------------------
2 files changed, 88 insertions(+), 304 deletions(-)
delete mode 100644 PROFILE-README-PROPOSAL.md
diff --git a/PROFILE-README-PROPOSAL.md b/PROFILE-README-PROPOSAL.md
deleted file mode 100644
index 47129d4..0000000
--- a/PROFILE-README-PROPOSAL.md
+++ /dev/null
@@ -1,96 +0,0 @@
-> Proposal for the future GitHub profile README of **@harrybin**.
-> This draft is designed to be copied later into the dedicated GitHub profile repository.
-> For the final profile repository, copy the logo into that repository and replace the current absolute asset URL with a local path.
-
-
-
-
- # Harald Binkle
-
- **Principal Consultant @ Xebia · Microsoft MVP · Speaker · Trainer**
-
- *Building modern developer workflows with GitHub Copilot, AI agents, React, TypeScript and DevOps.*
-
-
- 
- 
- 
- 
- 
-
-
-
-## About me
-
-I am a fullstack developer, consultant and trainer from Germany with a strong focus on frontend architecture, cloud-native software delivery and developer productivity.
-
-I help teams adopt practical AI workflows, especially around **GitHub Copilot**, **AI agents**, **Model Context Protocol**, **React**, **TypeScript** and **DevOps**.
-
-## Current focus
-
-- 🤖 AI-assisted software delivery with GitHub Copilot and agent-based workflows
-- 🧩 MCP tooling and interactive developer experiences
-- ⚛️ React, TypeScript and scalable frontend architecture
-- ☁️ Cloud applications and microservice-based systems
-- 🧪 Test automation with Playwright
-- 🎤 Talks, workshops, coaching and knowledge sharing
-
-## Featured work
-
-| Project | What it highlights |
-| --- | --- |
-| [`visuals-mcp`](https://github.com/harrybin/visuals-mcp) | MCP server for interactive visualizations such as tables, charts, trees and master-detail views |
-| [`presentations`](https://github.com/harrybin/presentations) | Public conference talks and workshop decks around Copilot, AI, Dev Containers and frontend topics |
-| [`harrybin.github.io`](https://github.com/harrybin/harrybin.github.io) | My developer blog with articles on GitHub Copilot, React, AI workflows and speaking updates |
-| [`react-common`](https://github.com/harrybin/react-common) | Reusable React utilities and shared frontend building blocks |
-
-## Speaking & community
-
-I regularly speak and teach about topics such as:
-
-- GitHub Copilot in day-to-day engineering
-- Spec-driven and agent-assisted development
-- React and modern frontend architecture
-- Dev Containers and productive local setups
-- Web app localization
-- AIOps, maintenance and modernization
-
-Recent public touchpoints include **Sessionize**, **Xebia**, **Microsoft MVP**, **GitHub Copilot Dev Days**, **DWX**, **EKON**, **IT-Tage**, **DDC Cologne** and **.NET Day Franken**.
-
-## Topics I enjoy working with
-
-
-
-
-
-
-
-
-
- 
- 
-
-
-## Around the web
-
-- 🌐 Blog: https://harrybin.de/
-- 💼 LinkedIn: https://www.linkedin.com/in/harald-binkle/
-- 🎤 Sessionize: https://sessionize.com/harald-binkle/
-- 📚 Presentations: https://presentations.harrybin.de/
-- 🧠 MVP profile: https://mvp.microsoft.com/en-US/MVP/profile/8e873a95-57f3-4936-b38e-a43f996533a1
-
-## Optional GitHub widgets
-
-These blocks fit the intended modern style and can be enabled in the final profile repository:
-
-
-
-
-## Content basis
-
-This proposal reflects public information from:
-
-- the blog and about page on **harrybin.de**
-- the active social links and branding assets in this repository
-- Harald Binkle's public **GitHub**, **Sessionize**, **Microsoft MVP** and **Xebia** presence
-- public talk and workshop topics visible via the presentations repository and event pages
diff --git a/README.md b/README.md
index aeec528..8c5115b 100644
--- a/README.md
+++ b/README.md
@@ -1,212 +1,92 @@
-# Developer blog of harrybin
-
-Here you will find short developer posts all around my daily work. 📄
-
-## 🏗️ Architecture & Theme
-
-This blog is built using the **[AstroPaper](https://github.com/satnaing/astro-paper)** theme, a minimal, responsive, and accessible blog theme for Astro. The theme provides:
-
-- **Static Site Generation (SSG)** with Astro's island architecture
-- **Responsive design** optimized for mobile and desktop
-- **SEO-friendly** with proper meta tags and Open Graph support
-- **Accessibility** features following WCAG guidelines
-- **Dark/Light mode** toggle with system preference detection
-- **Fast search** functionality powered by FuseJS
-- **RSS feed** generation for blog posts
-- **Sitemap** generation for better SEO
-
-## 💻 Tech Stack
-
-**Main Framework** - [Astro](https://astro.build/) - Static site generator with islands architecture
-**Theme** - [AstroPaper](https://github.com/satnaing/astro-paper) - Minimal, responsive blog theme
-**Type Checking** - [TypeScript](https://www.typescriptlang.org/) - Static type checking
-**Component Framework** - [ReactJS](https://reactjs.org/) - Interactive components (search, theme toggle)
-**Styling** - [TailwindCSS](https://tailwindcss.com/) - Utility-first CSS framework
-**Content Management** - [Astro Content Collections](https://docs.astro.build/en/guides/content-collections/) - Type-safe content management
-**Markdown Processing** - [Remark](https://remark.js.org/) & [Rehype](https://github.com/rehypejs/rehype) - Markdown to HTML processing
-**UI/UX** - [Figma](https://figma.com) - Design and prototyping
-**Fuzzy Search** - [FuseJS](https://fusejs.io/) - Client-side search functionality
-**Icons** - [Boxicons](https://boxicons.com/) | [Tablers](https://tabler-icons.io/) - Icon libraries
-**Code Formatting** - [Prettier](https://prettier.io/) - Code formatting
-**Deployment** - [Cloudflare Pages](https://pages.cloudflare.com/) - Static site hosting
-**Illustration in About Page** - [https://freesvgillustration.com](https://freesvgillustration.com/)
-**Linting** - [ESLint](https://eslint.org) - JavaScript/TypeScript linting
-
-### Content & Features:
-
-**[giscus](https://giscus.app/)** - GitHub Discussions-powered comments system
-**Social Media Integration** - Configurable social links and sharing
-**Open Graph Images** - Dynamic OG image generation for posts
-**Analytics Ready** - Easy integration with Google Analytics or other services
-
-## 🚀 Astro Features Used
-
-### Islands Architecture
-
-- **Hydration Strategy**: Components are hydrated only when needed using Astro's `client:*` directives
-- **Performance**: Minimal JavaScript shipped to the client, better Core Web Vitals
-- **Framework Agnostic**: Can use React, Vue, Svelte, or vanilla JavaScript components
-
-### Content Collections
-
-- **Type Safety**: Strongly typed frontmatter validation using Zod schemas
-- **Content Management**: Organized blog posts with automatic slug generation
-- **Markdown Support**: Extended markdown with custom remark/rehype plugins
-
-### Static Site Generation
-
-- **Build Time**: All pages are pre-rendered at build time
-- **SEO Optimization**: Perfect SEO scores with proper meta tags and structured data
-- **Fast Loading**: Optimized assets and minimal JavaScript for blazing fast performance
-
-### Custom Integrations
-
-- **RSS Feed**: Automatically generated RSS feed for blog subscribers
-- **Sitemap**: Dynamic sitemap generation for search engines
-- **Open Graph**: Custom OG image generation for social media sharing
-
-## � Project Structure
-
-```
-/
-├── public/ # Static assets
-│ ├── assets/ # Images, icons, and media files
-│ ├── favicon.svg # Site favicon
-│ └── toggle-theme.js # Theme toggle functionality
-├── src/
-│ ├── components/ # Reusable Astro and React components
-│ │ ├── Card.tsx # Blog post cards (React)
-│ │ ├── Search.tsx # Search functionality (React)
-│ │ └── *.astro # Astro components (Header, Footer, etc.)
-│ ├── content/ # Content collections
-│ │ ├── blog/ # Blog posts (Markdown/MDX)
-│ │ ├── docs/ # Documentation pages
-│ │ └── config.ts # Content collection schemas
-│ ├── layouts/ # Page layouts
-│ │ ├── Layout.astro # Base layout with head, SEO
-│ │ ├── PostDetails.astro # Blog post layout
-│ │ └── Posts.astro # Blog listing layout
-│ ├── pages/ # File-based routing
-│ │ ├── index.astro # Homepage
-│ │ ├── about.md # About page
-│ │ ├── posts/ # Blog post pages
-│ │ ├── tags/ # Tag-based filtering
-│ │ └── og.png.ts # Dynamic OG image generation
-│ ├── styles/ # Global styles
-│ │ └── base.css # Base styles and Tailwind imports
-│ └── utils/ # Utility functions
-│ ├── getSortedPosts.ts # Blog post sorting
-│ ├── getUniqueTags.ts # Tag extraction
-│ └── og-templates/ # OG image templates
-├── astro.config.ts # Astro configuration
-├── tailwind.config.cjs # Tailwind CSS configuration
-└── tsconfig.json # TypeScript configuration
-```
-
-## �👨🏻💻 Running Locally
-
-The easiest way to run this project locally is to run the following command in your desired directory.
-
-```bash
-# npm 6.x
-npm create astro@latest --template satnaing/astro-paper
-
-# npm 7+, extra double-dash is needed:
-npm create astro@latest -- --template satnaing/astro-paper
-
-# yarn
-yarn create astro --template satnaing/astro-paper
-```
-
-## Google Site Verification (optional)
-
-You can easily add your [Google Site Verification HTML tag](https://support.google.com/webmasters/answer/9008080#meta_tag_verification&zippy=%2Chtml-tag) in AstroPaper using environment variable. This step is optional. If you don't add the following env variable, the google-site-verification tag won't appear in the html `` section.
-
-```bash
-# in your environment variable file (.env)
-PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value
-```
-
-## 📊 Analytics: Microsoft Clarity
-
-This project uses **[Microsoft Clarity](https://clarity.microsoft.com/)** for privacy-friendly, in-depth analytics and user behavior insights.
-
-### What is Microsoft Clarity?
-
-Microsoft Clarity is a free analytics tool that provides:
-
-- **Session recordings**: See how real users interact with your site
-- **Heatmaps**: Visualize where users click, scroll, and spend time
-- **User journey analysis**: Understand navigation paths and drop-off points
-- **Performance metrics**: Identify slow pages and usability issues
-- **Privacy-first**: No sampling, GDPR-compliant, and does not track personal data
-
-### Why use Clarity?
-
-- **Improve UX**: Discover friction points and optimize user experience
-- **Content insights**: See which blog posts and features attract the most attention
-- **Debugging**: Replay sessions to reproduce and fix bugs
-- **No cost**: 100% free, no traffic limits
-
-### How is Clarity integrated?
-
-- The official Clarity tracking script is injected globally in the main layout (`src/layouts/Layout.astro`).
-- Each page view is tracked, and a unique user/session ID is used (from localStorage or fallback to 'anonymous').
-- The current page path is sent as a custom page ID, so you can analyze single blog post views in Clarity's dashboard.
-- No personal data is collected; all analytics are anonymous and privacy-friendly.
-
-**Integration snippet:**
-
-```html
-
-
-```
-
-For more, see [clarity.microsoft.com](https://clarity.microsoft.com/).
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-> **_Note!_** For `Docker` commands we must have it [installed](https://docs.docker.com/engine/install/) in your machine.
-
-| Command | Action |
-| :----------------------------------- | :------------------------------------------------------------------------------------------------------------------------------- |
-| `npm install` | Installs dependencies |
-| `npm run dev` | Starts local dev server at `localhost:4321` |
-| `npm run build` | Build your production site to `./dist/` |
-| `npm run preview` | Preview your build locally, before deploying |
-| `npm run format:check` | Check code format with Prettier |
-| `npm run format` | Format codes with Prettier |
-| `npm run sync` | Generates TypeScript types for all Astro modules. [Learn more](https://docs.astro.build/en/reference/cli-reference/#astro-sync). |
-| `npm run cz` | Commit code changes with commitizen |
-| `npm run lint` | Lint with ESLint |
-| `docker compose up -d` | Run AstroPaper on docker, You can access with the same hostname and port informed on `dev` command. |
-| `docker compose run app npm install` | You can run any command above into the docker container. |
+
+
-> **_Warning!_** Windows PowerShell users may need to install the [concurrently package](https://www.npmjs.com/package/concurrently) if they want to [run diagnostics](https://docs.astro.build/en/reference/cli-reference/#astro-check) during development (`astro check --watch & astro dev`). For more info, see [this issue](https://github.com/satnaing/astro-paper/issues/113).
+ # Harald Binkle
----
+ **Principal Consultant @ Xebia · Microsoft MVP · Speaker · Trainer**
-## 📜 License
+ *Building modern developer workflows with GitHub Copilot, AI agents, React, TypeScript and DevOps.*
-Licensed under the MIT License, Copyright © 2025
+
+
+
+
+
+
+
+
+
+## About me
+
+I am a fullstack developer, consultant and trainer from Germany with a strong focus on frontend architecture, cloud-native software delivery and developer productivity.
+
+I help teams adopt practical AI workflows, especially around **GitHub Copilot**, **AI agents**, **Model Context Protocol**, **React**, **TypeScript** and **DevOps**.
+
+## Current focus
+
+- 🤖 AI-assisted software delivery with GitHub Copilot and agent-based workflows
+- 🧩 MCP tooling and interactive developer experiences
+- ⚛️ React, TypeScript and scalable frontend architecture
+- ☁️ Cloud applications and microservice-based systems
+- 🧪 Test automation with Playwright
+- 🎤 Talks, workshops, coaching and knowledge sharing
+
+## Featured work
+
+| Project | What it highlights |
+| --- | --- |
+| [`visuals-mcp`](https://github.com/harrybin/visuals-mcp) | MCP server for interactive visualizations such as tables, charts, trees and master-detail views |
+| [`presentations`](https://github.com/harrybin/presentations) | Public conference talks and workshop decks around Copilot, AI, Dev Containers and frontend topics |
+| [`harrybin.github.io`](https://github.com/harrybin/harrybin.github.io) | My developer blog with articles on GitHub Copilot, React, AI workflows and speaking updates |
+| [`react-common`](https://github.com/harrybin/react-common) | Reusable React utilities and shared frontend building blocks *(outdating)* |
+
+## Speaking & community
+
+I regularly speak and teach about topics such as:
+
+- GitHub Copilot in day-to-day engineering
+- Spec-driven and agent-assisted development
+- React and modern frontend architecture
+- Dev Containers and productive local setups
+- Web app localization
+- AIOps, maintenance and modernization
+
+Recent public touchpoints include **Sessionize**, **Xebia**, **Microsoft MVP**, **GitHub Copilot Dev Days**, **DWX**, **EKON**, **IT-Tage**, **DDC Cologne** and **.NET Day Franken**.
+
+## Topics I enjoy working with
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Around the web
+
+- 🌐 Blog: https://harrybin.de/
+- 💼 LinkedIn: https://www.linkedin.com/in/harald-binkle/
+- 🎤 Sessionize: https://sessionize.com/harald-binkle/
+- 📚 Presentations: https://presentations.harrybin.de/
+- 🧠 MVP profile: https://mvp.microsoft.com/en-US/MVP/profile/8e873a95-57f3-4936-b38e-a43f996533a1
+
+## Optional GitHub widgets
+
+These blocks can be enabled once added to the profile repository:
+
+
+
+
+## Content basis
+
+This README reflects public information from:
+
+- the blog and about page on **harrybin.de**
+- the active social links and branding assets in this repository
+- Harald Binkle's public **GitHub**, **Sessionize**, **Microsoft MVP** and **Xebia** presence
+- public talk and workshop topics visible via the presentations repository and event pages
+
+ # Harald Binkle
+
+ **Principal Consultant @ Xebia · Microsoft MVP · Speaker · Trainer**
+
+ *Building modern developer workflows with GitHub Copilot, AI agents, React, TypeScript and DevOps.*
+
+