Add Work with me page

_tabs/work-with-me.md

@@ -0,0 +1,176 @@
+---
+title: Work with me
+icon: fas fa-briefcase
+order: 0
+permalink: /work-with-me/
+description: Web development, automation, integrations and technical repair by Danylo Yenikeiev.
+toc: true
+---
+
+<link rel="stylesheet" href="{{ '/assets/css/work-with-me.css' | relative_url }}">
+
+<div class="work-page">
+  <section class="work-intro" aria-labelledby="work-intro-title">
+    <p class="work-kicker">Web development, automation and technical repair</p>
+    <h2 id="work-intro-title">I build, automate and repair web software.</h2>
+    <p class="work-lead">
+      For small companies, product teams and founders who need a landing page, focused web application, business workflow or difficult technical fix.
+    </p>
+    <p class="work-availability">
+      Clear first milestone, fixed scope and async communication. Available for short projects and longer-term collaboration.
+    </p>
+
+    <div class="work-actions">
+      <a class="work-action-primary" href="mailto:ogyrec.404@proton.me?subject=Project%20inquiry">Send project details</a>
+      <a class="work-action-secondary" href="#selected-work">View selected work</a>
+    </div>
+
+    <p class="work-meta">Remote worldwide. Async-friendly. Europe-based.</p>
+    <p class="work-meta">Python, TypeScript, Rust, APIs, Docker and AI integrations.</p>
+  </section>
+
+  <section class="work-section" aria-labelledby="services-title">
+    <h2 id="services-title">Ways I can help</h2>
+    <p class="work-section-intro">
+      Start with the closest match. You do not need a finished specification. A rough brief, repository, screenshots or logs are enough for me to define a useful first milestone.
+    </p>
+
+    <article class="work-service">
+      <div>
+        <p class="work-label">Build</p>
+        <h3>Websites and small web applications</h3>
+        <p class="work-price">Typical projects: $500-$1,500</p>
+      </div>
+      <div class="work-service-copy">
+        <p>
+          Launch a clear, responsive product or service experience without the overhead of a large agency process.
+        </p>
+        <ul>
+          <li>product, service and SaaS landing pages</li>
+          <li>business websites and focused web applications</li>
+          <li>dashboards and admin panels</li>
+          <li>forms, databases and user workflows</li>
+          <li>implementation from an existing design</li>
+        </ul>
+      </div>
+    </article>
+
+    <article class="work-service">
+      <div>
+        <p class="work-label">Automate</p>
+        <h3>AI, APIs and business automation</h3>
+        <p class="work-price">Typical projects: $750-$2,000</p>
+      </div>
+      <div class="work-service-copy">
+        <p>
+          Replace repetitive manual work with a small, maintainable tool or integration that fits the systems you already use.
+        </p>
+        <ul>
+          <li>email and lead-processing workflows</li>
+          <li>API and webhook integrations</li>
+          <li>AI classification, extraction and summarization</li>
+          <li>document processing, search and RAG</li>
+          <li>internal tools and operational dashboards</li>
+          <li>Python and TypeScript backends</li>
+        </ul>
+      </div>
+    </article>
+
+    <article class="work-service">
+      <div>
+        <p class="work-label">Rescue</p>
+        <h3>Technical fixes and stabilization</h3>
+        <p class="work-price">Paid diagnostics from $150</p>
+      </div>
+      <div class="work-service-copy">
+        <p>
+          Find the real failure, fix the smallest reliable layer and leave the application easier to understand and operate.
+        </p>
+        <ul>
+          <li>unfinished or AI-built applications</li>
+          <li>broken APIs, authentication and deployments</li>
+          <li>Shopify, GA4 and Google Ads tracking</li>
+          <li>Docker, VPS and networking issues</li>
+          <li>lifecycle, WebSocket and backend failures</li>
+          <li>tests, logging and production hardening</li>
+        </ul>
+      </div>
+    </article>
+
+    <p class="work-price-note">
+      All prices are in USD. These ranges are starting points and a practical filter, not a fixed price list. Scope, price and acceptance criteria are agreed before work begins.
+    </p>
+  </section>
+
+  <section class="work-section" id="selected-work" aria-labelledby="selected-work-title">
+    <h2 id="selected-work-title">Selected work</h2>
+    <p class="work-section-intro">
+      My commercial offer is broad, but the same engineering approach applies throughout: reproduce the problem, isolate the real cause, implement the smallest reliable solution and verify the result.
+    </p>
+
+    <article class="work-proof">
+      <p class="work-proof-type">Private client work</p>
+      <h3>Shopify analytics repair</h3>
+      <p>
+        Diagnosed duplicate ecommerce events across Shopify, the Google and YouTube app, GA4, Google Ads, GTM and consent tooling. Isolated the real measurement path, removed competing tag routes and documented the reconnect and validation plan.
+      </p>
+      <p class="work-proof-skills">Shopify, GA4, Google Ads, GTM and network debugging</p>
+    </article>
+
+    <article class="work-proof">
+      <p class="work-proof-type">Third-party codebase</p>
+      <h3>Godot plugin stabilization</h3>
+      <p>
+        Updated and hardened an existing plugin by fixing editor lifecycle cleanup, subprocess and WebSocket failures, malformed message handling, oversized buffering, reconnect behavior and regression coverage.
+      </p>
+      <p class="work-proof-skills">Godot, GDScript, WebSockets, testing and debugging</p>
+    </article>
+
+    <article class="work-proof">
+      <p class="work-proof-type">Merged open source contribution</p>
+      <h3>Quinn networking compatibility fix</h3>
+      <p>
+        Contributed a Rust networking fix that keeps QUIC endpoint creation working under Wine and Proton when optional Windows ECN functionality is unavailable.
+      </p>
+      <p><a href="https://github.com/quinn-rs/quinn/pull/2532">View the merged pull request</a></p>
+    </article>
+
+    <article class="work-proof">
+      <p class="work-proof-type">Independent engineering</p>
+      <h3>Kova engine</h3>
+      <p>
+        Building a modular game engine in Rust with a custom runtime and ECS architecture, rendering, assets, scenes, input, physics, plugins, task systems, tooling, tests and backend-neutral public APIs.
+      </p>
+      <p><a href="{{ '/projects/' | relative_url }}">View the project overview</a></p>
+    </article>
+  </section>
+
+  <section class="work-section" aria-labelledby="process-title">
+    <h2 id="process-title">How it works</h2>
+    <ol class="work-steps">
+      <li>You send the current problem, repository or desired result.</li>
+      <li>I define the smallest useful paid milestone.</li>
+      <li>You receive a fixed scope, price and acceptance criteria.</li>
+      <li>I implement, test and document the result.</li>
+    </ol>
+    <p class="work-fit-note">No free speculative work. No long contract required.</p>
+  </section>
+
+  <section class="work-cta" aria-labelledby="work-cta-title">
+    <h2 id="work-cta-title">Have a project or a technical problem?</h2>
+    <p>Send:</p>
+    <ul>
+      <li>what you need</li>
+      <li>current stack or platform</li>
+      <li>desired result</li>
+      <li>preferred deadline</li>
+    </ul>
+    <p>
+      I will reply with a proposed first milestone, including scope, price and acceptance criteria.
+    </p>
+    <div class="work-actions">
+      <a class="work-action-primary" href="mailto:ogyrec.404@proton.me?subject=Project%20inquiry">Send project details</a>
+      <a class="work-action-secondary" href="mailto:ogyrec.404@proton.me?subject=Project%20inquiry">ogyrec.404@proton.me</a>
+    </div>
+  </section>
+</div>

assets/css/work-with-me.css

@@ -0,0 +1,211 @@
+.work-page {
+  max-width: 100%;
+}
+
+.work-page * {
+  box-sizing: border-box;
+}
+
+.work-intro {
+  padding: 0.25rem 0 2.4rem;
+  border-bottom: 1px solid var(--main-border-color);
+}
+
+.work-kicker,
+.work-label,
+.work-proof-type {
+  margin: 0 0 0.55rem;
+  color: var(--text-muted-color);
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.work-intro h2 {
+  max-width: 17ch;
+  margin: 0;
+  font-size: clamp(2rem, 5vw, 3.35rem);
+  line-height: 1.08;
+  letter-spacing: -0.025em;
+}
+
+.work-lead {
+  max-width: 44rem;
+  margin: 1.25rem 0 0;
+  font-size: 1.12rem;
+  line-height: 1.65;
+}
+
+.work-availability {
+  max-width: 44rem;
+  margin: 0.75rem 0 0;
+  color: var(--text-muted-color);
+}
+
+.work-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+  margin: 1.5rem 0;
+}
+
+.work-action-primary {
+  display: inline-flex;
+  align-items: center;
+  min-height: 2.65rem;
+  padding: 0.55rem 0.85rem;
+  border: 1px solid var(--main-border-color);
+  border-radius: 0.4rem;
+  color: var(--text-color) !important;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.work-action-primary:hover {
+  border-color: currentColor;
+  text-decoration: none;
+}
+
+.work-action-secondary {
+  font-weight: 600;
+}
+
+.work-meta {
+  margin: 0.25rem 0 0;
+  color: var(--text-muted-color);
+  font-size: 0.92rem;
+}
+
+.work-section {
+  padding-top: 3.2rem;
+}
+
+.work-section > h2 {
+  margin-top: 0;
+}
+
+.work-section-intro {
+  max-width: 46rem;
+  margin-bottom: 1.4rem;
+}
+
+.work-service {
+  display: grid;
+  grid-template-columns: minmax(11rem, 0.7fr) minmax(0, 1.5fr);
+  gap: 2rem;
+  padding: 1.65rem 0;
+  border-top: 1px solid var(--main-border-color);
+}
+
+.work-service:last-of-type {
+  border-bottom: 1px solid var(--main-border-color);
+}
+
+.work-service h3,
+.work-proof h3 {
+  margin: 0;
+}
+
+.work-price {
+  margin: 0.75rem 0 0;
+  font-weight: 600;
+}
+
+.work-service-copy > p:first-child {
+  margin-top: 0;
+}
+
+.work-service-copy ul {
+  margin-bottom: 0;
+}
+
+.work-price-note {
+  max-width: 46rem;
+  margin: 1rem 0 0;
+  color: var(--text-muted-color);
+  font-size: 0.9rem;
+}
+
+.work-proof {
+  padding: 1.45rem 0;
+  border-top: 1px solid var(--main-border-color);
+}
+
+.work-proof:last-of-type {
+  border-bottom: 1px solid var(--main-border-color);
+}
+
+.work-proof p {
+  max-width: 48rem;
+}
+
+.work-proof-skills {
+  color: var(--text-muted-color);
+  font-size: 0.9rem;
+}
+
+.work-steps {
+  margin: 1rem 0 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: work-step;
+}
+
+.work-steps li {
+  display: grid;
+  grid-template-columns: 2rem minmax(0, 1fr);
+  gap: 0.75rem;
+  padding: 0.9rem 0;
+  border-top: 1px solid var(--main-border-color);
+  counter-increment: work-step;
+}
+
+.work-steps li:last-child {
+  border-bottom: 1px solid var(--main-border-color);
+}
+
+.work-steps li::before {
+  content: counter(work-step, decimal-leading-zero);
+  color: var(--text-muted-color);
+  font-size: 0.82rem;
+  font-weight: 600;
+}
+
+.work-fit-note {
+  margin-top: 1.15rem;
+  font-weight: 600;
+}
+
+.work-cta {
+  margin-top: 3.5rem;
+  padding: 2rem 0;
+  border-top: 1px solid var(--main-border-color);
+  border-bottom: 1px solid var(--main-border-color);
+}
+
+.work-cta h2 {
+  margin-top: 0;
+}
+
+.work-cta p,
+.work-cta ul {
+  max-width: 46rem;
+}
+
+@media (max-width: 760px) {
+  .work-service {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+  }
+
+  .work-action-primary {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .work-actions {
+    align-items: flex-start;
+  }
+}