.gitignore

@@ -4,7 +4,6 @@
 /dist
 /tmp
 /out-tsc
-/.angular
 # Only exists if Bazel was run
 /bazel-out
 
@@ -33,7 +32,6 @@ speed-measure-plugin*.json
 .history/*
 
 # misc
-/.angular/cache
 /.sass-cache
 /.scss-cache
 /connect.lock

.gitlab-ci.yml

@@ -1,11 +1,11 @@
 stages:
   - build
   - deploy
-  - test
 
 develop-build-job:
   stage: build
   tags:
+    - build
     - node
   script:
     - echo "Install dependencies..."
@@ -17,6 +17,7 @@ develop-build-job:
 master-build-job:
   stage: build
   tags:
+    - build
     - node
   script:
     - echo "Install dependencies..."
@@ -31,7 +32,9 @@ master-build-job:
 deploy-job:
   stage: deploy    
   tags:
+    - deploy
     - node
+  when: manual
   environment:
     name: Production
     url: "$Live_Server_IP"
@@ -44,16 +47,7 @@ deploy-job:
   - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" >> ~/.ssh/config'
   script:
     - tar zcf ../inkletblot-com.tar.gz ./dist
-    - scp -o 'ProxyJump "$Live_Server_User"@"$Live_Server_IP"' -o StrictHostKeyChecking=no ../inkletblot-com.tar.gz "$Live_Server_User"@"$Live_Server_Target":/var/www/html
+    - scp -P "$Live_Server_Access_Port" -o StrictHostKeyChecking=no ../inkletblot-com.tar.gz "$Live_Server_User"@"$Live_Server_IP":/var/www/html
-    - ssh -J "$Live_Server_User"@"$Live_Server_IP" "$Live_Server_User"@"$Live_Server_Target" "rm -Rf /var/www/html/inkletblot-com_old && mv /var/www/html/inkletblot-com /var/www/html/inkletblot-com_old && mkdir /var/www/html/inkletblot-com_build && mkdir /var/www/html/inkletblot-com && tar zxf /var/www/html/inkletblot-com.tar.gz -C /var/www/html/inkletblot-com_build && mv /var/www/html/inkletblot-com_build/dist/inkletblot-com/* /var/www/html/inkletblot-com && rm -Rf /var/www/html/inkletblot-com_build && chmod -R 755 /var/www/html/inkletblot-com && exit"
+    - ssh -p "$Live_Server_Access_Port" "$Live_Server_User"@"$Live_Server_IP" "rm -Rf /var/www/html/inkletblot-com_old && mv /var/www/html/inkletblot-com /var/www/html/inkletblot-com_old && mkdir /var/www/html/inkletblot-com_build && mkdir /var/www/html/inkletblot-com && tar zxf /var/www/html/inkletblot-com.tar.gz -C /var/www/html/inkletblot-com_build && mv /var/www/html/inkletblot-com_build/dist/inkletblot-com/* /var/www/html/inkletblot-com && rm -Rf /var/www/html/inkletblot-com_build && chmod -R 755 /var/www/html/inkletblot-com && exit"
   only:
     - master
-
-test:
-  stage: test
-  tags:
-    - node
-  script: 
-    - echo "I don't care about standard merges into dev as a build has to happen for a merge into master, I don't think there is a way to specify that so I need this here."
-  only:
-    - merge_requests

angular.json

@@ -22,6 +22,7 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
+            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets"
@@ -29,13 +30,7 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": [],
+            "scripts": []
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -65,8 +60,7 @@
                 }
               ]
             }
-          },
+          }
-          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -102,6 +96,19 @@
             "scripts": []
           }
         },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {

package.json

@@ -11,28 +11,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~13.1.1",
+    "@angular/animations": "~11.2.7",
-    "@angular/common": "~13.1.1",
+    "@angular/common": "~11.2.7",
-    "@angular/compiler": "~13.1.1",
+    "@angular/compiler": "~11.2.7",
-    "@angular/core": "~13.1.1",
+    "@angular/core": "~11.2.7",
-    "@angular/forms": "~13.1.1",
+    "@angular/forms": "~11.2.7",
-    "@angular/platform-browser": "~13.1.1",
+    "@angular/platform-browser": "~11.2.7",
-    "@angular/platform-browser-dynamic": "~13.1.1",
+    "@angular/platform-browser-dynamic": "~11.2.7",
-    "@angular/router": "~13.1.1",
+    "@angular/router": "~11.2.7",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^13.1.2",
+    "@angular-devkit/build-angular": "~0.1102.6",
-    "@angular/cli": "~13.1.2",
+    "@angular/cli": "~11.2.6",
-    "@angular/compiler-cli": "~13.1.1",
+    "@angular/compiler-cli": "~11.2.7",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
-    "jasmine-core": "~3.7.0",
+    "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.3.9",
+    "karma": "~6.1.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
@@ -40,6 +40,6 @@
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.5.4"
+    "typescript": "~4.1.5"
   }
 }

src/app/app-routing.module.ts

@@ -2,18 +2,16 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { LinksComponent } from './links/links.component';
-import { Page404Component } from './page404/page404.component';
 import { PetComponent } from './pet/pet.component';
 import { ProjectsComponent } from './projects/projects.component';
 import { Pages } from './shared/models/pages.model';
 
 const routes: Routes = [
   { path: Pages.HOME, component: HomeComponent },
-  { path: Pages.PROJECTS, loadChildren: () => import('./projects/projects.module').then((m) => m.ProjectsModule) },
+  { path: Pages.PROJECTS, component: ProjectsComponent },
-  // { path: AppRoutes.CORE, loadChildren: () => import('./galler/gallery.module').then((m) => m.GalleryModule) }, // for future use maybe
+  // { path: AppRoutes.CORE, loadChildren: () => import('./galler/gallery.module').then((m) => m.GalleryModule) }, // for future use
   { path: Pages.LINKS, component: LinksComponent },
   { path: Pages.PET, component: PetComponent },
-  { path: Pages.PAGE_404, component: Page404Component },
   { path: '**', redirectTo: Pages.HOME, pathMatch: 'full' }];
 
 @NgModule({

src/app/app.component.html

@@ -1,8 +1,11 @@
-<app-nav></app-nav>
+<div class="page-fixed-width">
-<div class="page-fixed">
+  <app-header></app-header>
-  <div class="no-scroll-bar">
+
-    <app-header></app-header>
+  <app-nav></app-nav>
+
+  <div class="content no-scroll-bar">
     <router-outlet></router-outlet>
-    <app-footer></app-footer>
   </div>
+
+  <app-footer></app-footer>
 </div>

src/app/app.component.scss

@@ -3,35 +3,33 @@
 :host {
     height: 100%;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    justify-content: center;
     align-items: center;
-    overflow: hidden;
+    overflow-y: auto;
 }
 
-.page-fixed {
+.page-fixed-width {
     width: 1000px;
-    height: 100%;
     display: flex;
-    align-items: center;
-    justify-content: center;
     flex-direction: column;
-    background-color: colors.$inklets-color-grey;
+    flex-grow: 1;
+    overflow-y: auto;
+    border-left: colors.$inklets-color-fg 2px dashed;
+    border-right: colors.$inklets-color-fg 2px dashed;
+}
+
+.content {
+    flex-grow: 1;
+    overflow-y: auto;
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
 .no-scroll-bar::-webkit-scrollbar {
     display: none;
-    overflow: auto;
-    width: 100%;
-    height: 100%;
 }
 
 /* Hide scrollbar for IE, Edge and Firefox */
 .no-scroll-bar {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
-    overflow: auto;
-    width: 100%;
-    height: 100%;
 }

src/app/app.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -10,9 +9,8 @@ import { FooterComponent } from './footer/footer.component';
 import { SharedModule } from './shared/shared.module';
 import { HomeComponent } from './home/home.component';
 import { LinksComponent } from './links/links.component';
+import { ProjectsComponent } from './projects/projects.component';
 import { PetComponent } from './pet/pet.component';
-import { HttpClientModule } from '@angular/common/http';
-import { Page404Component } from './page404/page404.component';
 
 @NgModule({
   declarations: [
@@ -22,15 +20,13 @@ import { Page404Component } from './page404/page404.component';
     FooterComponent,
     HomeComponent,
     LinksComponent,
-    PetComponent,
+    ProjectsComponent,
-    Page404Component
+    PetComponent
   ],
   imports: [
     SharedModule,
     BrowserModule,
-    BrowserAnimationsModule,
+    AppRoutingModule
-    AppRoutingModule,
-    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/header/header.component.scss

@@ -1,5 +1,6 @@
 @use 'src/app/shared/styles/_variables.color' as colors;
 
 :host {
-    padding: 0 20px 0 20px;
+    padding: 0 40px 0 40px;
+    margin: 10px 0 10px 0;
 }

src/app/home/home.component.html

@@ -1,16 +1,56 @@
-<div class="bio">
+<p>home works!</p>
-    <div class="top">
+<p>home works!</p>
-        <img class="headshot" src="../../assets/head.jpg" alt="A headshot of Solomon Laing">
+<p>home works!</p>
-        <div class="text">
+<p>home works!</p>
-            <h1>Inkletblot
+<p>home works!</p>
-                <a href="https://www.linkedin.com/in/inkletblot/" target="_blank"><img class="contact-icon" src="../../assets/linkedin.png"></a>
+<p>home works!</p>
-                <a href="mailto:solomonlaing@pm.me"><img class="contact-icon" src="../../assets/envelope.png"></a>
+<p>home works!</p>
-            </h1>
+<p>home works!</p>
-            <p>My name is Solomon Laing. I'm a twenty something year old uni student and IT professional from Adelaide, Australia. I'm passionate about Technology and IT, it as been a hobby of mine for most of my life in one way or another and I predict will be for many years to come. Should you wish to know more, I'm sure you'll be able to find some footprint of me online. Regardless of how hard I try to remove it.</p>
+<p>home works!</p>
-        </div>
+<p>home works!</p>
-    </div>
+<p>home works!</p>
-    <p>This website serves as a personal website for myself. A place for me to put my projects, experiments, important links and the such-like. Projects relate to my publically accessable projects. Be it my linux config files, builds of applications, website, or anything else I decide to add. Links, the most important page to me, is where all of my services sit that I host myself.</p>
+<p>home works!</p>
-    <p>On of the projects that you will not find listed on the projects page is my server that I operate from my loungeroom. It hosts this website, nextcloud, a mail server and client, many game servers, my gitlab instance, and many local services which I use at home. Part of this is a small Kubernetes cluster consiting of Odroid-MC1s (by Hardkernel) which run the very simple api for this site and the slightly more complicated api for my forum.</p>
+<p>home works!</p>
-    <p>This site is a simple testement to my passion for technology, it is not supposed to be particularly eye-catching or engaging. I expect that few will ever see it. But if you are one of the few, 'Hello and Welcome'.</p>
+<p>home works!</p>
-    <div class="attributions">Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> and <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
+<p>home works!</p>
-</div>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>

src/app/home/home.component.scss

@@ -6,51 +6,5 @@
     flex-grow: 1;
     overflow-y: auto;
     padding: 0 20px 0 20px;
-}
+    margin: 0 140px 10px 140px;
-
-.bio {
-    text-align: justify;
-
-    .top {
-        display: flex;
-        flex-direction: row;
-
-    
-        .headshot {
-            width: 200px;
-            height: 200px;
-            border: colors.$inklets-color-red-light 5px solid;
-            border-radius: 100px;
-        }
-    
-        .text {
-            margin-left: 30px;
-
-            h1 {
-                border-bottom: colors.$inklets-color-red-light 2px dashed;
-
-                img {
-                    width: 30px;
-                    height: 30px;
-                    margin-left: 10px;
-                }
-            }
-
-            p{
-                padding-bottom: 0;
-                margin-bottom: 0;
-            }
-        }
-    }
-
-    .attributions {
-        font-size: 8px;
-        > a {
-            text-decoration: none;
-            color: colors.$inklets-color-white;
-        }
-        > a:hover {
-            color: colors.$inklets-color-red-light;
-        }
-    }
 }

src/app/links/links.component.scss

@@ -2,6 +2,7 @@
 
 :host {
     padding: 0 20px 0 20px;
+    margin: 0 140px 10px 140px;
     display: flex;
     align-items: center;
     justify-items: center;
@@ -9,7 +10,6 @@
 
 // padding 20, total width 1000, width 700 so 280/2 = margin left and right of 140
 .card-wrapper {
-    padding-top: 20px;
     display: grid;
     grid-template-columns: auto auto auto auto;
     grid-template-rows: auto auto auto auto;
@@ -20,16 +20,15 @@
 }
 
 a {
+    color: colors.$inklets-color-white;
     text-decoration: none;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-items: center;
     margin: 0;
-    color: colors.$inklets-color-white;
+    border: colors.$inklets-color-highlight-bg 2px dashed;
-    background-color: colors.$inklets-color-black;
+    background-color: colors.$inklets-color-fg;
-    border: 2px solid colors.$inklets-color-red-dark;
-    border-radius: 10px;
 
     > * {
         margin: 10px;
@@ -38,5 +37,6 @@ a {
 }
 
 a:hover {
-    border: colors.$inklets-color-red-light 2px solid;
+    background-color: colors.$inklets-color-highlight-fg;
+    color: colors.$inklets-color-black;
   }

src/app/nav/nav.component.html

@@ -1,6 +1,6 @@
 <ul>
-    <li (mouseover)="state[0] = 'bump'" (mouseout)="state[0] = 'norm'"><a [@openClose]="state[0]" routerLink="{{Pages.HOME}}" routerLinkActive="activeRoute">{{Pages.HOME}}</a></li>
+    <li><a routerLink="{{Pages.HOME}}" routerLinkActive="activeRoute">{{Pages.HOME}}</a></li>
-    <li (mouseover)="state[1] = 'bump'" (mouseout)="state[1] = 'norm'"><a [@openClose]="state[1]"  routerLink="{{Pages.PROJECTS}}" routerLinkActive="activeRoute">{{Pages.PROJECTS}}</a></li>
+    <li><a routerLink="{{Pages.PROJECTS}}" routerLinkActive="activeRoute">{{Pages.PROJECTS}}</a></li>
     <!-- <li><a routerLink="{{Pages.GALLERY}}" routerLinkActive="activeRoute">{{Pages.GALLERY}}</a></li> -->
-    <li (mouseover)="state[2] = 'bump'" (mouseout)="state[2] = 'norm'"><a [@openClose]="state[2]"  routerLink="{{Pages.LINKS}}" routerLinkActive="activeRoute">{{Pages.LINKS}}</a></li>
+    <li><a routerLink="{{Pages.LINKS}}" routerLinkActive="activeRoute">{{Pages.LINKS}}</a></li>
 </ul>

src/app/nav/nav.component.scss

@@ -1,5 +1,10 @@
 @use 'src/app/shared/styles/_variables.color'as colors;
 
+:host {
+  padding: 0 90px 0 90px;
+  margin: 10px 0 60px 0;
+}
+
 ul {
   list-style-type: none;
   margin: 0;
@@ -8,38 +13,23 @@ ul {
 }
 
 li {
-  display: flex;
+  float: left;
-  align-items: center;
+  background-color: colors.$inklets-color-fg;
-  justify-content: center;
-  margin: 25px;
-  width: 120px;
-  height: 120px;
 }
 
 li a {
-  border-radius: 50px;
-  width: 100px;
-  height: 100px;
-  line-height: 100px;
   color: colors.$inklets-color-white;
-  background-color: colors.$inklets-color-red-dark;
   display: block;
   text-align: center;
+  padding: 14px 16px;
   text-decoration: none;
 }
 
-li .activeRoute {
+.activeRoute {
-  background-color: colors.$inklets-color-red-light;
+  background-color: colors.$inklets-color-highlight-bg;
-  color: colors.$inklets-color-black;
 }
 
-// li a:hover {
+li a:hover {
-//   background-color: colors.$inklets-color-blue-dark;
+  background-color: colors.$inklets-color-highlight-fg;
-//   color: colors.$inklets-color-white;
+  color: colors.$inklets-color-black;
-// }
+}
-
-
-//  li a:hover.activeRoute {
-//   background-color: colors.$inklets-color-blue-light;
-//   color: colors.$inklets-color-black;
-// }

src/app/nav/nav.component.ts

@@ -1,84 +1,22 @@
-import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
+import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { Pages } from '../shared/models/pages.model';
+import { NavService } from './nav.service';
 
 @Component({
-    selector: 'app-nav',
+  selector: 'app-nav',
-    animations: [
+  templateUrl: './nav.component.html',
-        trigger('openClose', [
+  styleUrls: ['./nav.component.scss']
-            state(
-                'bump',
-                style({
-                    width: '110px',
-                    height: '110px',
-                    'line-height': '110px',
-                    'border-radius': '55px'
-                })
-            ),
-            state(
-                'norm',
-                style({
-                    width: '100px',
-                    height: '100px',
-                    'line-height': '100px',
-                    'border-radius': '50px'
-                })
-            ),
-            transition('norm => bump', [
-                animate(
-                    '0.2s', keyframes([
-                        style({
-                            width: '100px',
-                            height: '100px',
-                            'line-height': '100px',
-                            'border-radius': '50px'
-                        }),
-                        style({
-                            width: '120px',
-                            height: '120px',
-                            'line-height': '120px',
-                            'border-radius': '60px'
-                        }),
-                        style({
-                            width: '110px',
-                            height: '110px',
-                            'line-height': '110px',
-                            'border-radius': '55px'
-                        })
-                    ])
-                )
-            ]),
-            transition('bump => norm', [
-                animate(
-                    '0.1s', keyframes([
-                        style({
-                            width: '110px',
-                            height: '110px',
-                            'line-height': '110px',
-                            'border-radius': '55px'
-                        }),
-                        style({
-                            width: '100px',
-                            height: '100px',
-                            'line-height': '100px',
-                            'border-radius': '50px'
-                        })
-                    ])
-                )
-            ])
-        ])
-    ],
-    templateUrl: './nav.component.html',
-    styleUrls: ['./nav.component.scss']
 })
 export class NavComponent implements OnInit {
 
-    Pages = Pages;
+  Pages = Pages;
-    state: string[] = ['norm', 'norm', 'norm'];
 
-    constructor() { }
+  constructor() { }
 
-    ngOnInit(): void {
+  ngOnInit(): void {
-    }
+  }
 
 }

src/app/page404/page404.component.html

@@ -1,2 +0,0 @@
-<h1>Page Not Found?</h1>
-<h3>Sorry.</h3>

src/app/page404/page404.component.scss

@@ -1,5 +0,0 @@
-:host {
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-}

src/app/page404/page404.component.spec.ts

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

src/app/page404/page404.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-page404',
-  templateUrl: './page404.component.html',
-  styleUrls: ['./page404.component.scss']
-})
-export class Page404Component implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/projects/project-card/project-card.component.html

@@ -1,4 +0,0 @@
-<a routerLink="{{project.slug}}">
-    {{project.title + " - " + project.date}}
-    <span class="right">{{project.category}}</span>
-</a>

src/app/projects/project-card/project-card.component.scss

@@ -1,24 +0,0 @@
-@use 'src/app/shared/styles/_variables.color' as colors;
-
-:host {
-    flex-direction: column;
-    display: flex;
-    margin-bottom: 20px;
-
-    a {
-        color: colors.$inklets-color-white;
-        background-color: colors.$inklets-color-black;
-        border: 2px solid colors.$inklets-color-red-dark;
-        text-decoration: none;
-        padding: 15px 20px 15px 20px;
-        border-radius: 10px;
-    }
-
-    a:hover {
-        border: 2px solid colors.$inklets-color-red-light;
-    }
-
-    .right {
-        float: right;
-    }
-}

src/app/projects/project-card/project-card.component.spec.ts

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

src/app/projects/project-card/project-card.component.ts

@@ -1,19 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Project } from 'src/app/shared/models/project.model';
-
-@Component({
-  selector: 'app-project-card',
-  templateUrl: './project-card.component.html',
-  styleUrls: ['./project-card.component.scss']
-})
-export class ProjectCardComponent implements OnInit {
-
-  @Input()
-  project: Project;
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/projects/project/project.component.html

@@ -1,3 +0,0 @@
-<a routerLink="..">&lt; back</a>
-<span [innerHTML]="project.content"></span>
-<a routerLink="..">&lt; back</a>

src/app/projects/project/project.component.scss

@@ -1,9 +0,0 @@
-@use 'src/app/shared/styles/_variables.color' as colors;
-
-:host {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    overflow-y: auto;
-    padding: 0 40px 0 40px;
-}

src/app/projects/project/project.component.spec.ts

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

src/app/projects/project/project.component.ts

@@ -1,53 +0,0 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { Project } from 'src/app/shared/models/project.model';
-import { ProjectsService } from '../projects.service';
-
-@Component({
-  selector: 'app-project',
-  templateUrl: './project.component.html',
-  // encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./project.component.scss']
-})
-export class ProjectComponent implements OnInit, OnDestroy {
-  _unsubscribe$: Subject<boolean> = new Subject();
-
-  project: Project = {
-    slug: '',
-    title: '',
-    date: '',
-    category: '',
-    content: '',
-  };
-
-  constructor(
-    private route: ActivatedRoute,
-    private projectsService: ProjectsService
-    ) { }
-
-  ngOnInit(): void {
-    let id: string;
-    this.route.paramMap.subscribe((params) => {
-        id = params.get('id');
-    });
-
-    this.projectsService.getProject(id);
-
-    this.projectsService.currentProject$
-    .pipe(takeUntil(this._unsubscribe$))
-    .subscribe((result: Project) => {
-      if (!!result) {
-        this.project = result;
-      }
-    });
-
-  }
-
-  ngOnDestroy(): void {
-      this._unsubscribe$.next(false);
-      this._unsubscribe$.complete();
-  }
-
-}

src/app/projects/projects-routing.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { ProjectComponent } from './project/project.component';
-import { ProjectsComponent } from './projects.component';
-
-const routes: Routes = [
-    {
-        path: '',
-        component: ProjectsComponent
-    },
-    {
-        path: ':id',
-        component: ProjectComponent
-    }
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule]
-})
-export class ProjectsRoutingModule {}

src/app/projects/projects.component.html

@@ -1,10 +1 @@
-<h2>Projects on git</h2>
+<p>projects works!</p>
-<p>These are my projects as can be found on my <a href="https://gitlab.inkletblot.com/explore">gitlab</a>. Mainly my programming projects that are quality enough for me to be happy for the world to see them. There are more in the works but they are currently private.</p>
-<app-project-card *ngFor="let project of gitlabProjects()" [project]="project">
-</app-project-card>
-
-<h2>Projects of a personal nature</h2>
-<p>This is (will be) a summary of my personal projects be they my homelab, general electronics projects, or anything else.</p>
-
-<app-project-card *ngFor="let project of uncategorizedProjects()" [project]="project">
-</app-project-card>

src/app/projects/projects.component.scss

@@ -1,13 +1,10 @@
-@use 'src/app/shared/styles/_variables.color'as colors;
+@use 'src/app/shared/styles/_variables.color' as colors;
 
 :host {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  flex-grow: 1;
+    flex-grow: 1;
-  overflow-y: auto;
+    overflow-y: auto;
-  padding: 0 20px 0 20px;
+    padding: 0 20px 0 20px;
-
+    margin: 0 140px 10px 140px;
-  h2 {
-      border-bottom: colors.$inklets-color-red-light 2px dashed;
-  }
 }

src/app/projects/projects.component.ts

@@ -1,62 +1,18 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 import { NavService } from '../nav/nav.service';
 import { Pages } from '../shared/models/pages.model';
-import { Project } from '../shared/models/project.model';
-import { ProjectsService } from './projects.service';
 
 @Component({
   selector: 'app-projects',
   templateUrl: './projects.component.html',
   styleUrls: ['./projects.component.scss']
 })
-export class ProjectsComponent implements OnInit, OnDestroy {
+export class ProjectsComponent implements OnInit {
-  _unsubscribe$: Subject<boolean> = new Subject();
 
-  allProjects: Array<Project>;
+  constructor(private navService:NavService) { }
-  private _gitlabProjects: Array<Project> = new Array<Project>();
-  private _uncategorizedProjects: Array<Project> = new Array<Project>();
-
-  constructor(private navService: NavService, private projectsService: ProjectsService) { }
 
   ngOnInit(): void {
     this.navService.setPageTitle(Pages.PROJECTS);
-
-    this.projectsService.allProjects$
-        .pipe(takeUntil(this._unsubscribe$))
-        .subscribe((result: Project[]) => {
-          this.allProjects = result;
-        });
-
-    this.projectsService.getProjects();
-  }
-
-  ngOnDestroy(): void {
-      this._unsubscribe$.next(false);
-      this._unsubscribe$.complete();
-  }
-
-  filterProjects(): void {
-    this._gitlabProjects = [];
-    this._uncategorizedProjects = [];
-    this.allProjects.forEach((project) => {
-      if (project.category === 'gitlab') {
-        this._gitlabProjects.push(project);
-      } else {
-        this._uncategorizedProjects.push(project);
-      }
-    })
-  }
-
-  gitlabProjects(): Array<Project> { 
-    this.filterProjects();
-    return this._gitlabProjects; 
-  }
-  
-  uncategorizedProjects(): Array<Project> { 
-    this.filterProjects();
-    return this._uncategorizedProjects; 
   }
 
 }

src/app/projects/projects.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ProjectCardComponent } from './project-card/project-card.component';
-import { ProjectComponent } from './project/project.component';
-import { ProjectsComponent } from './projects.component';
-import { ProjectsRoutingModule } from './projects-routing.module';
-
-@NgModule({
-  declarations: [ProjectsComponent, ProjectCardComponent, ProjectComponent],
-  imports: [
-    CommonModule,
-    ProjectsRoutingModule
-  ],
-  providers: []
-})
-export class ProjectsModule { }

src/app/projects/projects.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { ProjectsService } from './projects.service';
-
-describe('ProjectsService', () => {
-  let service: ProjectsService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(ProjectsService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/projects/projects.service.ts

@@ -1,110 +0,0 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Router } from '@angular/router';
-import { BehaviorSubject } from 'rxjs';
-import { Project } from '../shared/models/project.model';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ProjectsService {
-
-  private _allProjects = new BehaviorSubject<Array<Project>>([]);
-  readonly allProjects$ = this._allProjects.asObservable();
-
-  private set allProjects(projects: Array<Project>) {
-      this._allProjects.next(projects);
-  }
-  private get allProjects(): Array<Project> {
-      return this._allProjects.getValue();
-  }
-
-  private _currentProject = new BehaviorSubject<Project>(null);
-  readonly currentProject$ = this._currentProject.asObservable();
-
-  private set currentProject(project: Project) {
-      this._currentProject.next(project);
-  }
-  private get currentProject(): Project {
-      return this._currentProject.getValue();
-  }
-
-  private _apiErrored = new BehaviorSubject<boolean>(false);
-  readonly apiErrored$ = this._apiErrored.asObservable();
-
-  private set apiErrored(errored: boolean) {
-      this._apiErrored.next(errored);
-  }
-  private get apiErrored(): boolean {
-      return this._apiErrored.getValue();
-  }
-
-  /**
-   * I am actively avoiding any kind of environment management, this is a very basic site and currently this is the only api call.
-   */
-
-  private PROJECT_API_URL = "https://cms.inkletblot.com"
-
-  constructor(private http: HttpClient, private router: Router) { }
-
-  httpOptions = {
-      headers: new HttpHeaders({
-          'Content-Type': 'text/plain'
-      })
-  };
-
-  getProjects(): void {
-    this.http
-        .get(`${this.PROJECT_API_URL}/posts`, this.httpOptions)
-        .subscribe(
-            (response: Project[]) => {
-                if (response) {
-                    // using text/plain so as to not get the preflight options request
-                    // as such : Project[] does not work as expected and objects must be parsed.
-                    this.allProjects = response;
-                    // filter out different categories here currently only one
-                }
-            },
-            (error) => {
-                this.apiErrored = true;
-            }
-        );
-    }
-
-    getSingleProject(id: string): void {
-      this.http
-          .get(`${this.PROJECT_API_URL}/post/${id}`, this.httpOptions)
-          .subscribe(
-              (response: Project) => {
-                  if (response) {
-                      // using text/plain so as to not get the preflight options request
-                      // as such : Project[] does not work as expected and objects must be parsed.
-                      this.currentProject = response;
-                      // filter out different categories here currently only one
-                  }
-              },
-              (error) => {
-                  this.apiErrored = true;
-                  this.router.navigate(['not-found'])
-              }
-          );
-      }
-
-    /**
-     * This is not very efficient code but I'm not planning on having that many projects and (if this turns into a blog) blog posts
-     * If this does become a general blog, then I will make this a bit more efficient.
-     * @param id slug of project to get
-     */
-    getProject(id: string): void {
-        let found = false;
-        this.allProjects.forEach((project) => {
-            if (project.slug === id) {
-                found = true;
-                this.currentProject = project;
-            }
-        })
-        if (!found) {
-            this.getSingleProject(id)
-        }
-    }
-}

src/app/shared/models/links.model.ts

@@ -16,43 +16,35 @@ export const Links: Array<Link> =
         location: "https://gitlab.inkletblot.com/"
     },
     {
-        name: "streamer",
+        name: "forum",
-        location: "https://streamer.inkletblot.com/"
+        location: "https://www.inkletblot.com/forum/"
     },
     {
-        name: "rancher",
+        name: "books",
-        location: "https://rancher.inkletblot.com/"
+        location: "https://www.inkletblot.com/books/"
     },
     {
-        name: "hab",
+        name: "known",
-        location: "https://hab.inkletblot.com/"
+        location: "https://www.inkletblot.com/known/"
     },
     {
         name: "tng",
-        location: "https://proxy.inkletblot.com/tng/"
+        location: "https://www.inkletblot.com/tng/"
+    },
+    {
+        name: "pico",
+        location: "https://www.inkletblot.com/pico/"
     },
     {
         name: "pasty",
-        location: "https://proxy.inkletblot.com/pasty/"
+        location: "https://www.inkletblot.com/pasty/"
     },
     {
         name: "mail",
-        location: "https://mail.inkletblot.com/"
+        location: "https://www.inkletblot.com/webmail/"
     },
     {
         name: "chk",
         location: "https://www.chkseven.com"
-    },
-    {
-        name: "pve",
-        location: "https://pve.inkletblot.com:8006/"
-    },
-    {
-        name: "bitwarden",
-        location: "https://bw.inkletblot.com/"
-    },
-    {
-        name: "matrix",
-        location: "https://homeserver.inkletblot.com/"
     }
 ]

src/app/shared/models/pages.model.ts

@@ -6,6 +6,5 @@ export enum Pages {
     PROJECTS = 'projects',
     GALLERY = 'gallery',
     LINKS = 'links',
-    PET = 'pet',
+    PET = 'pet'
-    PAGE_404 = 'not-found' 
 }

src/app/shared/models/project.model.ts

@@ -1,7 +0,0 @@
-export interface Project {
-    slug: string,
-    title: string,
-    date: string,
-    category: string,
-    content: string
-}

src/app/shared/styles/_variables.color.scss

@@ -11,11 +11,10 @@
 * e.g. body { background-color: colors.$inklets-color-black; }
 */
 
-$inklets-color-black: #0e0906;
+$inklets-color-black: #0f0f0f;
-$inklets-color-grey: #191511;
+$inklets-color-white: #fafafa;
-$inklets-color-white: #f4efea;
+$inklets-color-bg: #1b262c;
-$inklets-color-red-dark:#6d1d00;
+$inklets-color-fg:#0f4c75;
-$inklets-color-red-light:#e6906c;
+$inklets-color-highlight-bg:#3282b8;
-$inklets-color-blue-dark: #181846;
+$inklets-color-highlight-fg:#bbe1fa;
-$inklets-color-blue-light:#6a9ccc;
+$inklets-color-text-highlight: #009fc1;
-$inklets-color-text-highlight: #f5d870;

src/environments/environment.ts

@@ -13,4 +13,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src/polyfills.ts

@@ -18,6 +18,18 @@
  * BROWSER POLYFILLS
  */
 
+/**
+ * IE11 requires the following for NgClass support on SVG elements
+ */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -45,7 +57,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js';  // Included with Angular CLI.
+import 'zone.js/dist/zone';  // Included with Angular CLI.
 
 
 /***************************************************************************************************

src/styles.scss

@@ -8,101 +8,6 @@ html, body {
 body {
     margin: 0;
     font-family: Roboto, 'Helvetica Neue', sans-serif;
-    background-color: colors.$inklets-color-grey;
+    background-color: colors.$inklets-color-black;
     color: colors.$inklets-color-white;
 }
-
-/*
-
-    Codehilite styles for api content
-
-*/
-pre { line-height: 125%; }
-td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
-span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
-td.linenos .special { color: #979797; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
-span.linenos.special { color: #979797; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
-.codehilite .hll { background-color: #ffffcc }
-.codehilite { background: colors.$inklets-color-black; padding: 5px; }
-.codehilite .c { color: #408080; font-style: italic } /* Comment */
-.codehilite .err { border: 1px solid #FF0000 } /* Error */
-.codehilite .k { color: #008000; font-weight: bold } /* Keyword */
-.codehilite .o { color: #666666 } /* Operator */
-.codehilite .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
-.codehilite .cm { color: #408080; font-style: italic } /* Comment.Multiline */
-.codehilite .cp { color: #BC7A00 } /* Comment.Preproc */
-.codehilite .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
-.codehilite .c1 { color: #408080; font-style: italic } /* Comment.Single */
-.codehilite .cs { color: #408080; font-style: italic } /* Comment.Special */
-.codehilite .gd { color: #A00000 } /* Generic.Deleted */
-.codehilite .ge { font-style: italic } /* Generic.Emph */
-.codehilite .gr { color: #FF0000 } /* Generic.Error */
-.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
-.codehilite .gi { color: #00A000 } /* Generic.Inserted */
-.codehilite .go { color: #888888 } /* Generic.Output */
-.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
-.codehilite .gs { font-weight: bold } /* Generic.Strong */
-.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
-.codehilite .gt { color: #0044DD } /* Generic.Traceback */
-.codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
-.codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
-.codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
-.codehilite .kp { color: #008000 } /* Keyword.Pseudo */
-.codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
-.codehilite .kt { color: #B00040 } /* Keyword.Type */
-.codehilite .m { color: #666666 } /* Literal.Number */
-.codehilite .s { color: #BA2121 } /* Literal.String */
-.codehilite .na { color: #7D9029 } /* Name.Attribute */
-.codehilite .nb { color: #008000 } /* Name.Builtin */
-.codehilite .nc { color: #0000FF; font-weight: bold } /* Name.Class */
-.codehilite .no { color: #880000 } /* Name.Constant */
-.codehilite .nd { color: #AA22FF } /* Name.Decorator */
-.codehilite .ni { color: #999999; font-weight: bold } /* Name.Entity */
-.codehilite .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
-.codehilite .nf { color: #0000FF } /* Name.Function */
-.codehilite .nl { color: #A0A000 } /* Name.Label */
-.codehilite .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
-.codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
-.codehilite .nv { color: #19177C } /* Name.Variable */
-.codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
-.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
-.codehilite .mb { color: #666666 } /* Literal.Number.Bin */
-.codehilite .mf { color: #666666 } /* Literal.Number.Float */
-.codehilite .mh { color: #666666 } /* Literal.Number.Hex */
-.codehilite .mi { color: #666666 } /* Literal.Number.Integer */
-.codehilite .mo { color: #666666 } /* Literal.Number.Oct */
-.codehilite .sa { color: #BA2121 } /* Literal.String.Affix */
-.codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
-.codehilite .sc { color: #BA2121 } /* Literal.String.Char */
-.codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */
-.codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
-.codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
-.codehilite .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
-.codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
-.codehilite .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
-.codehilite .sx { color: #008000 } /* Literal.String.Other */
-.codehilite .sr { color: #BB6688 } /* Literal.String.Regex */
-.codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
-.codehilite .ss { color: #19177C } /* Literal.String.Symbol */
-.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
-.codehilite .fm { color: #0000FF } /* Name.Function.Magic */
-.codehilite .vc { color: #19177C } /* Name.Variable.Class */
-.codehilite .vg { color: #19177C } /* Name.Variable.Global */
-.codehilite .vi { color: #19177C } /* Name.Variable.Instance */
-.codehilite .vm { color: #19177C } /* Name.Variable.Magic */
-.codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */
-
-
-* a {
-    text-decoration: none;
-    color: colors.$inklets-color-text-highlight;
-}
-
-* a:hover {
-    color: colors.$inklets-color-blue-light;
-}
-
-* img {
-    max-width: 400px;
-    max-height: 500px;
-}

src/test.ts

@@ -1,6 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/testing';
+import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
@@ -17,9 +17,7 @@ declare const require: {
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(), {
+  platformBrowserDynamicTesting()
-    teardown: { destroyAfterEach: false }
-}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);