From 1fac4cd2eea119a059627ca4148f460983832a0b Mon Sep 17 00:00:00 2001 From: Omair Saleh Date: Fri, 6 Mar 2026 00:24:45 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20/live=20complete=20UI=20redesign=20?= =?UTF-8?q?=E2=80=94=20hero,=20rings,=20project=20cards,=20timeline,=20inc?= =?UTF-8?q?idents?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html/css/live.css | 576 +++++++++++++++++++++++++++++++++++++++++++ html/css/style.css | 309 ----------------------- html/live/index.html | 560 +++++++++++++++++------------------------ 3 files changed, 808 insertions(+), 637 deletions(-) create mode 100644 html/css/live.css diff --git a/html/css/live.css b/html/css/live.css new file mode 100644 index 0000000..5050bf0 --- /dev/null +++ b/html/css/live.css @@ -0,0 +1,576 @@ +/* ═══════════════════════════════════════════════════════════ + /LIVE — Build Log + Rich visual design: glows, rings, timeline, depth + ═══════════════════════════════════════════════════════════ */ + +/* ── HERO ── */ +.lv-hero { + position: relative; + padding: 10rem 0 5rem; + overflow: hidden; + text-align: center; +} +.lv-hero-glow { + position: absolute; + top: -30%; + left: 50%; + transform: translateX(-50%); + width: 900px; + height: 600px; + background: radial-gradient(ellipse, rgba(0,255,159,0.07) 0%, transparent 65%); + pointer-events: none; +} +.lv-hero-glow2 { + position: absolute; + top: 10%; + right: -15%; + width: 500px; + height: 500px; + background: radial-gradient(circle, rgba(139,92,246,0.04) 0%, transparent 60%); + pointer-events: none; +} +.lv-hero-badge { + display: inline-flex; + align-items: center; + gap: 0.6rem; + font-family: var(--mono); + font-size: 0.72rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.14em; + color: var(--accent); + background: var(--accent-glow); + border: 1px solid var(--border-accent); + padding: 0.45rem 1.2rem; + border-radius: 99px; + margin-bottom: 2rem; +} +.lv-pulse { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--accent); + position: relative; + flex-shrink: 0; +} +.lv-pulse::after { + content: ''; + position: absolute; + inset: -4px; + border-radius: 50%; + background: var(--accent); + opacity: 0; + animation: lv-ping 3s ease-out infinite; +} +@keyframes lv-ping { + 0% { transform: scale(0.5); opacity: 0.6; } + 100% { transform: scale(2.5); opacity: 0; } +} +.lv-hero-title { + font-family: var(--sans); + font-size: clamp(2.8rem, 7vw, 5.5rem); + font-weight: 900; + letter-spacing: -0.04em; + line-height: 1.05; + color: var(--text); + margin-bottom: 1.5rem; +} +.lv-hero-title span { + background: linear-gradient(135deg, var(--accent), #33ffb3, #8b5cf6); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} +.lv-hero-sub { + font-size: clamp(0.95rem, 1.8vw, 1.15rem); + color: var(--text-secondary); + line-height: 1.75; + max-width: 520px; + margin: 0 auto; +} + +/* ── STATS STRIP ── */ +.lv-strip { + padding: 3rem 0; + background: var(--bg-subtle); + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); +} +.lv-strip-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.5rem; +} +.lv-strip-item { + display: flex; + align-items: center; + gap: 1rem; + padding: 1.25rem 1.5rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 14px; +} +.lv-strip-ring { + position: relative; + width: 56px; + height: 56px; + flex-shrink: 0; +} +.lv-strip-ring svg { + width: 100%; + height: 100%; + transform: rotate(-90deg); +} +.lv-ring-bg { + fill: none; + stroke: var(--border); + stroke-width: 4; +} +.lv-ring-fg { + fill: none; + stroke-width: 4; + stroke-linecap: round; + transition: stroke-dashoffset 1.2s cubic-bezier(0.16,1,0.3,1); +} +.lv-ring-green .lv-ring-fg { stroke: var(--accent); } +.lv-ring-amber .lv-ring-fg { stroke: var(--amber); } +.lv-ring-red .lv-ring-fg { stroke: var(--red); } +.lv-ring-num { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + font-family: var(--mono); + font-size: 0.85rem; + font-weight: 800; + color: var(--text); +} +.lv-strip-icon { + width: 56px; + height: 56px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + background: var(--accent-glow); + border-radius: 12px; + flex-shrink: 0; +} +.lv-strip-meta { + display: flex; + flex-direction: column; + gap: 0.15rem; +} +.lv-strip-val { + font-family: var(--mono); + font-size: 1.3rem; + font-weight: 800; + color: var(--text); + line-height: 1; +} +.lv-strip-label { + font-family: var(--mono); + font-size: 0.65rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--text-muted); +} + +/* ── PROJECT CARDS ── */ +.lv-projects { + padding: 4rem 0 2rem; +} +.lv-section-title { + font-family: var(--sans); + font-size: 1.5rem; + font-weight: 800; + letter-spacing: -0.03em; + color: var(--text); + margin-bottom: 1.5rem; +} +.lv-project-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.75rem; +} +.lv-pcard { + display: flex; + align-items: center; + gap: 0.85rem; + padding: 1rem 1.25rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + cursor: pointer; + transition: all 0.2s cubic-bezier(0.16,1,0.3,1); + text-align: left; + color: inherit; + font: inherit; +} +.lv-pcard:hover { + border-color: var(--border-light); + transform: translateY(-2px); + box-shadow: 0 12px 40px rgba(0,0,0,0.3); +} +.lv-pcard-active { + border-color: var(--text-muted) !important; + background: var(--bg-card-hover); +} +.lv-pcard-icon { + font-size: 1.5rem; + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + background: var(--bg-subtle); + border-radius: 10px; + flex-shrink: 0; +} +.lv-pcard-info { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 0.1rem; +} +.lv-pcard-name { + font-family: var(--mono); + font-size: 0.78rem; + font-weight: 700; + color: var(--text); +} +.lv-pcard-desc { + font-size: 0.72rem; + color: var(--text-muted); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.lv-pcard-count { + font-family: var(--mono); + font-size: 1.4rem; + font-weight: 800; + flex-shrink: 0; +} + +/* ── TIMELINE ── */ +.lv-timeline-section { + padding: 2rem 0 4rem; +} +.lv-timeline-head { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 1rem; + margin-bottom: 2rem; +} +.lv-filters { + display: flex; + gap: 0.3rem; + flex-wrap: wrap; +} +.lv-pill { + display: inline-flex; + align-items: center; + gap: 0.35rem; + font-family: var(--mono); + font-size: 0.68rem; + font-weight: 600; + padding: 0.35rem 0.75rem; + border-radius: 99px; + border: 1px solid var(--border-light); + background: transparent; + color: var(--text-dim); + cursor: pointer; + transition: all 0.15s ease; + white-space: nowrap; +} +.lv-pill:hover { color: var(--text-secondary); border-color: var(--text-muted); } +.lv-pill.active { color: var(--text); background: var(--bg-card-hover); border-color: var(--text-secondary); } +.lv-pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } + +/* Day header */ +.lv-tl-day { margin-bottom: 1rem; } +.lv-tl-date { + display: flex; + align-items: center; + gap: 0.5rem; + font-family: var(--mono); + font-size: 0.72rem; + font-weight: 700; + color: var(--text-muted); + padding: 0.4rem 0; + margin-bottom: 0.5rem; + position: sticky; + top: 64px; + background: var(--bg); + z-index: 5; +} +.lv-tl-date-count { + font-size: 0.6rem; + color: var(--text-dim); + background: var(--bg-card); + padding: 0.1rem 0.45rem; + border-radius: 99px; +} + +/* Card */ +.lv-tl-card { + display: flex; + gap: 0; + margin-bottom: 0.35rem; + border-radius: 10px; + overflow: hidden; + transition: transform 0.15s ease; +} +.lv-tl-card:hover { transform: translateX(4px); } +.lv-tl-line { + width: 4px; + flex-shrink: 0; + background: color-mix(in srgb, var(--line-color, #666) 40%, transparent); + transition: background 0.15s; +} +.lv-tl-card:hover .lv-tl-line { + background: var(--line-color, #666); +} +.lv-tl-content { + flex: 1; + padding: 0.85rem 1.2rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-left: none; + border-radius: 0 10px 10px 0; +} +.lv-tl-top { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.3rem; +} +.lv-tl-tag { + font-family: var(--mono); + font-size: 0.6rem; + font-weight: 600; + color: var(--c, var(--text-muted)); + text-transform: uppercase; + letter-spacing: 0.06em; +} +.lv-tl-building { + font-family: var(--mono); + font-size: 0.6rem; + font-weight: 700; + color: var(--amber); + animation: lv-blink 2s ease-in-out infinite; + margin-left: auto; +} +@keyframes lv-blink { 0%,100%{opacity:1;} 50%{opacity:0.4;} } +.lv-tl-title { + font-size: 0.88rem; + font-weight: 600; + color: var(--text); + line-height: 1.4; + margin: 0; +} +.lv-tl-summary { + font-size: 0.78rem; + color: var(--text-muted); + line-height: 1.6; + margin-top: 0.35rem; +} + +/* Featured card */ +.lv-tl-featured .lv-tl-content { + background: var(--bg-card-hover); + border-color: var(--border-light); +} +.lv-tl-featured .lv-tl-line { + background: var(--line-color, #666); +} + +/* Active / building */ +.lv-tl-active .lv-tl-content { + border-color: rgba(245,158,11,0.2); + background: rgba(245,158,11,0.03); +} +.lv-tl-active .lv-tl-line { + background: var(--amber); +} + +/* ── INCIDENTS ── */ +.lv-incidents { + padding: 4rem 0; + background: var(--bg-subtle); + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); +} +.lv-incidents-head { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: 2rem; + margin-bottom: 2rem; +} +.lv-incidents-sub { + font-size: 0.88rem; + color: var(--text-muted); + margin-top: 0.3rem; +} +.lv-incidents-stat { + text-align: right; + flex-shrink: 0; +} +.lv-incidents-num { + display: block; + font-family: var(--mono); + font-size: 2rem; + font-weight: 800; + color: var(--accent); + line-height: 1; +} +.lv-incidents-label { + font-family: var(--mono); + font-size: 0.62rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--text-muted); +} +.lv-inc-card { + display: flex; + align-items: flex-start; + gap: 0.85rem; + padding: 0.9rem 1.1rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 10px; + margin-bottom: 0.35rem; + transition: border-color 0.15s; +} +.lv-inc-card:hover { border-color: var(--border-light); } +.lv-inc-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--red); + margin-top: 0.35rem; + flex-shrink: 0; + box-shadow: 0 0 8px rgba(239,68,68,0.3); +} +.lv-inc-body { + display: flex; + flex-direction: column; + gap: 0.2rem; +} +.lv-inc-what { + font-size: 0.85rem; + color: var(--text-secondary); + line-height: 1.45; +} +.lv-inc-fix { + font-family: var(--mono); + font-size: 0.7rem; + color: var(--accent-dim); +} + +/* ── CTA ── */ +.lv-cta { + padding: 8rem 0; + position: relative; + overflow: hidden; +} +.lv-cta-inner { + text-align: center; + position: relative; + max-width: 700px; + margin: 0 auto; +} +.lv-cta-glow { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + width: 600px; + height: 400px; + background: radial-gradient(ellipse, rgba(0,255,159,0.06) 0%, transparent 60%); + pointer-events: none; +} +.lv-cta-kicker { + font-family: var(--mono); + font-size: 0.78rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--accent-dim); + margin-bottom: 1.25rem; +} +.lv-cta-title { + font-family: var(--sans); + font-size: clamp(1.6rem, 3.5vw, 2.4rem); + font-weight: 800; + letter-spacing: -0.03em; + line-height: 1.2; + color: var(--text); + margin-bottom: 2rem; +} + +/* ── LOADING ── */ +.lv-loading { + font-family: var(--mono); + font-size: 0.82rem; + color: var(--text-dim); + padding: 3rem; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} +.lv-dot-pulse { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--accent); + animation: lv-blink 1.5s ease-in-out infinite; +} +.lv-empty { + font-family: var(--mono); + font-size: 0.82rem; + color: var(--text-dim); + padding: 2rem; +} + +/* Active nav */ +.nav-links a.active { color: var(--text); background: var(--bg-card); } + +/* ═══ RESPONSIVE ═══ */ +@media (max-width: 900px) { + .lv-strip-grid { grid-template-columns: repeat(2, 1fr); } + .lv-project-grid { grid-template-columns: repeat(2, 1fr); } + .lv-hero { padding: 8rem 0 3rem; } + .lv-incidents-head { flex-direction: column; align-items: flex-start; } + .lv-incidents-stat { text-align: left; } +} +@media (max-width: 640px) { + .lv-hero { padding: 7rem 0 2.5rem; } + .lv-hero-title { font-size: clamp(2rem, 10vw, 3rem); } + .lv-strip-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; } + .lv-strip-item { padding: 0.85rem; gap: 0.6rem; } + .lv-strip-ring { width: 40px; height: 40px; } + .lv-ring-num { font-size: 0.7rem; } + .lv-strip-val { font-size: 1rem; } + .lv-project-grid { grid-template-columns: 1fr; } + .lv-pcard-desc { display: none; } + .lv-filters { gap: 0.2rem; } + .lv-pill { font-size: 0.6rem; padding: 0.3rem 0.55rem; } + .lv-tl-title { font-size: 0.82rem; } + .lv-tl-summary { font-size: 0.72rem; } + .lv-tl-date { top: 56px; } +} +@media (max-width: 380px) { + .lv-strip-grid { grid-template-columns: 1fr; } + .lv-hero-title span { -webkit-text-fill-color: var(--accent); } +} diff --git a/html/css/style.css b/html/css/style.css index a657f97..50d5c5e 100644 --- a/html/css/style.css +++ b/html/css/style.css @@ -841,317 +841,8 @@ nav { .nav-links a:not(.nav-cta) { display: none; } } -/* ═══════════════════════════════════════════ - /LIVE PAGE — Build Log - ═══════════════════════════════════════════ */ -.live-page { - padding-top: 96px; - padding-bottom: 6rem; - min-height: 100vh; -} - -/* Header */ -.lp-header { margin-bottom: 3rem; } -.lp-eyebrow { - display: flex; - align-items: center; - gap: 0.6rem; - font-family: var(--mono); - font-size: 0.72rem; - font-weight: 600; - color: var(--accent); - text-transform: uppercase; - letter-spacing: 0.14em; - margin-bottom: 1.25rem; -} -.lp-title { - font-family: var(--sans); - font-size: clamp(2.2rem, 5vw, 3.6rem); - font-weight: 900; - letter-spacing: -0.04em; - line-height: 1.08; - color: var(--text); - margin-bottom: 1rem; -} -.lp-sub { - font-size: 1.05rem; - color: var(--text-secondary); - line-height: 1.75; - max-width: 560px; -} - -/* Stats */ -.lp-stats { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1rem; - margin-bottom: 2.5rem; -} -.lp-stat { - text-align: center; - padding: 1.5rem 0.75rem; - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: 12px; -} -.lp-stat-num { - font-family: var(--mono); - font-size: 2.2rem; - font-weight: 800; - line-height: 1; - color: var(--text); -} -.lp-stat-green { color: var(--accent); } -.lp-stat-amber { color: var(--amber); } -.lp-stat-red { color: var(--red); } -.lp-stat-label { - font-family: var(--mono); - font-size: 0.65rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.1em; - color: var(--text-muted); - margin-top: 0.4rem; -} - -/* Filters */ -.lp-filters { - display: flex; - gap: 0.35rem; - margin-bottom: 2.5rem; - flex-wrap: wrap; -} -.lp-filter { - display: inline-flex; - align-items: center; - gap: 0.4rem; - font-family: var(--mono); - font-size: 0.72rem; - font-weight: 600; - padding: 0.4rem 0.85rem; - border-radius: 99px; - border: 1px solid var(--border-light); - background: transparent; - color: var(--text-muted); - cursor: pointer; - transition: all 0.15s ease; - white-space: nowrap; -} -.lp-filter:hover { - color: var(--text); - border-color: var(--text-muted); -} -.lp-filter.active { - background: var(--bg-card-hover); - color: var(--text); - border-color: var(--text-secondary); -} -.lp-filter-dot { - width: 7px; - height: 7px; - border-radius: 50%; - flex-shrink: 0; -} -.lp-filter-count { - color: var(--text-dim); - font-weight: 500; -} - -/* Day group */ -.lp-day { margin-bottom: 2.5rem; } -.lp-day-header { - display: flex; - align-items: center; - gap: 0.6rem; - margin-bottom: 0.75rem; - padding-bottom: 0.5rem; - border-bottom: 1px solid var(--border); -} -.lp-day-date { - font-family: var(--mono); - font-size: 0.75rem; - font-weight: 700; - color: var(--text-secondary); -} -.lp-day-count { - font-family: var(--mono); - font-size: 0.65rem; - color: var(--text-dim); - background: var(--bg-card); - padding: 0.1rem 0.5rem; - border-radius: 99px; -} - -/* Ship card */ -.lp-card { - padding: 1rem 1.25rem; - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: 10px; - margin-bottom: 0.4rem; - transition: border-color 0.15s ease; -} -.lp-card:hover { - border-color: var(--border-light); -} -.lp-card-active { - border-left: 3px solid var(--amber); -} -.lp-card-row { - display: flex; - align-items: center; - gap: 0.6rem; - flex-wrap: wrap; -} -.lp-card-tag { - font-family: var(--mono); - font-size: 0.62rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.06em; - color: var(--tag-color, var(--text-muted)); - background: color-mix(in srgb, var(--tag-color, #666) 12%, transparent); - padding: 0.2rem 0.55rem; - border-radius: 4px; - flex-shrink: 0; - white-space: nowrap; -} -.lp-card-title { - font-size: 0.88rem; - font-weight: 500; - color: var(--text); - flex: 1; - min-width: 0; - line-height: 1.45; -} -.lp-card-status { - font-family: var(--mono); - font-size: 0.62rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--amber); - background: rgba(245, 158, 11, 0.1); - padding: 0.2rem 0.55rem; - border-radius: 4px; - flex-shrink: 0; - animation: pulse-text 2s ease-in-out infinite; -} -@keyframes pulse-text { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } -} -.lp-card-summary { - font-size: 0.8rem; - color: var(--text-muted); - line-height: 1.65; - margin-top: 0.5rem; - padding-left: 0; -} - -/* Oops section */ -.lp-oops { - margin-top: 4rem; - padding-top: 3rem; - border-top: 1px solid var(--border); -} -.lp-oops-header { margin-bottom: 1.5rem; } -.lp-oops-title { - font-family: var(--mono); - font-size: 1.1rem; - font-weight: 700; - color: var(--text); - margin-bottom: 0.3rem; -} -.lp-oops-sub { - font-size: 0.88rem; - color: var(--text-muted); -} -.lp-oops-card { - padding: 0.85rem 1.1rem; - background: var(--bg-card); - border: 1px solid var(--border); - border-left: 3px solid var(--red); - border-radius: 8px; - margin-bottom: 0.4rem; -} -.lp-oops-what { - font-size: 0.85rem; - color: var(--text-secondary); - line-height: 1.5; -} -.lp-oops-fix { - font-family: var(--mono); - font-size: 0.72rem; - color: var(--text-dim); - margin-top: 0.35rem; -} -.lp-oops-empty { - font-family: var(--mono); - font-size: 0.82rem; - color: var(--text-dim); - padding: 2rem; -} - -/* Bottom CTA */ -.lp-bottom-cta { - text-align: center; - margin-top: 5rem; - padding-top: 3rem; - border-top: 1px solid var(--border); -} -.lp-bottom-line { - font-family: var(--mono); - font-size: 1.1rem; - font-weight: 700; - color: var(--text); - margin-bottom: 0.5rem; -} -.lp-bottom-sub { - font-size: 0.92rem; - color: var(--text-muted); - margin-bottom: 2rem; -} - -/* Loading */ -.lp-loading { - font-family: var(--mono); - font-size: 0.82rem; - color: var(--text-dim); - padding: 3rem 2rem; - text-align: center; - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; -} -.lp-loading-dot { - width: 6px; - height: 6px; - border-radius: 50%; - background: var(--accent); - animation: pulse-text 1.5s ease-in-out infinite; -} - /* Active nav link */ .nav-links a.active { color: var(--text); background: var(--bg-card); } - -/* ── Responsive: /live ── */ -@media (max-width: 900px) { - .lp-stats { grid-template-columns: repeat(2, 1fr); } -} -@media (max-width: 640px) { - .live-page { padding-top: 80px; } - .lp-stats { gap: 0.5rem; } - .lp-stat { padding: 1rem 0.5rem; } - .lp-stat-num { font-size: 1.6rem; } - .lp-filters { gap: 0.25rem; } - .lp-filter { font-size: 0.65rem; padding: 0.35rem 0.6rem; } - .lp-card-row { gap: 0.4rem; } - .lp-card-tag { font-size: 0.58rem; } - .lp-card-title { font-size: 0.82rem; } - .lp-oops-card { padding: 0.75rem 0.85rem; } -} diff --git a/html/live/index.html b/html/live/index.html index 7f83436..3ddd3da 100644 --- a/html/live/index.html +++ b/html/live/index.html @@ -4,16 +4,15 @@ QuikCue — Live Build Log - + - - + @@ -28,72 +27,125 @@ -
+ +
+
+
+
+ + Live from production +
+

+ 95 systems shipped. +

+

+ This isn't a portfolio. It's our production database — every deployment, + every fix, pulled in real time. Unedited. Unfakeable. +

+
+
- -
-
-
- Live from production + +
+
+
+
+
+ + — +
+
+ — + In production +
-

Build Log

-

- Every system we've deployed. Every bug we've caught. Pulled live from our - production database — unedited, unfakeable. -

-
- - -
-
-
—
-
Systems shipped
+
+
+ + — +
+
+ — + Building now +
-
-
—
-
Live in production
+
+
+ + — +
+
+ — + Incidents caught +
-
-
—
-
Building now
-
-
-
—
-
Incidents caught
+
+
⚡
+
+ 0 hrs + Downtime +
+
+ - -
- + +
+
+

Projects

+
+
+
+
- -
-
Loading from database…
+ +
+
+
+

Timeline

+
+ +
+
+
Connecting to database…
+
+
+
- -
-
-

Incident Log

-

Things that broke. How fast we fixed them. Full transparency.

+ +
+
+
+
+

Incident Log

+

Things that broke. How fast we fixed them.

-
-
Loading…
+
+ — + avg fix time
-
+
+
+
Loading…
+
+
+ - -
-

This is what shipping looks like.

-

Most agencies show you a portfolio. We show you the production database.

+ +
+
+
+
+

This is what shipping looks like.

+

Most agencies show a portfolio.
We show the production database.

Talk to us →
-
-
+