diff --git a/src/app/about-me/about-me.component.css b/src/app/about-me/about-me.component.css new file mode 100644 index 0000000..dbcd96c --- /dev/null +++ b/src/app/about-me/about-me.component.css @@ -0,0 +1,17 @@ +.card { + border-radius: 10px; + + box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05); + transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12); + + cursor: pointer; +} + +.card:hover { + transform: scale(1.05); + box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06); +} + +img { + height: fit-content; +} \ No newline at end of file diff --git a/src/app/about-me/about-me.component.html b/src/app/about-me/about-me.component.html new file mode 100644 index 0000000..dfab576 --- /dev/null +++ b/src/app/about-me/about-me.component.html @@ -0,0 +1,6 @@ + +
+

About me

+ +
+ \ No newline at end of file diff --git a/src/app/about-me/about-me.component.spec.ts b/src/app/about-me/about-me.component.spec.ts new file mode 100644 index 0000000..d402b77 --- /dev/null +++ b/src/app/about-me/about-me.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AboutMeComponent } from './about-me.component'; + +describe('AboutMeComponent', () => { + let component: AboutMeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AboutMeComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AboutMeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/about-me/about-me.component.ts b/src/app/about-me/about-me.component.ts new file mode 100644 index 0000000..14b3504 --- /dev/null +++ b/src/app/about-me/about-me.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-about-me', + templateUrl: './about-me.component.html', + styleUrls: ['./about-me.component.css'] +}) +export class AboutMeComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/about-me/me.jpg b/src/app/about-me/me.jpg new file mode 100644 index 0000000..0331f08 Binary files /dev/null and b/src/app/about-me/me.jpg differ diff --git a/src/app/app.component.css b/src/app/app.component.css index f5a0a59..a10817a 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,3 +1,6 @@ -.container-bg { - background: yellow; +.bg-container { + background: rgb(132, 131, 133); + margin-right: 60px; + margin-left: 60px; + height: 2000px; } \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 9158d1c..4d4ab1e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,26 @@
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 86b0059..c347f3a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,11 +4,25 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { NavBarComponent } from './nav-bar/nav-bar.component'; +import { AboutMeComponent } from './about-me/about-me.component'; +import { CardsComponent } from './cards/cards.component'; +import { AndroidAppsComponent } from './cards/android-apps/android-apps.component'; +import { CsharpComponent } from './cards/csharp/csharp.component'; +import { PythonComponent } from './cards/python/python.component'; +import { AngularComponent } from './cards/angular/angular.component'; +import { JavaComponent } from './cards/java/java.component'; @NgModule({ declarations: [ AppComponent, - NavBarComponent + NavBarComponent, + AboutMeComponent, + CardsComponent, + AndroidAppsComponent, + CsharpComponent, + PythonComponent, + AngularComponent, + JavaComponent ], imports: [ BrowserModule, diff --git a/src/app/cards/android-apps/android-apps.component.css b/src/app/cards/android-apps/android-apps.component.css new file mode 100644 index 0000000..4653c97 --- /dev/null +++ b/src/app/cards/android-apps/android-apps.component.css @@ -0,0 +1,20 @@ +.card { + border-radius: 10px; + height: 70%; + box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05); + transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12); + + cursor: pointer; + + background: rgb(34, 193, 195); + background: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%); +} + +.card:hover { + transform: scale(1.05); + box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06); +} + +img { + height: 99%; +} \ No newline at end of file diff --git a/src/app/cards/android-apps/android-apps.component.html b/src/app/cards/android-apps/android-apps.component.html new file mode 100644 index 0000000..c337dcf --- /dev/null +++ b/src/app/cards/android-apps/android-apps.component.html @@ -0,0 +1,7 @@ + +
+

Android Apps

+ +
+ \ No newline at end of file diff --git a/src/app/cards/android-apps/android-apps.component.spec.ts b/src/app/cards/android-apps/android-apps.component.spec.ts new file mode 100644 index 0000000..f1e755e --- /dev/null +++ b/src/app/cards/android-apps/android-apps.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AndroidAppsComponent } from './android-apps.component'; + +describe('AndroidAppsComponent', () => { + let component: AndroidAppsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AndroidAppsComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AndroidAppsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/cards/android-apps/android-apps.component.ts b/src/app/cards/android-apps/android-apps.component.ts new file mode 100644 index 0000000..a32007d --- /dev/null +++ b/src/app/cards/android-apps/android-apps.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-android-apps', + templateUrl: './android-apps.component.html', + styleUrls: ['./android-apps.component.css'] +}) +export class AndroidAppsComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/cards/angular/angular.component.css b/src/app/cards/angular/angular.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/cards/angular/angular.component.html b/src/app/cards/angular/angular.component.html new file mode 100644 index 0000000..f461532 --- /dev/null +++ b/src/app/cards/angular/angular.component.html @@ -0,0 +1 @@ +

angular works!

diff --git a/src/app/cards/angular/angular.component.spec.ts b/src/app/cards/angular/angular.component.spec.ts new file mode 100644 index 0000000..adc8798 --- /dev/null +++ b/src/app/cards/angular/angular.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AngularComponent } from './angular.component'; + +describe('AngularComponent', () => { + let component: AngularComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AngularComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AngularComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/cards/angular/angular.component.ts b/src/app/cards/angular/angular.component.ts new file mode 100644 index 0000000..07dd5b5 --- /dev/null +++ b/src/app/cards/angular/angular.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-angular', + templateUrl: './angular.component.html', + styleUrls: ['./angular.component.css'] +}) +export class AngularComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/cards/cards.component.css b/src/app/cards/cards.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/cards/cards.component.html b/src/app/cards/cards.component.html new file mode 100644 index 0000000..e69de29 diff --git a/src/app/cards/cards.component.spec.ts b/src/app/cards/cards.component.spec.ts new file mode 100644 index 0000000..a908b43 --- /dev/null +++ b/src/app/cards/cards.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CardsComponent } from './cards.component'; + +describe('CardsComponent', () => { + let component: CardsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CardsComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(CardsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/cards/cards.component.ts b/src/app/cards/cards.component.ts new file mode 100644 index 0000000..75d47a6 --- /dev/null +++ b/src/app/cards/cards.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-cards', + templateUrl: './cards.component.html', + styleUrls: ['./cards.component.css'] +}) +export class CardsComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/cards/csharp/csharp.component.css b/src/app/cards/csharp/csharp.component.css new file mode 100644 index 0000000..836433a --- /dev/null +++ b/src/app/cards/csharp/csharp.component.css @@ -0,0 +1,20 @@ +.card { + border-radius: 10px; + + box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05); + transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12); + + cursor: pointer; + + background: rgb(238, 174, 202); + background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%); +} + +.card:hover { + transform: scale(1.05); + box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06); +} + +img { + height: fit-content; +} \ No newline at end of file diff --git a/src/app/cards/csharp/csharp.component.html b/src/app/cards/csharp/csharp.component.html new file mode 100644 index 0000000..1a8a600 --- /dev/null +++ b/src/app/cards/csharp/csharp.component.html @@ -0,0 +1,9 @@ + +
+ +
C#
+
+ +
+ + \ No newline at end of file diff --git a/src/app/cards/csharp/csharp.component.spec.ts b/src/app/cards/csharp/csharp.component.spec.ts new file mode 100644 index 0000000..ffa02dc --- /dev/null +++ b/src/app/cards/csharp/csharp.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CsharpComponent } from './csharp.component'; + +describe('CsharpComponent', () => { + let component: CsharpComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CsharpComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(CsharpComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/cards/csharp/csharp.component.ts b/src/app/cards/csharp/csharp.component.ts new file mode 100644 index 0000000..c0de25a --- /dev/null +++ b/src/app/cards/csharp/csharp.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-csharp', + templateUrl: './csharp.component.html', + styleUrls: ['./csharp.component.css'] +}) +export class CsharpComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/cards/java/java.component.css b/src/app/cards/java/java.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/cards/java/java.component.html b/src/app/cards/java/java.component.html new file mode 100644 index 0000000..dd3853c --- /dev/null +++ b/src/app/cards/java/java.component.html @@ -0,0 +1 @@ +

java works!

diff --git a/src/app/cards/java/java.component.spec.ts b/src/app/cards/java/java.component.spec.ts new file mode 100644 index 0000000..3dfce6a --- /dev/null +++ b/src/app/cards/java/java.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { JavaComponent } from './java.component'; + +describe('JavaComponent', () => { + let component: JavaComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ JavaComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(JavaComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/cards/java/java.component.ts b/src/app/cards/java/java.component.ts new file mode 100644 index 0000000..23028e3 --- /dev/null +++ b/src/app/cards/java/java.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-java', + templateUrl: './java.component.html', + styleUrls: ['./java.component.css'] +}) +export class JavaComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/cards/python/python.component.css b/src/app/cards/python/python.component.css new file mode 100644 index 0000000..8e10b2d --- /dev/null +++ b/src/app/cards/python/python.component.css @@ -0,0 +1,20 @@ +.card { + border-radius: 10px; + + box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05); + transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12); + + cursor: pointer; + + background: rgb(63, 94, 251); + background: radial-gradient(circle, rgba(63, 94, 251, 1) 65%, rgba(245, 252, 70, 1) 100%); +} + +.card:hover { + transform: scale(1.05); + box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06); +} + +img { + height: fit-content; +} \ No newline at end of file diff --git a/src/app/cards/python/python.component.html b/src/app/cards/python/python.component.html new file mode 100644 index 0000000..876e6c5 --- /dev/null +++ b/src/app/cards/python/python.component.html @@ -0,0 +1,9 @@ + +
+ +
Python
+
+ +
+ + \ No newline at end of file diff --git a/src/app/cards/python/python.component.spec.ts b/src/app/cards/python/python.component.spec.ts new file mode 100644 index 0000000..9b6131c --- /dev/null +++ b/src/app/cards/python/python.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PythonComponent } from './python.component'; + +describe('PythonComponent', () => { + let component: PythonComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PythonComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PythonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/cards/python/python.component.ts b/src/app/cards/python/python.component.ts new file mode 100644 index 0000000..e2a9add --- /dev/null +++ b/src/app/cards/python/python.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-python', + templateUrl: './python.component.html', + styleUrls: ['./python.component.css'] +}) +export class PythonComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/nav-bar/nav-bar.component.css b/src/app/nav-bar/nav-bar.component.css index 36273a7..25029ca 100644 --- a/src/app/nav-bar/nav-bar.component.css +++ b/src/app/nav-bar/nav-bar.component.css @@ -1,8 +1,23 @@ .nav-link { - border-bottom: 5px solid transparent; + border-bottom: 1px solid transparent; } -.nav-link:hover { +.navbar-custom { + border-bottom: 5px solid rgb(225, 213, 213); + height: 78px; + padding: auto; + +} + +.navbar-brand { + font-size: 40px; +} + +.item-font { + font-size: 30px; +} + +.item-font:hover { border-bottom: 5px solid rgb(71, 71, 71); - font-size: large; + font-size: 33px; } \ No newline at end of file diff --git a/src/app/nav-bar/nav-bar.component.html b/src/app/nav-bar/nav-bar.component.html index a47ddcc..2c8d07f 100644 --- a/src/app/nav-bar/nav-bar.component.html +++ b/src/app/nav-bar/nav-bar.component.html @@ -1,13 +1,13 @@ -