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">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dax Sylvi Gravell</title>
<style>
:root {
--ink: #171513;
--muted: #8a8379;
--rule: #e6e1d8;
--paper: #fdfcfa;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--paper); color: var(--ink);
font: 15px/1.7 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.page { max-width: 880px; margin: 0 auto; padding: 88px 40px 96px; }
.grid { display: grid; grid-template-columns: 42fr 58fr; gap: 72px; }
.side { text-align: right; }
.side h1 { font-size: clamp(34px, 6vw, 54px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 16px; }
.side .role { margin: 0 0 56px; font-size: 17px; color: var(--muted); }
.side h2 {
font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
margin: 0 0 10px;
}
.side .blk { margin: 0 0 34px; }
.side a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.side a:hover { text-decoration-color: var(--ink); }
.profile { margin: 4px 0 56px; max-width: 62ch; }
.job { padding: 26px 0; border-top: 1px solid var(--rule); }
.job:first-of-type { padding-top: 0; border-top: 0; }
.job h3 { font-size: 16.5px; font-weight: 600; margin: 0 0 4px; }
.job .meta { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
.job ul { margin: 0; padding-left: 18px; }
.job li { margin-bottom: 6px; }
footer { margin-top: 72px; font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: right; }
.print-btn {
position: fixed; right: 24px; bottom: 24px; z-index: 10;
border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .14em; text-transform: uppercase;
padding: 13px 18px; cursor: pointer;
}
.print-btn:hover { background: var(--muted); border-color: var(--muted); }
@media (max-width: 720px) {
.grid { grid-template-columns: 1fr; gap: 48px; }
.side { text-align: left; }
.page { padding: 48px 22px 72px; }
}
@media print {
.print-btn { display: none; }
body { background: #fff; }
.page { max-width: 100%; padding: 8mm; }
.grid { gap: 36px; }
.side h1 { font-size: 34px; margin-bottom: 8px; }
.side .role { margin-bottom: 24px; }
.side .blk { margin-bottom: 16px; }
.profile { margin: 0 0 24px; font-size: 13.5px; }
.job { padding: 12px 0; break-inside: avoid; }
.job ul { margin-bottom: 0; }
.job li { margin-bottom: 3px; }
footer { margin-top: 28px; }
}
</style>
</head>
<body>
<button class="print-btn" onclick="window.print()">Save as PDF</button>
<div class="page">
<div class="grid">
<aside class="side">
<h1>Dax Sylvi Gravell</h1>
<p class="role">Coder.</p>
<div class="blk">
<h2>Email</h2>
<a href="mailto:me@dax.ist">me@dax.ist</a>
</div>
<div class="blk">
<h2>Web</h2>
<a href="https://cv.dax.ist">cv.dax.ist</a>
</div>
<div class="blk">
<h2>Based</h2>
Near London, UK.<br>
Open to part-time remote.
</div>
<div class="blk">
<h2>Stack</h2>
Angular, React, Node.js, Grails, Selenium, Cucumber.
</div>
<div class="blk">
<h2>Education</h2>
Open University — studied alongside work.<br>
Oxford Brookes — attended, later left.
</div>
</aside>
<main>
<p class="profile">Five years at Caveris, junior to lead. Before that, retail at Waitrose alongside an Open University degree. Lately: fundraising for people surviving the genocide in Gaza, and building a family permaculture smallholding. Based near London — open to part-time remote.</p>
<div class="job">
<h3>Caveris</h3>
<p class="meta">Started as a junior, left as a lead · 5 years</p>
<ul>
<li>Web work across Angular, React, Node, Grails, Selenium and Cucumber.</li>
<li>Took on code reviews and mentoring as the team grew.</li>
</ul>
</div>
<div class="job">
<h3>Humanitarian fundraising</h3>
<p class="meta">Volunteer · the past year</p>
<ul>
<li>Stepped away from work to fundraise for Gaza.</li>
<li>Online campaigns and community organising.</li>
</ul>
</div>
<div class="job">
<h3>Family permaculture smallholding</h3>
<p class="meta">Family business · alongside fundraising</p>
<ul>
<li>Sheep, chickens, cats.</li>
<li>Solar water pump, and the automation around it.</li>
</ul>
</div>
<div class="job">
<h3>Waitrose</h3>
<p class="meta">Retail · during and after university</p>
<ul>
<li>Retail alongside an Open University degree, after leaving Oxford Brookes.</li>
</ul>
</div>
</main>
</div>
<footer>me@dax.ist</footer>
</div>
</body>
</html>
|
