experience.gohtml (4578B)
1 {{define "experience"}} 2 <section id="experience" class="page"> 3 <article class="experience-layout"> 4 <div class="experience-detail"> 5 {{$axis := experienceAxis .Experience}} 6 <nav class="exp-chart" aria-label="experience timeline"> 7 <div class="chart-grid" aria-hidden="true" style="grid-row: 1 / span {{inc (len .Experience)}}"> 8 {{range $axis.Ticks}}<span class="grid-line" style="--at: {{pct .At}}"></span>{{end}} 9 </div> 10 {{range $index, $exp := .Experience}} 11 {{$on := or (eq $exp.ID $.SelectedExperienceID) (and (not $.SelectedExperienceID) (eq $index 0))}} 12 <a class="exp-lane{{if $on}} active{{end}}" style="grid-row: {{inc $index}}" href="/experience/{{$exp.ID}}" data-index="{{$index}}" data-id="{{$exp.ID}}" aria-controls="exp-{{$exp.ID}}" aria-current="{{if $on}}true{{else}}false{{end}}" aria-label="{{$exp.Company}}, {{$exp.Role}}: {{formatRange $exp.StartDate $exp.EndDate $exp.Current}}, {{shortDuration $exp.StartDate $exp.EndDate $exp.Current}}" title="{{formatRange $exp.StartDate $exp.EndDate $exp.Current}}"> 13 <span class="lane-name">{{$exp.Company}}</span> 14 <span class="lane-track"><span class="exp-bar{{if $exp.Current}} current{{end}}" style="--from: {{pct ($axis.From $exp.StartDate)}}; --to: {{pct ($axis.To $exp.EndDate $exp.Current)}}"></span></span> 15 <span class="lane-dur">{{shortDuration $exp.StartDate $exp.EndDate $exp.Current}}</span> 16 </a> 17 {{end}} 18 <div class="chart-axis" aria-hidden="true" style="grid-row: {{inc (len .Experience)}}"> 19 <span class="axis-labels"> 20 {{range $axis.Ticks}}<span class="axis-tick" style="--at: {{pct .At}}">{{.Label}}</span>{{end}} 21 {{if $axis.EndLabel}}<span class="axis-end">{{$axis.EndLabel}}</span>{{end}} 22 </span> 23 </div> 24 </nav> 25 26 {{range $index, $exp := .Experience}} 27 {{$on := or (eq $exp.ID $.SelectedExperienceID) (and (not $.SelectedExperienceID) (eq $index 0))}} 28 <div class="exp-row{{if $on}} active{{end}}" data-index="{{$index}}" data-id="{{$exp.ID}}"> 29 <div class="exp-timeline" aria-hidden="true"> 30 <span class="graph-node">{{if $exp.Current}}@{{else}}*{{end}}</span> 31 </div> 32 33 <div class="exp-card" id="exp-{{$exp.ID}}" data-index="{{$index}}" data-id="{{$exp.ID}}"> 34 <div class="exp-card-header"> 35 <div class="exp-card-title"> 36 {{if $exp.Logo}} 37 <div class="exp-title-with-logo"> 38 <img src="{{$exp.Logo}}" alt="{{$exp.Company}} logo" class="exp-logo {{$exp.LogoFilter}}"> 39 <span class="exp-role">{{$exp.Role}}</span> 40 </div> 41 {{else}} 42 <div class="exp-title-text"> 43 <h2>{{$exp.Company}}</h2> 44 <span class="exp-role">{{$exp.Role}}</span> 45 </div> 46 {{end}} 47 </div> 48 <div class="exp-card-meta"> 49 <span class="exp-dates"><time datetime="{{monthStamp $exp.StartDate}}">{{shortMonthYear $exp.StartDate}}</time> – {{if $exp.Current}}<span class="exp-present">present</span>{{else}}<time datetime="{{endStamp $exp.EndDate $exp.Current}}">{{shortEndDate $exp.EndDate $exp.Current}}</time>{{end}}</span> 50 <span class="exp-duration">{{shortDuration $exp.StartDate $exp.EndDate $exp.Current}}</span> 51 {{if $exp.URL}}<a class="external-link" href="{{$exp.URL}}" target="_blank" rel="noopener noreferrer">{{$exp.URL}}</a>{{end}} 52 </div> 53 </div> 54 55 {{if gt (len $exp.Tech) 0}} 56 <div class="exp-card-tech">{{range $exp.Tech}}<span class="tag {{tagClass .}}">{{.}}</span>{{end}}</div> 57 {{end}} 58 59 <div class="exp-card-body">{{range $exp.Description}}<p>{{.}}</p>{{end}}</div> 60 61 {{if gt (len $exp.Images) 0}} 62 <div class="exp-card-images"> 63 <img src="{{index $exp.Images 0}}" alt="{{$exp.Company}} workplace" class="exp-image-hero" loading="lazy"> 64 {{if gt (len $exp.Images) 1}} 65 <div class="exp-image-grid"> 66 {{range $imgIndex, $img := $exp.Images}} 67 {{if gt $imgIndex 0}} 68 <img src="{{$img}}" alt="{{$exp.Company}} image" class="exp-image-thumb" loading="lazy"> 69 {{end}} 70 {{end}} 71 </div> 72 {{end}} 73 </div> 74 {{end}} 75 </div> 76 </div> 77 {{end}} 78 </div> 79 </article> 80 </section> 81 82 <style>{{inlineCSS "experience.css"}}</style> 83 {{end}}