[Added] Buttons for github, youtube and links

src/app/projects/projects.component.html

@@ -5,28 +5,35 @@
     <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6">
       <div *ngFor="let project of projects"
         class="backface-hidden rounded-sm overflow-hidden shadow-lg md:hover:scale-105 transition-all 
-        duration-300 group relative fade-in-up bg-white/5 border-none">
+        duration-300 group relative fade-in-up bg-white/5 border-none flex flex-col">
         <img src="{{project.image}}" alt="{{project.title}}" class="w-full max-h-56 aspect-[3/2] object-cover">
-        <div class="p-2 xs:p-3 xl:px-6 min-h-56">
+        <div class="p-2 xs:p-3 lg:px-6 lg:pb-6 flex-grow flex flex-col">
-          <!-- min-h-56 -->
           <div class="flex flex-wrap mb-2 xs:mb-4 items-center">
             <h3 class="text-xl sm:text-2xl font-semibold text-teal-400 flex-grow">{{project.title}}</h3>
             <p class="pl-2 ml-auto w-auto text-right text-sm xs:text-base text-gray-400">{{project.year}}</p>
           </div>
-          <p class="text-gray-300 mb-4 whitespace-pre-line max-h-48 overflow-auto">{{project.description}}</p>
+          
-
+          <div class="flex flex-wrap gap-1 mb-4">
-          <!-- <details class="text-gray-300 mb-4">
-            <summary class="cursor-pointer list-none">
-            </summary>
-            <p class="whitespace-pre-line">{{project.description}}</p>
-          </details> -->
-
-          <div class="flex flex-wrap gap-1">
             <span *ngFor="let technology of project.technologies"
-              class="bg-gray-800 text-white text-sm sm:text-md px-1 sm:px-2 py-1 rounded-md">{{technology}}</span>
+            class="bg-gray-800/55 text-white text-sm sm:text-md px-1 sm:px-2 py-1 rounded-md">{{technology}}</span>
+          </div>
+          <p class="text-gray-300 mb-4 whitespace-pre-line ">{{project.description}}</p>         
+          
+          <div class="flex justify-end items-end gap-5 flex-1">
+              <a *ngFor="let link of project.links" href="{{link.address}}" target="_blank" class="text-gray-400 rounded-full hover:text-teal-400 transition-all 
+              duration-100 ease-in-out flex items-center gap-3" [ngClass]="link.type === 'link' ? 'border border-gray-600 p-1 rounded-sm hover:bg-teal-400 hover:text-gray-700 hover:border-transparent' : ''">
+                <p *ngIf="link.type === 'link'">Try now</p>
+                <i *ngIf="link.type === 'link'" class="bi-arrow-right-circle-fill text-xl"></i>
+                <i *ngIf="link.type !== 'link'" class="text-3xl md:text-4xl" [ngClass]="link.type === 'source' ? 'bi-github' : 'bi-youtube'"></i>
+              </a>
           </div>
         </div>
       </div>
     </div>
   </div>
-</section>
+</section>
+<!-- <details class="text-gray-300 mb-4">
+  <summary class="cursor-pointer list-none">
+  </summary>
+  <p class="whitespace-pre-line">{{project.description | slice:150}}</p>
+</details> -->

src/app/projects/projects.component.ts

@@ -1,12 +1,18 @@
 import { CommonModule } from '@angular/common';
 import { AfterViewInit, Component } from '@angular/core';
 
+// export enum Link { Source, Demo, Link }
+
 interface Project {
   title: string;
   year: string;
   description: string;
   image: string;
   technologies: string[];
+  links: {address: string, type: 'source' | 'demo' | 'link'}[];
+  // source?: string;
+  // demo?: string;
+  // link?: string;
 }
 
 @Component({
@@ -26,7 +32,7 @@ export class ProjectsComponent {
         '\n\nTo combat this, the app collects all available questions in its own database. ' +  
         'To ensure the data stays fresh, it repeats this process every night, by creating a backup table, and then swapping it with the active one once it is finished. ' +
         '\n\nDocker is used for the development and deployment. The app is self-hosted, the link can be found below.',
-      image: 'Quiz 3.jpeg',
+      image: 'Quiz 5.jpeg',
       technologies: [
         'Angular',
         // 'Sass',
@@ -37,6 +43,9 @@ export class ProjectsComponent {
         'Nginx',
         'Gitea Workflows'
       ],
+      links: [{type: 'source', address: 'https://github.com/Ninjaws/Quiz'}, {type: 'link', address: 'https://quiz.ianvink.nl'}]
+      // source: 'https://github.com/Ninjaws/Quiz',
+      // link: 'https://quiz.ianvink.nl'
     });
     this.projects.push({
       title: 'Mobile-first ERP solution',
@@ -55,7 +64,7 @@ export class ProjectsComponent {
 
         // 'A full-fledged ERP solution, with modules for declarations (such as Cost, Time, Travel, Sickleave and Holidays), HRM (Managing employees), Sales (Relations, Contacts, Leads, Deals, Aftersales), Projectmanagement, Administration (Permission management, User management), and many more. ' +
         // '\n\nThe entire application is multi-lingual, with a system developed to enable multiple people add translations without causes merge errors. Every component is crafted in such a way that it supports both big and small screens. The application is throuroughly tested, with unittests, integrationtests and end-to-end tests. Deployments happen in stages, to ensure bugs are caught before going live.',
-      image: 'Top Secret White.png',
+      image: 'classified2 cleaned.png',
       technologies: [
         'Angular',
         'Sass',
@@ -71,6 +80,7 @@ export class ProjectsComponent {
         'Scrum',
         'Kanban'
       ],
+      links: [],
     });
     this.projects.push({
       title: 'AI supplier identification',
@@ -85,6 +95,7 @@ export class ProjectsComponent {
         'Python',
         'Machine Learning',
       ],
+      links: [],
     });
     this.projects.push({
       title: 'Seabed modification tool',
@@ -93,28 +104,13 @@ export class ProjectsComponent {
         'A tool to edit the seabed mesh of a maritime simulator. The collisionmap is also updated, to allow ships to interact with this update terrain. \nThis tool allows instructors to rapidly create new terrain, for training shipcrews.',
       image: 'Seabed Modification.png',
       technologies: ['Unigine (C#)', 'AGX Dynamics (C++)', 'Qt Creator'],
-    });
+      links: [],
-    this.projects.push({
-      title: 'Flow Field pathfinding algorithm',
-      year: '2018',
-      description:
-        'The application uses a vector field to direct particles towards a target. The vectors are calculated using a heatmap, which centers on the position of the target. \nThe particles collide with the environment, which can be edited and saved/loaded using the GUI.',
-      image: 'black2.png', //'Particle Flow - Demonstration.png', //"black.png",
-      technologies: ['Java', 'Swing', 'IntelliJ'],
-    });
-    this.projects.push({
-      title: 'Jelly Rescue',
-      year: '2015',
-      description:
-        'A platformer written in C++, with saving/loading, tile- and collisionmaps, enemy AI, collectibles and state management to switch between multiple screens (game, menu, victory, etc.)',
-      image: 'Jelly Game - demo.png',
-      technologies: ['C++', 'SFML2.0', 'Platformer', 'Visual Studio'],
     });
     this.projects.push({
       title: 'Microcontroller Tetris',
       year: '2019',
       description:
-        'Tetris written in C, visualized on dot-matrix displays, with the score visible on a 7-segment display and a menu system visible on the ATMega128.',
+      'Tetris written in C, visualized on dot-matrix displays, with the score visible on a 7-segment display and a menu system visible on the ATMega128.',
       image: 'Setup 3.png',
       technologies: [
         'C',
@@ -123,22 +119,52 @@ export class ProjectsComponent {
         'Dot-matrix displays',
         'Group project',
       ],
+      links: [{type:'source', address: 'https://github.com/Ninjaws/Microcontrollers-Tetris'}, {type:'demo', address:'https://youtu.be/UnNgNyXE9ZY'}]
+      // source: 'https://github.com/Ninjaws/Microcontrollers-Tetris',
+      // demo: 'https://youtu.be/UnNgNyXE9ZY'
     });
     this.projects.push({
       title: 'Augmented Reality game',
       year: '2019',
       description:
-        'The game uses computer vision to track a red ball, which serves as the controller. A system has been created for the rigging and animations for the player character and the opponents. The math for OpenGL is written by hand.',
+      'The game uses computer vision to track a red ball, which serves as the controller. A system has been created for the rigging and animations for the player character and the opponents. The math for OpenGL is written by hand.',
       image: 'AR Game.png',
       technologies: ['C++', 'OpenCV', 'OpenGL', 'IrrKlang', 'Group project'],
+      links: [{type:'source', address:'https://github.com/Ninjaws/AR-Applicatie'}, {type:'demo', address: 'https://youtu.be/fHJQNnytocc'}]
+      // source: 'https://github.com/Ninjaws/AR-Applicatie',
+      // demo: 'https://youtu.be/fHJQNnytocc'
     });
     this.projects.push({
-      title: 'Your dream project here?',
+      title: 'Flow Field pathfinding algorithm',
-      year: '',
+      year: '2018',
       description:
-        '',
+        'The application uses a vector field to direct particles towards a target. The vectors are calculated using a heatmap, which centers on the position of the target. \nThe particles collide with the environment, which can be edited and saved/loaded using the GUI.',
-      image: 'Empty.png',
+      image: 'black2.png', //'Particle Flow - Demonstration.png', //"black.png",
-      technologies: [],
+      technologies: ['Java', 'Swing', 'IntelliJ'],
+      links: [{type:'source', address:'https://github.com/Ninjaws/2D-Computer-Graphics/tree/master/EindOpdracht/Pathfinding'}, {type:'demo', address: 'https://youtu.be/7rvWAWpkYus'}]
+      
+      // source: 'https://github.com/Ninjaws/2D-Computer-Graphics/tree/master/EindOpdracht/Pathfinding',
+      // demo: 'https://youtu.be/7rvWAWpkYus'
     });
+    this.projects.push({
+      title: 'Jelly Rescue',
+      year: '2015',
+      description:
+        'A platformer written in C++, with saving/loading, tile- and collisionmaps, enemy AI, collectibles and state management to switch between multiple screens (game, menu, victory, etc.)',
+      image: 'Jelly Game - demo.png',
+      technologies: ['C++', 'SFML2.0', 'Platformer', 'Visual Studio'],
+      links: [{type:'source', address:'https://github.com/Ninjaws/JellyGame'}, {type:'demo', address: 'https://youtu.be/jCUnqbxuySI'}]
+     
+      // source: 'https://github.com/Ninjaws/JellyGame',
+      // demo: 'https://youtu.be/jCUnqbxuySI'
+    });
+    // this.projects.push({
+    //   title: 'Your dream project here?',
+    //   year: '',
+    //   description:
+    //     '',
+    //   image: 'Empty.png',
+    //   technologies: [],
+    // });
   }
 }

src/styles.scss

@@ -46,23 +46,23 @@ html {
 
 
 /* Custom scrollbar styles for Sass */
-::-webkit-scrollbar {
+// ::-webkit-scrollbar {
-  width: 4px;
+//   width: 4px;
-}
+// }
 
-::-webkit-scrollbar-track {
+// ::-webkit-scrollbar-track {
-  background: rgb(61, 61, 61);
+//   background: rgb(61, 61, 61);
-}
+// }
 
-::-webkit-scrollbar-thumb {
+// ::-webkit-scrollbar-thumb {
-  background:rgb(116, 116, 116);//rgb(226, 147, 0);
+//   background:rgb(116, 116, 116);//rgb(226, 147, 0);
-  border-radius: 20px;
+//   border-radius: 20px;
-  transition: background 0.3s;
+//   transition: background 0.3s;
-}
+// }
 
-::-webkit-scrollbar-thumb:hover {
+// ::-webkit-scrollbar-thumb:hover {
-  background: #357ABD;
+//   background: #357ABD;
-}
+// }
 
 // scrollbar-width: thin;
 // scrollbar-color: #4A90E2 #f0f0f0;