-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjob.html
More file actions
193 lines (178 loc) · 9.91 KB
/
Copy pathjob.html
File metadata and controls
193 lines (178 loc) · 9.91 KB
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!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>Senior Frontend Engineer at Northwind Trading — Shortlist</title>
<meta name="description" content="Job listing page from the Shortlist Bootstrap 6 job board template — full description, requirements, salary range and a sticky apply 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 fw-bold" href="index.html" style="letter-spacing:-.02em">Shortlist</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 ms-auto lg:gap-3">
<li class="nav-item"><a class="nav-link" href="index.html#jobs">Browse jobs</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#sectors">Sectors</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#companies">Companies</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#post">For employers</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#post">Post a job</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>
<div class="sub-head">
<div class="container">
<nav aria-label="Breadcrumb" class="mb-3">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a class="breadcrumb-link" href="index.html">Shortlist</a></li>
<li class="breadcrumb-item"><a class="breadcrumb-link" href="index.html#jobs">Engineering</a></li>
<li class="breadcrumb-item active" aria-current="page">Senior Frontend Engineer</li>
</ol>
</nav>
<div class="d-flex flex-wrap align-items-start gap-3">
<span class="job-logo" aria-hidden="true">NT</span>
<div>
<h1 class="fs-3xl fw-bold mb-1" style="letter-spacing:-.03em">Senior Frontend Engineer</h1>
<p class="fg-3 mb-0">Northwind Trading · Leeds · Hybrid · Permanent</p>
</div>
</div>
</div>
</div>
<main id="main">
<section class="section">
<div class="container">
<div class="row g-6">
<div class="lg:col-8">
<div class="prose">
<h2 class="fs-2xl fw-bold mb-3" style="letter-spacing:-.02em">The role</h2>
<p class="fg-2">
You would be the fourth engineer on a team that owns the customer-facing
side of a logistics platform used by about 4,000 people a day. Most of
the work is in TypeScript and React, with a design system we maintain
ourselves rather than pulling off the shelf.
</p>
<h2 class="fs-2xl fw-bold mb-3 mt-6">What you would actually do</h2>
<ul class="fg-2">
<li class="mb-2">Own features end to end, from the design conversation to the deploy</li>
<li class="mb-2">Maintain and extend the design system — roughly a day a week</li>
<li class="mb-2">Pair with the two mid-level engineers, deliberately and often</li>
<li>Take part in the on-call rota, one week in six, rarely called</li>
</ul>
<h2 class="fs-2xl fw-bold mb-3 mt-6">What we are looking for</h2>
<p class="fg-2">
Several years building production front-ends, comfort with TypeScript,
and an opinion about accessibility that you can defend. We do not
require a degree and we do not run a take-home test.
</p>
<h2 class="fs-2xl fw-bold mb-3 mt-6">Process</h2>
<p class="fg-2 mb-0">
A 30-minute call, then a two-hour paired session on our actual codebase
(paid at day rate), then a conversation with the team you would join.
Three stages, two weeks, and we tell you either way.
</p>
</div>
</div>
<div class="lg:col-4">
<div class="apply-rail">
<p class="job-pay fs-2xl mb-1">£65,000 — £78,000</p>
<p class="fg-3 fs-sm mb-4">Plus 8% pension and a £1,500 annual learning budget.</p>
<button class="btn-solid theme-primary w-100 mb-2" type="button" data-bs-toggle="dialog" data-bs-target="#applyDialog">Apply now</button>
<button class="btn-outline theme-secondary w-100 mb-4" type="button">Save for later</button>
<div class="spec-row"><span class="fg-3 fs-sm">Location</span><span class="fs-sm">Leeds</span></div>
<div class="spec-row"><span class="fg-3 fs-sm">Pattern</span><span class="fs-sm">Hybrid, 2 days in</span></div>
<div class="spec-row"><span class="fg-3 fs-sm">Contract</span><span class="fs-sm">Permanent</span></div>
<div class="spec-row"><span class="fg-3 fs-sm">Holiday</span><span class="fs-sm">28 days + bank</span></div>
<div class="spec-row"><span class="fg-3 fs-sm">Posted</span><span class="fs-sm">2 days ago</span></div>
<div class="spec-row"><span class="fg-3 fs-sm">Applications</span><span class="fs-sm">18 so far</span></div>
</div>
</div>
</div>
</div>
</section>
</main>
<dialog class="dialog" id="applyDialog" aria-labelledby="applyLabel">
<div class="dialog-header">
<h2 class="dialog-title fs-lg" id="applyLabel">Apply — Senior Frontend Engineer</h2>
<button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
</div>
<form class="dialog-body vstack gap-3" id="applyForm" data-demo-form data-bs-validate novalidate>
<div class="form-field">
<label class="form-label" for="apName">Your name</label>
<input type="text" class="form-control" id="apName" required>
<div class="invalid-feedback">Required.</div>
</div>
<div class="form-field">
<label class="form-label" for="apEmail">Email</label>
<input type="email" class="form-control" id="apEmail" required>
<div class="invalid-feedback">A valid email, please.</div>
</div>
<div class="form-field">
<label class="form-label" for="apLink">Portfolio or GitHub</label>
<input type="url" class="form-control" id="apLink" placeholder="https://">
</div>
<div class="form-field">
<label class="form-label" for="apNote">Anything you want us to know</label>
<textarea class="form-control" id="apNote" rows="4" placeholder="Optional. A cover letter is not required and we do not score them."></textarea>
</div>
</form>
<div class="dialog-footer">
<button type="button" class="btn-text" data-bs-dismiss="dialog">Cancel</button>
<button type="submit" form="applyForm" class="btn-solid theme-primary" data-done-text="Applied ✓">Send application</button>
</div>
</dialog>
<footer class="site-footer section pb-5 bg-2">
<div class="container">
<div class="row g-5">
<div class="md:col-4">
<p class="fw-bold fs-lg mb-3" style="letter-spacing:-.02em">Shortlist</p>
<p class="fg-3 fs-sm mb-0">Every job on this board shows a salary range. It is a condition of listing, not a preference.</p>
</div>
<div class="md:col-2">
<p class="fw-semibold fs-sm mb-3">Candidates</p>
<ul class="list-unstyled fs-sm fg-3 mb-0">
<li class="mb-2"><a href="index.html#jobs">Browse jobs</a></li>
<li class="mb-2"><a href="index.html#sectors">By sector</a></li>
<li class="mb-2"><a href="job.html">Example listing</a></li>
</ul>
</div>
<div class="md:col-2">
<p class="fw-semibold fs-sm mb-3">Employers</p>
<ul class="list-unstyled fs-sm fg-3 mb-0">
<li class="mb-2"><a href="index.html#post">Post a job</a></li>
<li class="mb-2"><a href="index.html#companies">Companies</a></li>
</ul>
</div>
<div class="md:col-4">
<p class="fw-semibold fs-sm mb-3">Job alerts</p>
<p class="fs-sm fg-3 mb-0">One email a week, only roles matching your filters. Unsubscribe in one click.</p>
</div>
</div>
<hr class="my-5">
<p class="fs-xs fg-3 mb-0">© <span data-year></span> Shortlist. A free Bootstrap 6 template — every role here is fictional.</p>
</div>
</footer>
<script type="module" src="assets/js/main.js"></script>
</body>
</html>