Make the resume bilingual and part of the shared site chrome

Adds a Russian version (data/resume.ru.json, default language) with an RU/EN
switch stored under the key shared with the front page and the portfolio.
The top bar becomes the site-wide one (brand, Resume, Portfolio, Gitea,
Contact, language, theme) with a second row of anchors for this page's
sections, and the fonts move to Unbounded and Onest so the three pages share
one type system. Portfolio links now point at /portfolio/.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XtcZtnG4GQA1d6mW5PNrS9

components/topbar.module.css

@@ -19,26 +19,30 @@
   margin: 0 auto;
   display: flex;
   align-items: center;
-  gap: 32px;
+  gap: 14px;
 }
 
-.mark {
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   margin-right: auto;
-  font: 700 20px/1 var(--font-head);
-  letter-spacing: -0.03em;
   text-decoration: none;
+  font: 700 18px/1 var(--font-head);
+  letter-spacing: -0.03em;
 }
 
 .nav {
   display: flex;
   gap: 28px;
+  margin-right: 10px;
   font-size: 15px;
   font-weight: 500;
 }
 
 .nav a {
-  text-decoration: none;
   padding: 6px 0;
+  text-decoration: none;
   background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat;
   transition: background-size 0.25s;
 }
@@ -47,26 +51,32 @@
   background-size: 100% 1.5px;
 }
 
-.cta {
-  margin-left: -12px;
-  padding: 10px 18px;
+.nav a[aria-current='page'] {
+  font-weight: 700;
+  background-size: 100% 2px;
+}
+
+.seg {
+  display: flex;
+  padding: 3px;
   border-radius: var(--radius-control);
+  box-shadow: inset 0 0 0 1px var(--line);
+}
+
+.seg button {
+  padding: 6px 10px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--muted);
+  font: 600 13px/1.2 var(--font-body);
+  letter-spacing: 0.02em;
+  cursor: pointer;
+}
+
+.seg button[aria-pressed='true'] {
   background: var(--ink);
   color: var(--paper);
-  font-size: 15px;
-  font-weight: 600;
-  text-decoration: none;
-  transition: background-color 0.2s;
-}
-
-.cta:hover {
-  background: var(--z);
-}
-
-@media (max-width: 860px) {
-  .nav {
-    display: none;
-  }
 }
 
 .toggle {
@@ -97,3 +107,34 @@
   stroke-linecap: round;
   stroke-linejoin: round;
 }
+
+/* Second row: anchors for the sections of this page. */
+.subwrap {
+  width: var(--shell);
+  margin: 0 auto;
+}
+
+.sub {
+  display: flex;
+  gap: 22px;
+  height: 34px;
+  align-items: flex-start;
+  font-size: 14px;
+  color: var(--muted);
+}
+
+.sub a {
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.sub a:hover {
+  color: var(--ink);
+}
+
+@media (max-width: 860px) {
+  .nav,
+  .subwrap {
+    display: none;
+  }
+}