From 8b20acfcc44b3975dba9d646b21c7a55962df2fd Mon Sep 17 00:00:00 2001 From: Lorenzo Iovino Date: Fri, 29 Dec 2023 04:34:47 +0100 Subject: [PATCH] Added more components --- .../card-cta.component.html} | 0 .../card-cta.component.scss} | 0 .../card-cta.component.spec.ts} | 12 +- .../card-cta.component.ts} | 6 +- src/app/fish/fish.component.html | 35 +++++ src/app/fish/fish.component.scss | 121 ++++++++++++++++++ src/app/fish/fish.component.spec.ts | 23 ++++ src/app/fish/fish.component.ts | 12 ++ src/app/footer/footer.component.html | 23 +++- src/app/footer/footer.component.ts | 6 +- src/app/highlight/highlight.component.html | 15 +++ src/app/highlight/highlight.component.scss | 0 src/app/highlight/highlight.component.spec.ts | 23 ++++ src/app/highlight/highlight.component.ts | 66 ++++++++++ src/app/menu/menu.component.html | 6 +- src/app/models/post.ts | 9 ++ src/app/page/page.component.html | 2 +- src/app/pages/about/about.page.html | 2 +- src/app/pages/home/home.page.html | 13 +- src/app/pages/home/home.page.ts | 10 +- src/app/post-card/post-card.component.html | 17 +++ src/app/post-card/post-card.component.scss | 0 src/app/post-card/post-card.component.spec.ts | 23 ++++ src/app/post-card/post-card.component.ts | 16 +++ src/app/section/section.component.html | 8 +- src/app/section/section.component.ts | 2 + src/assets/angular.svg | 16 +++ src/assets/tailwind.svg | 1 + 28 files changed, 436 insertions(+), 31 deletions(-) rename src/app/{card/card.component.html => card-cta/card-cta.component.html} (100%) rename src/app/{card/card.component.scss => card-cta/card-cta.component.scss} (100%) rename src/app/{card/card.component.spec.ts => card-cta/card-cta.component.spec.ts} (60%) rename src/app/{card/card.component.ts => card-cta/card-cta.component.ts} (72%) create mode 100644 src/app/fish/fish.component.html create mode 100644 src/app/fish/fish.component.scss create mode 100644 src/app/fish/fish.component.spec.ts create mode 100644 src/app/fish/fish.component.ts create mode 100644 src/app/highlight/highlight.component.html create mode 100644 src/app/highlight/highlight.component.scss create mode 100644 src/app/highlight/highlight.component.spec.ts create mode 100644 src/app/highlight/highlight.component.ts create mode 100644 src/app/models/post.ts create mode 100644 src/app/post-card/post-card.component.html create mode 100644 src/app/post-card/post-card.component.scss create mode 100644 src/app/post-card/post-card.component.spec.ts create mode 100644 src/app/post-card/post-card.component.ts create mode 100644 src/assets/angular.svg create mode 100644 src/assets/tailwind.svg diff --git a/src/app/card/card.component.html b/src/app/card-cta/card-cta.component.html similarity index 100% rename from src/app/card/card.component.html rename to src/app/card-cta/card-cta.component.html diff --git a/src/app/card/card.component.scss b/src/app/card-cta/card-cta.component.scss similarity index 100% rename from src/app/card/card.component.scss rename to src/app/card-cta/card-cta.component.scss diff --git a/src/app/card/card.component.spec.ts b/src/app/card-cta/card-cta.component.spec.ts similarity index 60% rename from src/app/card/card.component.spec.ts rename to src/app/card-cta/card-cta.component.spec.ts index bdc1ede..23d1a66 100644 --- a/src/app/card/card.component.spec.ts +++ b/src/app/card-cta/card-cta.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { CardComponent } from './card.component'; +import { CardCtaComponent } from './card-cta.component'; describe('CardComponent', () => { - let component: CardComponent; - let fixture: ComponentFixture; + let component: CardCtaComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [CardComponent] + imports: [CardCtaComponent] }) .compileComponents(); - - fixture = TestBed.createComponent(CardComponent); + + fixture = TestBed.createComponent(CardCtaComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/card/card.component.ts b/src/app/card-cta/card-cta.component.ts similarity index 72% rename from src/app/card/card.component.ts rename to src/app/card-cta/card-cta.component.ts index 02811e6..75ba58e 100644 --- a/src/app/card/card.component.ts +++ b/src/app/card-cta/card-cta.component.ts @@ -7,10 +7,10 @@ import {ButtonCtaComponent} from "../button-cta/button-cta.component"; imports: [ ButtonCtaComponent ], - templateUrl: './card.component.html', - styleUrl: './card.component.scss' + templateUrl: './card-cta.component.html', + styleUrl: './card-cta.component.scss' }) -export class CardComponent { +export class CardCtaComponent { @Input() color: 'light' | 'dark' = 'light'; @Input() ctaUrl: string = ''; diff --git a/src/app/fish/fish.component.html b/src/app/fish/fish.component.html new file mode 100644 index 0000000..d1f96fb --- /dev/null +++ b/src/app/fish/fish.component.html @@ -0,0 +1,35 @@ + + + + + + + + diff --git a/src/app/fish/fish.component.scss b/src/app/fish/fish.component.scss new file mode 100644 index 0000000..e657996 --- /dev/null +++ b/src/app/fish/fish.component.scss @@ -0,0 +1,121 @@ +svg#fish { +} +/* Fish Animation */ +svg.fish{ + overflow:visible; +} + +@-webkit-keyframes swim +{ + 0% {margin-left: -235px} + 90% {margin-left: 100%;} + 100% {margin-left: 100%;} +} + +@keyframes swim +{ + 0% {margin-left: -235px} + 70% {margin-left: 100%;} + 100% {margin-left: 100%;} +} + +.fish{ + width: 235px; + height: 104px; + margin-left: -235px; + position: absolute; + animation: swim 20s; + -webkit-animation: swim 20s; + animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; + animation-timing-function: linear; + -webkit-animation-timing-function: linear; +} + +svg #fish1, +svg #fish2, +svg #fish3, +svg #fish4, +svg #fish5, +svg #fish6 { + fill:#528484; + + -moz-animation: bounce 2s infinite; + -webkit-animation: bounce 2s infinite; + animation: bounce 2s infinite; +} + +svg #fish2{ + animation-delay: 0.5s; + -webkit-animation-delay: 0.5s; +} + +svg #fish3{ + animation-delay: 0.2s; + -webkit-animation-delay: 0.2s; +} + +svg #fish4{ + animation-delay: 0.4s; + -webkit-animation-delay: 0.4s; +} + +svg #fish5{ + animation-delay: 0.1s; + -webkit-animation-delay: 0.1s; +} + +svg #fish6{ + animation-delay: 0.3s; + -webkit-animation-delay: 0.3s; +} + +/**/ +@-moz-keyframes bounce { + 0%, 50%, 100% { + -moz-transform: translateY(0); + transform: translateY(0); + } + 25% { + -moz-transform: translateY(-5px); + transform: translateY(-5px); + } + 75% { + -moz-transform: translateY(-3px); + transform: translateY(-3px); + } +} +@-webkit-keyframes bounce { + 0%, 50%, 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 25% { + -webkit-transform: translateY(-5px); + transform: translateY(-5px); + } + 75% { + -webkit-transform: translateY(-3px); + transform: translateY(-3px); + } +} +@keyframes bounce { + 0%, 50%, 100% { + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -webkit-transform: translateY(0); + transform: translateY(0); + } + 25% { + -moz-transform: translateY(-5px); + -ms-transform: translateY(-5px); + -webkit-transform: translateY(-5px); + transform: translateY(-5px); + } + 75% { + -moz-transform: translateY(-3px); + -ms-transform: translateY(-3px); + -webkit-transform: translateY(-3px); + transform: translateY(-3px); + } +} diff --git a/src/app/fish/fish.component.spec.ts b/src/app/fish/fish.component.spec.ts new file mode 100644 index 0000000..f3e6084 --- /dev/null +++ b/src/app/fish/fish.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FishComponent } from './fish.component'; + +describe('FishComponent', () => { + let component: FishComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [FishComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FishComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/fish/fish.component.ts b/src/app/fish/fish.component.ts new file mode 100644 index 0000000..0f435c2 --- /dev/null +++ b/src/app/fish/fish.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'iov-fish', + standalone: true, + imports: [], + templateUrl: './fish.component.html', + styleUrl: './fish.component.scss' +}) +export class FishComponent { + +} diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html index 55dc406..3bde7b8 100644 --- a/src/app/footer/footer.component.html +++ b/src/app/footer/footer.component.html @@ -1,5 +1,6 @@
- + Talk is cheap @@ -11,8 +12,22 @@ Let's Talk! -
- Footer - Website made with etc... +
+
Website made with Angular + + + +
+
+ and TailwindCSS + + + +
+
+
+ + Code +
diff --git a/src/app/footer/footer.component.ts b/src/app/footer/footer.component.ts index dfb252b..8fe2ae8 100644 --- a/src/app/footer/footer.component.ts +++ b/src/app/footer/footer.component.ts @@ -1,11 +1,13 @@ import { Component } from '@angular/core'; -import {CardComponent} from "../card/card.component"; +import {FishComponent} from "../fish/fish.component"; +import {CardCtaComponent} from "../card-cta/card-cta.component"; @Component({ selector: 'iov-footer', standalone: true, imports: [ - CardComponent + CardCtaComponent, + FishComponent ], templateUrl: './footer.component.html', styleUrl: './footer.component.scss' diff --git a/src/app/highlight/highlight.component.html b/src/app/highlight/highlight.component.html new file mode 100644 index 0000000..5cf9ad7 --- /dev/null +++ b/src/app/highlight/highlight.component.html @@ -0,0 +1,15 @@ + +

+

Latest blog post

+
+
+ + +
+
+
+

No posts yet.

+
+ View all posts +
+ diff --git a/src/app/highlight/highlight.component.scss b/src/app/highlight/highlight.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/highlight/highlight.component.spec.ts b/src/app/highlight/highlight.component.spec.ts new file mode 100644 index 0000000..af97bc6 --- /dev/null +++ b/src/app/highlight/highlight.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HighlightComponent } from './highlight.component'; + +describe('HighlightComponent', () => { + let component: HighlightComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HighlightComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HighlightComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/highlight/highlight.component.ts b/src/app/highlight/highlight.component.ts new file mode 100644 index 0000000..285f09f --- /dev/null +++ b/src/app/highlight/highlight.component.ts @@ -0,0 +1,66 @@ +import { Component } from '@angular/core'; +import {SectionComponent} from "../section/section.component"; +import {Post} from "../models/post"; +import {PostCardComponent} from "../post-card/post-card.component"; +import {NgForOf, NgIf} from "@angular/common"; + +@Component({ + selector: 'iov-highlight', + standalone: true, + imports: [ + SectionComponent, + PostCardComponent, + NgForOf, + NgIf + ], + templateUrl: './highlight.component.html', + styleUrl: './highlight.component.scss' +}) +export class HighlightComponent { + posts: Post[] = [ + { + title: 'Post 1', + description: 'Description 1', + content: 'Content 1', + date: new Date(), + readTime: 1, + slug: 'post-1', + image: 'https://picsum.photos/300/200' + }, + { + title: 'Post 1', + description: 'Description 1', + content: 'Content 1', + date: new Date(), + readTime: 1, + slug: 'post-1', + image: 'https://picsum.photos/300/200' + }, + { + title: 'Post 1', + description: 'Description 1', + content: 'Content 1', + date: new Date(), + readTime: 1, + slug: 'post-1', + image: 'https://picsum.photos/300/200' + },{ + title: 'Post 1', + description: 'Description 1', + content: 'Content 1', + date: new Date(), + readTime: 1, + slug: 'post-1', + image: 'https://picsum.photos/300/200' + },{ + title: 'Post 1', + description: 'Description 1', + content: 'Content 1', + date: new Date(), + readTime: 1, + slug: 'post-1', + image: 'https://picsum.photos/300/200' + } + ] + +} diff --git a/src/app/menu/menu.component.html b/src/app/menu/menu.component.html index ea77c09..71585a6 100644 --- a/src/app/menu/menu.component.html +++ b/src/app/menu/menu.component.html @@ -1,7 +1,7 @@