charlyghislaindotcom - intitial commit

angular.json

@@ -23,7 +23,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -72,7 +72,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": [],
             "assets": [
@@ -123,5 +123,10 @@
       }
     }
   },
-  "defaultProject": "charlyghislaindotcom"
+  "defaultProject": "charlyghislaindotcom",
+  "schematics": {
+    "@schematics/angular:component": {
+      "styleext": "scss"
+    }
+  }
 }

src/app/app.component.html

@@ -1,20 +1,5 @@
-<!--The content below is only a placeholder and can be replaced.-->
+<app-routes-header></app-routes-header>
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
 
+<div class="content">
+  <router-outlet></router-outlet>
+</div>

src/app/app.component.scss

@@ -0,0 +1,3 @@
+.content {
+  margin: 2em;
+}

src/app/app.component.ts

@@ -1,10 +1,9 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  title = 'app';
 }

src/app/app.module.ts

@@ -1,16 +1,27 @@
-import { BrowserModule } from '@angular/platform-browser';
+import {BrowserModule} from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
 
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
+import {InfoRouteComponent} from './info-route/info-route.component';
+import {ContactRouteComponent} from './contact-route/contact-route.component';
+import {ServiceRouteComponent} from './service-route/service-route.component';
+import {AppRoutingModule} from './app.routing-module';
+import {RoutesHeaderComponent} from './routes-header/routes-header.component';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    AppRoutingModule,
+  ],
+  declarations: [
+    AppComponent,
+    InfoRouteComponent,
+    ContactRouteComponent,
+    ServiceRouteComponent,
+    RoutesHeaderComponent,
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {
+}

src/app/app.routing-module.ts

@@ -0,0 +1,41 @@
+import {NgModule} from '@angular/core';
+import {Route, RouterModule} from '@angular/router';
+import {InfoRouteComponent} from './info-route/info-route.component';
+import {ContactRouteComponent} from './contact-route/contact-route.component';
+import {ServiceRouteComponent} from './service-route/service-route.component';
+
+export const ROUTES: Route[] = [
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: '/info',
+  },
+  {
+    path: 'info',
+    component: InfoRouteComponent,
+  },
+  {
+    path: 'contact',
+    component: ContactRouteComponent,
+  },
+  {
+    path: 'services',
+    component: ServiceRouteComponent,
+  },
+  {
+    path: '*',
+    redirectTo: '/info',
+  },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(ROUTES),
+  ],
+  exports: [
+    RouterModule,
+  ],
+  providers: [],
+})
+export class AppRoutingModule {
+}

src/app/contact-route/contact-route.component.html

@@ -0,0 +1,29 @@
+<p>
+  You can reach me using the following channels
+</p>
+<ul>
+  <li>
+    <a href="mailto:info@charlyghislain.com">
+      info@charlyghislain.com
+    </a>
+  </li>
+  <li>
+    <a href="tel:+32497275741">
+      +32 497 275741
+    </a>
+  </li>
+</ul>
+<p>
+  Bank information
+</p>
+<ul>
+  <li>
+    <div class="iban">
+      <span class="number">BE47063619553280</span>
+    </div>
+    <div class="bic">
+      <span>BIC Belfius: </span>
+      <span class="number">GKCCBEBB</span>
+    </div>
+  </li>
+</ul>

src/app/contact-route/contact-route.component.scss

@@ -0,0 +1,8 @@
+.number {
+  font-family: monospace;
+}
+
+.bic {
+  font-size: small;
+  opacity: .4;
+}

src/app/contact-route/contact-route.component.spec.ts

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

src/app/contact-route/contact-route.component.ts

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

src/app/info-route/info-route.component.html

@@ -0,0 +1,31 @@
+<p>
+  This is the homepage of Charles Ghislain
+</p>
+<p>
+  I'm a full stack developer familiar with the following technologies
+</p>
+<ul>
+  <li>
+    <a href="https://www.docker.com/">
+      Docker
+    </a>
+  </li>
+  <li>
+    <a href="https://jakarta.ee/">
+      Java/Jakarta EE
+    </a>
+  </li>
+  <li>
+    <a href="https://angular.io/">
+      Angular
+    </a>
+  </li>
+</ul>
+<p>
+  You may find some of my work online under the cghislai nickname
+</p>
+<ul>
+  <li>
+    <a href="https://github.com/cghislai">github</a>
+  </li>
+</ul>

src/app/info-route/info-route.component.spec.ts

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

src/app/info-route/info-route.component.ts

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

src/app/routes-header/routes-header.component.html

@@ -0,0 +1,29 @@
+<header>
+
+  <span class="menu">
+    <a [routerLink]="['/info']"
+       routerLinkActive="active">
+      Info
+    </a>
+
+    <a [routerLink]="['/contact']"
+       routerLinkActive="active">
+      Contact
+    </a>
+
+    <a [routerLink]="['/services']"
+       routerLinkActive="active">
+      Services
+    </a>
+  </span>
+
+  <a class="title"
+     href="https://www.charlyghislain.com">
+    <span class="text">
+      charlyghislain.com
+    </span>
+    <img src="../../assets/favicon.png"
+         class="icon">
+  </a>
+
+</header>

src/app/routes-header/routes-header.component.scss

@@ -0,0 +1,75 @@
+header {
+  background-color: #f8f4cf;
+  font-size: x-large;
+
+  display: flex;
+  align-items: center;
+
+  @media (max-width: 700px) {
+    font-size: large;
+  }
+  @media (max-width: 500px) {
+    font-size: medium;
+
+    .title .text {
+      display: none;
+    }
+  }
+
+  > .title {
+    flex: 0 0 auto;
+    color: black !important;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    margin: 0 1em;
+
+    &:hover {
+      opacity: .7;
+    }
+
+    > .icon {
+      flex: 0 0 1em;
+      margin: 0 .5em;
+      height: 1.5em;
+    }
+    > .text {
+      flex: 0 0 auto;
+      margin: 0 .5em;
+    }
+  }
+
+  > .menu {
+    flex: 1 1 auto;
+    display: inline-flex;
+
+    > a {
+      flex: 0 1 6em;
+      display: inline-block;
+      margin: .5em;
+      padding: .3em;
+      text-decoration: none;
+      color: #854213;
+      border-radius: .5em;
+
+      text-align: center;
+
+      transition: all ease-in .2s;
+
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.8);
+        box-shadow: 0 0 .2em .2em rgba(255, 255, 255, 0.8);
+        filter: brightness(1.1);
+        color: #301807;
+      }
+
+      &.active {
+        color: #d52f1e;
+        pointer-events: none;
+
+        background-color: rgba(255, 255, 255, 1);
+        box-shadow: 0 1em 0 0 rgba(255, 255, 255, 1);
+      }
+    }
+  }
+}

src/app/routes-header/routes-header.component.spec.ts

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

src/app/routes-header/routes-header.component.ts

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

src/app/service-route/service-route.component.html

@@ -0,0 +1,17 @@
+<p>
+  You may be looking for one of these services
+</p>
+
+<ul>
+  <li>
+    <a href="https://app.haleczander.be">
+      Haleczander
+    </a>
+  </li>
+  <li>
+    <a href="https://charlyghislain.com/clicho">
+      Clicho
+    </a>
+  </li>
+</ul>
+

src/app/service-route/service-route.component.spec.ts

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

src/app/service-route/service-route.component.ts

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

src/styles.css

@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */

src/styles.scss

@@ -0,0 +1,31 @@
+@import url('https://fonts.googleapis.com/css?family=Slabo+27px&subset=latin-ext');
+
+body {
+  margin: 0;
+  padding: 0;
+
+  font-family: 'Slabo 27px', serif;
+  font-size: large;
+}
+
+
+ul {
+  list-style: none;
+  padding-left: 1em;
+
+  >li {
+    margin: .3em 0;
+  }
+}
+
+a {
+  color: #854213;
+  transition: all ease-in .2s;
+  text-decoration-line: underline;
+  text-decoration-color: rgba(133, 66, 19, 0.2);
+
+  &:hover {
+    text-decoration-color: rgba(168, 18, 24, 1);
+    color: #a81218;
+  }
+}