From 820b80f196c41008c8bc67ff75d333693e5e0c4f Mon Sep 17 00:00:00 2001 From: cghislai Date: Sun, 5 Aug 2018 15:16:00 +0300 Subject: [PATCH] charlyghislaindotcom - intitial commit --- angular.json | 11 ++- src/app/app.component.html | 23 +----- src/app/app.component.scss | 3 + src/app/app.component.ts | 5 +- src/app/app.module.ts | 29 ++++--- src/app/app.routing-module.ts | 41 ++++++++++ .../contact-route.component.html | 29 +++++++ .../contact-route.component.scss | 8 ++ .../contact-route.component.spec.ts | 25 ++++++ .../contact-route/contact-route.component.ts | 15 ++++ src/app/info-route/info-route.component.html | 31 ++++++++ .../info-route.component.scss} | 0 .../info-route/info-route.component.spec.ts | 25 ++++++ src/app/info-route/info-route.component.ts | 15 ++++ .../routes-header.component.html | 29 +++++++ .../routes-header.component.scss | 75 ++++++++++++++++++ .../routes-header.component.spec.ts | 25 ++++++ .../routes-header/routes-header.component.ts | 15 ++++ .../service-route.component.html | 17 ++++ .../service-route.component.scss | 0 .../service-route.component.spec.ts | 25 ++++++ .../service-route/service-route.component.ts | 15 ++++ src/assets/favicon.png | Bin 0 -> 1073 bytes src/favicon.ico | Bin 5430 -> 1150 bytes src/styles.css | 1 - src/styles.scss | 31 ++++++++ 26 files changed, 458 insertions(+), 35 deletions(-) create mode 100644 src/app/app.component.scss create mode 100644 src/app/app.routing-module.ts create mode 100644 src/app/contact-route/contact-route.component.html create mode 100644 src/app/contact-route/contact-route.component.scss create mode 100644 src/app/contact-route/contact-route.component.spec.ts create mode 100644 src/app/contact-route/contact-route.component.ts create mode 100644 src/app/info-route/info-route.component.html rename src/app/{app.component.css => info-route/info-route.component.scss} (100%) create mode 100644 src/app/info-route/info-route.component.spec.ts create mode 100644 src/app/info-route/info-route.component.ts create mode 100644 src/app/routes-header/routes-header.component.html create mode 100644 src/app/routes-header/routes-header.component.scss create mode 100644 src/app/routes-header/routes-header.component.spec.ts create mode 100644 src/app/routes-header/routes-header.component.ts create mode 100644 src/app/service-route/service-route.component.html create mode 100644 src/app/service-route/service-route.component.scss create mode 100644 src/app/service-route/service-route.component.spec.ts create mode 100644 src/app/service-route/service-route.component.ts create mode 100644 src/assets/favicon.png delete mode 100644 src/styles.css create mode 100644 src/styles.scss 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 0000000000000000000000000000000000000000..d0d40d6140a024dcd5928022432517d4f6f18a0e GIT binary patch literal 1073 zcmV-11kU@3P)K@t zeU5X{;QPboWAC;0x}1GkYweFNy6ED6jh+VdMYtFP=*6$tjxVrllDZdTZZ3N-wqbp) zV^TO7kK;!is%gV`6qmJ>e`juNmCSv331{ZK3lcVT;Ck$+U>waI`lo_+5bt1K!tg$< zO&C#(ju*uyo(XLze(&N|$UrMdoF6ftudxRFTQEuzySWx z+}XmW4LVn>(t$f7rY+JpRDru181-Z%eWIC#CK@|{uUaS|e1r`DR?rqj z{ewafY>Lfw#9rYGm9c#SL+Vhs9pcq3Vo6ift*#8`L}Nd-5Z(j>QGZ9v`FrY!8BUAF z{%WZpg;ORezm`7}f<_r_mbVG|r&E3=1eh}Vrc!~Bj!c{UOlRtP;#4ZY?n%n8<Yu0GHoBmWnBkLXY!>FXP|$;Ch0Jud z&K2BH!N0JD{8Wu`SV=iyda#9p`K5Wk7|X8;^x%g`{>m2ezttccUGB)U(Z@>j)->R0 zlZ{?0k&PBOPS~q$>wzDXcKQ9(YFc_o^vJ`Tl=Z`s3Ybd{EtJYSaAIhy&Pq++cid(1R=S zyl_PqyrVh~^NeGa>cF*M2$MHgLkactl}_^OO$-V1yn00000NkvXXu0mjfk3|U_ literal 0 HcmV?d00001 diff --git a/src/favicon.ico b/src/favicon.ico index 8081c7ceaf2be08bf59010158c586170d9d2d517..c09157316861c96e00b75467f57a782ccc8e7cf4 100644 GIT binary patch literal 1150 zcmciA%PT}-9LDkAxJATFxr}5QMU;(fNFpniE@dT4my(SQ3&KoUh!v8OY%GvO5lLyX z5JE(;wzTmN9N%ZAQ>SSbBjuSsGv__$z0CWbpP7%3-*0?}Z6wRA)XeI@E$$@l^JB)d zSYblE{l8ziELVh_UoIP@|1`F-g-!H;-K3Q+dR?O(A@t)B-AE@jbm~azxJG*)?p}1% zeVD`$s^CopjbTio6%)8YG0LF5?P35kI7BU!N}S;mntvI`xQE6@@PcY6J}f}<{i)NpAoE literal 5430 zcmc(je{54#6vvCoAI3i*G5%$U7!sA3wtMZ$fH6V9C`=eXGJb@R1%(I_{vnZtpD{6n z5Pl{DmxzBDbrB>}`90e12m8T*36WoeDLA&SD_hw{H^wM!cl_RWcVA!I+x87ee975; z@4kD^=bYPn&pmG@(+JZ`rqQEKxW<}RzhW}I!|ulN=fmjVi@x{p$cC`)5$a!)X&U+blKNvN5tg=uLvuLnuqRM;Yc*swiexsoh#XPNu{9F#c`G zQLe{yWA(Y6(;>y|-efAy11k<09(@Oo1B2@0`PtZSkqK&${ zgEY}`W@t{%?9u5rF?}Y7OL{338l*JY#P!%MVQY@oqnItpZ}?s z!r?*kwuR{A@jg2Chlf0^{q*>8n5Ir~YWf*wmsh7B5&EpHfd5@xVaj&gqsdui^spyL zB|kUoblGoO7G(MuKTfa9?pGH0@QP^b#!lM1yHWLh*2iq#`C1TdrnO-d#?Oh@XV2HK zKA{`eo{--^K&MW66Lgsktfvn#cCAc*(}qsfhrvOjMGLE?`dHVipu1J3Kgr%g?cNa8 z)pkmC8DGH~fG+dlrp(5^-QBeEvkOvv#q7MBVLtm2oD^$lJZx--_=K&Ttd=-krx(Bb zcEoKJda@S!%%@`P-##$>*u%T*mh+QjV@)Qa=Mk1?#zLk+M4tIt%}wagT{5J%!tXAE;r{@=bb%nNVxvI+C+$t?!VJ@0d@HIyMJTI{vEw0Ul ze(ha!e&qANbTL1ZneNl45t=#Ot??C0MHjjgY8%*mGisN|S6%g3;Hlx#fMNcL<87MW zZ>6moo1YD?P!fJ#Jb(4)_cc50X5n0KoDYfdPoL^iV`k&o{LPyaoqMqk92wVM#_O0l z09$(A-D+gVIlq4TA&{1T@BsUH`Bm=r#l$Z51J-U&F32+hfUP-iLo=jg7Xmy+WLq6_tWv&`wDlz#`&)Jp~iQf zZP)tu>}pIIJKuw+$&t}GQuqMd%Z>0?t%&BM&Wo^4P^Y z)c6h^f2R>X8*}q|bblAF?@;%?2>$y+cMQbN{X$)^R>vtNq_5AB|0N5U*d^T?X9{xQnJYeU{ zoZL#obI;~Pp95f1`%X3D$Mh*4^?O?IT~7HqlWguezmg?Ybq|7>qQ(@pPHbE9V?f|( z+0xo!#m@Np9PljsyxBY-UA*{U*la#8Wz2sO|48_-5t8%_!n?S$zlGe+NA%?vmxjS- zHE5O3ZarU=X}$7>;Okp(UWXJxI%G_J-@IH;%5#Rt$(WUX?6*Ux!IRd$dLP6+SmPn= z8zjm4jGjN772R{FGkXwcNv8GBcZI#@Y2m{RNF_w8(Z%^A*!bS*!}s6sh*NnURytky humW;*g7R+&|Ledvc-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; + } +}