Skip to content

fix: align German portfolio copy #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
romahawk merged 1 commit into from
Aug 3, 2026
Merged

fix: align German portfolio copy #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/assets/css/market-pages.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,13 @@

.home-typewriter-title {
display: inline;
overflow-wrap: break-word;
}

.home-typewriter-title__word {
display: inline-block;
max-width: 100%;
overflow-wrap: break-word;
white-space: nowrap;
}

Expand Down Expand Up @@ -73,6 +76,13 @@
}
}

@media (max-width: 760px) {
.home-typewriter-title__word {
overflow-wrap: anywhere;
white-space: normal;
}
}

.market-page__claim {
max-width: 720px;
margin: 0;
Expand Down
84 changes: 46 additions & 38 deletions src/components/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
Users,
Workflow,
} from "lucide-react";
import { useTranslation } from "../context/LangContext.jsx";
import { deText, localizeGermanValue } from "../locales/germanCopy.js";

const IMPLEMENTATION_AREAS = [
"OR and clinical workflow environments",
Expand Down Expand Up @@ -85,9 +87,12 @@ const TECH_FOUNDATION = [
];

function CheckList({ items }) {
const { lang } = useTranslation();
const localizedItems = localizeGermanValue(items, lang);

return (
<ul className="about__check-list">
{items.map((item) => (
{localizedItems.map((item) => (
<li key={item}>
<CheckCircle2 size={15} aria-hidden="true" />
<span>{item}</span>
Expand All @@ -98,15 +103,18 @@ function CheckList({ items }) {
}

export default function About() {
const { lang } = useTranslation();
const implementationAreas = IMPLEMENTATION_AREAS;
const experienceGives = EXPERIENCE_GIVES;
const focusCards = FOCUS_CARDS;
const focusCards = localizeGermanValue(FOCUS_CARDS, lang);
const roleCards = [
{ title: "For consulting clients", items: PROBLEM_SPACES },
{ title: "For product and employment roles", items: EMPLOYMENT_ROLES },
{ title: "Where regulated proof helps", items: PROOF_AREAS },
];
const milestones = MEDTECH_MILESTONES;
const localizedRoleCards = localizeGermanValue(roleCards, lang);
const milestones = localizeGermanValue(MEDTECH_MILESTONES, lang);
const techFoundation = localizeGermanValue(TECH_FOUNDATION, lang);

return (
<section id="about" className="section container about">
Expand All @@ -125,27 +133,27 @@ export default function About() {
</div>

<div className="about__section-card">
<div className="about__eyebrow">Background</div>
<div className="about__eyebrow">{deText("Background", lang)}</div>
<h3 className="about__heading">
<Layers size={18} className="icon about__icon" />
A practical operator foundation
{deText("A practical operator foundation", lang)}
</h3>
<p className="about__text">My work sits between operational reality and product structure: understanding where workflows break, then designing AI-assisted systems that make the work clearer, reviewable, and easier to execute.</p>
<p className="about__text">{deText("My work sits between operational reality and product structure: understanding where workflows break, then designing AI-assisted systems that make the work clearer, reviewable, and easier to execute.", lang)}</p>
</div>
</div>

<div className="about__row reveal">
<div className="about__section-card about__section-card--foundation">
<div className="about__eyebrow">Technical foundation</div>
<div className="about__eyebrow">{deText("Technical foundation", lang)}</div>
<h3 className="about__heading">
<Code2 size={18} className="icon about__icon" />
Technical Foundation & Continuous AI Learning
{deText("Technical Foundation & Continuous AI Learning", lang)}
</h3>
<p className="about__text">
Alongside hands-on product and implementation work, I'm completing a Master's in Software Development and continuously deepening my applied AI skills across automation, AI-assisted development, workflow systems, and practical deployment.
{deText("Alongside hands-on product and implementation work, I'm completing a Master's in Software Development and continuously deepening my applied AI skills across automation, AI-assisted development, workflow systems, and practical deployment.", lang)}
</p>
<div className="about__foundation-list" aria-label="Technical foundation and AI learning areas">
{TECH_FOUNDATION.map((item) => (
{techFoundation.map((item) => (
<span className="about__foundation-item" key={item}>{item}</span>
))}
</div>
Expand All @@ -154,20 +162,20 @@ export default function About() {

<div className="about__row reveal">
<div className="about__section-card about__section-card--implementation">
<div className="about__eyebrow">Regulated operations proof</div>
<div className="about__eyebrow">{deText("Regulated operations proof", lang)}</div>
<h3 className="about__heading">
<ClipboardCheck size={18} className="icon about__icon" />
Regulated operations experience that improves AI system design
{deText("Regulated operations experience that improves AI system design", lang)}
</h3>
<p className="about__text">This experience matters because AI workflow systems fail when they ignore real constraints: handovers, ownership, documentation, training, exceptions, and review points.</p>
<p className="about__text">{deText("This experience matters because AI workflow systems fail when they ignore real constraints: handovers, ownership, documentation, training, exceptions, and review points.", lang)}</p>

<div className="about__implementation-grid">
<div>
<h4>Strongest proof points</h4>
<h4>{deText("Strongest proof points", lang)}</h4>
<CheckList items={implementationAreas} />
</div>
<div>
<h4>How it improves AI workflow design</h4>
<h4>{deText("How it improves AI workflow design", lang)}</h4>
<CheckList items={experienceGives} />
</div>
</div>
Expand All @@ -176,24 +184,24 @@ export default function About() {

<div className="about__row reveal">
<div className="about__section-card about__section-card--cool">
<div className="about__eyebrow">Operating philosophy</div>
<div className="about__eyebrow">{deText("Operating philosophy", lang)}</div>
<h3 className="about__heading">
<Workflow size={18} className="icon about__icon" />
Operator-first, AI-assisted
{deText("Operator-first, AI-assisted", lang)}
</h3>
<p className="about__text about__text--large">
I do not start from what AI can do. I start from where the workflow breaks, where risk appears, and what system should exist.
{deText("I do not start from what AI can do. I start from where the workflow breaks, where risk appears, and what system should exist.", lang)}
</p>
<p className="about__text">AI is the acceleration layer: useful for discovery, prototyping, documentation, and delivery, but the workflow logic, ownership, and review model must stay clear.</p>
<p className="about__text">{deText("AI is the acceleration layer: useful for discovery, prototyping, documentation, and delivery, but the workflow logic, ownership, and review model must stay clear.", lang)}</p>
</div>
</div>

<div className="about__row reveal">
<div className="about__section-card">
<div className="about__eyebrow">Current focus</div>
<div className="about__eyebrow">{deText("Current focus", lang)}</div>
<h3 className="about__heading">
<BriefcaseBusiness size={18} className="icon about__icon" />
Where this experience translates today
{deText("Where this experience translates today", lang)}
</h3>
<div className="about__focus-grid">
{focusCards.map((card, index) => (
Expand All @@ -208,34 +216,34 @@ export default function About() {

<div className="about__row reveal">
<div className="about__section-card about__section-card--warm">
<div className="about__eyebrow">Role fit</div>
<div className="about__eyebrow">{deText("Role fit", lang)}</div>
<h3 className="about__heading">
<ShieldCheck size={18} className="icon about__icon" />
Where this background creates value
{deText("Where this background creates value", lang)}
</h3>
<p className="about__text">My strongest fit is AI workflow systems for operations-heavy teams, backed by product judgment, regulated-operations credibility, and implementation proof.</p>
<p className="about__text">{deText("My strongest fit is AI workflow systems for operations-heavy teams, backed by product judgment, regulated-operations credibility, and implementation proof.", lang)}</p>
<div className="about__role-grid">
<article className="about__role-card">
<h4>{roleCards[0].title}</h4>
<CheckList items={roleCards[0].items} />
<h4>{localizedRoleCards[0].title}</h4>
<CheckList items={localizedRoleCards[0].items} />
<a href="/contact" className="btn btn--primary">
Discuss a Workflow <ArrowRight size={15} className="icon ml-1" />
{deText("Discuss a Workflow", lang)} <ArrowRight size={15} className="icon ml-1" />
</a>
</article>

<article className="about__role-card">
<h4>{roleCards[1].title}</h4>
<CheckList items={roleCards[1].items} />
<h4>{localizedRoleCards[1].title}</h4>
<CheckList items={localizedRoleCards[1].items} />
<a href="/proof-of-work" className="btn btn--ghost">
View Proof of Work
{deText("View Proof of Work", lang)}
</a>
</article>

<article className="about__role-card">
<h4>{roleCards[2].title}</h4>
<CheckList items={roleCards[2].items} />
<h4>{localizedRoleCards[2].title}</h4>
<CheckList items={localizedRoleCards[2].items} />
<a href="/medtech" className="btn btn--ghost">
View Trust Proof
{deText("View Trust Proof", lang)}
</a>
</article>
</div>
Expand All @@ -244,7 +252,7 @@ export default function About() {

<div className="about__row reveal">
<details className="about__timeline">
<summary>Selected regulated-operations milestones</summary>
<summary>{deText("Selected regulated-operations milestones", lang)}</summary>
<ol>
{milestones.map((milestone) => (
<li key={milestone}>{milestone}</li>
Expand All @@ -256,15 +264,15 @@ export default function About() {
<div className="about__row reveal">
<div className="about__cta">
<div>
<div className="about__eyebrow">Next step</div>
<h3>Discuss one workflow worth fixing</h3>
<div className="about__eyebrow">{deText("Next step", lang)}</div>
<h3>{deText("Discuss one workflow worth fixing", lang)}</h3>
</div>
<div className="about__cta-actions">
<a href="/contact" className="btn btn--primary">
Discuss a Workflow <Users size={15} className="icon ml-1" />
{deText("Discuss a Workflow", lang)} <Users size={15} className="icon ml-1" />
</a>
<a href="/proof-of-work" className="btn btn--ghost">
View Proof of Work
{deText("View Proof of Work", lang)}
</a>
</div>
</div>
Expand Down
21 changes: 13 additions & 8 deletions src/components/AboutPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { ArrowRight } from "lucide-react";
import TypewriterTitle from "./common/TypewriterTitle.jsx";
import { ArtifactMap, FeaturePill, PageHero } from "./system/SystemVisuals.jsx";
import About from "./About.jsx";
import { useTranslation } from "../context/LangContext.jsx";
import { deText, localizeGermanValue } from "../locales/germanCopy.js";

const aboutArtifact = {
inputLabel: "Background",
Expand All @@ -26,26 +28,29 @@ const aboutPills = [
];

export default function AboutPage() {
const { lang } = useTranslation();
const title = "I turn messy workflows into practical AI-assisted systems";
const localizedAboutPills = localizeGermanValue(aboutPills, lang);
const localizedAboutArtifact = localizeGermanValue(aboutArtifact, lang);

return (
<>
<PageHero
eyebrow="About"
title={<TypewriterTitle text={title} />}
subtitle="I help operations-heavy teams turn fragmented processes into practical AI-assisted systems, combining product strategy, workflow analysis, AI automation, and full-stack delivery. My MedTech background adds real-world judgment from regulated, high-friction environments."
primaryCta={{ label: "Explore AI Workflows", href: "/ai-workflow", icon: <ArrowRight size={15} className="icon ml-1" aria-hidden="true" /> }}
secondaryCta={{ label: "View Proof of Work", href: "/proof-of-work" }}
eyebrow={deText("About", lang)}
title={<TypewriterTitle text={deText(title, lang)} />}
subtitle={deText("I help operations-heavy teams turn fragmented processes into practical AI-assisted systems, combining product strategy, workflow analysis, AI automation, and full-stack delivery. My MedTech background adds real-world judgment from regulated, high-friction environments.", lang)}
primaryCta={{ label: deText("Explore AI Workflows", lang), href: "/ai-workflow", icon: <ArrowRight size={15} className="icon ml-1" aria-hidden="true" /> }}
secondaryCta={{ label: deText("View Proof of Work", lang), href: "/proof-of-work" }}
scrollTargetId="about"
>
<div className="market-page__hero-extra">
<div className="market-page__pill-list">
{aboutPills.map((pill) => <FeaturePill accent={pill.accent} key={pill.label}>{pill.label}</FeaturePill>)}
{localizedAboutPills.map((pill) => <FeaturePill accent={pill.accent} key={pill.label}>{pill.label}</FeaturePill>)}
</div>
<ArtifactMap
accent="ai"
title="Background becomes workflow discovery, reviewed AI systems, and delivery proof"
{...aboutArtifact}
title={deText("Background becomes workflow discovery, reviewed AI systems, and delivery proof", lang)}
{...localizedAboutArtifact}
/>
</div>
</PageHero>
Expand Down
21 changes: 13 additions & 8 deletions src/components/ContactPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { CalendarCheck, BriefcaseBusiness } from "lucide-react";
import TypewriterTitle from "./common/TypewriterTitle.jsx";
import { ArtifactMap, FeaturePill, PageHero } from "./system/SystemVisuals.jsx";
import Contact from "./Contact.jsx";
import { useTranslation } from "../context/LangContext.jsx";
import { deText, localizeGermanValue } from "../locales/germanCopy.js";

const contactArtifact = {
inputLabel: "Intent",
Expand All @@ -26,27 +28,30 @@ const contactPills = [
];

export default function ContactPage() {
const { lang } = useTranslation();
const title = "Discuss One Workflow to Automate";
const localizedContactPills = localizeGermanValue(contactPills, lang);
const localizedContactArtifact = localizeGermanValue(contactArtifact, lang);

return (
<>
<PageHero
eyebrow="Contact"
title={<TypewriterTitle text={title} />}
subtitle="Use this page to start an AI Workflow Opportunity Audit, scope an automation pilot, or discuss a prototype that turns one fragmented process into a practical system."
primaryCta={{ label: "Book an AI Workflow Audit", href: "mailto:romazuryk@proton.me?subject=AI%20Workflow%20Audit%20Request", icon: <CalendarCheck size={15} className="icon ml-1" aria-hidden="true" /> }}
secondaryCta={{ label: "Choose Contact Path", href: "#contact", icon: <BriefcaseBusiness size={15} className="icon ml-1" aria-hidden="true" /> }}
eyebrow={deText("Contact", lang)}
title={<TypewriterTitle text={deText(title, lang)} />}
subtitle={deText("Use this page to start an AI Workflow Opportunity Audit, scope an automation pilot, or discuss a prototype that turns one fragmented process into a practical system.", lang)}
primaryCta={{ label: deText("Book an AI Workflow Audit", lang), href: "mailto:romazuryk@proton.me?subject=AI%20Workflow%20Audit%20Request", icon: <CalendarCheck size={15} className="icon ml-1" aria-hidden="true" /> }}
secondaryCta={{ label: deText("Choose Contact Path", lang), href: "#contact", icon: <BriefcaseBusiness size={15} className="icon ml-1" aria-hidden="true" /> }}
visualType="contact"
scrollTargetId="contact"
>
<div className="market-page__hero-extra contact-hero__extra">
<div className="market-page__pill-list">
{contactPills.map((pill) => <FeaturePill accent={pill.accent} key={pill.label}>{pill.label}</FeaturePill>)}
{localizedContactPills.map((pill) => <FeaturePill accent={pill.accent} key={pill.label}>{pill.label}</FeaturePill>)}
</div>
<ArtifactMap
accent="ai"
title="Contact intent becomes audit scope, pilot path, or proof route"
{...contactArtifact}
title={deText("Contact intent becomes audit scope, pilot path, or proof route", lang)}
{...localizedContactArtifact}
/>
</div>
</PageHero>
Expand Down
Loading
Loading