add skills component

src/app/app.module.ts

@@ -9,10 +9,11 @@ import { ContentComponent } from './content/content.component';
 import {MarkdownModule} from "ngx-markdown";
 import { S3imgComponent } from './s3img/s3img.component';
 import { DynamicHooksModule, HookParserEntry } from 'ngx-dynamic-hooks';
+import { SkillsComponent } from './skills/skills.component';
 
 const componentParsers: Array<HookParserEntry> = [
   {component: S3imgComponent},
-  // ...
+  {component: SkillsComponent}
 ];
 @NgModule({
   declarations: [
@@ -20,6 +21,7 @@ const componentParsers: Array<HookParserEntry> = [
     HeaderComponent,
     ContentComponent,
     S3imgComponent,
+    SkillsComponent,
   ],
   imports: [
     BrowserModule,

src/app/skills/skills.component.html

+<div *ngIf="skills">
+    <img *ngFor="let skill of skills" [src]="skill" alt="Skills">
+</div>
\ No newline at end of file

src/app/skills/skills.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SkillsComponent } from './skills.component';
+
+describe('SkillsComponent', () => {
+  let component: SkillsComponent;
+  let fixture: ComponentFixture<SkillsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SkillsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SkillsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/skills/skills.component.ts

+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-skills',
+  templateUrl: './skills.component.html',
+  styleUrls: ['./skills.component.scss']
+})
+export class SkillsComponent implements OnInit {
+
+  public skills: string[] | undefined;
+
+  constructor(private httpClient: HttpClient) { }
+
+  ngOnInit(): void {
+    this.httpClient.get<any>('/api/skills').subscribe(data => {
+
+      if (data.success) {
+        this.skills = data.skills;
+      }
+
+    });
+  }
+
+}