26 lines
1.1 KiB
HTML
26 lines
1.1 KiB
HTML
<section id="projects" class="py-16 bg-gray-800 text-white">
|
|
<div class="container mx-auto px-6">
|
|
<h2 class="text-4xl font-semibold text-center mb-12 relative fade-in-left">Projects</h2>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<div *ngFor="let project of projects"
|
|
class="bg-white/10 backface-hidden rounded-lg shadow-lg hover:scale-105 transition-all
|
|
duration-300 group relative fade-in-up">
|
|
|
|
<img src="{{project.image}}" alt="{{project.title}}" class="w-full h-56 rounded-sm object-cover">
|
|
<div class="p-6">
|
|
<div class="flex justify-between">
|
|
<h3 class="text-2xl font-semibold text-teal-400 mb-4">{{project.title}}</h3>
|
|
<p class="pl-1">{{project.year}}</p>
|
|
</div>
|
|
<p class="text-gray-300 mb-4 whitespace-pre-line">{{project.description}}</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span *ngFor="let technology of project.technologies"
|
|
class="bg-gray-800 text-white text-sm px-2 py-1 rounded-md">{{technology}}</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section> |