// portfolio.jsx — single-file C·Engineered portfolio. // EDIT THE `DATA` OBJECT BELOW TO PUT IN YOUR REAL CONTENT. // Everything else is layout — touch only if you want to change the structure. // ============================================================ // ░░ EDIT HERE ░░ // ============================================================ const DATA = { // header name: { ru: 'Андрей Игнатов', en: 'Andrei Ignatov' }, version: '', crumb: { ru: '', en: '' }, role: { ru: '', en: '' }, // short bio. wrap any word/phrase in [brackets] and define it in `badges` // below to render it as an inline pill. bio: { ru: 'Продуктовый дизайнер с 5-летним опытом в финтехе и корпоративных системах. Проектировал ключевые банковские процессы для NBU Milliy, SSO-архитектуру для Газпром Медиа и внутренние платформы. Я нахожусь на стыке дизайна и разработки — пишу на Swift, создаю прототипы в Xcode и Cursor, участвую во всех этапах: от исследований до пост-релизного анализа. Меня интересуют системы, а не просто экраны.', en: 'Product designer with 5 years of experience in fintech and enterprise systems. Designed core banking flows for NBU Milliy, SSO architecture for Gazprom Media, and internal platforms. I sit at the intersection of design and engineering — I write Swift, prototype in Xcode and Cursor, and stay involved at every stage, from research through post-release analysis. I care about systems, not just screens.' }, bioSocial: { ru: 'Пишу посты на [linkedin], ищу вдохновение на [x], а отвечаю в [telegram].', en: 'I write posts on [linkedin], find inspiration on [x], and reply on [telegram].' }, // each entry is either a plain string (becomes a text pill) or an // object { icon, label } (icon shown to the left of label). badges: { email: { label: 'andrej.filly@gmail.com', href: 'mailto:andrej.filly@gmail.com' }, site: { label: 'andyhoudini.ru', href: 'https://andyhoudini.ru' }, linkedin: { label: 'LinkedIn', href: 'https://www.linkedin.com/in/andy-ignatov-662a38252/?skipRedirect=true' }, x: { label: 'X', href: 'https://x.com/AndreiLancarra' }, telegram: { label: 'Telegram', href: 'https://t.me/katzlan' } }, // commit/activity heatmap activity: { label: { ru: 'Активность · 6 мес', en: 'Activity · 6 mo' }, metric: '342 commits', density: 0.45 }, // experience block expLabel: { ru: 'Опыт', en: 'Experience' }, experience: [ { label: { ru: '2025 — 2026', en: '2025 — 2026' }, value: 'Gazprom ID', description: { ru: 'Sr. Product Designer', en: 'Sr. Product Designer' }, href: 'https://id.gid.ru/', tile: { src: 'assets/logo-gazprom.svg' } }, { label: { ru: '2023 — 2025', en: '2023 — 2025' }, value: 'NBU Банк', description: { ru: 'Md→Sr. Product Designer', en: 'Md→Sr. Product Designer' }, href: 'https://nbu.uz/ru', tile: { src: 'assets/logo-nbu.svg' } }, { label: { ru: '2020 — 2023', en: '2020 — 2023' }, value: 'AIC', description: { ru: 'UX/UI Designer', en: 'UX/UI Designer' }, href: 'https://aic.ru/', tile: { bg: '#181816', fg: '#fff', char: 'A' } }], // Side projects / experiments without company logos vibesLabel: { ru: 'Навайбкодил', en: 'Vibe-coded' }, vibes: [ { label: { ru: '2026', en: '2026' }, value: 'SVG to WebP Exporter', description: { ru: 'Плагин для конвертации в Figma', en: 'Figma conversion plugin' }, href: 'https://www.figma.com/community/plugin/1638175144710570925/svg-to-webp-exporter' }, { label: { ru: '2025', en: '2025' }, value: 'Dominant Gradient Color', description: { ru: 'Генерация обложек по фото в стиле Spotify', en: 'Spotify-style covers from photos' }, href: 'https://codepen.io/katzlan/pen/YzaojLJ' }], // featured case shown above the project list caseLabel: { ru: 'Кейсы', en: 'Cases' }, featuredCases: [ { title: { ru: 'ГИД Хаб', en: 'GID Hub' }, sub: { ru: 'Маркетплейс цифровых решений экосистемы Газпрома — **спроектировали core-flow с нуля: рост поставщиков на [[90]]%, конверсия публикации +[[53]]%**, каталог и карточки продукта.', en: 'Gazprom ecosystem digital marketplace — **designed the core flow from scratch: [[90]]% supplier growth, +[[53]]% publish conversion**, catalog and product pages.' }, cover: 'assets/case-hub.png', }, { title: { ru: 'ГИД Ключ', en: 'GID Key' }, sub: { ru: 'Push-аутентификатор для единого входа — **заменили SMS: доля входов через ключ +[[68]]%, время авторизации −[[40]]%**, ключи для RUTUBE, Premier и внутренних сервисов.', en: 'Push authenticator for unified login — **replaced SMS: +[[68]]% sign-ins via key, −[[40]]% auth time**, keys for RUTUBE, Premier and internal services.' }, cover: 'assets/case-gid-key.png', }, { title: { ru: 'Газпром ID', en: 'Gazprom ID' }, sub: { ru: 'Единый аккаунт для сервисов экосистемы — **перезапустили вход и регистрацию: конверсия в аккаунт +[[24]]%, отказ на OTP −[[31]]%**, быстрый вход по биометрии для RUTUBE и Premier.', en: 'Single account across the ecosystem — **relaunched sign-in and signup: +[[24]]% account conversion, −[[31]]% OTP drop-off**, biometric quick login for RUTUBE and Premier.' }, cover: 'assets/case-gazprom-id.png', }, { title: { ru: 'Зенит', en: 'Zenit' }, sub: { ru: 'Мобильное приложение клуба — **редизайн раздела «Медиа»: вовлечённость +[[18]]%, глубина сессии +[[22]]%**, новая навигация и лента новостей.', en: 'Club mobile app — **Media section redesign: +[[18]]% engagement, +[[22]]% session depth**, new navigation and news feed.' }, cover: 'assets/case-zenit.png', }, { title: { ru: 'NBU Банк', en: 'NBU Bank' }, sub: { ru: 'Приложение Milliy и дизайн-система банка — **[[120]]+ компонентов, время прототипа −[[35]]%, завершение задач в продуктах −[[32]]%**, вклады, карты и платежи.', en: 'Milliy app and bank design system — **[[120]]+ components, −[[35]]% prototype time, −[[32]]% task time in product flows**, deposits, cards and payments.' }, cover: 'assets/case-nbu.png', }, { title: { ru: 'ВТБ Family', en: 'VTB Family' }, sub: { ru: 'Привилегии VTB Private Banking — **пересобрали витрину партнёров: CTR офферов +[[27]]%, время до бронирования −[[19]]%**, карта и персональная подборка.', en: 'VTB Private Banking privileges — **rebuilt partner storefront: +[[27]]% offer CTR, −[[19]]% time to booking**, map and personalized picks.' }, cover: 'assets/case-vtb-family.png', }, { title: { ru: 'ГИД Корпоративная платформа', en: 'GID Corporation Platform' }, sub: { ru: 'Корпоративный мессенджер для команд Газпрома — **новый compose-flow: отправка сообщений −[[28]]% шагов, время назначения встречи −[[34]]%**, чаты по подразделениям.', en: 'Corporate messenger for Gazprom teams — **new compose flow: −[[28]]% message steps, −[[34]]% meeting scheduling time**, chats by department.' }, cover: 'assets/case-gid-corp.png', }], // bottom dock dock: [ { id: 'proj', iconName: 'spark', label: { ru: 'Проекты', en: 'Projects' } }, { id: 'comp', iconName: 'grid', label: { ru: 'Компоненты', en: 'Components' } }, { id: 'notes', iconName: 'note', label: { ru: 'Заметки', en: 'Notes' } }], // footer line footer: { ru: 'Сделано мной', en: 'Made by me' }, footerIcon: 'heart', clock: { city: { ru: 'Москва', en: 'Moscow' }, tz: 'UTC+3', timeZone: 'Europe/Moscow' }, pageTitle: { ru: 'Андрей Игнатов — Senior product designer', en: 'Andrei Ignatov — Senior product designer' } }; // ============================================================ // ░░ END EDIT ░░ (everything below is layout) // ============================================================ // ---------- responsive layout (tablet + mobile) ---------- const DESKTOP_PAD = 24; const COMPACT_PAD = 12; const COMPACT_MAX = 1023; const MOBILE_MAX = 767; const useLayout = () => { const [width, setWidth] = React.useState(() => typeof window !== 'undefined' ? window.innerWidth : 1200 ); React.useEffect(() => { const onResize = () => setWidth(window.innerWidth); window.addEventListener('resize', onResize); onResize(); return () => window.removeEventListener('resize', onResize); }, []); const isCompact = width <= COMPACT_MAX; const isMobile = width <= MOBILE_MAX; const pad = isCompact ? COMPACT_PAD : DESKTOP_PAD; const ratio = 16 / 15; const scaleFont = (px) => (isCompact ? Math.max(16, Math.round(px * ratio)) : px); const scaleSize = (px) => (isCompact ? Math.round(px * ratio) : px); return { isCompact, isMobile, pad, contentWidth: `min(560px, calc(100vw - ${pad * 2}px))`, casesWidth: isCompact ? '100%' : `min(900px, calc(100vw - ${pad * 2}px))`, scale: scaleFont, scaleSize, }; }; // ---------- localStorage helpers ---------- const lsGet = (k, fb) => { try {const v = localStorage.getItem(k);return v == null ? fb : v;} catch {return fb;} }; const lsSet = (k, v) => {try {localStorage.setItem(k, v);} catch {}}; // ---------- icons ---------- const ICONS = { sun: (p) => , moon: (p) => , menu: (p) => , arrowUp: (p) => , spark: (p) => , grid: (p) => , note: (p) => , heart: (p) => }; const I = (name, props) => { const C = ICONS[name]; return C ? : null; }; // ---------- Tile (mini brand monogram or logo) ---------- const Tile = ({ tile, scaleSize }) => { const tileSize = scaleSize ? scaleSize(18) : 18; const tileFont = scaleSize ? scaleSize(10) : 10; if (tile.src) { return ( ); } return ( {tile.char} ); }; // ---------- Activity heatmap ---------- const Heatmap = ({ rows = 7, cols = 36, gap = 3, density = 0.45, seed = 7, dark }) => { const [tick, setTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setTick((t) => t + 1), 900); return () => clearInterval(id); }, []); const accent = dark ? '#3fb950' : '#1f883d'; const medium = dark ? 'rgba(63,185,80,0.4)' : 'rgba(31,136,61,0.4)'; const dim = dark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.05)'; const cells = React.useMemo(() => { const arr = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const n = Math.abs(Math.sin(r * 13.31 + c * 7.17 + seed * 1.7 + tick * 1.13) * 10000) % 1; let s = 0; if (n < density * 0.55) s = 2;else if (n < density) s = 1; arr.push(s); } } return arr; }, [tick, rows, cols, seed, density]); return (
{cells.map((s, i) =>
)}
); }; // ---------- Dock ---------- const Dock = ({ items, active, onChange, dark, lang, scale }) =>
{items.map((it) => { const isActive = active === it.id; return ( ); })}
; // ---------- IconBtn ---------- const IconBtn = ({ children, onClick, dark, title }) => ; // ---------- LangToggle ---------- const LangToggle = ({ lang, setLang, dark, scale }) =>
{['ru', 'en'].map((l) => )}
; // ---------- Inline-link text helper ---------- // Items in `[brackets]` become underlined links if the matching badge entry has // an `href`; otherwise the word is rendered as plain text. const RichLine = ({ text, badges, dark }) => { const parts = text.split(/(\[[^\]]+\])/g); return parts.map((p, i) => { if (p.startsWith('[') && p.endsWith(']')) { const key = p.slice(1, -1); const b = badges[key]; if (!b) return key; const label = typeof b === 'string' ? b : b.label; const href = typeof b === 'object' ? b.href : null; if (href) { return ( {label}); } return {label}; } return {p}; }); }; // ---------- Case description (highlighted metrics + censored digits) ---------- const CensorNum = ({ value, dark }) => (