More visual tweaks

This commit is contained in:
Ian Keane 2026-08-26 17:54:57 -04:00
parent 537e279780
commit 0b0cc6fda5
4 changed files with 71 additions and 87 deletions

View file

@ -40,8 +40,8 @@
,(date-range (field tc 'date-start) (field tc 'date-end)))
(div (@ (class "title-meta"))
,(field tc 'company) " • " ,(field tc 'location))
(div (@ (class "title-blurb"))
,(bullets (field tc 'blurb)))))
(p (@ (class "title-blurb"))
,(string-join (field tc 'blurb) " "))))
;; Emit a title card followed by its project cards as a flat list of siblings
(define (render-title-flat tc)
@ -130,6 +130,43 @@
(list `(h2 (@ (class "sec-heading")) ,cur-label))
cur-items)))))))
;; ─── Column distribution ───────────────────────────────────────────────────────
;; Wrap all items in two independent divs, splitting at the midpoint.
;; Because each col is a separate block formatting context, expanding a card
;; pushes siblings down within that col only — no cross-column movement,
;; no hover loop.
;;
;; num-columns: change to 3 if your resume gets too long, and update the
;; CSS grid-template-columns to match.
(define num-columns 3)
(define (heading? item)
(and (pair? item) (eq? (car item) 'h2)))
(define (list-ref* lst i)
(if (= i 0) (car lst) (list-ref* (cdr lst) (- i 1))))
(define (split-into-columns items n)
(let* ((total (length items))
(chunk (inexact->exact (ceiling (/ total n)))))
(let loop ((i 0) (start 0) (remaining n) (acc '()))
(if (= remaining 1)
(reverse (cons `(div (@ (class "col")) ,@(list-tail items start)) acc))
(let* ((raw-end (min (+ start chunk) total))
;; Walk backwards from the cut point: if the last item
;; in this slice is a heading (orphaned at col bottom),
;; move it to the next column.
(end (let nudge ((e raw-end))
(if (and (> e (+ start 1))
(heading? (list-ref* items (- e 1))))
(nudge (- e 1))
e))))
(loop (+ i 1) end (- remaining 1)
(cons `(div (@ (class "col"))
,@(list-tail (list-head items end) start))
acc)))))))
;; ─── Front matter ─────────────────────────────────────────────────────────────
(define (render-front-matter fm)
@ -143,40 +180,19 @@
(define (render-resume res)
(let* ((fm (field res 'front-matter))
(items (sections->flat-items (field res 'sections))))
(items (sections->flat-items (field res 'sections)))
(cols (split-into-columns items num-columns)))
`(*TOP*
(html (@ (lang "en"))
(head
(meta (@ (charset "UTF-8")))
(meta (@ (name "viewport") (content "width=device-width, initial-scale=1")))
(title ,(field fm 'name))
(link (@ (rel "stylesheet") (href "style.css")))
;; Measure the front-matter height after every resize/zoom and
;; set .columns height to exactly fill the remaining space.
(script "
function setColHeight() {
var fm = document.querySelector('.front-matter');
var col = document.querySelector('.columns');
if (!fm || !col) return;
var used = fm.getBoundingClientRect().height
+ parseInt(getComputedStyle(document.body).paddingTop) * 2;
col.style.height = (window.innerHeight - used) + 'px';
}
window.addEventListener('load', setColHeight);
window.addEventListener('resize', setColHeight);
// zoom via ctrl+/- fires resize in most browsers, but also poll as fallback
var _lastW = window.innerWidth, _lastH = window.innerHeight;
setInterval(function() {
if (window.innerWidth !== _lastW || window.innerHeight !== _lastH) {
_lastW = window.innerWidth; _lastH = window.innerHeight;
setColHeight();
}
}, 200);
"))
(link (@ (rel "stylesheet") (href "style.css"))))
(body
,(render-front-matter fm)
(main (@ (class "columns"))
,@items))))))
,@cols))))))
(display "<!DOCTYPE html>\n")
(sxml->xml (render-resume resume))