64 lines
2.6 KiB
Plaintext
64 lines
2.6 KiB
Plaintext
|
|
package components
|
|
|
|
import "github.com/moh682/portfolio/domain"
|
|
import "fmt"
|
|
|
|
templ ExperiencesPage(experiences []domain.Experience) {
|
|
@rootLayout() {
|
|
<main class="bg-gradient-to-b from-slate-900 w-full h-full to-slate-800 overflow-hidden">
|
|
<div class="relative h-full flex w-full items-center justify-between" x-data="{active:$persist(0)}">
|
|
<!-- Progress Indicator -->
|
|
<div class="flex items-center px-2 top-0 h-screen z-10 ">
|
|
<div class="flex flex-col z-100 gap-4 -translate-y-1/2">
|
|
for i := range experiences {
|
|
<div
|
|
class="flex items-center justify-center pointer-events-auto py-2 px-2 hover:cursor-pointer"
|
|
x-on:click={ fmt.Sprintf("active = %d", i) }
|
|
>
|
|
<div
|
|
class={ "h-12 w-1 mb-4 transition-all duration-300 cursor-pointer hover:bg-emerald-400" }
|
|
data-index={ templ.JSONString(i) }
|
|
x-bind:class={ fmt.Sprintf("active == %d ? 'bg-emerald-500' : 'bg-slate-700'", i) }
|
|
></div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-full flex items-center justify-center">
|
|
<div class="w-full h-full items-center content-center relative xl:w-[1600px]">
|
|
<div class="text-center py-8 animate-fade">
|
|
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Professional Experience</h2>
|
|
<p class="text-slate-400">Building and scaling software solutions that matter</p>
|
|
</div>
|
|
<div class="w-full h-full absolute flex items-center justify-center">
|
|
<div class="h-full w-0.5 bg-slate-700 transform"></div>
|
|
</div>
|
|
<div class="h-full custom-scrollbar scroll-smooth">
|
|
<div>
|
|
for i, exp := range experiences {
|
|
<div
|
|
class={ "absolute w-full transition-all opacity-0 duration-700 ease-out translate-y-10" }
|
|
data-experience-index={ templ.JSONString(i) }
|
|
x-bind:class={ fmt.Sprintf("active == %d ? 'z-10 opacity-100 translate-y-0' : ' -z-10 translate-y-10'", i) }
|
|
>
|
|
<div class="h-full w-full">
|
|
<div class={ fmt.Sprintf("relative flex w-full h-full items-center justify-center translate-y-[%dpx]", i*4*32) }>
|
|
<div class="absolute animate-pulse w-16 h-16 rounded-full bg-slate-800/50 z-50"></div>
|
|
<div class={ "flex items-center flex-grow-0 justify-center w-10 h-10 rounded-full bg-emerald-900 border-4 border-slate-800 z-[80]" }>
|
|
<div class="absolute w-2 h-2 z-[80] bg-emerald-400 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@experienceCard(exp)
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
}
|
|
}
|