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. | +
+ Harald Binkle logo -> **_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 +

+ GitHub + LinkedIn + Blog + Talks + Sessionize +

+
+ +## 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 + +

+ GitHub Copilot + Model Context Protocol (MCP) + TypeScript + React + Playwright + Azure + DevOps + C Sharp + VS Code +

+ +## 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: + +![GitHub contribution statistics for Harald Binkle](https://github-readme-stats.vercel.app/api?username=harrybin&show_icons=true&hide_border=true&theme=transparent) +![Most used programming languages in Harald Binkle repositories](https://github-readme-stats.vercel.app/api/top-langs/?username=harrybin&layout=compact&hide_border=true&theme=transparent) + +## 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