Mohammad Hariri
5070f591d3
Animations - added opacity animation for experience page - added stagger animation for navbar items on mobile - added animation for landing page for years and language indications Pages - About Page mockup Redesign - Navbar to include icons on desktop
66 lines
2.6 KiB
Plaintext
66 lines
2.6 KiB
Plaintext
|
|
package components
|
|
|
|
import "github.com/moh682/portfolio/domain"
|
|
|
|
import "slices"
|
|
import "strings"
|
|
|
|
templ experienceCard(exp domain.Experience) {
|
|
<section class="min-h-[var(--content-height)] w-full flex relative items-center">
|
|
<!-- Left Side: Job Details -->
|
|
<div class="p-6 flex flex-col gap-4 transition-all opacity-0">
|
|
<h3 class="text-xl 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 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>
|
|
</section>
|
|
}
|
|
|
|
templ ExperiencesPage(experiences []domain.Experience) {
|
|
@rootLayout() {
|
|
<script defer src="assets/js/experiences.js"></script>
|
|
<main class="bg-gradient-to-b from-slate-900 w-full to-slate-800 px-6 overflow-x-hidden">
|
|
<div class="flex w-full items-center justify-between" x-data="{active:$persist(0)}">
|
|
<div class="relative w-full flex items-center justify-center">
|
|
<!-- Timeline -->
|
|
<div id="timeline" class="fixed w-10 top-[var(--navbar-height)] left-2 h-[var(--content-height)] flex items-center justify-center">
|
|
<div class="absolute bg-radial-[at_50%_25%] from-40% from-slate-700 h-full w-0.5 to-slate-800"></div>
|
|
<div id="timeline-point" 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 id="exps-container" class="ml-4 items-center content-center relative xl:w-[1600px]">
|
|
for _, exp := range experiences {
|
|
@experienceCard(exp)
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
}
|
|
}
|