Ninjaws/Portfolio-Website
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

[Added] Base of the project

Browse Source
This commit is contained in:
Ninjaws
2024-11-19 22:44:43 +01:00
parent 3905715f6f
commit 87ca17c1ba
49 changed files with 16553 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/projects/projects.component.html
+37
View File
@@ -0,0 +1,37 @@
<!-- <section id="projects" class="py-20 bg-white">
<div class="container mx-auto text-center">
<h2 class="text-3xl font-semibold text-gray-800 mb-6">Projects</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-100 p-6 rounded-lg shadow-md">
<h3 class="text-xl font-semibold text-gray-700">Project 1</h3>
<p class="text-gray-600 mt-2">A short description of the project.</p>
<a href="#" class="text-blue-500 mt-4 inline-block">View Project</a>
</div>
</div>
</div>
</section> -->
<!-- bg-gray-900 -->
<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">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 backdrop-blur-lg rounded-lg shadow-lg overflow-visible group relative">
<!-- class="bg-gray-400 rounded-lg shadow-lg overflow-visible group"> -->
<img src="{{project.image}}" alt="{{project.title}}"
class="w-full h-56 rounded-sm object-cover hover:scale-105 transition-all duration-300">
<div class="p-6">
<h3 class="text-2xl font-semibold text-teal-400 mb-4">{{project.title}}</h3>
<p class="text-gray-300 mb-4">{{project.description}}</p>
<div class="flex flex-wrap gap-2">
<span *ngFor="let technology of project.technologies"
class="bg-teal-500 text-white text-xs px-2 py-1 rounded-md">{{technology}}</span>
</div>
</div>
</div>
</div>
</div>
</section>