prime8dev

prime8dev
git clone https://git.prime8.dev/prime8dev.git
Log | Files | Refs | README | LICENSE

experience.gohtml (3084B)

      1 {{define "experience"}}
      2 <section id="experience" class="page">
      3   <article class="experience-layout">
      4     <div class="experience-detail">
      5       {{range $index, $exp := .Experience}}
      6       {{$hasYear := durationHasYear $exp.StartDate $exp.EndDate $exp.Current}}
      7       <div class="exp-row" data-index="{{$index}}" data-id="{{$exp.ID}}">
      8         <div class="exp-timeline{{if $.SelectedExperienceID}}{{if eq $exp.ID $.SelectedExperienceID}} active{{end}}{{else}}{{if eq $index 0}} active{{end}}{{end}}{{if $hasYear}} has-end-dot{{end}}" data-index="{{$index}}">
      9           <span class="timeline-dot"></span>
     10           <span class="timeline-year">[{{timelineYear $exp.EndDate $exp.Current}}]</span>
     11           <div class="timeline-line"></div>
     12           {{if $hasYear}}<span class="timeline-dot timeline-dot-end"></span>{{end}}
     13         </div>
     14 
     15         <div class="exp-card{{if $.SelectedExperienceID}}{{if eq $exp.ID $.SelectedExperienceID}} selected{{end}}{{else}}{{if eq $index 0}} selected{{end}}{{end}}" data-index="{{$index}}" data-id="{{$exp.ID}}">
     16           <div class="exp-card-header">
     17             <div class="exp-card-title">
     18               {{if $exp.Logo}}
     19                 <div class="exp-title-with-logo">
     20                   <img src="{{$exp.Logo}}" alt="{{$exp.Company}} logo" class="exp-logo {{$exp.LogoFilter}}">
     21                   <span class="exp-role">{{$exp.Role}}</span>
     22                 </div>
     23               {{else}}
     24                 <div class="exp-title-text">
     25                   <h2>{{$exp.Company}}</h2>
     26                   <span class="exp-role">{{$exp.Role}}</span>
     27                 </div>
     28               {{end}}
     29             </div>
     30             <div class="exp-card-meta">
     31               <span class="exp-dates">{{formatMonthYear $exp.StartDate}} -> {{formatEndDate $exp.EndDate $exp.Current}}</span>
     32               <span class="exp-duration">{{formatDuration $exp.StartDate $exp.EndDate $exp.Current}}</span>
     33               {{if $exp.URL}}<a class="external-link" href="{{$exp.URL}}" target="_blank" rel="noopener noreferrer">{{$exp.URL}} -></a>{{end}}
     34             </div>
     35           </div>
     36 
     37           {{if gt (len $exp.Tech) 0}}
     38           <div class="exp-card-tech">{{range $exp.Tech}}<span class="tag {{tagClass .}}">{{.}}</span>{{end}}</div>
     39           {{end}}
     40 
     41           <div class="exp-card-body">{{range $exp.Description}}<p>{{.}}</p>{{end}}</div>
     42 
     43           {{if gt (len $exp.Images) 0}}
     44           <div class="exp-card-images">
     45             <img src="{{index $exp.Images 0}}" alt="{{$exp.Company}} workplace" class="exp-image-hero" loading="lazy">
     46             {{if gt (len $exp.Images) 1}}
     47             <div class="exp-image-grid">
     48               {{range $imgIndex, $img := $exp.Images}}
     49               {{if gt $imgIndex 0}}
     50               <img src="{{$img}}" alt="{{$exp.Company}} image" class="exp-image-thumb" loading="lazy">
     51               {{end}}
     52               {{end}}
     53             </div>
     54             {{end}}
     55           </div>
     56           {{end}}
     57         </div>
     58       </div>
     59       {{end}}
     60     </div>
     61   </article>
     62 </section>
     63 
     64 <style>{{inlineCSS "experience.css"}}</style>
     65 {{end}}