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

[Added] Animations, Intro, Projects, Spinning links

Browse Source
This commit is contained in:
Ninjaws
2024-11-22 02:56:26 +01:00
parent 87ca17c1ba
commit 007c3dd588
26 changed files with 366 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/projects/projects.component.html
+11 -22
View File
@@ -1,33 +1,22 @@
<!-- <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>
<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">
<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">
<img src="{{project.image}}" alt="{{project.title}}" class="w-full h-56 rounded-sm object-cover">
<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 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-teal-500 text-white text-xs px-2 py-1 rounded-md">{{technology}}</span>
class="bg-gray-800 text-white text-sm px-2 py-1 rounded-md">{{technology}}</span>
</div>
</div>