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 @@