feat: rebuild mintel.me as a single-page freelance site
The site now presents one freelance developer on one page: hero, introduction, four typical cases (developer for a product, make an app reliable, automate a process, a website) with what you get, how it runs and what it costs, a process automation section, technology and project fit, how I work, two live references, questions and contact. - Hero and closing headline are drawn from running binary digits. - Each case explains its four steps with an animated drawing; the automation section shows example workflows with work travelling between systems; a pipeline run shows what a test catches before a release. - Contact is one email address, kept in parts and assembled in the browser so it never appears in the page source (src/domain/email.ts, spec first). - Imprint and privacy pages added. - The old site (blog, case studies, contact form, fixed-price pages, video rendering and related scripts) is removed. Its URLs redirect to the homepage. - The deploy smoke test checks the legal pages and the redirects instead of the removed case study. - Dev scripts use docker compose v2. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -5,13 +5,18 @@ books a 20-minute intro call within 2 minutes. Low sales overhead, more bookable
|
||||
|
||||
## 1. Positioning
|
||||
|
||||
**The senior engineer who makes AI-built software dependable.**
|
||||
**The senior developer who builds web apps and websites that keep working.**
|
||||
|
||||
"Senior engineer for teams that build fast with AI and don't want chaos. Strong in design and frontend, provably clean in architecture and tests. Remote, booked in weekly capacity blocks."
|
||||
"Senior developer for web apps, interfaces and websites. You talk to me directly, you see progress every week, and what I build holds up when it grows."
|
||||
|
||||
- Headline candidate: "AI makes code cheap. I make it correct."
|
||||
- Do not say: "everything", "fullstack for anyone", "vibe coding". Web3 is one specialty, not the identity.
|
||||
- Language: English primary (international and Web3 clients), German route `/de` for DACH.
|
||||
### Copy rules for everything a client can read (owner decision)
|
||||
|
||||
- **Never mention AI as my own tool.** How I work is none of the client's business: no "AI-built", "AI-accelerated", "AI-code rescue", no FAQ about AI tools. The one exception is the automation service, where AI steps are part of what the client gets (sorting, summarising, reading documents).
|
||||
- **Modest and factual.** No promises I have not made (response times, weekly updates, start dates, search ranking). Only state what the owner confirmed. No superlatives.
|
||||
- **No internal method vocabulary** on client-facing pages: no specs, TDD, mutation testing, coverage, pull requests. Translate into what the client gets: changes do not break things, a written update every week, predictable cost. Technical detail belongs on `/process` and `/notes`, for engineers.
|
||||
- Do not say: "everything", "fullstack for anyone", "vibe coding". No location or tax talk; say "remote, available during European business hours".
|
||||
- Pick the visitor up: introduce me first, then let them choose their need (developer for a product, make an app reliable, just a website), then explain for that need what they get, how it runs, what it costs.
|
||||
- Language: English primary, German route `/de` for DACH.
|
||||
|
||||
### Audiences (priority order)
|
||||
|
||||
@@ -35,40 +40,41 @@ Site treatment:
|
||||
- A downloadable sample delivery report.
|
||||
- Evidence uses measured numbers only. Never claim: "100% coverage" (flash-loans measures 87.5%), "property-tested" (none found), or mutation scores that have not been run in full.
|
||||
|
||||
## 3. Site structure (4 items)
|
||||
## 3. Site structure (owner decision: one page)
|
||||
|
||||
`Notes · Process · About · Book`
|
||||
Everything is on the homepage. The header has the logo and one button ("Get in touch") that jumps to the contact section. Contact is the address hello@mintel.me: the owner rejected a calendar integration as unnecessary. No `/about`, `/process`, `/notes` or `/book`.
|
||||
|
||||
1. **/** Hero (headline, availability line, CTA) -> proof strip (key numbers, live references) -> How I ship -> offers and blocks -> stack -> CTA.
|
||||
2. **/notes** Evergreen engineering write-ups, no client projects, no strategy IP. Candidates: the gate pipeline (spec, mutation, coverage ratchet), functional core and imperative shell (from the liquidation system), concept-to-code mapping (from the trading engine). Each with a diagram.
|
||||
3. **/process** How I ship and the sample report.
|
||||
4. **/about** Short story: 15 years in web (apprenticeship 2011), senior roles, frontend team lead at an agency, remote since 2021, own product business. 3-4 employer names at most, full CV as PDF. Be honest about the path: Vue/JS roots, today TypeScript, Rust, Solidity.
|
||||
5. **/book** Cal.com embed, 20-minute intro call, email plus project description required.
|
||||
1. **Hero:** headline "WEB APPS / & WEBSITES." (says what I do; "Ship fast. Break nothing." was rejected as unclear), availability, one button.
|
||||
2. **Hello:** portrait fading out of a dark surface with the introduction set over it, then the career line.
|
||||
3. **Services, four typical cases:** developer for a product, make an app reliable, automate a process, just a website. Each case explains what you get, how it runs (four steps with an animated drawing each), what it costs.
|
||||
4. **Technology:** which projects I am right for (good fit / also possible / not my field), what I work with, and an illustrated explanation of why I test my work (no code).
|
||||
5. **Working with me:** one contact (diagram) and four plain principles.
|
||||
6. **My work:** live previews of klz-cables.com and e-tib.com (both cleared by the owner).
|
||||
7. **Questions**, then the closing call to action.
|
||||
|
||||
References: one line on the homepage with live links (klz-cables.com, e-tib.com), no case-study pages. Naming both clients is cleared by the owner.
|
||||
Remove: `/websites` page, the fixed-price configurator, RevenueLossCalculator, SMB-focused copy. Keep `/blog` out of the nav.
|
||||
The old site (`/blog`, `/case-studies`, `/contact`, `/websites`, `/technologies`, `/tags`) is deleted, together with its content, tooling and the code only it used. Its URLs redirect to `/`. Legal pages: `/imprint` and `/privacy` (owner details taken from the old terms document; the privacy text is a draft from what the code actually processes and has not been checked by a lawyer).
|
||||
|
||||
## 4. Design
|
||||
|
||||
- Dark, technical, one accent color (green), mono for technical elements, Inter for body.
|
||||
- Keep the binary/blueprint idea from the current site as a very quiet background (reuse `BinaryStream`, `AbstractCircuit`).
|
||||
- The delivery report block as a terminal-style card in the first screen is the centerpiece.
|
||||
- Availability line fed by one constant (next free block, hours per week). Reuse `Availability.tsx`.
|
||||
- Mockup of the hero was shown in chat; text/numbers in it are placeholders.
|
||||
- Light, the original look of the site: white, oversized type, binary texture, one accent (the yellow marker).
|
||||
- The hero headline is built from running binary digits ("SHIP FAST. / BREAK NOTHING."). The owner approved it: do not change the hero design.
|
||||
- One left axis for logo, navigation and content. No sidebars. Few sections, each with one job.
|
||||
- Availability line fed by one constant, shown in the hero, the sticky booking bar and the closing section.
|
||||
|
||||
## 5. Offers and pricing
|
||||
|
||||
### Capacity blocks (main offer)
|
||||
### Pricing per case (owner decision: hour packages like 15 vs 20 h are meaningless to buyers)
|
||||
|
||||
| Block | Per week | Per month | Rate |
|
||||
| :-------- | :------- | :-------- | :----------------------------- |
|
||||
| Focus | 15 h | 60 h | 100 EUR/h -> 6,000 EUR |
|
||||
| Half-time | 20 h | 80 h | 100 EUR/h -> 8,000 EUR |
|
||||
| Full-time | 35-40 h | 140-160 h | 100 EUR/h -> 14,000-16,000 EUR |
|
||||
| Case | Model | Shown on the site |
|
||||
| :---------------------- | :----------------------------------- | :---------------------------------------------------------------------------------------------- |
|
||||
| Developer for a product | By effort, on agreed days per week | 100 EUR/hour, 800 EUR/day, net; two weeks notice to month end |
|
||||
| Make an app reliable | Fixed week | 3,500 EUR for 35 hours (derived from the rate, not yet confirmed) |
|
||||
| Automate a process | Estimate, then a budget | 100 EUR/hour; no price before the process has been seen |
|
||||
| Website | Estimate, then a budget (contingent) | from 3,800 EUR; extras at 100 EUR/hour; monthly fee for hosting agreed up front (no amount yet) |
|
||||
|
||||
Rate: 100 EUR/h, decided. DACH freelancer average is about 103 EUR/h (freelancermap Freelancer-Kompass 2026), senior developers list 85-120 EUR/h. Raise it for new clients once blocks are booked out for 4+ weeks. Show monthly block prices on the site, not the hourly rate. 2-week notice, simple SOW, transparent time tracking.
|
||||
The hourly rate is public now. Rate: 100 EUR/h. DACH freelancer average is about 103 EUR/h (freelancermap Freelancer-Kompass 2026).
|
||||
|
||||
### Entry offer: AI-code rescue (1 week, 35 h)
|
||||
### Entry offer: make an app reliable (1 week, 35 h; internal name "rescue")
|
||||
|
||||
Audit of an AI-built codebase, test foundation, mutation baseline, prioritized report. Easy to buy, converts into a block.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user