Working on first version.

- ready for addition of the backend.
- adding vert.x?

.angular-cli.json

@@ -21,9 +21,11 @@
       "styles": [
         "styles.css",
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
-        "../node_modules/bootstrap/dist/css/bootstrap-theme.min.css"
+        "../node_modules/bootstrap/dist/css/bootstrap-theme.min.css",
+        "../node_modules/font-awesome/css/font-awesome.min.css"
       ],
       "scripts": [
+        "../node_modules/jquery/dist/jquery.min.js",
         "../node_modules/bootstrap/dist/js/bootstrap.min.js"
       ],
       "environmentSource": "environments/environment.ts",

package-lock.json

@@ -1734,6 +1734,11 @@
       "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
       "dev": true
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -3283,6 +3288,11 @@
       "integrity": "sha1-2llSddGuYx3nNqwKfH2Fyfc+9lI=",
       "dev": true
     },
+    "jquery": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.2.1.tgz",
+      "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c="
+    },
     "js-base64": {
       "version": "2.1.9",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.9.tgz",

package.json

@@ -23,6 +23,8 @@
     "@angular/router": "^4.0.0",
     "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",
+    "font-awesome": "^4.7.0",
+    "jquery": "^3.2.1",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"
   },

src/app/app-routing.module.ts

@@ -7,8 +7,8 @@ import { ProjectsComponent } from './components/projects/projects.component';
  
 const appRoutes: Routes = [
 //   { path: 'crisis-center', component: CrisisListComponent },
-  { path: 'home',        component: HomeComponent },
-  { path: 'projects',        component: ProjectsComponent },
+  { path: 'home', component: HomeComponent },
+  { path: 'projects', component: ProjectsComponent },
   { path: '',   redirectTo: '/home', pathMatch: 'full' },
   { path: '**', component: AppComponent }
 ];

src/app/app.component.html

@@ -1 +1,20 @@
-<router-outlet></router-outlet>
+<!--this is bootstrap super container-->
+<div class="container-fluid">
+
+  <!--the top menu... should be always visible, everywhere-->
+  <div class="row">
+    <div class="col-md-12">
+      <div id="topmenu" class="text-center">
+        <!--each item is an icon-->
+        <a routerLink="/home"><i class="fa fa-home fa-2x" aria-hidden="true"></i></a>
+        <a routerLink="/projects"><i class="fa fa-wrench fa-2x" aria-hidden="true"></i></a>
+        <a routerLink="/cv"><i class="fa fa-user fa-2x" aria-hidden="true"></i></a>
+      </div>
+    </div>
+  <!--row-->
+  </div>
+
+  <!--this shows the current route's content-->
+  <router-outlet></router-outlet> 
+  
+</div>

src/app/app.module.ts

@@ -6,12 +6,14 @@ import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { HomeComponent } from './components/home/home.component';
 import { ProjectsComponent } from './components/projects/projects.component';
+import { ProjectComponent } from './components/project/project.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
-    ProjectsComponent
+    ProjectsComponent,
+    ProjectComponent
   ],
   imports: [
     BrowserModule,

src/app/components/home/home.component.html

@@ -1,10 +1,5 @@
-<div class="jumbotron">
-  <h1>Hello, world!</h1>
-  <p>This is the home page of Joachim Nielandt</p>
-</div>
-
 <div class="panel panel-default">
-  <div class="panel-body">
-    <a routerLink="/projects">Projects</a> <a>Photos</a> <a>CV</a>
+  <div class="panel-body text-center pageintro">
+    These pages are a mish-mash of things that I'd like to keep safe. Descriptions and photos of projects, so I don't forget about them. Blog-style recollections of pieces of code, so I don't forget about them. Consider it a notepad of some kind.
   </div>
 </div>

src/app/components/project/project.component.html

@@ -0,0 +1,6 @@
+<h3>
+  <ng-content select=".title"></ng-content>
+</h3>
+<p>
+  <ng-content select=".content"></ng-content>
+</p>

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

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

src/app/components/project/project.component.ts

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

src/app/components/projects/projects.component.html

@@ -1,28 +1,10 @@
 <p>These are the projects I have completed, am working on, got tired of... consider this to be a resume of work and hobbies. And also a little notebook for myself, in case I forget the specifics.</p>
 
-<div class="panel panel-default">
-  <div class="panel-heading">
-    <h3 class="panel-title">Project 1</h3>
+<project>
+  <div class="title">
+    The title of the project :)
   </div>
-  <div class="panel-body">
-    Panel content
+  <div class="content">
+    this is inner content of the project
   </div>
-</div>
-
-<div class="panel panel-default">
-  <div class="panel-heading">
-    <h3 class="panel-title">Project title</h3>
-  </div>
-  <div class="panel-body">
-    Project content
-  </div>
-</div>
-
-<div class="panel panel-default">
-  <div class="panel-heading">
-    <h3 class="panel-title">Project title</h3>
-  </div>
-  <div class="panel-body">
-    Panel content
-  </div>
-</div>
+</project>

src/styles.css

@@ -1 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
+
+
+/*top menu*/
+#topmenu {
+    border-bottom: 1px solid gray;
+    margin-bottom: 15px;
+    padding-bottom: 8px;
+    padding-top: 8px;
+}