64 lines
2.3 KiB
HTML
64 lines
2.3 KiB
HTML
{{- define "main" -}}
|
|
<header>
|
|
<hgroup>
|
|
<h1>
|
|
Principle product <span color="blue">designer</span> building <span color="red">thoughtful</span> and <span color="yellow">accessible</span> interfaces.
|
|
</h1>
|
|
<p class="lede">
|
|
<b>20 years experience</b> designing and building software for the browser. I balance intentional design principles with a mastery of CSS, HTML, JavaScript, & WCAG to <b>bridge design and engineering</b>. Performance, accessibility, and the semantic web still matter!
|
|
</p>
|
|
<p class="lede">
|
|
Read more about my <a href="design" out>design philosophy</a> or take a look at some <a href="#studies" in>case studies</a> below.
|
|
</p>
|
|
</hgroup>
|
|
<div id="semicircle"></div>
|
|
<div id="square"></div>
|
|
<div id="circle"></div>
|
|
<div id="rectangle"></div>
|
|
<div id="triangle"></div>
|
|
</header>
|
|
<section id="studies">
|
|
<h1>Case studies</h1>
|
|
{{ range where .Site.RegularPages "Section" "studies" }}
|
|
{{- $page := . -}}
|
|
{{- $cardImage := "" -}}
|
|
{{- with .Params.list.img -}}
|
|
{{- $match := $page.Resources.GetMatch . -}}
|
|
{{- if not $match -}}
|
|
{{- $match = $page.Resources.GetMatch (printf "img/%s" .) -}}
|
|
{{- end -}}
|
|
{{- with $match -}}
|
|
{{- $cardImage = .RelPermalink -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
<article{{ with $cardImage }} style="--card-bg: url('{{ . }}');"{{ end }}>
|
|
<a href="{{ .RelPermalink }}">
|
|
<h2>{{ .Title }}</h2>
|
|
<p>{{ .Summary }}</p>
|
|
{{ with .Params.list.more }}<p>{{ . }}</p>{{ end }}
|
|
{{- with .Params.study.facts -}}
|
|
<div>
|
|
{{- range . -}}
|
|
{{- if or (eq .label "Role") (eq .label "Tools") (eq .label "Industry") -}}
|
|
{{- $fact := . -}}
|
|
{{- $iconColor := "" -}}
|
|
{{- range $page.Params.list.facts -}}
|
|
{{- if eq (lower .key) (lower $fact.label) -}}
|
|
{{- $iconColor = .color -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
<figure>
|
|
{{- with $fact.icon -}}
|
|
{{ partial "icon.html" (dict "name" . "color" $iconColor) }}
|
|
{{- end -}}
|
|
<figcaption {{ with $fact.class }}class='{{ . }}'{{ end }}>{{ $fact.value | markdownify }}</figcaption>
|
|
</figure>
|
|
{{- end -}}
|
|
{{- end -}}
|
|
</div>
|
|
{{- end -}}
|
|
</a>
|
|
</article>
|
|
{{- end -}}
|
|
</section>
|
|
{{ end }} |