diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/about/about.component.spec.ts b/src/app/about/about.component.spec.ts deleted file mode 100644 index 74d6d9e..0000000 --- a/src/app/about/about.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { AboutComponent } from './about.component'; - -describe('AboutComponent', () => { - let component: AboutComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [AboutComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(AboutComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts index 00229c2..bf94223 100644 --- a/src/app/about/about.component.ts +++ b/src/app/about/about.component.ts @@ -10,8 +10,7 @@ interface IconItem { selector: 'app-about', standalone: true, imports: [CommonModule], - templateUrl: './about.component.html', - styleUrl: './about.component.scss' + templateUrl: './about.component.html' }) export class AboutComponent { iconItems: IconItem[] = []; diff --git a/src/app/contact/contact.component.spec.ts b/src/app/contact/contact.component.spec.ts deleted file mode 100644 index dae8ee6..0000000 --- a/src/app/contact/contact.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ContactComponent } from './contact.component'; - -describe('ContactComponent', () => { - let component: ContactComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [ContactComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(ContactComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/header/header.component.spec.ts b/src/app/header/header.component.spec.ts deleted file mode 100644 index 204ed6e..0000000 --- a/src/app/header/header.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HeaderComponent } from './header.component'; - -describe('HeaderComponent', () => { - let component: HeaderComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [HeaderComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(HeaderComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/project-card/project-card.component.html b/src/app/project-card/project-card.component.html new file mode 100644 index 0000000..912373e --- /dev/null +++ b/src/app/project-card/project-card.component.html @@ -0,0 +1,73 @@ + + +
+ {{project.title}} +
+
+

{{project.title}}

+

{{project.year}}

+
+ +
+ {{technology}} +
+ + + + + +
+

+ {{ project.description }} +

+ + + + + + + +
+ +
+ + +

+ Try it here! + +

+ + +
+
+
\ No newline at end of file diff --git a/src/app/project-card/project-card.component.ts b/src/app/project-card/project-card.component.ts new file mode 100644 index 0000000..820acb9 --- /dev/null +++ b/src/app/project-card/project-card.component.ts @@ -0,0 +1,57 @@ +import { CommonModule } from '@angular/common'; +import { ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from '@angular/core'; + +export 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({ + selector: 'app-project-card', + standalone: true, + imports: [CommonModule], + templateUrl: './project-card.component.html', + styles: `` +}) +export class ProjectCardComponent { + + @Input() project!: Project; + + @ViewChild('description') descriptionElement!: ElementRef; + isExpanded = false; + isTruncated = false; + + constructor(private cdr: ChangeDetectorRef) {} + + ngAfterViewInit() { + this.checkIfTruncated(); + this.cdr.detectChanges(); // Notify Angular of the changes after view initialization + } + + // Check if the description is being cut off + checkIfTruncated() { + const element = this.descriptionElement.nativeElement; + this.isTruncated = element.scrollHeight > element.offsetHeight; + console.log(this.isTruncated); + } + + // Toggle expand/collapse + toggleExpand() { + this.isExpanded = !this.isExpanded; + if (this.isExpanded) { + this.isTruncated = false; + } else { + this.isTruncated = true; + } + this.cdr.detectChanges(); // Notify Angular of the changes after toggling + } + + +} diff --git a/src/app/projects/projects.component.html b/src/app/projects/projects.component.html index bb8b434..a6d7952 100644 --- a/src/app/projects/projects.component.html +++ b/src/app/projects/projects.component.html @@ -3,32 +3,7 @@

Projects

-
- {{project.title}} -
-
-

{{project.title}}

-

{{project.year}}

-
- -
- {{technology}} -
-

{{project.description}}

- -
- -

Try now

- - - -
-
-
+
diff --git a/src/app/projects/projects.component.spec.ts b/src/app/projects/projects.component.spec.ts deleted file mode 100644 index 910132a..0000000 --- a/src/app/projects/projects.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ProjectsComponent } from './projects.component'; - -describe('ProjectsComponent', () => { - let component: ProjectsComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [ProjectsComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(ProjectsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/projects/projects.component.ts b/src/app/projects/projects.component.ts index 372b45e..6165899 100644 --- a/src/app/projects/projects.component.ts +++ b/src/app/projects/projects.component.ts @@ -1,23 +1,11 @@ import { CommonModule } from '@angular/common'; import { AfterViewInit, Component } from '@angular/core'; +import { Project, ProjectCardComponent } from "../project-card/project-card.component"; -// 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({ selector: 'app-projects', - imports: [CommonModule], + imports: [CommonModule, ProjectCardComponent], templateUrl: './projects.component.html' }) export class ProjectsComponent { @@ -48,7 +36,7 @@ export class ProjectsComponent { // link: 'https://quiz.ianvink.nl' }); this.projects.push({ - title: 'Mobile-first ERP solution', + title: 'Mobile-First ERP Solution', year: '2021-2024', description: `This is a comprehensive ERP solution that includes modules for a variety of functions, such as: @@ -83,7 +71,7 @@ export class ProjectsComponent { links: [], }); this.projects.push({ - title: 'AI supplier identification', + title: 'AI Supplier Identification', year: '2021', description: 'An application that combines key-value detection and multiclass-classification, to identify the correct supplier for an invoice. It uses online machine learning to keep improving itself as the user provides feedback.', @@ -98,10 +86,12 @@ export class ProjectsComponent { links: [], }); this.projects.push({ - title: 'Seabed modification tool', + title: 'Seabed Modification Tool', year: '2019-2020', description: - '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.', + 'A tool for editing the seabed mesh in a maritime simulator. The collision map is automatically updated, enabling ships to interact with the modified terrain.'+ + '\n\nThis tool allows instructors to quickly create new environments for the training of ship crews.', + // 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: [], @@ -124,7 +114,7 @@ export class ProjectsComponent { // demo: 'https://youtu.be/UnNgNyXE9ZY' }); this.projects.push({ - title: 'Augmented Reality game', + 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.', @@ -135,10 +125,11 @@ export class ProjectsComponent { // demo: 'https://youtu.be/fHJQNnytocc' }); this.projects.push({ - title: 'Flow Field pathfinding algorithm', + 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.', + '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.'+ + '\n\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'], links: [{type:'source', address:'https://github.com/Ninjaws/2D-Computer-Graphics/tree/master/EindOpdracht/Pathfinding'}, {type:'demo', address: 'https://youtu.be/7rvWAWpkYus'}] diff --git a/src/app/skills/skills.component.spec.ts b/src/app/skills/skills.component.spec.ts deleted file mode 100644 index f18490d..0000000 --- a/src/app/skills/skills.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { SkillsComponent } from './skills.component'; - -describe('SkillsComponent', () => { - let component: SkillsComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [SkillsComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(SkillsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -});