47 lines
1.8 KiB
Plaintext
47 lines
1.8 KiB
Plaintext
package components
|
|
|
|
import "github.com/moh682/portfolio/domain"
|
|
import "slices"
|
|
import "strings"
|
|
|
|
templ experienceCard(exp domain.Experience) {
|
|
<section class="h-full w-full flex relative items-center">
|
|
<div class="flex h-[600px] sm:px-12 lg:py-40 w-full items-center gap-12 justify-between">
|
|
<!-- Left Side: Job Details -->
|
|
<div class="p-6 w-1/2 flex flex-col gap-4 bg-slate-800 rounded-lg hover:bg-slate-800 transition-all animate-slide">
|
|
<h3 class="text-2xl font-semibold text-white">{ exp.Job.Title }</h3>
|
|
<div class="flex flex-col gap-2">
|
|
<a href={ templ.SafeURL(exp.Company.Link) } class="text-emerald-400 font-medium text-lg ">{ exp.Company.Name }</a>
|
|
<p class="text-slate-400 ">{ exp.Duration() }</p>
|
|
<p class="text-slate-600 text-sm">{ exp.GetStartDate() } - { exp.GetEndDate() } </p>
|
|
<a href={ templ.SafeURL(exp.Company.LocationLink) } class="text-emerald-500">{ exp.Company.City }</a>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
for _, stack := range slices.Concat(exp.Job.FrontendStack, exp.Job.BackendStack, exp.Job.InfrastructureStack) {
|
|
@techStack(stack)
|
|
}
|
|
</div>
|
|
</div>
|
|
<!-- Timeline Marker -->
|
|
<div></div>
|
|
<!-- Right Side: Company & Role Details -->
|
|
<div class="flex flex-col w-1/2 gap-6 p-6 bg-slate-800 rounded-lg animate-slideIn">
|
|
<div class="flex flex-col gap-2">
|
|
<h4 class="text-xl font-medium">About { exp.Company.Name }</h4>
|
|
for _, description := range strings.Split(exp.Company.Description, "\n") {
|
|
<p class="text-slate-300">
|
|
{ description }
|
|
</p>
|
|
}
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<h4 class="text-xl font-medium">Role & Responsibilities</h4>
|
|
<div class="text-slate-300 whitespace-pre-wrap">
|
|
{ exp.Job.Description }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|