diff --git a/angular.json b/angular.json index d4e6a1d..4f69ede 100644 --- a/angular.json +++ b/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" + } + } } \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index fa2706a..8b1367e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,20 +1,5 @@ - -
-

- Welcome to {{ title }}! -

- Angular Logo -
-

Here are some links to help you start:

- + +
+ +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss new file mode 100644 index 0000000..cf86a16 --- /dev/null +++ b/src/app/app.component.scss @@ -0,0 +1,3 @@ +.content { + margin: 2em; +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7b0f672..6155d99 100644 --- a/src/app/app.component.ts +++ b/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'; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f657163..b23b56c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,16 +1,27 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +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 { +} diff --git a/src/app/app.routing-module.ts b/src/app/app.routing-module.ts new file mode 100644 index 0000000..75645d5 --- /dev/null +++ b/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 { +} diff --git a/src/app/contact-route/contact-route.component.html b/src/app/contact-route/contact-route.component.html new file mode 100644 index 0000000..7eba318 --- /dev/null +++ b/src/app/contact-route/contact-route.component.html @@ -0,0 +1,29 @@ +

+ You can reach me using the following channels +

+ +

+ Bank information +

+ diff --git a/src/app/contact-route/contact-route.component.scss b/src/app/contact-route/contact-route.component.scss new file mode 100644 index 0000000..6207b14 --- /dev/null +++ b/src/app/contact-route/contact-route.component.scss @@ -0,0 +1,8 @@ +.number { + font-family: monospace; +} + +.bic { + font-size: small; + opacity: .4; +} diff --git a/src/app/contact-route/contact-route.component.spec.ts b/src/app/contact-route/contact-route.component.spec.ts new file mode 100644 index 0000000..398575c --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ContactRouteComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ContactRouteComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/contact-route/contact-route.component.ts b/src/app/contact-route/contact-route.component.ts new file mode 100644 index 0000000..c960391 --- /dev/null +++ b/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() { + } + +} diff --git a/src/app/info-route/info-route.component.html b/src/app/info-route/info-route.component.html new file mode 100644 index 0000000..cbefb04 --- /dev/null +++ b/src/app/info-route/info-route.component.html @@ -0,0 +1,31 @@ +

+ This is the homepage of Charles Ghislain +

+

+ I'm a full stack developer familiar with the following technologies +

+ +

+ You may find some of my work online under the cghislai nickname +

+ diff --git a/src/app/app.component.css b/src/app/info-route/info-route.component.scss similarity index 100% rename from src/app/app.component.css rename to src/app/info-route/info-route.component.scss diff --git a/src/app/info-route/info-route.component.spec.ts b/src/app/info-route/info-route.component.spec.ts new file mode 100644 index 0000000..9f07965 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InfoRouteComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InfoRouteComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/info-route/info-route.component.ts b/src/app/info-route/info-route.component.ts new file mode 100644 index 0000000..29a6111 --- /dev/null +++ b/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() { + } + +} diff --git a/src/app/routes-header/routes-header.component.html b/src/app/routes-header/routes-header.component.html new file mode 100644 index 0000000..fe91481 --- /dev/null +++ b/src/app/routes-header/routes-header.component.html @@ -0,0 +1,29 @@ +
+ + + + Info + + + + Contact + + + + Services + + + + + + charlyghislain.com + + + + +
diff --git a/src/app/routes-header/routes-header.component.scss b/src/app/routes-header/routes-header.component.scss new file mode 100644 index 0000000..4ed2bbc --- /dev/null +++ b/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); + } + } + } +} diff --git a/src/app/routes-header/routes-header.component.spec.ts b/src/app/routes-header/routes-header.component.spec.ts new file mode 100644 index 0000000..5a51db4 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RoutesHeaderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RoutesHeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/routes-header/routes-header.component.ts b/src/app/routes-header/routes-header.component.ts new file mode 100644 index 0000000..b4e013b --- /dev/null +++ b/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() { + } + +} diff --git a/src/app/service-route/service-route.component.html b/src/app/service-route/service-route.component.html new file mode 100644 index 0000000..010f50a --- /dev/null +++ b/src/app/service-route/service-route.component.html @@ -0,0 +1,17 @@ +

+ You may be looking for one of these services +

+ + + diff --git a/src/app/service-route/service-route.component.scss b/src/app/service-route/service-route.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/service-route/service-route.component.spec.ts b/src/app/service-route/service-route.component.spec.ts new file mode 100644 index 0000000..408b919 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ServiceRouteComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ServiceRouteComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/service-route/service-route.component.ts b/src/app/service-route/service-route.component.ts new file mode 100644 index 0000000..18d2ead --- /dev/null +++ b/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() { + } + +} diff --git a/src/assets/favicon.png b/src/assets/favicon.png new file mode 100644 index 0000000..d0d40d6 Binary files /dev/null and b/src/assets/favicon.png differ diff --git a/src/favicon.ico b/src/favicon.ico index 8081c7c..c091573 100644 Binary files a/src/favicon.ico and b/src/favicon.ico differ diff --git a/src/styles.css b/src/styles.css deleted file mode 100644 index 90d4ee0..0000000 --- a/src/styles.css +++ /dev/null @@ -1 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ diff --git a/src/styles.scss b/src/styles.scss new file mode 100644 index 0000000..fea113b --- /dev/null +++ b/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; + } +}