Added Projects section (Closes #2)

src/app/material.module.ts

@@ -1,14 +1,18 @@
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
+import {MatDividerModule} from '@angular/material/divider';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
+import {MatListModule} from '@angular/material/list';
 
 const MODULES = [
 	MatButtonModule,
 	MatCardModule,
+	MatDividerModule,
 	MatFormFieldModule,
 	MatInputModule,
+	MatListModule,
 ];
 
 @NgModule({

src/app/services/projects.service.ts

@@ -0,0 +1,47 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+
+export type Project = {
+	avatar_url: string;
+	created_at: string;
+	default_branch: string;
+	description: string;
+	forks_count: number;
+	http_url_to_repo: string;
+	id: number;
+	last_activity_at: string;
+	name: string;
+	name_with_namespace: string;
+	namespace: {
+		full_path: string;
+		id: number;
+		kind: string;
+		name: string;
+		parent_id: number;
+		path: string;
+		web_url: string;
+	};
+	path: string;
+	path_with_namespace: string;
+	readme_url: string;
+	ssh_url_to_repo: string;
+	star_count: number;
+	tag_list: string[];
+	topics: string[];
+	web_url: string;
+}
+
+@Injectable({providedIn: 'root'})
+export class ProjectsService {
+	all: Project[] = [];
+
+	constructor(private http: HttpClient) {
+		this.http.get<Project[]>('https://gitlab.zakscode.com/api/v4/projects').toPromise().then(projects => {
+			this.all = (projects || []).sort((a, b) => {
+				if(a.name > b.name) return 1;
+				if(a.name < b.name) return -1;
+				return 0;
+			});
+		});
+	}
+}

src/app/views/home/home.component.html

@@ -23,11 +23,6 @@
         <div class="p-4">
             <console height="12rem"></console>
         </div>
-<!--		<div class="p-3">-->
-<!--			<h3>Projects</h3>-->
-<!--			<iframe class="border-0" src="https://gitlab.zakscode.com/explore" width="100%" height="75vh">-->
-<!--			</iframe>-->
-<!--		</div>-->
         <div class="p-4">
             <h3>About Me</h3>
             <div>
@@ -44,22 +39,42 @@
         </div>
 		<div class="p-4 overflow-hidden">
 			<h3>Resume & References</h3>
-			<a class="mb-3 btn btn-outline-primary" href="https://docs.google.com/document/d/1xP6HASPerXKMJM_x6-PhHVvoYgq-Hym5IRO7g47EX8o/edit?usp=sharing" target="_blank">Resume</a>
+			<div class="d-md-none">
-			<ul class="d-md-none list-group">
+				<ul class="list-group">
-				<a class="list-group-item list-group-item-action border-info text-info" href="https://docs.google.com/document/d/1xP6HASPerXKMJM_x6-PhHVvoYgq-Hym5IRO7g47EX8o/edit?usp=sharing" target="_blank">Resume</a>
+					<a class="list-group-item list-group-item-action border-primary text-primary" href="https://docs.google.com/document/d/1xP6HASPerXKMJM_x6-PhHVvoYgq-Hym5IRO7g47EX8o/edit?usp=sharing" target="_blank">Resume</a>
-				<a class="list-group-item list-group-item-action border-info text-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyNWw0UDFzT0ZTeVU/view?usp=sharing" target="_blank">Manager</a>
+				</ul>
-				<a class="list-group-item list-group-item-action border-info text-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyaFBhcXBEaGp6YWc/view?usp=sharing" target="_blank">Contractor</a>
+				<ul class="list-group mt-3">
-				<a class="list-group-item list-group-item-action border-info text-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyM0YtTWcxQzk0dEE/view?usp=sharing" target="_blank">Teacher</a>
+					<a class="list-group-item list-group-item-action border-info text-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyNWw0UDFzT0ZTeVU/view?usp=sharing" target="_blank">Manager</a>
-				<a class="list-group-item list-group-item-action border-info text-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyX2owd0xURjh3RlE/view?usp=sharing" target="_blank">Principle</a>
+					<a class="list-group-item list-group-item-action border-info text-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyaFBhcXBEaGp6YWc/view?usp=sharing" target="_blank">Contractor</a>
-				<a class="list-group-item list-group-item-action border-info text-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyMHdaM1BjZ1MwbWxva2lOY290NElwanN4b2JV/view?usp=sharing" target="_blank">CD Projekt Red</a>
+					<a class="list-group-item list-group-item-action border-info text-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyM0YtTWcxQzk0dEE/view?usp=sharing" target="_blank">Teacher</a>
-			</ul>
+					<a class="list-group-item list-group-item-action border-info text-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyX2owd0xURjh3RlE/view?usp=sharing" target="_blank">Principle</a>
-			<div class="d-none d-md-block btn-group" role="group" aria-label="Basic example">
+					<a class="list-group-item list-group-item-action border-info text-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyMHdaM1BjZ1MwbWxva2lOY290NElwanN4b2JV/view?usp=sharing" target="_blank">CD Projekt Red</a>
-				<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyNWw0UDFzT0ZTeVU/view?usp=sharing" target="_blank">Manager</a>
+				</ul>
-				<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyaFBhcXBEaGp6YWc/view?usp=sharing" target="_blank">Contractor</a>
-				<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyM0YtTWcxQzk0dEE/view?usp=sharing" target="_blank">Teacher</a>
-				<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyX2owd0xURjh3RlE/view?usp=sharing" target="_blank">Principle</a>
-				<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyMHdaM1BjZ1MwbWxva2lOY290NElwanN4b2JV/view?usp=sharing" target="_blank">CD Projekt Red</a>
 			</div>
+			<div class="d-none d-md-inline-block pt-1">
+				<a class="btn btn-outline-primary" href="https://docs.google.com/document/d/1xP6HASPerXKMJM_x6-PhHVvoYgq-Hym5IRO7g47EX8o/edit?usp=sharing" target="_blank">Resume</a>
+				<div class="ml-3 btn-group" role="group" aria-label="Basic example">
+					<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyNWw0UDFzT0ZTeVU/view?usp=sharing" target="_blank">Manager</a>
+					<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyaFBhcXBEaGp6YWc/view?usp=sharing" target="_blank">Contractor</a>
+					<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyM0YtTWcxQzk0dEE/view?usp=sharing" target="_blank">Teacher</a>
+					<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyX2owd0xURjh3RlE/view?usp=sharing" target="_blank">Principle</a>
+					<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyMHdaM1BjZ1MwbWxva2lOY290NElwanN4b2JV/view?usp=sharing" target="_blank">CD Projekt Red</a>
+				</div>
+			</div>
+		</div>
+		<div class="p-4">
+			<h3>Projects & Repositories</h3>
+			<mat-list dense>
+				<ng-container *ngFor="let p of projectsService.all; let first = first">
+					<mat-divider *ngIf="!first"></mat-divider>
+					<mat-list-item>
+						<img *ngIf="p.avatar_url" mat-list-avatar [src]="p.avatar_url">
+						<img *ngIf="!p.avatar_url" mat-list-avatar src="/assets/img/git.png">
+						<a mat-line [href]="p.web_url" target="_blank">{{p.name}}</a>
+						<div mat-line>{{p.description}}</div>
+					</mat-list-item>
+				</ng-container>
+			</mat-list>
 		</div>
 		<div class="p-4 overflow-hidden">
 			<h3>Contact</h3>

src/app/views/home/home.component.ts

@@ -1,5 +1,6 @@
 import {AfterViewInit, Component, ViewChild} from '@angular/core';
 import {ConsoleComponent} from '../../components/console/console.component';
+import {ProjectsService} from '../../services/projects.service';
 import {QuoteService} from '../../services/quote.service';
 import {sleep} from '../../misc/utils';
 
@@ -10,7 +11,7 @@ import {sleep} from '../../misc/utils';
 export class HomeComponent implements AfterViewInit {
 	@ViewChild(ConsoleComponent) console!: ConsoleComponent;
 
-	constructor(private quotes: QuoteService) { }
+	constructor(public projectsService: ProjectsService, private quotes: QuoteService) { }
 
 	ngAfterViewInit() { this.animateConsole(); }