Click to toggle on moble, remove clickable projects
This commit is contained in:
parent
e4a124dfe0
commit
537e279780
3 changed files with 20 additions and 18 deletions
27
generate.scm
27
generate.scm
|
|
@ -18,20 +18,18 @@
|
||||||
|
|
||||||
;; ─── Individual cards (all become flat children of .columns) ──────────────────
|
;; ─── Individual cards (all become flat children of .columns) ──────────────────
|
||||||
|
|
||||||
;; Project card — optionally wraps in an anchor if url is set
|
;; Project card — detail bullets revealed on hover (desktop) or click (mobile)
|
||||||
(define (render-project proj)
|
(define (render-project proj)
|
||||||
(let* ((url (field proj 'url))
|
`(div (@ (class "project-card")
|
||||||
(card `(div (@ (class ,(string-append "project-card" (if url " clickable" "")))
|
(onclick "this.classList.toggle('open')"))
|
||||||
,@(if url `((onclick ,(string-append "window.open('" url "','_blank')"))) '()))
|
(div (@ (class "project-header"))
|
||||||
(div (@ (class "project-header"))
|
(span (@ (class "project-name")) ,(field proj 'name))
|
||||||
(span (@ (class "project-name")) ,(field proj 'name))
|
,(date-range (field proj 'date-start) (field proj 'date-end)))
|
||||||
,(date-range (field proj 'date-start) (field proj 'date-end)))
|
(div (@ (class "project-summary"))
|
||||||
(div (@ (class "project-summary"))
|
,(bullets (field proj 'summary-bullets)))
|
||||||
,(bullets (field proj 'summary-bullets)))
|
(div (@ (class "project-details"))
|
||||||
(div (@ (class "project-details"))
|
,(bullets (field proj 'detail-bullets)))
|
||||||
,(bullets (field proj 'detail-bullets)))
|
,(tech-list (field proj 'technologies))))
|
||||||
,(tech-list (field proj 'technologies)))))
|
|
||||||
card))
|
|
||||||
|
|
||||||
;; Title card: blurb only, no projects nested inside.
|
;; Title card: blurb only, no projects nested inside.
|
||||||
;; Projects are emitted as siblings after the title card.
|
;; Projects are emitted as siblings after the title card.
|
||||||
|
|
@ -52,7 +50,8 @@
|
||||||
(map render-project (field tc 'projects))))
|
(map render-project (field tc 'projects))))
|
||||||
|
|
||||||
(define (render-education edu)
|
(define (render-education edu)
|
||||||
`(div (@ (class "education-card"))
|
`(div (@ (class "education-card")
|
||||||
|
(onclick "this.classList.toggle('open')"))
|
||||||
(div (@ (class "edu-header"))
|
(div (@ (class "edu-header"))
|
||||||
(span (@ (class "edu-degree")) ,(field edu 'degree))
|
(span (@ (class "edu-degree")) ,(field edu 'degree))
|
||||||
,(date-range (field edu 'date-start) (field edu 'date-end)))
|
,(date-range (field edu 'date-start) (field edu 'date-end)))
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -159,7 +159,8 @@ a { color: var(--accent); text-decoration: none; }
|
||||||
transition: background 0.18s, border-left-color 0.18s;
|
transition: background 0.18s, border-left-color 0.18s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-card:has(.project-details li):hover {
|
.project-card:has(.project-details li):hover,
|
||||||
|
.project-card:has(.project-details li).open {
|
||||||
background: var(--bg-hover);
|
background: var(--bg-hover);
|
||||||
border-left-color: var(--accent);
|
border-left-color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
@ -188,7 +189,8 @@ a { color: var(--accent); text-decoration: none; }
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: max-height 0.28s ease, opacity 0.22s ease;
|
transition: max-height 0.28s ease, opacity 0.22s ease;
|
||||||
}
|
}
|
||||||
.project-card:hover .project-details {
|
.project-card:hover .project-details,
|
||||||
|
.project-card.open .project-details {
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -239,7 +241,8 @@ a { color: var(--accent); text-decoration: none; }
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: max-height 0.28s ease, opacity 0.22s ease;
|
transition: max-height 0.28s ease, opacity 0.22s ease;
|
||||||
}
|
}
|
||||||
.education-card:hover .edu-extras {
|
.education-card:hover .edu-extras,
|
||||||
|
.education-card.open .edu-extras {
|
||||||
max-height: 400px;
|
max-height: 400px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue