diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 154 |
1 files changed, 154 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..29e87f4 --- /dev/null +++ b/index.html @@ -0,0 +1,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> |