:star:rewrite-angular

51 files changed, 1758 insertions, 105 deletions

diff --git a/apps/me/src/app/app-routing.module.ts b/apps/me/src/app/app-routing.module.ts
index d425c6f..c0e43c2 100644
--- a/apps/me/src/app/app-routing.module.ts
+++ b/apps/me/src/app/app-routing.module.ts
@@ -1,7 +1,19 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-const routes: Routes = [];
+import { HomeComponent } from './components/home/home.component';
+import { ContactComponent } from './components/contact/contact.component';
+import { CvComponent } from './components/cv/cv.component';
+import { InterestsComponent } from './components/interests/interests.component';
+
+const routes: Routes = [
+    { path: '', component: HomeComponent, outlet: '', data: { title: 'Home' } },
+    { path: 'contact', component: ContactComponent, outlet: '', data: { title: 'Contact' } },
+    { path: 'cv', component: CvComponent, outlet: '', data: { title: 'CV' } },
+    { path: 'interests', component: InterestsComponent, outlet: '', data: { title: 'Interests' } },
+    // { path: 'cv', component: CVComponent, outlet: '', data: { title: 'CV' } },
+    { path: '**', redirectTo: '', pathMatch: 'full', data: { title: '404' } }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
diff --git a/apps/me/src/app/app.component.html b/apps/me/src/app/app.component.html
index ed457d6..8e33f01 100644
--- a/apps/me/src/app/app.component.html
+++ b/apps/me/src/app/app.component.html
@@ -1,3 +1,10 @@
-<app-navbar></app-navbar>
+<div [@fadeInOut]>
+  <app-nav></app-nav>
 
-<router-outlet></router-outlet>
\ No newline at end of file
+  <router-outlet></router-outlet>
+
+  <app-footer></app-footer>
+  <app-waves></app-waves>
+
+  <!-- <div *ngIf="loading" id="loading-screen"></div> -->
+</div>
\ No newline at end of file
diff --git a/apps/me/src/app/app.component.scss b/apps/me/src/app/app.component.scss
index e69de29..04facf1 100644
--- a/apps/me/src/app/app.component.scss
+++ b/apps/me/src/app/app.component.scss
@@ -0,0 +1,17 @@
+#loading-screen {
+    left: 0 !important;
+    top: 0 !important;
+    z-index: 10000 !important;
+    width: 100% !important;
+    height: 100% !important;
+    position: fixed !important;
+    // background-color: rgba(0,0,0,0.9) !important;
+    background-color: #282931 !important;
+    cursor: pointer !important;
+    visibility: visible !important;
+    transition: visibility 0s, opacity 0.4s linear !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: wait !important;
+}
\ No newline at end of file
diff --git a/apps/me/src/app/app.component.ts b/apps/me/src/app/app.component.ts
index 3a8dd4d..2552784 100644
--- a/apps/me/src/app/app.component.ts
+++ b/apps/me/src/app/app.component.ts
@@ -1,10 +1,80 @@
 import { Component } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { filter } from 'rxjs/operators';
+
+import {
+  Router,
+  ActivatedRoute,
+  Event as RouterEvent,
+  NavigationStart,
+  NavigationEnd,
+  NavigationCancel,
+  NavigationError
+} from '@angular/router';
+
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  animations: [
+    trigger('fadeInOut', [
+      state('void', style({
+        opacity: 0
+      })),
+      transition('void <=> *', animate(1000))
+    ])
+  ]
 })
 export class AppComponent {
   title = 'me';
+  public loading = true;
+
+  constructor(private router: Router,
+              private activatedRoute: ActivatedRoute,
+              private titleService: Title) {
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationEnd)
+    ).subscribe(() => {
+      const rt = this.getChild(this.activatedRoute);
+      rt.data.subscribe(data => {
+        this.titleService.setTitle(data.title + ' | Fuwn');
+      });
+    });
+
+    // router.events.subscribe((event: RouterEvent) => {
+    //   this.navigationInterceptor(event);
+    // });
+  }
+
+  getChild(activatedRoute: ActivatedRoute): any {
+    if (activatedRoute.firstChild) {
+      return this.getChild(activatedRoute.firstChild);
+    } else {
+      return activatedRoute;
+    }
+  }
+
+  // navigationInterceptor(event: RouterEvent): void {
+  //   if (event instanceof NavigationStart) {
+  //     this.loading = true;
+  //   }
+  //   if (event instanceof NavigationEnd) {
+  //     this.loading = false;
+  //   }
+
+  //   if (event instanceof NavigationCancel) {
+  //     this.loading = false;
+  //   }
+  //   if (event instanceof NavigationError) {
+  //     this.loading = false;
+  //   }
+  // }
 }
diff --git a/apps/me/src/app/app.module.ts b/apps/me/src/app/app.module.ts
index df8b354..79a4dc7 100644
--- a/apps/me/src/app/app.module.ts
+++ b/apps/me/src/app/app.module.ts
@@ -1,33 +1,40 @@
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule, Title } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
-import { AngularFireModule } from 'angularfire2';
-import { AngularFirestoreModule } from 'angularfire2/firestore';
-import { AngularFireStorageModule } from 'angularfire2/storage';
-import { AngularFireAuthModule } from 'angularfire2/auth';
-
-import { environment } from '../environments/environment';
+import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { CoreModule } from './core/core.module';
-import { SharedModule } from './shared/shared.module';
+import { HomeComponent } from './components/home/home.component';
+import { ContactComponent } from './components/contact/contact.component';
+import { CvComponent } from './components/cv/cv.component';
+import { FooterComponent } from './shared/footer/footer.component';
+import { WavesComponent } from './shared/waves/waves.component';
+import { HeaderComponent } from './shared/header/header.component';
+import { InterestsComponent } from './components/interests/interests.component';
+import { NavComponent } from './shared/nav/nav.component';
+import { NavRealComponent } from './shared/nav-real/nav-real.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HomeComponent,
+    ContactComponent,
+    CvComponent,
+    FooterComponent,
+    WavesComponent,
+    HeaderComponent,
+    InterestsComponent,
+    NavComponent,
+    NavRealComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    AngularFireModule.initializeApp(environment.firebase),
-    AngularFirestoreModule,
-    AngularFireAuthModule,
-    AngularFireStorageModule,
-    CoreModule,
-    SharedModule
+    HttpClientModule,
+    BrowserAnimationsModule
   ],
-  providers: [],
+  providers: [Title],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/apps/me/src/app/components/contact/contact.component.html b/apps/me/src/app/components/contact/contact.component.html
new file mode 100644
index 0000000..e5451e6
--- /dev/null
+++ b/apps/me/src/app/components/contact/contact.component.html
@@ -0,0 +1,26 @@
+<div id="main-content">
+	<div class="container">
+		<!-- Header -->
+		<div class="row top">
+			<div class="twelve column">
+				<h1>Contact Information</h1>
+        <app-nav-real></app-nav-real>
+			</div>
+		</div>
+		
+		<!-- Contact Information -->
+		<div class="row">
+			<div *ngFor="let item of contactData" class="one-half column">
+				<div class="contact pulled">
+					<h1>{{ item.title }}</h1>
+
+					<ul>
+						<li *ngFor="let subItem of item['nodes']">
+							<a href="{{ subItem.link }}" target="_blank" rel="noopener noreferrer">{{ subItem.title }}</a>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/apps/me/src/app/shared/navbar/navbar.component.scss b/apps/me/src/app/components/contact/contact.component.scss
index e69de29..e69de29 100644
--- a/apps/me/src/app/shared/navbar/navbar.component.scss
+++ b/apps/me/src/app/components/contact/contact.component.scss
diff --git a/apps/me/src/app/components/contact/contact.component.spec.ts b/apps/me/src/app/components/contact/contact.component.spec.ts
new file mode 100644
index 0000000..2f386db
--- /dev/null
+++ b/apps/me/src/app/components/contact/contact.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactComponent } from './contact.component';
+
+describe('ContactComponent', () => {
+  let component: ContactComponent;
+  let fixture: ComponentFixture<ContactComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ContactComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/me/src/app/components/contact/contact.component.ts b/apps/me/src/app/components/contact/contact.component.ts
new file mode 100644
index 0000000..11d5623
--- /dev/null
+++ b/apps/me/src/app/components/contact/contact.component.ts
@@ -0,0 +1,81 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-contact',
+  templateUrl: './contact.component.html',
+  styleUrls: ['./contact.component.scss']
+})
+export class ContactComponent implements OnInit {
+  // public contactData: any = {
+  //   services: [
+  //     { title: 'GitHub',   link: 'https://github.com/fuwn' },
+  //     { title: 'GitLab',   link: 'https://gitlab.com/fuwn' },
+  //   ],
+  //   chat: [
+  //     { title: 'Discord',  link: 'https://discord.com/users/fun#1337' },
+  //     { title: 'Twitter',  link: 'https://twitter.com/xFuwn' },
+  //     { title: 'PGP',      link: 'http://keys.gnupg.net/pks/lookup?op=get&search=0x36EA40253575A0FA' },
+  //     { title: 'Matrix',   link: 'https://matrix.to/#/@fuwn:matrix.org' },
+  //     { title: 'Freenode', link: 'https://strelizia.cc/M9g7uNQpQhuFc7zJoUPU8PVNU219Ydza.txt' },
+  //     { title: 'QuakeNet', link: 'https://strelizia.cc/wmo0FE5rO383lVSGW6gwECUod3PnLJGj.txt' }
+  //   ]
+  // };
+
+  public contactData: any = [
+    {
+      id: 0,
+      title: 'Git',
+      description: '',
+      nodes: [
+        {
+          id: 0_0,
+          title: 'GitHub',
+          link: 'https://github.com/fuwn'
+        },
+        {
+          id: 0_1,
+          title: 'GitLab',
+          link: 'https://gitlab.com/fuwn'
+        }
+      ]
+    },
+    {
+      id: 1,
+      title: 'Chat',
+      description: '',
+      nodes: [
+        {
+          id: 1_0,
+          title: 'Matrix',
+          link: 'https://matrix.to/#/@fuwn:matrix.org'
+        },
+        {
+          id: 1_1,
+          title: 'Freenode',
+          link: 'https://strelizia.cc/M9g7uNQpQhuFc7zJoUPU8PVNU219Ydza.txt'
+        },
+        {
+          id: 1_2,
+          title: 'QuakeNet',
+          link: 'https://strelizia.cc/wmo0FE5rO383lVSGW6gwECUod3PnLJGj.txt'
+        }
+      ]
+    },
+    {
+      id: 2,
+      title: 'Resources',
+      description: '',
+      nodes: [
+        {
+          id: 2_0,
+          title: 'PGP Key',
+          link: 'http://keys.gnupg.net/pks/lookup?op=get&search=0x36EA40253575A0FA'
+        }
+      ]
+    }
+  ];
+
+  constructor() { }
+
+  ngOnInit(): void { }
+}
diff --git a/apps/me/src/app/components/cv/cv.component.html b/apps/me/src/app/components/cv/cv.component.html
new file mode 100644
index 0000000..f3ca21a
--- /dev/null
+++ b/apps/me/src/app/components/cv/cv.component.html
@@ -0,0 +1,55 @@
+<div id="main-content">
+	<div class="container">
+		<!-- Header -->
+		<div class="row top">
+			<div class="twelve column">
+				<h1>Cirriculum Vitae</h1>
+        <app-nav-real></app-nav-real>
+				<h2>Hint: Click on an item for more information.</h2>
+			</div>
+		</div>
+		
+		<!-- CV Information -->
+		<!-- <button (click)="dumpOpenItems()">Dump <code>openItems</code> State.</button> -->
+
+		<div class="row">
+			<div *ngFor="let item of cvData" class="one-half column">
+				<div class="cv pulled">
+					<h1>{{ item.title }}</h1>
+
+					<ul>
+						<li *ngFor="let subItem of item['nodes']">
+							<!-- Check if item has children. -->
+							<!-- If -->
+							<div *ngIf="subItem['nodes']; else wo_sub">
+								<a routerLink="./"
+									(click)="openItems[subItem.id] = !openItems[subItem.id]">
+									{{ subItem.title }}
+								</a>
+							</div>
+
+							<!-- Else -->
+							<ng-template #wo_sub><p>{{ subItem.title }}</p></ng-template>
+
+							<!-- Render child's children -->
+							<ul *ngIf="openItems[subItem.id]">
+								<li *ngFor="let subsubItem of subItem['nodes']">
+									<!-- If -->
+									<div *ngIf="subsubItem.link; else without_link">
+										<a href="{{ subsubItem.link }}"
+											target="_blank" rel="noopener noreferrer">{{ subsubItem.title }}</a>
+									</div>
+
+									<!-- Else -->
+									<ng-template #without_link>
+										<p>{{ subsubItem.title }}</p>
+									</ng-template>
+								</li>
+							</ul>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/apps/me/src/app/components/cv/cv.component.scss b/apps/me/src/app/components/cv/cv.component.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/apps/me/src/app/components/cv/cv.component.scss
diff --git a/apps/me/src/app/shared/navbar/navbar.component.spec.ts b/apps/me/src/app/components/cv/cv.component.spec.ts
index f8ccd6f..b2e13dc 100644
--- a/apps/me/src/app/shared/navbar/navbar.component.spec.ts
+++ b/apps/me/src/app/components/cv/cv.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NavbarComponent } from './navbar.component';
+import { CvComponent } from './cv.component';
 
-describe('NavbarComponent', () => {
-  let component: NavbarComponent;
-  let fixture: ComponentFixture<NavbarComponent>;
+describe('CvComponent', () => {
+  let component: CvComponent;
+  let fixture: ComponentFixture<CvComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ NavbarComponent ]
+      declarations: [ CvComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(NavbarComponent);
+    fixture = TestBed.createComponent(CvComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/apps/me/src/app/components/cv/cv.component.ts b/apps/me/src/app/components/cv/cv.component.ts
new file mode 100644
index 0000000..747ef26
--- /dev/null
+++ b/apps/me/src/app/components/cv/cv.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+
+import { CvDataService } from '../../shared/cv-data.service';
+
+@Component({
+  selector: 'app-cv',
+  templateUrl: './cv.component.html',
+  styleUrls: ['./cv.component.scss']
+})
+export class CvComponent implements OnInit {
+  public openItems: {
+    [key: number]: boolean
+  } = { };
+
+  public cvData: any; // []
+
+  constructor(private cvDataService: CvDataService) {
+    this.cvData = cvDataService.cvData;
+  }
+
+  ngOnInit(): void { }
+
+  dumpOpenItems(): void {
+    console.log(this.openItems);
+  }
+}
diff --git a/apps/me/src/app/components/home/home.component.html b/apps/me/src/app/components/home/home.component.html
new file mode 100644
index 0000000..4dd8505
--- /dev/null
+++ b/apps/me/src/app/components/home/home.component.html
@@ -0,0 +1,58 @@
+<div id="main-content">
+  <div class="container">
+    <!-- Header -->
+    <div class="row top">
+      <div class="twelve column">
+        <!-- <div class="logo">​</div> -->
+        <h1>Fuwn</h1>
+        <app-nav-real></app-nav-real>
+      </div>
+    </div>
+    
+    <!-- Projects -->
+    <div class="row">
+      <div class="one-half column">
+        <div class="projects pulled">
+          <h1>Recent Projects</h1>
+
+          <ul>
+            <li *ngFor="let project of projectData">
+              <a href="{{ project.link }}"
+                target="_blank" rel="noopener noreferrer">{{ project.title }}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- Posts -->
+      <div class="one-half column">
+        <div class="posts pulled">
+          <h1>Recent Posts (<a href="https://dev.to"
+            target="_blank" rel="noopener noreferrer">DEV</a>)</h1>
+
+          <ul>
+            <!-- If -->
+            <div *ngIf="testArticles(); else no_projects">
+              <li *ngFor="let article of articles">
+                <a href="{{ article.canonical_url }}"
+                  target="_blank" rel="noopener noreferrer">
+                  <!-- <ng-template [ngIf]="articles.indexOf(article) === 0">
+                    New! <img src="https://s3.amazonaws.com/jebbles-codepen/icon.png" height="16px">
+                  </ng-template> -->
+                  {{ article.title }}
+                </a>
+              </li>
+            </div>
+
+            <!-- Else -->
+            <ng-template #no_projects>
+              <li>
+                <a href="https://dev.to/{{ username }}">No posts available. :(</a>
+              </li>
+            </ng-template>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/apps/me/src/app/components/home/home.component.scss b/apps/me/src/app/components/home/home.component.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/apps/me/src/app/components/home/home.component.scss
diff --git a/apps/me/src/app/components/home/home.component.spec.ts b/apps/me/src/app/components/home/home.component.spec.ts
new file mode 100644
index 0000000..2c5a172
--- /dev/null
+++ b/apps/me/src/app/components/home/home.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/me/src/app/components/home/home.component.ts b/apps/me/src/app/components/home/home.component.ts
new file mode 100644
index 0000000..148b309
--- /dev/null
+++ b/apps/me/src/app/components/home/home.component.ts
@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+  public username = 'fuwn'; // namanvyas
+  public tempUsername = 'fuwn';
+
+  public profile: any = [];
+  public articles: any = [];
+
+  public repositories: any = [];
+
+  public projectData: any = [
+    { title: 'Chan - A simple "chan"-like board written in Rust.', link: 'https://github.com/fuwn/chan' },
+    { title: 'Wisp - Wisp, your all-in-one Discord companion.', link: 'https://github.com/wispgg' }
+    // { title: '', link: '' },
+  ];
+
+  constructor(private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.getArticles();
+    // this.getRepositories();
+  }
+
+  // DEV
+  public getArticles(): void {
+    const url = `https://dev.to/api/articles?username=${this.username}`;
+    this.http.get(url).subscribe((response) => {
+      this.articles = response;
+    });
+  }
+
+  public getProfile(): void {
+    const url = `https://dev.to/api/users/by_username?url=${this.username}`;
+    this.http.get(url).subscribe((response) => {
+      this.profile = response;
+    });
+  }
+
+  public testArticles(): boolean {
+    if (this.articles.length < 1 || this.articles === undefined) {
+      return false;
+    }
+    return true;
+  }
+
+  // GitHub
+  public getRepositories(): void {
+    const url = `https://api.github.com/users/${this.tempUsername}/repos?per_page=1000`;
+    this.http.get(url).subscribe((response) => {
+      this.repositories = response as [];
+    });
+  }
+}
diff --git a/apps/me/src/app/components/interests/interests.component.html b/apps/me/src/app/components/interests/interests.component.html
new file mode 100644
index 0000000..57ad413
--- /dev/null
+++ b/apps/me/src/app/components/interests/interests.component.html
@@ -0,0 +1,37 @@
+<div id="main-content">
+	<div class="container">
+		<!-- Header -->
+		<div class="row top">
+			<div class="twelve column">
+				<h1>Interests</h1>
+        <app-nav-real></app-nav-real>
+				<h2>A few languages and frameworks that I think are cool and
+					might pick up in the future
+				</h2>
+			</div>
+		</div>
+		
+		<!-- Interests -->
+		<div class="row">
+			<div *ngFor="let item of interests" class="one-half column">
+				<div class="contact pulled">
+					<h1>{{ item.title }}</h1>
+
+					<ul>
+						<li *ngFor="let subItem of item['nodes']">
+							<p>
+								<a href="{{ subItem.link }}"
+									target="_blank" rel="noopener noreferrer">{{ subItem.title }}</a>
+
+								<ng-template [ngIf]="subItem.language_link"> | </ng-template>
+
+								<a href="{{ subItem.language_link }}"
+									target="_blank" rel="noopener noreferrer">{{ subItem.language }}</a>
+							</p>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/apps/me/src/app/components/interests/interests.component.scss b/apps/me/src/app/components/interests/interests.component.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/apps/me/src/app/components/interests/interests.component.scss
diff --git a/apps/me/src/app/components/interests/interests.component.spec.ts b/apps/me/src/app/components/interests/interests.component.spec.ts
new file mode 100644
index 0000000..cab8918
--- /dev/null
+++ b/apps/me/src/app/components/interests/interests.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InterestsComponent } from './interests.component';
+
+describe('InterestsComponent', () => {
+  let component: InterestsComponent;
+  let fixture: ComponentFixture<InterestsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ InterestsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InterestsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/me/src/app/components/interests/interests.component.ts b/apps/me/src/app/components/interests/interests.component.ts
new file mode 100644
index 0000000..e5c761c
--- /dev/null
+++ b/apps/me/src/app/components/interests/interests.component.ts
@@ -0,0 +1,115 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-interests',
+  templateUrl: './interests.component.html',
+  styleUrls: ['./interests.component.scss']
+})
+export class InterestsComponent implements OnInit {
+  public interests: any = [
+    {
+      id: 0,
+      title: 'Languages',
+      description: '',
+      nodes: [
+        {
+          id: 0_0,
+          title: 'PureScript',
+          link: 'https://www.purescript.org/'
+        },
+        {
+          id: 0_1,
+          title: 'Crystal',
+          link: 'https://crystal-lang.org/'
+        },
+        {
+          id: 0_2,
+          title: 'Haskell',
+          link: 'https://haskell.org/'
+        },
+        {
+          id: 0_3,
+          title: 'Cython',
+          link: 'https://cython.org/'
+        },
+        {
+          id: 0_4,
+          title: 'Julia',
+          link: 'https://julialang.org/'
+        },
+        {
+          id: 0_5,
+          title: 'Dart',
+          link: 'https://dart.dev/'
+        },
+        {
+          id: 0_6,
+          title: 'Ruby',
+          link: 'http://ruby-lang.org/en'
+        },
+        {
+          id: 0_7,
+          title: 'Nim',
+          link: 'https://nim-lang.org/'
+        },
+        {
+          id: 0_8,
+          title: 'Go',
+          link: 'https://golang.org/'
+        },
+        {
+          id: 0_9,
+          title: 'V',
+          link: 'https://vlang.io'
+        }
+      ]
+    },
+    {
+      id: 1,
+      title: 'Frameworks',
+      nodes: [
+        {
+          id: 1_0,
+          title: 'Amber',
+          link: 'https://amberframework.org/',
+          language: 'Crystal',
+          language_link: 'https://crystal-lang.org/'
+        },
+        {
+          id: 1_1,
+          title: 'Flutter',
+          link: 'https://flutter.dev/',
+          language: 'Dart',
+          language_link: 'https://dart.dev/'
+        },
+        {
+          id: 1_2,
+          title: 'Rails',
+          link: 'https://rubyonrails.org/',
+          language: 'Ruby',
+          language_link: 'http://ruby-lang.org/en'
+        }
+      ]
+    },
+    {
+      id: 2,
+      title: 'Tools',
+      nodes: [
+        {
+          id: 2_0,
+          title: 'Travis CI',
+          link: 'https://travis-ci.org/'
+        },
+        {
+          id: 2_1,
+          title: 'Jenkins',
+          link: 'https://www.jenkins.io/'
+        },
+      ]
+    }
+  ];
+
+  constructor() { }
+
+  ngOnInit(): void { }
+}
diff --git a/apps/me/src/app/core/auth.service.ts b/apps/me/src/app/core/auth.service.ts
deleted file mode 100644
index af27fde..0000000
--- a/apps/me/src/app/core/auth.service.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class AuthService {
-
-  constructor() { }
-}
diff --git a/apps/me/src/app/core/core.module.ts b/apps/me/src/app/core/core.module.ts
deleted file mode 100644
index 9164577..0000000
--- a/apps/me/src/app/core/core.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AuthService } from './auth.service';
-
-@NgModule({
-  declarations: [],
-  imports: [
-    CommonModule
-  ],
-  providers: [AuthService]
-})
-export class CoreModule { }
diff --git a/apps/me/src/app/core/auth.service.spec.ts b/apps/me/src/app/shared/cv-data.service.spec.ts
index f1251ca..8003801 100644
--- a/apps/me/src/app/core/auth.service.spec.ts
+++ b/apps/me/src/app/shared/cv-data.service.spec.ts
@@ -1,13 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 
-import { AuthService } from './auth.service';
+import { CvDataService } from './cv-data.service';
 
-describe('AuthService', () => {
-  let service: AuthService;
+describe('CvDataService', () => {
+  let service: CvDataService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(AuthService);
+    service = TestBed.inject(CvDataService);
   });
 
   it('should be created', () => {
diff --git a/apps/me/src/app/shared/cv-data.service.ts b/apps/me/src/app/shared/cv-data.service.ts
new file mode 100644
index 0000000..236b936
--- /dev/null
+++ b/apps/me/src/app/shared/cv-data.service.ts
@@ -0,0 +1,305 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CvDataService {
+  constructor() { }
+
+  public cvData: any = [ // []
+    {
+      id: 0,
+      title: 'Acknowledgements',
+      nodes: [
+        {
+          id: 0_0,
+          title: 'Lead Developer and Proprietor of the Minecraft Ghost Client Vespertine'
+        },
+        {
+          id: 0_1,
+          title: 'Multiple Lead Development positions on various CS:GO Clients'
+        },
+        {
+          id: 0_2,
+          title: 'Multiple Verified Discord Bots'
+        },
+        {
+          id: 0_3,
+          title: 'Verified Discord Bot Developer'
+        },
+        {
+          id: 0_4,
+          title: 'Various Freelance positions'
+        },
+        {
+          id: 0_5,
+          title: 'Multi-lingual'
+        }
+      ]
+    },
+    {
+      id: 1,
+      title: 'Tech Stacks',
+      nodes: [
+        {
+          id: 1_0,
+          title: 'Assembly',
+          nodes: [
+            {
+              id: 1_0_0,
+              title: 'FASM',
+              link: 'http://flatassembler.net/'
+            },
+            {
+              id: 1_0_1,
+              title: 'MASM',
+              link: 'http://masm32.com/'
+            },
+            {
+              id: 1_0_2,
+              title: 'NASM',
+              link: 'https://nasm.us/'
+            }
+          ]
+        },
+        {
+          id: 1_1,
+          title: 'Node.js',
+          link: 'https://nodejs.org/en/',
+          nodes: [
+            {
+              id: 1_1_0,
+              title: 'Discord.js',
+              link: 'https://discord.js.org/#/'
+            },
+            {
+              id: 1_1_1,
+              title: 'Angular',
+              link: 'https://angular.io/'
+            },
+            {
+              id: 1_1_2,
+              title: 'Express',
+              link: 'https://expressjs.com/'
+            },
+            {
+              id: 1_1_3,
+              title: 'Akairo',
+              link: 'https://discord-akairo.github.io/#/'
+            },
+            {
+              id: 1_1_4,
+              title: 'React',
+              link: 'https://reactjs.org/'
+            }
+          ]
+        },
+        {
+          id: 1_2,
+          title: 'Python',
+          link: 'https://www.python.org/'
+        },
+        {
+          id: 1_3,
+          title: 'C/ C++',
+          nodes: [
+            {
+              id: 1_3_0,
+              title: 'Internal, Injectable Modifications via OpenGL or DirectX Hooks'
+            },
+            {
+              id: 1_3_1,
+              title: 'Remote PE Image Injection Knowledge'
+            },
+            {
+              id: 1_3_2,
+              title: 'ImGui',
+              link: 'https://github.com/ocornut/imgui'
+            },
+            {
+              id: 1_3_3,
+              title: 'GBDK',
+              link: 'https://github.com/Zal0/gbdk-2020'
+            }
+          ]
+        },
+        {
+          id: 1_4,
+          title: 'Deno'
+        },
+        {
+          id: 1_5,
+          title: 'Rust',
+          link: 'https://www.rust-lang.org/',
+          nodes: [
+            {
+              id: 1_4_0,
+              title: 'Serenity',
+              link: 'https://github.com/serenity-rs/serenity'
+            },
+            {
+              id: 1_4_1,
+              title: 'Rocket',
+              link: 'https://rocket.rs/'
+            },
+            {
+              id: 1_4_2,
+              title: 'Actix',
+              link: 'https://actix.rs/'
+            },
+            {
+              id: 1_4_0,
+              title: ''
+            },
+          ]
+        },
+        {
+          id: 1_6,
+          title: 'Lua'
+        },
+        {
+          id: 1_7,
+          title: 'PHP',
+          nodes: [
+            {
+              id: 1_6_0,
+              title: 'MyBB',
+              link: 'https://mybb.com/'
+            },
+            {
+              id: 1_6_1,
+              title: 'FluxBB',
+              link: 'https://fluxbb.org/'
+            }
+          ]
+        },
+        {
+          id: 1_8,
+          title: 'C#'
+        }
+      ]
+    },
+    {
+      id: 2,
+      title: 'Tools',
+      nodes: [
+        {
+          id: 2_0,
+          title: 'Document Preparation',
+          nodes: [
+            {
+              id: 2_5_0,
+              title: 'Markdown'
+            },
+            {
+              id: 2_5_1,
+              title: 'LaTeX',
+              link: 'https://www.latex-project.org/'
+            }
+          ]
+        },
+        {
+          id: 2_1,
+          title: 'Build Automation',
+          nodes: [
+            {
+              id: 2_0_0,
+              title: 'VS Solution'
+            },
+            {
+              id: 2_0_1,
+              title: 'CMake'
+            },
+            {
+              id: 2_0_2,
+              title: 'Make'
+            }
+          ]
+        },
+        {
+          id: 2_2,
+          title: 'Version Control',
+          nodes: [
+            {
+              id: 2_1_0,
+              title: 'GitHub',
+              link: 'http://github.com/'
+            },
+            {
+              id: 2_1_0,
+              title: 'GitLab',
+              link: 'https://gitlab.com/'
+            },
+            {
+              id: 2_1_0,
+              title: 'Git',
+              link: 'https://git-scm.com/'
+            },
+          ]
+        },
+        {
+          id: 2_3,
+          title: 'Game Engines',
+          nodes: [
+            {
+              id: 2_2_0,
+              title: 'Unreal Engine 5'
+            },
+            {
+              id: 2_2_1,
+              title: 'Unity'
+            }
+          ]
+        },
+        {
+          id: 2_4,
+          title: 'Databases',
+          nodes: [
+            {
+              id: 2_3_0,
+              title: 'Postgres'
+            },
+            {
+              id: 2_3_1,
+              title: 'SQLite'
+            },
+            {
+              id: 2_3_2,
+              title: 'Mongo'
+            },
+            {
+              id: 2_3_3,
+              title: 'MySQL'
+            }
+          ]
+        },
+        {
+          id: 2_5,
+          title: 'Editors',
+          nodes: [
+            {
+              id: 2_4_0,
+              title: 'Visual Studio'
+            },
+            {
+              id: 2_4_1,
+              title: 'Sublime'
+            },
+            {
+              id: 2_4_2,
+              title: 'VSCode'
+            },
+            {
+              id: 2_4_3,
+              title: 'Nvim'
+            },
+            {
+              id: 2_4_4,
+              title: 'Vim'
+            }
+          ]
+        }
+      ]
+    }
+  ];
+}
diff --git a/apps/me/src/app/shared/footer/footer.component.scss b/apps/me/src/app/shared/footer/footer.component.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/apps/me/src/app/shared/footer/footer.component.scss
diff --git a/apps/me/src/app/shared/footer/footer.component.spec.ts b/apps/me/src/app/shared/footer/footer.component.spec.ts
new file mode 100644
index 0000000..a3c4af9
--- /dev/null
+++ b/apps/me/src/app/shared/footer/footer.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/me/src/app/shared/footer/footer.component.ts b/apps/me/src/app/shared/footer/footer.component.ts
new file mode 100644
index 0000000..458f285
--- /dev/null
+++ b/apps/me/src/app/shared/footer/footer.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  template: `
+    <!-- Footer -->
+    <div class="container">
+      <div class="footer">
+        <p>Copyleft &copy; Fuwn | <a [routerLink]="['contact']">Contact Information</a></p>
+      </div>
+    </div>
+  `,
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit(): void { }
+}
diff --git a/apps/me/src/app/shared/header/header.component.scss b/apps/me/src/app/shared/header/header.component.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/apps/me/src/app/shared/header/header.component.scss
diff --git a/apps/me/src/app/shared/header/header.component.spec.ts b/apps/me/src/app/shared/header/header.component.spec.ts
new file mode 100644
index 0000000..381e8e8
--- /dev/null
+++ b/apps/me/src/app/shared/header/header.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/me/src/app/shared/header/header.component.ts b/apps/me/src/app/shared/header/header.component.ts
new file mode 100644
index 0000000..b8aaf1c
--- /dev/null
+++ b/apps/me/src/app/shared/header/header.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  template: `
+		<!-- Header -->
+		<div class="row top">
+			<div class="twelve column">
+				<div class="logo">​</div>
+				<h1>Contact Information</h1>
+				<!-- <h2> Web Developer</h2> -->
+			</div>
+		</div>
+  `,
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+	@Input() headerTitle: string;
+
+	constructor() { }
+
+  ngOnInit(): void { }
+}
diff --git a/apps/me/src/app/shared/nav-real/nav-real.component.html b/apps/me/src/app/shared/nav-real/nav-real.component.html
new file mode 100644
index 0000000..e1d4283
--- /dev/null
+++ b/apps/me/src/app/shared/nav-real/nav-real.component.html
@@ -0,0 +1,6 @@
+<h2>
+  <a [routerLink]="['/']">Home</a> |
+  <a [routerLink]="['/contact']">Contact</a> |
+  <a [routerLink]="['/cv']">CV</a> |
+  <a [routerLink]="['/interests']">Interests</a>
+</h2>
\ No newline at end of file
diff --git a/apps/me/src/app/shared/nav-real/nav-real.component.scss b/apps/me/src/app/shared/nav-real/nav-real.component.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/apps/me/src/app/shared/nav-real/nav-real.component.scss
diff --git a/apps/me/src/app/shared/nav-real/nav-real.component.spec.ts b/apps/me/src/app/shared/nav-real/nav-real.component.spec.ts
new file mode 100644
index 0000000..d6aab28
--- /dev/null
+++ b/apps/me/src/app/shared/nav-real/nav-real.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavRealComponent } from './nav-real.component';
+
+describe('NavRealComponent', () => {
+  let component: NavRealComponent;
+  let fixture: ComponentFixture<NavRealComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavRealComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavRealComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/me/src/app/shared/nav-real/nav-real.component.ts b/apps/me/src/app/shared/nav-real/nav-real.component.ts
new file mode 100644
index 0000000..9c71fd0
--- /dev/null
+++ b/apps/me/src/app/shared/nav-real/nav-real.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-nav-real',
+  templateUrl: './nav-real.component.html',
+  styleUrls: ['./nav-real.component.scss']
+})
+export class NavRealComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit(): void { }
+}
diff --git a/apps/me/src/app/shared/nav/nav.component.html b/apps/me/src/app/shared/nav/nav.component.html
new file mode 100644
index 0000000..ddb6007
--- /dev/null
+++ b/apps/me/src/app/shared/nav/nav.component.html
@@ -0,0 +1,16 @@
+<div class="ct" id="t1">
+  <div class="ct" id="t2">
+    <div class="ct" id="t3">
+      <div class="ct" id="t4">
+        <div class="ct" id="t5">
+          <ul id="menu">
+            <!-- <a [routerLink]="['/']"><li class="icon fa fa-home" id="uno"></li></a>
+            <a [routerLink]="['contact']"><li class="icon fa fa-envelope" id="dos"></li></a>
+            <a [routerLink]="['cv']"><li class="icon fa fa-book" id="tres"></li></a>
+            <a [routerLink]="['interests']"><li class="icon fa fa-bolt" id="cuatro"></li></a> -->
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/apps/me/src/app/shared/nav/nav.component.scss b/apps/me/src/app/shared/nav/nav.component.scss
new file mode 100644
index 0000000..7663db4
--- /dev/null
+++ b/apps/me/src/app/shared/nav/nav.component.scss
@@ -0,0 +1,106 @@
+// html, body, .page {
+//   width: 100%;
+//   height: 100%;
+//   margin: 0;
+//   padding: 0;
+//   transition: all .6s cubic-bezier(.5, .2, .2, 1.1);
+//   -webkit-transition: all .6s cubic-bezier(.5, .2, .2, 1.1);
+//   -moz-transition: all .6s cubic-bezier(.5, .2, .2, 1.1);
+//   -o-transition: all .6s cubic-bezier(.5, .2, .2, 1.1);  
+//   color: #fff;
+//   overflow: hidden; 
+// }
+
+@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css);
+
+#t2:target #p2,
+#t3:target #p3,
+#t4:target #p4,
+#t5:target #p5 {
+  transform: translateX(-190%);
+  -webkit-transform: translateX(-190%);
+  -moz-transform: translateX(-190%);
+  -o-transform: translateX(-190%);
+  transition-delay: .4s !important;
+}
+
+#t2:target #p1, 
+#t3:target #p1,
+#t4:target #p1,
+#t5:target #p1{
+  background: black;
+}
+
+#t2:target #p1 .icon, 
+#t3:target #p1 .icon,
+#t4:target #p1 .icon,
+#t5:target #p1 .icon {
+  filter: blur(3px);
+  -webkit-filter: blur(3px);
+}
+
+.icon {
+  color: #fff;
+  font-size: 32px;
+  display: block;
+}
+
+ul .icon:hover {
+  opacity: 0.5;
+}
+
+#t2:target ul .icon,
+#t3:target ul .icon,
+#t4:target ul .icon,
+#t5:target ul .icon{
+  transform: scale(.6);
+  -webkit-transform: scale(.6);
+  -moz-transform: scale(.6);
+  -o-transform: scale(.6);
+  transition-delay: .25s;
+}
+
+#t2:target #dos,
+#t3:target #tres,
+#t4:target #cuatro,
+#t4:target #cinco {
+  transform: scale(1.2) !important;
+  -webkit-transform: scale(1.2) !important;
+  -moz-transform: scale(1.2) !important;
+  -o-transform: scale(1.2) !important;
+}
+
+ul {
+  position: relative; // fixed
+  z-index: 1;
+  top: 1.5vh;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  height: 100%; // 280px // 90%
+  // width: 10%;
+  padding: 0;
+  text-align: center;
+  margin-bottom: 5%;
+}
+
+#menu li {
+  display: inline;
+  padding: 14px;
+}
+
+// @media (max-width: 550px) {
+//   ul { margin-bottom: 15%; }
+// }
+
+#menu .icon {
+  margin: 30px 0;
+  transition: all .5s ease-out !important;
+  -webkit-transition: all .5s ease-out;
+  -moz-transition: all .5s ease-out;
+  -o-transition: all .5s ease-out;
+}
+
+a {
+  text-decoration: none;
+}
\ No newline at end of file
diff --git a/apps/me/src/app/shared/nav/nav.component.spec.ts b/apps/me/src/app/shared/nav/nav.component.spec.ts
new file mode 100644
index 0000000..5d13772
--- /dev/null
+++ b/apps/me/src/app/shared/nav/nav.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavComponent } from './nav.component';
+
+describe('NavComponent', () => {
+  let component: NavComponent;
+  let fixture: ComponentFixture<NavComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/me/src/app/shared/nav/nav.component.ts b/apps/me/src/app/shared/nav/nav.component.ts
new file mode 100644
index 0000000..7ee0e08
--- /dev/null
+++ b/apps/me/src/app/shared/nav/nav.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-nav',
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.scss']
+})
+export class NavComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit(): void { }
+}
diff --git a/apps/me/src/app/shared/navbar/navbar.component.html b/apps/me/src/app/shared/navbar/navbar.component.html
deleted file mode 100644
index 6bbf8ee..0000000
--- a/apps/me/src/app/shared/navbar/navbar.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>navbar works!</p>
diff --git a/apps/me/src/app/shared/navbar/navbar.component.ts b/apps/me/src/app/shared/navbar/navbar.component.ts
deleted file mode 100644
index 6a9bec8..0000000
--- a/apps/me/src/app/shared/navbar/navbar.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-navbar',
-  templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.scss']
-})
-export class NavbarComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/apps/me/src/app/shared/shared.module.ts b/apps/me/src/app/shared/shared.module.ts
deleted file mode 100644
index 7d373be..0000000
--- a/apps/me/src/app/shared/shared.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { NavbarComponent } from './navbar/navbar.component';
-
-
-
-@NgModule({
-  declarations: [NavbarComponent],
-  imports: [
-    CommonModule
-  ],
-  exports: [
-    NavbarComponent
-  ]
-})
-export class SharedModule { }
diff --git a/apps/me/src/app/shared/waves/waves.component.scss b/apps/me/src/app/shared/waves/waves.component.scss
new file mode 100644
index 0000000..000eb33
--- /dev/null
+++ b/apps/me/src/app/shared/waves/waves.component.scss
@@ -0,0 +1,60 @@
+// --- Waves ---
+.waves {
+	position: relative;
+	width: 100%; // calc(100% - 1.6vh)
+	height: 15vh;
+	margin-bottom: -7px; // Fix for Safari gap.
+	min-height: 100px;
+	max-height: 150px;
+	bottom: 0; // 1.6vh
+}
+
+// Non-existant, just here for future use.
+.content {
+	position: relative;
+	height: 20vh;
+	text-align: center;
+	background-color: white;
+}
+
+// --- Animation ---
+.parallax > use {
+	animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
+}
+.parallax > use:nth-child(1) {
+	animation-delay: -2s;
+	animation-duration: 7s;
+}
+.parallax > use:nth-child(2) {
+	animation-delay: -3s;
+	animation-duration: 10s;
+}
+.parallax > use:nth-child(3) {
+	animation-delay: -4s;
+	animation-duration: 13s;
+}
+.parallax > use:nth-child(4) {
+	animation-delay: -5s;
+	animation-duration: 20s;
+}
+@keyframes move-forever {
+	0% {
+	transform: translate3d(-90px,0,0);
+	}
+	100% { 
+	transform: translate3d(85px,0,0);
+	}
+}
+// Shrink for mobile
+@media (max-width: 768px) {
+	.waves {
+	height:40px;
+	min-height:40px;
+	}
+	.content {
+	height:30vh;
+	}
+	h1 {
+	font-size:24px;
+	}
+}
\ No newline at end of file
diff --git a/apps/me/src/app/shared/waves/waves.component.spec.ts b/apps/me/src/app/shared/waves/waves.component.spec.ts
new file mode 100644
index 0000000..610347a
--- /dev/null
+++ b/apps/me/src/app/shared/waves/waves.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WavesComponent } from './waves.component';
+
+describe('WavesComponent', () => {
+  let component: WavesComponent;
+  let fixture: ComponentFixture<WavesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WavesComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WavesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/me/src/app/shared/waves/waves.component.ts b/apps/me/src/app/shared/waves/waves.component.ts
new file mode 100644
index 0000000..6da0825
--- /dev/null
+++ b/apps/me/src/app/shared/waves/waves.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-waves',
+  template: `
+    <!-- Waves -->
+    <div>
+      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+        viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
+      <defs>
+        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
+      </defs>
+      <g class="parallax">
+        <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
+          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
+          <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
+          <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
+      </g>
+      </svg>
+    </div>
+  `,
+  styleUrls: ['./waves.component.scss']
+})
+export class WavesComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit(): void { }
+}
diff --git a/apps/me/src/assets/watermark-1000x1000.png b/apps/me/src/assets/watermark-1000x1000.png
new file mode 100644
index 0000000..15079be
--- /dev/null
+++ b/apps/me/src/assets/watermark-1000x1000.png
diff --git a/apps/me/src/environments/environment.ts b/apps/me/src/environments/environment.ts
index e76b904..7b4f817 100644
--- a/apps/me/src/environments/environment.ts
+++ b/apps/me/src/environments/environment.ts
@@ -3,16 +3,7 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
-  firebase: {
-    apiKey: "AIzaSyCyAYxbtHWO0nmsySFqk7CVGDnj8eKuxDc",
-    authDomain: "fuwn-id.firebaseapp.com",
-    projectId: "fuwn-id",
-    storageBucket: "fuwn-id.appspot.com",
-    messagingSenderId: "551534012953",
-    appId: "1:551534012953:web:8409011373abfb5b491888",
-    measurementId: "G-3PY1N2GLN9"
-  }
+  production: false
 };
 
 /*
diff --git a/apps/me/src/index.html b/apps/me/src/index.html
index b02582e..054a182 100644
--- a/apps/me/src/index.html
+++ b/apps/me/src/index.html
@@ -1,13 +1,14 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Me</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="./assets/watermark-1000x1000.png">
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
 </html>
diff --git a/apps/me/src/styles.scss b/apps/me/src/styles.scss
index 90d4ee0..3fff4f4 100644
--- a/apps/me/src/styles.scss
+++ b/apps/me/src/styles.scss
@@ -1 +1,111 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import url(https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css);
+
+@import url(https://fonts.googleapis.com/css?family=Varela+Round);
+@import url(https://fonts.googleapis.com/css?family=Monoton);
+@import url(https://fonts.googleapis.com/css?family=Lato:300:400);
+@import url(https://fonts.googleapis.com/css?family=DM+Sans:500,700&display=swap);
+
+@import "./styles/mobiles-queries.scss";
+@import "./styles/DarkReader-localhost---00.css";
+
+body {
+	// background: #282931;
+	-webkit-font-smoothing: antialiased;
+	font-family: 'Varela Round', sans-serif;
+	height: 100%;
+}
+
+canvas {
+	height: 100vh;
+	z-index: -10;
+	position: fixed;
+	top: 0px;
+}
+
+a,
+p {
+	color: #bbbbc4;
+	text-decoration: none;
+	-o-transition: .5s;
+	-ms-transition: .5s;
+	-moz-transition: .5s;
+	-webkit-transition: .5s;
+	transition: .5s;
+}
+
+p { margin-bottom: unset !important;}
+
+a:hover {
+	color: #fc3565;
+}
+
+h1 {
+	color: #fc3565;
+	padding-bottom: 0px;
+	margin-bottom: 1%;
+}
+
+h2 {
+	color: #555560;
+	font-size: 3rem;
+	font-weight: bold;
+	margin: 0px;
+	padding: 0px;
+}
+
+.logo {
+	font-family: 'Monoton', cursive;
+	color: white;
+	font-size: 8rem;
+}
+
+.top {
+	padding-bottom: 5rem;
+}
+
+.pulled { }
+
+.pulled ul li {
+	list-style: none;
+	margin-right: 2rem;
+	font-size: 1.8rem;
+}
+
+.pulled h1 {
+	color: white;
+	font-size: 3rem;
+}
+
+.pulled ul li span {
+	font-size:1.2rem;
+}
+
+.footer {
+padding-top:5rem;
+}
+
+.footer p {
+	color:white;
+	font-size:1.2rem;
+}
+
+.visit {
+	color:white;
+	font-size:12px;
+	background:#32333a;;
+	width:146px;
+	padding:6px;
+	border-radius:10px;
+	position:fixed;
+	right:20px;
+}
+
+span.new {
+	background-color: #fc3565;
+	font-weight: 700;
+	padding: .2rem;
+	margin-left: .4rem;
+	color: #fff;
+}
\ No newline at end of file
diff --git a/apps/me/src/styles/DarkReader-localhost---00.css b/apps/me/src/styles/DarkReader-localhost---00.css
new file mode 100644
index 0000000..6789e64
--- /dev/null
+++ b/apps/me/src/styles/DarkReader-localhost---00.css
@@ -0,0 +1,221 @@
+/*
+                        _______
+                       /       \
+                      .==.    .==.
+                     ((  ))==((  ))
+                    / "=="    "=="\
+                   /____|| || ||___\
+       ________     ____    ________  ___    ___
+       |  ___  \   /    \   |  ___  \ |  |  /  /
+       |  |  \  \ /  /\  \  |  |  \  \|  |_/  /
+       |  |   )  /  /__\  \ |  |__/  /|  ___  \
+       |  |__/  /  ______  \|  ____  \|  |  \  \
+_______|_______/__/ ____ \__\__|___\__\__|___\__\____
+|  ___  \ |  ____/ /    \   |  ___  \ |  ____|  ___  \
+|  |  \  \|  |___ /  /\  \  |  |  \  \|  |___|  |  \  \
+|  |__/  /|  ____/  /__\  \ |  |   )  |  ____|  |__/  /
+|  ____  \|  |__/  ______  \|  |__/  /|  |___|  ____  \
+|__|   \__\____/__/      \__\_______/ |______|__|   \__\
+                https://darkreader.org
+*/
+/* User-Agent Style */
+html {
+    background-color: #1b1b1a !important;
+}
+html, body, input, textarea, select, button {
+    background-color: #1b1b1a;
+}
+html, body, input, textarea, select, button {
+    border-color: #7c7260;
+    color: #fff4e0;
+}
+a {
+    color: #5a96d8;
+}
+table {
+    border-color: #5f605b;
+}
+::placeholder {
+    color: #c2b6a1;
+}
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+    background-color: #5b5b16 !important;
+    color: #fff4e0 !important;
+}
+::-webkit-scrollbar {
+    background-color: #242523;
+    color: #baae99;
+}
+::-webkit-scrollbar-thumb {
+    background-color: #4e4e4a;
+}
+::-webkit-scrollbar-thumb:hover {
+    background-color: #62635f;
+}
+::-webkit-scrollbar-thumb:active {
+    background-color: #51524e;
+}
+::-webkit-scrollbar-corner {
+    background-color: #1b1b1a;
+}
+* {
+    scrollbar-color: #242523 #4e4e4a;
+}
+::selection {
+    background-color: #1b4e8a !important;
+    color: #fff4e0 !important;
+}
+::-moz-selection {
+    background-color: #1b4e8a !important;
+    color: #fff4e0 !important;
+}
+
+/* Invert Style */
+.jfk-bubble.gtx-bubble, .captcheck_answer_label > input + img, embed[type="application/pdf"] {
+    filter: invert(100%) hue-rotate(180deg) contrast(90%) sepia(30%) !important;
+}
+
+/* Variables Style */
+:root {
+   --darkreader-neutral-background: #161615;
+   --darkreader-neutral-text: #ede1cd;
+   --darkreader-selection-background: #1b4e8a;
+   --darkreader-selection-text: #fff4e0;
+}
+
+/* Modified CSS */
+body {
+    color: rgb(232, 220, 199);
+}
+a {
+    color: rgb(103, 187, 203);
+}
+a:hover {
+    color: rgb(111, 198, 215); 
+}
+.button, button, input[type="button"], input[type="reset"], input[type="submit"] {
+    color: rgb(194, 183, 162);
+    text-decoration-color: initial;
+    background-color: transparent;
+    border-color: rgb(76, 77, 73); 
+}
+.button:focus, .button:hover, button:focus, button:hover, input[type="button"]:focus, input[type="button"]:hover, input[type="reset"]:focus, input[type="reset"]:hover, input[type="submit"]:focus, input[type="submit"]:hover {
+    color: rgb(219, 207, 187);
+    border-color: rgb(93, 93, 89); outline-color: initial; 
+}
+.button.button-primary, button.button-primary, input[type="button"].button-primary, input[type="reset"].button-primary, input[type="submit"].button-primary {
+    color: rgb(255, 244, 224);
+    background-color: rgb(50, 129, 148);
+    border-color: rgb(46, 120, 136); 
+}
+.button.button-primary:focus, .button.button-primary:hover, button.button-primary:focus, button.button-primary:hover, input[type="button"].button-primary:focus, input[type="button"].button-primary:hover, input[type="reset"].button-primary:focus, input[type="reset"].button-primary:hover, input[type="submit"].button-primary:focus, input[type="submit"].button-primary:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(62, 137, 154);
+    border-color: rgb(56, 124, 140); 
+}
+input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"],
+select,
+textarea {
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(69, 70, 67); box-shadow: none; 
+}
+input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus,
+select:focus,
+textarea:focus {
+    border-color: rgb(46, 120, 136);
+    outline-color: initial;
+}
+ul {
+    list-style-image: initial;
+}
+ol {
+    list-style-image: initial;
+}
+code {
+    background-image: initial;
+    background-color: rgb(36, 37, 35);
+    border-color: rgb(64, 64, 62);
+}
+td,
+th {
+    border-bottom-color: rgb(64, 64, 62);
+}
+hr {
+    border-top-color: rgb(64, 64, 62);
+}
+body {
+    background-image: initial;
+    /* background-color: rgb(38, 38, 37); */
+}
+a,
+p {
+    color: rgb(210, 198, 177);
+    text-decoration-color: initial;
+}
+a:hover {
+    color: rgb(227, 89, 111);
+}
+h1 {
+    color: rgb(227, 89, 111);
+}
+h2 {
+    color: rgb(191, 178, 157);
+}
+.logo {
+    color: rgb(255, 244, 224);
+}
+.pulled ul li {
+    list-style-image: initial;
+}
+.pulled h1 {
+    color: rgb(255, 244, 224);
+}
+.footer p {
+    color: rgb(255, 244, 224);
+}
+.visit {
+    color: rgb(255, 244, 224);
+    background-image: initial;
+    background-color: rgb(46, 46, 44);
+}
+span.new {
+    background-color: rgb(143, 23, 46);
+    color: rgb(255, 244, 224);
+}
+#loading-screen[_ngcontent-yxn-c24] {
+    background-color: rgb(38, 38, 37) !important;
+}
+.fa-border {
+    border-color: rgb(60, 60, 57);
+}
+.fa-inverse {
+    color: rgb(255, 244, 224);
+}
+#t2[_ngcontent-yxn-c21]:target #p1[_ngcontent-yxn-c21],
+#t3[_ngcontent-yxn-c21]:target #p1[_ngcontent-yxn-c21],
+#t4[_ngcontent-yxn-c21]:target #p1[_ngcontent-yxn-c21],
+#t5[_ngcontent-yxn-c21]:target #p1[_ngcontent-yxn-c21] {
+    background-image: initial;
+    background-color: rgb(0, 0, 0);
+}
+.icon[_ngcontent-yxn-c21] {
+    color: rgb(255, 244, 224);
+}
+a[_ngcontent-yxn-c21] {
+    text-decoration-color: initial;
+}
+.content[_ngcontent-yxn-c23] {
+    background-color: rgb(27, 27, 26);
+}
+
+/* Override Style */
+.vimvixen-hint {
+    background-color: #775707 !important;
+    border-color: #dab73c !important;
+    color: #fff6cd !important;
+}
+::placeholder {
+    opacity: 0.5 !important;
+}
diff --git a/apps/me/src/styles/mobiles-queries.scss b/apps/me/src/styles/mobiles-queries.scss
new file mode 100644
index 0000000..6cb5ce1
--- /dev/null
+++ b/apps/me/src/styles/mobiles-queries.scss
@@ -0,0 +1,25 @@
+// --- Mobile queries ---
+// Larger than mobile
+@media (min-width: 400px) { }
+
+// Larger than phablet
+@media (min-width: 550px) { }
+
+// Larger than tablet
+@media (min-width: 750px) { }
+
+// Larger than desktop
+@media (min-width: 1000px) { }
+
+// Larger than desktop HD
+@media (min-width: 1200px) {
+	h1 {
+		font-size: 4rem;
+	}
+}
+
+@media only screen and (max-width: 768px) {
+	h2 {
+		font-size: 2rem !important;
+	}
+}
\ No newline at end of file