bootstrap-templates/atelier/project.html at main · ColorlibHQ/bootstrap-templates · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!doctype html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Northwind Console — Atelier | Bootstrap 6 portfolio template</title>
<meta name="description" content="Case study page built with Bootstrap 6 prose typography, breadcrumbs, progress meters and a sticky summary rail.">
<link rel="stylesheet" href="assets/vendor/bootstrap6/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

<a class="visually-hidden-focusable btn-solid theme-primary m-2" href="#main">Skip to main content</a>

<header class="site-header">
  <nav class="navbar lg:navbar-expand" aria-label="Main">
    <div class="container">
      <a class="navbar-brand d-flex align-items-center gap-2 fw-semibold" href="index.html">
        <span class="brand-mark" aria-hidden="true">A</span> Atelier
      </a>
      <dialog class="drawer drawer-end" tabindex="-1" id="navDrawer" aria-labelledby="navDrawerLabel">
        <div class="drawer-header">
          <h5 class="drawer-title" id="navDrawerLabel">Menu</h5>
          <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button>
        </div>
        <div class="drawer-body mb-2 lg:mb-0">
          <ul class="nav navbar-nav me-auto" >
            <li class="nav-item"><a class="nav-link" href="index.html#work">Work</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#about">About</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#experience">Experience</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#writing">Writing</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
          </ul>
        </div>
      </dialog>
      <div class="d-flex align-items-center gap-2 ms-auto">
        <button class="btn-icon" type="button" id="themeToggle" aria-label="Toggle color mode">
          <svg class="theme-icon-light" width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="3.25"/><path d="M8 1v1.5M8 13.5V15M15 8h-1.5M2.5 8H1m11-4-1 1M5 11l-1 1m0-8 1 1m6 6 1 1"/></svg>
          <svg class="theme-icon-dark" width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/></svg>
        </button>
        <a class="btn-solid theme-primary d-none md:d-inline-flex" href="index.html#contact">Hire me</a>
        <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navDrawer" aria-controls="navDrawer" aria-label="Open navigation">
          <span class="navbar-toggler-icon" aria-hidden="true"></span>
        </button>
      </div>
    </div>
  </nav>
</header>

<main id="main" class="section">
  <div class="container">

    <nav aria-label="breadcrumb" class="mb-5">
      <ol class="breadcrumb fs-sm">
        <li class="breadcrumb-item"><a class="breadcrumb-link" href="index.html">Home</a></li>
        <li class="breadcrumb-divider">/</li>
        <li class="breadcrumb-item"><a class="breadcrumb-link" href="index.html#work">Work</a></li>
        <li class="breadcrumb-divider">/</li>
        <li class="breadcrumb-item" aria-current="page"><a class="breadcrumb-link active" href="project.html">Northwind Console</a></li>
      </ol>
    </nav>

    <header class="mb-6" style="max-width:46rem">
      <div class="d-flex flex-wrap gap-2 mb-3">
        <span class="chip">Product design</span><span class="chip">Design system</span><span class="chip">2026</span>
      </div>
      <h1 class="fs-5xl fw-bold mb-4" style="letter-spacing:-.035em;text-wrap:balance">Rebuilding the Northwind console</h1>
      <p class="fs-lg fg-2 mb-0">A three-year-old admin tool had grown to 140 screens and nobody could ship in it any more. We rebuilt the foundation without stopping feature work.</p>
    </header>

    <div class="ph ph-16x9 case-figure fs-2xl mb-7">Console overview</div>

    <dl class="case-facts surface surface-pad mb-9">
      <div><dt>Role</dt><dd>Lead designer</dd></div>
      <div><dt>Team</dt><dd>2 designers, 6 engineers</dd></div>
      <div><dt>Duration</dt><dd>9 months</dd></div>
      <div><dt>Outcome</dt><dd>52% faster builds</dd></div>
    </dl>

    <div class="row g-6">
      <div class="lg:col-8">
        <div class="prose">
          <h2>The problem</h2>
          <p>Northwind's console had been extended by four different teams over three years. There were nine button styles, three date pickers and two competing grid systems. New features took roughly six weeks, and about a third of that was spent deciding what things should look like.</p>
          <p>The obvious answer — a rewrite — was off the table. The console was generating most of the company's revenue and could not go dark for a quarter.</p>

          <h2>Approach</h2>
          <p>We audited every screen and catalogued the components in use. The audit produced a number that made the case for us: 47 distinct components doing the work of 18.</p>
          <blockquote><p>Adoption had to be easier than not adopting. That constraint decided almost every subsequent call.</p></blockquote>
          <p>Rather than freeze feature work, we shipped the new foundation underneath it. Each team migrated their own surface as they touched it, against a component library that was documented before it was published.</p>

          <h3>What we changed</h3>
          <ul>
            <li>Collapsed 47 components to 18, with real usage docs for each</li>
            <li>One spacing scale and one type scale, both tokenised</li>
            <li>A single data table that replaced five bespoke implementations</li>
            <li>Keyboard and screen-reader passes built into the definition of done</li>
          </ul>

          <h2>Result</h2>
          <p>Nine months in, median feature build time dropped from six weeks to under three. The accessibility audit that had previously returned 180 issues came back with 11. Most usefully, three teams who had never contributed to shared code started opening pull requests against the library.</p>
        </div>
      </div>

      <aside class="lg:col-4">
        <div class="surface surface-pad" style="position:sticky;top:5.5rem">
          <h2 class="fs-lg fw-semibold mb-4">At a glance</h2>
          <div class="mb-4">
            <div class="skill-row"><span>Build time reduction</span><span class="fg-3">52%</span></div>
            <div class="progress" role="progressbar" aria-label="Build time reduction" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width:52%"></div></div>
          </div>
          <div class="mb-4">
            <div class="skill-row"><span>Components removed</span><span class="fg-3">62%</span></div>
            <div class="progress" role="progressbar" aria-label="Components removed" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width:62%"></div></div>
          </div>
          <div class="mb-5">
            <div class="skill-row"><span>A11y issues closed</span><span class="fg-3">94%</span></div>
            <div class="progress" role="progressbar" aria-label="Accessibility issues closed" aria-valuenow="94" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width:94%"></div></div>
          </div>
          <hr class="mb-4">
          <p class="fs-sm fg-2 mb-4">Working on something similar? I have capacity from October.</p>
          <a class="btn-solid theme-primary w-100" href="index.html#contact">Get in touch</a>
        </div>
      </aside>
    </div>

    <div class="row g-4 mt-7">
      <div class="md:col-6"><div class="ph ph-4x3 rounded-6">Before</div></div>
      <div class="md:col-6"><div class="ph ph-4x3 rounded-6">After</div></div>
    </div>

    <nav class="d-flex flex-wrap justify-content-between align-items-center gap-3 mt-9 pt-6 border-top" aria-label="Project navigation">
      <a class="btn-text" href="project.html">← Lumen Design System</a>
      <a class="btn-text" href="project.html">Kestrel Checkout →</a>
    </nav>

  </div>
</main>

<footer class="site-footer py-6">
  <div class="container d-flex flex-wrap justify-content-between align-items-center gap-3">
    <p class="fg-3 fs-xs mb-0">&copy; <span data-year>2026</span> Iris Vandermeer. A free template for uicookies.</p>
    <div class="d-flex gap-2">
      <a class="btn-icon" href="#" aria-label="On X"><svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M12.6 1h2.3l-5 5.7L15.8 15h-4.6l-3.6-4.7L3.4 15H1.1l5.4-6.1L1 1h4.7l3.3 4.3zm-.8 12.6h1.3L5.2 2.3H3.8z"/></svg></a>
      <a class="btn-icon" href="#" aria-label="On GitHub"><svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.4 7.4 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg></a>
      <a class="btn-icon" href="#" aria-label="On LinkedIn"><svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M0 1.15C0 .52.53 0 1.18 0h13.64C15.47 0 16 .52 16 1.15v13.7c0 .63-.53 1.15-1.18 1.15H1.18C.53 16 0 15.48 0 14.85zm4.94 12.22V6.17H2.54v7.2zm-1.2-8.18c.84 0 1.36-.55 1.36-1.24-.02-.71-.52-1.25-1.34-1.25s-1.36.54-1.36 1.25c0 .69.52 1.24 1.32 1.24zm4.31 8.18V9.36c0-.22.02-.43.08-.58.17-.43.56-.87 1.21-.87.86 0 1.2.65 1.2 1.6v3.86h2.4V9.23c0-2.22-1.18-3.25-2.76-3.25-1.28 0-1.85.7-2.17 1.2v.02h-.02l.02-.02V6.17h-2.4c.03.68 0 7.2 0 7.2z"/></svg></a>
    </div>
  </div>
</footer>

<script type="module" src="assets/js/main.js"></script>
</body>
</html>