The rail and the "next, you are wondering" links are gone (owner: flat, and the question stood twice in a row). The page now reads from top to bottom: Every chapter opens with one sentence, and the sentences follow each other as the way of a project: you need someone who builds it, first we find out what you need, sometimes it is less work by hand, sometimes a meeting, then it always runs the same way, in the end something runs, a few questions remain, and it starts with an email. One line runs down the whole page and draws itself as the visitor scrolls. Under each sentence it crosses the page, stands a figure on the line (diamond, hexagon, screen, circle, square, triangle) and continues down the other side; a glowing dot travels at its head and comes to rest in front of the last sentence. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
804 lines
30 KiB
TypeScript
804 lines
30 KiB
TypeScript
import type { Content } from "./types";
|
||
|
||
const SIGN_OFF = "Best regards";
|
||
const FIRST_CALL = "A first call, about 20 minutes";
|
||
const GET_IN_TOUCH = "Get in touch";
|
||
|
||
/** The English texts of the site. de.ts holds the same in German. */
|
||
export const en: Content = {
|
||
site: {
|
||
title: "Freelance web developer for web apps & websites | Marc Mintel",
|
||
description:
|
||
"Freelance web developer with 15 years of experience. I build web apps, interfaces and websites with React, Next.js and TypeScript, and automate processes.",
|
||
jobTitle: "Freelance web developer",
|
||
ogLocale: "en_US",
|
||
shareImageAlt:
|
||
"Web apps and websites. Marc Mintel, freelance web developer with 15 years of experience.",
|
||
knowsAbout: [
|
||
"Web applications",
|
||
"User interfaces",
|
||
"Websites",
|
||
"Process automation",
|
||
"Web3 frontends",
|
||
],
|
||
catalogName: "Services",
|
||
},
|
||
nav: {
|
||
contact: GET_IN_TOUCH,
|
||
freelance: "Freelance",
|
||
contactLong: GET_IN_TOUCH,
|
||
logoLabel: "Marc Mintel, back to top",
|
||
imprint: "Imprint",
|
||
privacy: "Privacy",
|
||
backToTop: "Back to top",
|
||
language: "Language",
|
||
languageNames: { en: "English", de: "Deutsch" },
|
||
},
|
||
hero: {
|
||
headline: [
|
||
{ text: "WEB APPS", tone: "solid" },
|
||
{ text: "& WEBSITES.", tone: "bits" },
|
||
],
|
||
lead: "Freelance web developer with 15 years of experience.",
|
||
leadStrong: "I build web apps, interfaces and websites.",
|
||
primaryCta: GET_IN_TOUCH,
|
||
secondaryCta: "What I do",
|
||
trust: ["15 years in web", "Remote, EU core hours"],
|
||
builtAndRunning: "Built and running:",
|
||
},
|
||
hello: {
|
||
label: "Hello",
|
||
title: "I am Marc.",
|
||
lead: "I have been building for the web for 15 years: first in agencies, later as a senior developer, and now on my own.",
|
||
paragraphs: [
|
||
"My strength is the part people see and use: design and interface. I am also at home with what lies behind it, so I can build a complete application and not just its surface.",
|
||
"You work with me directly. Whether you run a product team or are commissioning something like this for the first time.",
|
||
],
|
||
portraitAlt: "Marc Mintel, freelance web developer",
|
||
careerLabel: "The path so far",
|
||
career: [
|
||
{ years: "2011", role: "Started in the web", place: "Apprenticeship" },
|
||
{ years: "2014 – 2020", role: "Agencies", place: "Frontend developer" },
|
||
{
|
||
years: "2020 – 2023",
|
||
role: "Product companies",
|
||
place: "Senior software developer",
|
||
},
|
||
{
|
||
years: "Today",
|
||
role: "Independent",
|
||
place: "Working directly with clients",
|
||
},
|
||
],
|
||
},
|
||
services: {
|
||
label: "Services",
|
||
title: { lead: "What do you need?", rest: "Four typical cases." },
|
||
tablistLabel: "What do you need?",
|
||
youGet: "What you get",
|
||
howItRuns: "How it runs",
|
||
estimate: {
|
||
label: "What it costs",
|
||
title: "How you get to a price",
|
||
steps: [
|
||
{
|
||
title: "A call, about 20 minutes",
|
||
text: "You tell me what you need.",
|
||
},
|
||
{
|
||
title: "A written estimate",
|
||
text: "You see the estimated hours and what they include.",
|
||
},
|
||
{
|
||
title: "You approve a budget",
|
||
text: "I bill the hours actually used and tell you early if it will not be enough.",
|
||
},
|
||
],
|
||
orientationLabel: "For orientation",
|
||
net: "All prices net.",
|
||
cta: "Ask for an estimate",
|
||
freelance: "Booking and rates for teams",
|
||
},
|
||
paths: [
|
||
{
|
||
id: "developer",
|
||
service: "Web app and frontend development",
|
||
need: "We need a developer for our product",
|
||
forWhom: "Startups, product teams, agencies, Web3 teams",
|
||
headline: "An experienced developer who joins your project.",
|
||
intro:
|
||
"You have a product and more work than your team can handle. I work on agreed days of the week on what is next on your list: new features, the interface, or the parts nobody gets around to.",
|
||
youGet: [
|
||
"Web apps, dashboards, customer portals and internal tools",
|
||
"Interfaces with attention to design and usability",
|
||
"Web3 frontends: wallet connection, live data, dashboards",
|
||
"Small tools and automation for recurring work",
|
||
],
|
||
steps: [
|
||
{
|
||
title: FIRST_CALL,
|
||
text: "You tell me what you are building and where you need help. If I am not the right person for it, I say so.",
|
||
},
|
||
{
|
||
title: "We agree on the days",
|
||
text: "How many days a week I work for you, and what should come first.",
|
||
},
|
||
{
|
||
title: "I work through the list",
|
||
text: "Finished parts go to you for review as they are done. I track my hours and you can see what they were spent on.",
|
||
},
|
||
{
|
||
title: "Two weeks notice",
|
||
text: "The agreement can be ended with two weeks notice to the end of a month.",
|
||
},
|
||
],
|
||
orientation: "100 EUR per hour, booked by the month",
|
||
orientationNote:
|
||
"You book fixed days of the week for one month at a time. I bill the hours I actually worked.",
|
||
},
|
||
{
|
||
id: "rescue",
|
||
service: "Code review and stabilisation of web apps",
|
||
need: "Our app needs to become reliable",
|
||
forWhom: "Teams whose app was built quickly and is now hard to change",
|
||
headline: "A week to look at your app and fix what is most urgent.",
|
||
intro:
|
||
"The app works, but bugs come back and small changes take longer than they should. I take a week to go through the code, fix what I can in that time and write down what I would do next.",
|
||
youGet: [
|
||
"An honest assessment: what is solid and what is fragile",
|
||
"Automated tests for the most important parts",
|
||
"The most urgent problems fixed, as far as a week allows",
|
||
"A written list of next steps, in plain language",
|
||
],
|
||
steps: [
|
||
{
|
||
title: FIRST_CALL,
|
||
text: "You show me the app and tell me where it causes trouble.",
|
||
},
|
||
{
|
||
title: "One week of work",
|
||
text: "I read the code, add tests where they matter most and fix the most urgent problems.",
|
||
},
|
||
{
|
||
title: "A written summary",
|
||
text: "What I found, what I changed and what I recommend. Written so that you can follow it without being a developer.",
|
||
},
|
||
{
|
||
title: "You decide how to continue",
|
||
text: "With me, with your own team, or not at all.",
|
||
},
|
||
],
|
||
orientation: "3,500 EUR for one fixed week",
|
||
orientationNote:
|
||
"The scope is one week of my time, 35 hours. A week does not fix everything: if I see in the first call that it will not be enough to be useful, I tell you.",
|
||
},
|
||
{
|
||
id: "automation",
|
||
service: "Process automation and system integration",
|
||
need: "We want to automate a process",
|
||
forWhom:
|
||
"Companies where people copy data between tools or repeat the same steps",
|
||
headline:
|
||
"Systems that pass work on to each other, so people do not have to.",
|
||
intro:
|
||
"Someone exports a list here, types it in there and sends an email about it. I connect the tools you already use, so that recurring steps run on their own and your people can do the work that needs them.",
|
||
youGet: [
|
||
"Connections between your systems through their interfaces (APIs)",
|
||
"Recurring workflows that run without manual steps",
|
||
"Where it helps, steps handled with AI: sorting, summarising, reading documents",
|
||
"A short description of how it works, so it can be maintained",
|
||
],
|
||
steps: [
|
||
{
|
||
title: FIRST_CALL,
|
||
text: "You describe the process and which tools are involved.",
|
||
},
|
||
{
|
||
title: "I look at how it is done today",
|
||
text: "Step by step, with the people who do it. Often a part can be automated, not everything.",
|
||
},
|
||
{
|
||
title: "I connect the systems",
|
||
text: "One step at a time. You test it with real cases before it replaces the manual work.",
|
||
},
|
||
{
|
||
title: "It runs on its own",
|
||
text: "You get a note on what it does and what to check when one of the tools changes.",
|
||
},
|
||
],
|
||
orientation: "100 EUR per hour, after an estimate",
|
||
orientationNote:
|
||
"How long it takes depends on the process, so there is no price before I have seen it. Fees for the tools themselves are paid by you.",
|
||
},
|
||
{
|
||
id: "website",
|
||
service: "Website design and development",
|
||
need: "I just need a website",
|
||
forWhom: "Companies and self-employed people who want it taken care of",
|
||
headline: "A website, built and looked after for you.",
|
||
intro:
|
||
"You do not want to learn a website builder or deal with hosting. You tell me what your business does and what the site should achieve. I design it, build it and put it online.",
|
||
youGet: [
|
||
"A design made for your business, not a template",
|
||
"Works on phone, tablet and desktop",
|
||
"Hosting taken care of, no server for you to manage",
|
||
"Changes by email: you write what you need, I make the change",
|
||
],
|
||
steps: [
|
||
{
|
||
title: FIRST_CALL,
|
||
text: "You tell me about your business and what the website is for.",
|
||
},
|
||
{
|
||
title: "A design to look at",
|
||
text: "You get a first version to click through. We adjust it until it fits.",
|
||
},
|
||
{
|
||
title: "I build it and put it online",
|
||
text: "With your texts and images and a contact form. You approve it before it goes live.",
|
||
},
|
||
{
|
||
title: "Changes afterwards",
|
||
text: "A new photo or a changed price: you send me an email.",
|
||
},
|
||
],
|
||
orientation: "From 3,800 EUR, one-off",
|
||
orientationNote:
|
||
"This is for a typical company website. Hosting and small changes afterwards cost a monthly fee that we agree on before we start.",
|
||
},
|
||
],
|
||
scenes: {
|
||
you: "You",
|
||
me: "Me",
|
||
talkLength: "about 20 minutes",
|
||
days: ["Mon", "Tue", "Wed", "Thu", "Fri"],
|
||
daysNote: "for example three days a week",
|
||
review: "finished parts go to you for review",
|
||
week: "week {n}",
|
||
monthEnd: "end of month",
|
||
notice: "two weeks notice",
|
||
repair: "fragile parts get tests and fixes",
|
||
summaryParts: ["found", "changed", "next"],
|
||
summaryNote: "written so you can follow it",
|
||
options: ["continue with me", "your own team", "stop here"],
|
||
online: "online",
|
||
exampleDomain: "yourcompany.com",
|
||
firstVersion: "a first version to click through",
|
||
approve: "you approve it before it goes live",
|
||
changeByEmail: "you send an email, I make the change",
|
||
tools: ["Shop", "Accounting", "Email", "CRM"],
|
||
byHand: "today: copied by hand",
|
||
wiring: "connected one step at a time",
|
||
running: "the steps run without anyone copying",
|
||
},
|
||
},
|
||
automation: {
|
||
label: "Process automation",
|
||
title: { lead: "Let the systems", rest: "do the copying." },
|
||
intro:
|
||
"In most companies, people move information from one tool to another: read it here, type it in there, send an email about it. Automation connects those tools so that the work passes from one to the next on its own. Three typical examples:",
|
||
examplesLabel: "Example workflows",
|
||
running: "running",
|
||
runComplete: "run complete",
|
||
log: "Log",
|
||
byHand: "By hand",
|
||
automated: "Automated",
|
||
kinds: {
|
||
trigger: "Trigger: something happens",
|
||
rule: "Rule: a fixed check",
|
||
ai: "AI step: reads or sorts",
|
||
action: "Action: a system does something",
|
||
human: "Person: decides the unclear cases",
|
||
},
|
||
workflows: {
|
||
order: {
|
||
name: "Order to invoice",
|
||
summary:
|
||
"A new order arrives in the shop. The invoice, the customer record and the confirmation follow without anyone typing.",
|
||
byHand:
|
||
"Someone opens the order, writes the invoice, updates the customer record and sends an email.",
|
||
automated:
|
||
"The order triggers everything. People only see the finished result.",
|
||
nodes: {
|
||
shop: { system: "Shop", label: "New order", log: "order received" },
|
||
stock: {
|
||
system: "Rule",
|
||
label: "In stock?",
|
||
log: "stock checked: available",
|
||
},
|
||
invoice: {
|
||
system: "Accounting",
|
||
label: "Create invoice",
|
||
log: "invoice created",
|
||
},
|
||
crm: {
|
||
system: "CRM",
|
||
label: "Update customer",
|
||
log: "customer record updated",
|
||
},
|
||
mail: {
|
||
system: "Email",
|
||
label: "Send confirmation",
|
||
log: "confirmation sent",
|
||
},
|
||
},
|
||
},
|
||
documents: {
|
||
name: "Incoming documents",
|
||
summary:
|
||
"Invoices arrive as PDF by email. An AI step reads them, a rule checks the result, and a person only sees the unclear ones.",
|
||
byHand:
|
||
"Someone opens every PDF, reads supplier, amount and date, and types them into the accounting system.",
|
||
automated:
|
||
"Clear cases are booked directly. Unclear ones go to a person with the document attached.",
|
||
nodes: {
|
||
inbox: {
|
||
system: "Inbox",
|
||
label: "Email with PDF",
|
||
log: "document received",
|
||
},
|
||
read: {
|
||
system: "AI step",
|
||
label: "Read the document",
|
||
log: "supplier, amount and date extracted",
|
||
},
|
||
check: { system: "Rule", label: "Plausible?", log: "values checked" },
|
||
book: {
|
||
system: "Accounting",
|
||
label: "Book it",
|
||
log: "booked automatically",
|
||
},
|
||
ask: {
|
||
system: "A person",
|
||
label: "Review and decide",
|
||
log: "unclear: sent to a person for review",
|
||
},
|
||
},
|
||
},
|
||
lead: {
|
||
name: "Enquiry to follow-up",
|
||
summary:
|
||
"Someone fills in the contact form. The contact is created, the right person is told, and a reminder makes sure nobody forgets.",
|
||
byHand:
|
||
"Someone copies the enquiry into the CRM, forwards it by email and hopes the follow-up is not forgotten.",
|
||
automated:
|
||
"The enquiry is filed, assigned and followed up on schedule.",
|
||
nodes: {
|
||
form: {
|
||
system: "Website",
|
||
label: "Contact form",
|
||
log: "enquiry received",
|
||
},
|
||
contact: {
|
||
system: "CRM",
|
||
label: "Create contact",
|
||
log: "contact created",
|
||
},
|
||
notify: {
|
||
system: "Team chat",
|
||
label: "Notify sales",
|
||
log: "sales notified",
|
||
},
|
||
wait: {
|
||
system: "Rule",
|
||
label: "No reply in 3 days?",
|
||
log: "follow-up scheduled",
|
||
},
|
||
remind: {
|
||
system: "Tasks",
|
||
label: "Create reminder",
|
||
log: "reminder created",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
notes: [
|
||
{
|
||
title: "Worth automating when",
|
||
items: [
|
||
"The same steps repeat every day or every week",
|
||
"Data is typed from one tool into another",
|
||
"Mistakes happen because the work is monotonous",
|
||
],
|
||
},
|
||
{
|
||
title: "What stays with people",
|
||
items: [
|
||
"Decisions and exceptions",
|
||
"Anything a customer should hear from a person",
|
||
"The final say when the automation is unsure",
|
||
],
|
||
},
|
||
{
|
||
title: "What I need from you",
|
||
items: [
|
||
"Access to the tools and their interfaces (APIs)",
|
||
"Someone who knows the process as it is done today",
|
||
"Real examples to test with",
|
||
],
|
||
},
|
||
],
|
||
},
|
||
presentations: {
|
||
label: "Web presentations",
|
||
title: { lead: "A presentation as a link.", rest: "Not as an attachment." },
|
||
intro:
|
||
"Most presentations are still slide files: one fixed format, sent around as an attachment. I build presentations as websites. They open in any browser, adapt to the screen they are shown on, and can contain things a slide cannot.",
|
||
compare: {
|
||
description:
|
||
"A slide keeps its fixed format on every screen and becomes too small to read on a phone. A web presentation rearranges its content for each screen.",
|
||
slides: "Slide file",
|
||
web: "Web presentation",
|
||
pickScreen: "Shown on",
|
||
screens: ["Projector", "Laptop", "Phone"],
|
||
slideNotes: [
|
||
"Made for this format",
|
||
"Still fits",
|
||
"Shrunk: too small to read",
|
||
],
|
||
webNotes: ["Uses the full width", "Two columns", "One column, readable"],
|
||
},
|
||
reasons: [
|
||
{
|
||
title: "Fits every screen",
|
||
text: "A slide has one fixed format. A web presentation rearranges itself for the projector, the laptop and the phone.",
|
||
},
|
||
{
|
||
title: "One link, one version",
|
||
text: "Nobody has to ask which file is the current one. You change it in one place, and everyone who opens the link sees that state.",
|
||
},
|
||
{
|
||
title: "Shows the real thing",
|
||
text: "Current figures, a working demo or a clickable prototype can sit inside the presentation, instead of a screenshot of them.",
|
||
},
|
||
{
|
||
title: "Still useful afterwards",
|
||
text: "After the meeting it is a page people can read on their own, pass on and find again.",
|
||
},
|
||
],
|
||
goodFor: {
|
||
title: "Typical uses",
|
||
items: [
|
||
"Company and product presentations",
|
||
"Pitches and offers sent as a link",
|
||
"Reports with figures that change",
|
||
"Screens at trade fairs and events",
|
||
],
|
||
},
|
||
honest: {
|
||
title: "When slides are enough",
|
||
text: "For a single internal meeting, a slide file is quicker and cheaper. A web presentation is worth it when it is shown often, sent to many people, or stands for your company.",
|
||
},
|
||
cta: "Ask about a presentation",
|
||
},
|
||
story: {
|
||
hello: "For a project on the web you need someone who builds it.",
|
||
services: "First we find out what you really need.",
|
||
automation:
|
||
"Sometimes it is not new software at all, but less work by hand.",
|
||
presentations:
|
||
"And sometimes it is a meeting in which you have to convince.",
|
||
working:
|
||
"Once it is clear what will be built, it always runs the same way.",
|
||
work: "In the end there is something that runs.",
|
||
faq: "Before that, a few questions usually remain.",
|
||
contact: "And then it starts with an email.",
|
||
},
|
||
freelance: {
|
||
metaTitle: "Freelance web developer for your team | Marc Mintel",
|
||
metaDescription:
|
||
"Which projects I am right for, what I work with (React, Next.js, TypeScript) and how I secure changes before they go live.",
|
||
label: "Freelance",
|
||
title: {
|
||
lead: "A developer for your team.",
|
||
rest: "The technical details.",
|
||
},
|
||
intro:
|
||
"This page is for people who develop themselves or lead a team: which projects I am right for, what I work with, and how I secure changes before they go live.",
|
||
pipelineLabel: "Safeguards",
|
||
booking: {
|
||
label: "Booking",
|
||
title: { lead: "Booked by the month.", rest: "Not by the day." },
|
||
text: "I work on your project on fixed days of the week, agreed for one month at a time. There is no package to buy: you pay the hours I actually worked.",
|
||
rate: { label: "Per hour", amount: "100 EUR", note: "net" },
|
||
example: {
|
||
label: "Example: 2 days a week",
|
||
amount: "about 6,400 EUR",
|
||
note: "64 hours in four weeks, net",
|
||
},
|
||
terms: [
|
||
"Fixed days of the week, agreed for one month at a time",
|
||
"One invoice per month, with the tracked hours",
|
||
"Either side can end it with two weeks notice to the end of a month",
|
||
"I do not book single days",
|
||
],
|
||
cta: "Ask about availability",
|
||
},
|
||
teaser: {
|
||
title: "You develop yourself or lead a team?",
|
||
text: "Which projects I am right for, what I work with and how I secure changes is on a page of its own.",
|
||
cta: "To the technical details",
|
||
},
|
||
},
|
||
technology: {
|
||
label: "Technology",
|
||
title: { lead: "Which projects", rest: "I am right for." },
|
||
fit: [
|
||
{
|
||
title: "A good fit",
|
||
items: [
|
||
"Web apps: dashboards, portals, internal tools",
|
||
"Interfaces where design and usability matter",
|
||
"Company websites, also in several languages",
|
||
"Web3 frontends: wallets, live data, dashboards",
|
||
"Automation: connecting systems and their APIs",
|
||
],
|
||
},
|
||
{
|
||
title: "Also possible",
|
||
items: [
|
||
"The backend an app needs: APIs, login, integrations",
|
||
"Command-line tools",
|
||
"Taking over and tidying up existing code",
|
||
],
|
||
},
|
||
{
|
||
title: "Not my field",
|
||
items: [
|
||
"Mobile apps for the app stores",
|
||
"Windows software",
|
||
"Running servers, specialised database work",
|
||
],
|
||
},
|
||
],
|
||
techLabel: "What I work with",
|
||
tech: [
|
||
{
|
||
area: "Interface",
|
||
items: ["TypeScript", "React", "Next.js", "Vue.js", "Tailwind CSS"],
|
||
},
|
||
{
|
||
area: "Behind it",
|
||
items: ["Node.js", "REST APIs", "PostgreSQL", "Headless CMS"],
|
||
},
|
||
{ area: "Web3 and systems", items: ["Solidity", "Rust"] },
|
||
{ area: "Delivery", items: ["Automated tests", "Docker", "CI/CD"] },
|
||
],
|
||
pipelineTitle: "What happens before a change goes live.",
|
||
pipelineIntro:
|
||
"Software is connected: a change in one place can break another. I secure what I build with automated tests, and every change has to pass them before it is released. This is what such a run looks like.",
|
||
pipeline: {
|
||
simulate: "Simulate a change in",
|
||
scenarios: {
|
||
orders: {
|
||
label: "Orders",
|
||
testName: "invoice total matches the discounted order",
|
||
expected: "119.00",
|
||
received: "125.00",
|
||
},
|
||
login: {
|
||
label: "Login",
|
||
testName: "confirmation goes to the account's email address",
|
||
expected: '"anna@example.com"',
|
||
received: "undefined",
|
||
},
|
||
invoices: {
|
||
label: "Invoices",
|
||
testName: "invoice email attaches the PDF",
|
||
expected: "1 attachment",
|
||
received: "0 attachments",
|
||
},
|
||
emails: {
|
||
label: "Emails",
|
||
testName: "order is confirmed once the email is queued",
|
||
expected: '"confirmed"',
|
||
received: '"pending"',
|
||
},
|
||
},
|
||
stages: ["Lint", "Types", "Tests", "Deploy"],
|
||
explanations: [
|
||
{
|
||
title: "A change comes in",
|
||
text: "Something is changed in {area}. Before it can go live, the whole project is checked automatically.",
|
||
},
|
||
{
|
||
title: "A test fails, the release is blocked",
|
||
text: "The change broke something in a different place. It is caught here, on my side, and nothing reaches your users.",
|
||
},
|
||
{
|
||
title: "Fixed, checked again, released",
|
||
text: "I repair what broke, the run passes, and only then does the change go live.",
|
||
},
|
||
],
|
||
runAgain: "Run again",
|
||
run: "run",
|
||
fixPushed: "fix pushed",
|
||
lint: "$ lint: checking the code style…",
|
||
types: "$ types: checking that the parts fit together…",
|
||
tests: "tests",
|
||
expected: "expected",
|
||
received: "received",
|
||
runningFile: "running {file}…",
|
||
summaryLabel: "Tests",
|
||
failed: "{n} failed",
|
||
passed: "{n} passed",
|
||
of: "of {total}",
|
||
pending: "release pending",
|
||
blocked: "release blocked",
|
||
released: "released",
|
||
footnote:
|
||
"An illustration with made-up file names and numbers, modelled on a real test run. Tests do not catch every mistake, but they do catch this kind.",
|
||
},
|
||
},
|
||
working: {
|
||
label: "Working with me",
|
||
title: { lead: "How I work.", rest: "Nothing unusual." },
|
||
principles: [
|
||
{
|
||
title: "One contact",
|
||
text: "You talk to me, and I am the one who does the work.",
|
||
},
|
||
{
|
||
title: "Hours you can check",
|
||
text: "I track my time. The monthly invoice shows what the hours were spent on.",
|
||
},
|
||
{
|
||
title: "Careful work",
|
||
text: "I test what I build before I hand it over, and I say so when something is not finished or I am not sure.",
|
||
},
|
||
{
|
||
title: "What I build is yours",
|
||
text: "Code and design belong to you. You can hand them to another developer.",
|
||
},
|
||
],
|
||
diagram: {
|
||
description:
|
||
"Often a request passes through several people before it reaches the developer. With me there is one direct line between you and the person who does the work.",
|
||
chain: ["You", "Sales", "Manager", "Designer", "Developer"],
|
||
you: "You",
|
||
me: "Me",
|
||
often: "often",
|
||
withMe: "with me",
|
||
oftenLong: "often: a request is passed along",
|
||
withMeLong: "with me: one direct line",
|
||
},
|
||
},
|
||
work: {
|
||
label: "My work",
|
||
title: { lead: "Two sites I built.", rest: "Both are live." },
|
||
items: {
|
||
"klz-cables.com": {
|
||
client: "Cable supplier",
|
||
text: "The company website of a supplier of energy cables, in German and English.",
|
||
did: [
|
||
"Product catalogue with categories and detail pages",
|
||
"Datasheets generated from the product data",
|
||
"Content the client can edit in a CMS",
|
||
],
|
||
tech: ["Next.js", "TypeScript", "Headless CMS", "Two languages"],
|
||
},
|
||
"e-tib.com": {
|
||
client: "Cable network construction",
|
||
text: "The company website of a group in cable network construction, in German and English.",
|
||
did: [
|
||
"Pages for services, references, careers and events",
|
||
"The same content in two languages",
|
||
"Works on phone, tablet and desktop",
|
||
],
|
||
tech: ["Next.js", "TypeScript", "Headless CMS", "Two languages"],
|
||
},
|
||
},
|
||
openLive: "Open the live site",
|
||
desktopAlt: "{name} on a desktop screen",
|
||
phoneAlt: "{name} on a phone",
|
||
note: "Besides client work I build my own software, among other things a system in Rust and Solidity that runs on seven blockchains.",
|
||
},
|
||
faq: {
|
||
label: "Questions",
|
||
title: { lead: "Good to know", rest: "before we talk." },
|
||
items: [
|
||
{
|
||
question: "I am not technical. Is that a problem?",
|
||
answer:
|
||
"No. I explain what I am doing in plain language, and you can ask at any time. You do not need to read code.",
|
||
},
|
||
{
|
||
question: "How long am I committed?",
|
||
answer:
|
||
"Project work is billed by effort. Either side can end it with two weeks notice to the end of a month.",
|
||
},
|
||
{
|
||
question: "Who owns what you build?",
|
||
answer:
|
||
"You do. Code and design belong to you, and you can hand them to another developer.",
|
||
},
|
||
{
|
||
question: "Can you work with our existing team and code?",
|
||
answer:
|
||
"Yes. I worked in agencies and product teams for years, so joining an existing project is familiar to me.",
|
||
},
|
||
{
|
||
question: "How do I reach you?",
|
||
answer:
|
||
"By email or video call. I work remotely and am available during European business hours.",
|
||
},
|
||
{
|
||
question: "What do you not do?",
|
||
answer:
|
||
"Mobile apps for the app stores, Windows software and running your servers. If your project needs those, I say so in the first call.",
|
||
},
|
||
],
|
||
},
|
||
contact: {
|
||
headline: [
|
||
{ text: "LET'S", tone: "bits" },
|
||
{ text: "TALK.", tone: "solid" },
|
||
],
|
||
lead: "Pick what you need and the email writes itself. Or write to me directly:",
|
||
newMessage: "New message",
|
||
draft: "draft",
|
||
need: "I need",
|
||
to: "to",
|
||
subject: "subject",
|
||
open: "Open in my mail app",
|
||
copy: "Copy address",
|
||
copied: "Copied",
|
||
// The square brackets are blanks for the visitor to fill in.
|
||
topics: [
|
||
{
|
||
id: "developer",
|
||
label: "A developer",
|
||
draft: {
|
||
subject: "A developer for our product",
|
||
body: `Hi Marc,\n\nwe are working on [what you are building] and need help with [what is next on your list].\n\nA first call would suit us around [date or week].\n\n${SIGN_OFF}`,
|
||
},
|
||
},
|
||
{
|
||
id: "rescue",
|
||
label: "A reliable app",
|
||
draft: {
|
||
subject: "Our app needs to become reliable",
|
||
body: `Hi Marc,\n\nour app [name or short description] works, but [what keeps going wrong].\n\nCould you take a look?\n\n${SIGN_OFF}`,
|
||
},
|
||
},
|
||
{
|
||
id: "automation",
|
||
label: "Automation",
|
||
draft: {
|
||
subject: "We want to automate a process",
|
||
body: `Hi Marc,\n\nwe would like to automate [the process]. Today it is done by hand in [the tools involved].\n\nCan we talk about it?\n\n${SIGN_OFF}`,
|
||
},
|
||
},
|
||
{
|
||
id: "website",
|
||
label: "A website",
|
||
draft: {
|
||
subject: "A website for my business",
|
||
body: `Hi Marc,\n\nI need a website for [your business]. It should [what it is for].\n\nWhen could we talk?\n\n${SIGN_OFF}`,
|
||
},
|
||
},
|
||
{
|
||
id: "other",
|
||
label: "Something else",
|
||
draft: {
|
||
subject: "A question",
|
||
body: `Hi Marc,\n\n[what you have in mind]\n\n${SIGN_OFF}`,
|
||
},
|
||
},
|
||
],
|
||
},
|
||
notFound: {
|
||
kicker: "Error 404",
|
||
title: "Page not found.",
|
||
text: "This address does not exist. The page may have been moved or removed.",
|
||
home: "Back to the homepage",
|
||
},
|
||
error: {
|
||
kicker: "Error 500",
|
||
title: "Something went wrong.",
|
||
text: "An unexpected problem occurred. It has been logged.",
|
||
retry: "Try again",
|
||
home: "Back to the homepage",
|
||
},
|
||
};
|