66 lines
2.4 KiB
Plaintext
66 lines
2.4 KiB
Plaintext
package components
|
|
|
|
import "github.com/moh682/portfolio/domain"
|
|
|
|
templ tag(tag string) {
|
|
<span class="px-3 py-1 w-fit text-sm bg-slate-700 text-slate-300 rounded-full">{ tag }</span>
|
|
}
|
|
|
|
templ status(status string) {
|
|
<span class={ "px-3 py-1 w-fit text-sm bg-emerald-700 text-white rounded-full", templ.KV("bg-yellow-600/50", status =="In Progress") }>{ status }</span>
|
|
}
|
|
|
|
templ projectCard(project domain.Project) {
|
|
<div class="group bg-slate-800 rounded-lg overflow-hidden transition-all duration-300 hover:transform hover:scale-[1.02] hover:shadow-xl">
|
|
<div class="relative overflow-hidden aspect-video">
|
|
<img
|
|
src={ project.Thumbnail }
|
|
alt={ project.Name }
|
|
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
|
|
/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-slate-900 to-transparent opacity-0 group-hover:opacity-60 transition-opacity duration-300"></div>
|
|
</div>
|
|
<div class="flex flex-col gap-4 p-6">
|
|
<div class="flex flex-col gap-2">
|
|
<h3 class="text-xl font-bold text-slate-100">{ project.Name }</h3>
|
|
@status(project.Status)
|
|
<p class="text-slate-400 mb-4 line-clamp-2">{ project.Description }</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
for _, t := range project.Stack {
|
|
@tag(t)
|
|
}
|
|
</div>
|
|
</div>
|
|
if project.GithubLink != "" {
|
|
<a
|
|
href={ templ.SafeURL(project.GithubLink) }
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-flex items-center text-emerald-500 hover:text-emerald-400 transition-colors"
|
|
>
|
|
View Project
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</a>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ ProjectsPage(projects []domain.Project) {
|
|
@rootLayout() {
|
|
<main class="w-full min-h-full py-16 px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-7xl mx-auto">
|
|
<h1 class="text-4xl font-bold text-slate-100 mb-2">Projects</h1>
|
|
<p class="text-slate-400 mb-12">A collection of projects I've worked on</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
for _, project := range projects {
|
|
@projectCard(project)
|
|
}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
}
|
|
}
|