Added more components

This commit is contained in:
Lorenzo Iovino 2023-12-29 04:34:47 +01:00
parent c94493a3c5
commit 8b20acfcc4
28 changed files with 436 additions and 31 deletions

View file

@ -1,18 +1,18 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CardComponent } from './card.component'; import { CardCtaComponent } from './card-cta.component';
describe('CardComponent', () => { describe('CardComponent', () => {
let component: CardComponent; let component: CardCtaComponent;
let fixture: ComponentFixture<CardComponent>; let fixture: ComponentFixture<CardCtaComponent>;
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
imports: [CardComponent] imports: [CardCtaComponent]
}) })
.compileComponents(); .compileComponents();
fixture = TestBed.createComponent(CardComponent); fixture = TestBed.createComponent(CardCtaComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();
}); });

View file

@ -7,10 +7,10 @@ import {ButtonCtaComponent} from "../button-cta/button-cta.component";
imports: [ imports: [
ButtonCtaComponent ButtonCtaComponent
], ],
templateUrl: './card.component.html', templateUrl: './card-cta.component.html',
styleUrl: './card.component.scss' styleUrl: './card-cta.component.scss'
}) })
export class CardComponent { export class CardCtaComponent {
@Input() color: 'light' | 'dark' = 'light'; @Input() color: 'light' | 'dark' = 'light';
@Input() ctaUrl: string = ''; @Input() ctaUrl: string = '';

View file

@ -0,0 +1,35 @@
<svg class="fish" id="fish">
<path
id="fish2"
d="m 172.04828,20.913839 c 0.0489,-0.444179 -0.2178,-0.896934 -1.01784,-1.415715 -0.72801,-0.475049 -1.4826,-0.932948 -2.2149,-1.401138 -1.6035,-1.028129 -3.29018,-1.969653 -4.89798,-3.079244 -4.67074,-3.24131 -10.22127,-4.404923 -15.76322,-5.1509392 -2.27235,-0.286401 -4.81223,-0.168925 -6.72186,-1.574351 -1.48174,-1.081294 -4.04993,-4.828523 -6.86506,-6.456038 -0.4862,-0.290688 -2.77227,-1.44486897 -2.77227,-1.44486897 0,0 1.30939,3.55000597 1.60951,4.26429497 0.69542,1.644664 -0.38158,3.063809 -0.83262,4.642447 -0.29069,1.0418502 2.13772,0.8129002 2.26463,1.7827212 0.18179,1.432007 -4.15197,1.936211 -6.59152,2.417263 -3.65634,0.715146 -7.91635,2.082841 -11.56925,0.884071 -4.3046,-1.38313 -7.37269,-4.129669 -10.46566,-7.2354952 1.43801,6.7252892 5.4382,10.6028562 5.6157,11.4226162 0.18607,0.905509 -0.45961,1.091584 -1.04099,1.682394 -1.28967,1.265655 -6.91566,7.731125 -6.93366,9.781383 1.61379,-0.247815 3.56115,-1.660957 4.9803,-2.485862 1.58035,-0.905509 7.60593,-5.373029 9.29347,-6.065023 0.38587,-0.160351 5.0549,-1.531476 5.09434,-0.932949 0.0695,0.932949 -0.30784,1.137031 -0.18436,1.527189 0.22638,0.746016 1.44144,1.465449 2.02282,1.985088 1.50918,1.292237 3.21044,2.42841 4.27373,4.156252 1.49203,2.401827 1.55805,4.999163 1.98251,7.677102 0.99469,-0.111473 2.0091,-2.17545 2.55961,-2.992638 0.51278,-0.772598 2.38639,-4.07136 3.09725,-4.275442 0.67227,-0.204082 2.75511,0.958673 3.50284,1.180763 2.85973,0.848057 5.644,1.353976 8.56032,1.353976 3.50799,0.0094 12.726,0.258104 19.55505,-4.800226 0.75545,-0.567658 2.55703,-2.731104 2.55703,-2.731104 0,0 -0.37644,-0.577091 -1.04785,-0.790605 0.89779,-0.584808 1.8659,-1.211633 1.94993,-1.925922 z"
style="fill:#528484;fill-opacity:1"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccccccccccccccccc" />
<path
sodipodi:nodetypes="cccccccccccccccccccccccccccccccc"
inkscape:connector-curvature="0"
style="fill:#528484;fill-opacity:1"
d="m 234.99441,42.953992 c 0.0489,-0.44418 -0.2178,-0.896934 -1.01784,-1.415715 -0.72801,-0.47505 -1.4826,-0.932949 -2.2149,-1.401138 -1.6035,-1.02813 -3.29018,-1.969653 -4.89798,-3.079245 -4.67074,-3.24131 -10.22127,-4.404923 -15.76322,-5.150939 -2.27235,-0.286401 -4.81223,-0.168925 -6.72186,-1.574351 -1.48174,-1.081294 -4.04993,-4.828523 -6.86506,-6.456038 -0.4862,-0.290688 -2.77227,-1.444869 -2.77227,-1.444869 0,0 1.30939,3.550006 1.60951,4.264295 0.69542,1.644664 -0.38158,3.063809 -0.83262,4.642447 -0.29069,1.04185 2.13772,0.8129 2.26463,1.782721 0.18179,1.432007 -4.15197,1.936211 -6.59152,2.417263 -3.65634,0.715146 -7.91635,2.082842 -11.56925,0.884072 -4.3046,-1.383131 -7.37269,-4.12967 -10.46566,-7.235496 1.43801,6.725289 5.4382,10.602857 5.6157,11.422617 0.18607,0.905508 -0.45961,1.091583 -1.04099,1.682394 -1.28967,1.265654 -6.91566,7.731125 -6.93366,9.781382 1.61379,-0.247815 3.56115,-1.660957 4.9803,-2.485862 1.58035,-0.905509 7.60593,-5.373029 9.29347,-6.065023 0.38587,-0.160351 5.0549,-1.531476 5.09434,-0.932948 0.0695,0.932948 -0.30784,1.137031 -0.18436,1.527188 0.22638,0.746016 1.44144,1.46545 2.02282,1.985088 1.50918,1.292237 3.21044,2.42841 4.27373,4.156252 1.49203,2.401827 1.55805,4.999163 1.98251,7.677102 0.99469,-0.111473 2.0091,-2.17545 2.55961,-2.992638 0.51278,-0.772598 2.38639,-4.071359 3.09725,-4.275442 0.67227,-0.204082 2.75511,0.958673 3.50284,1.180763 2.85973,0.848057 5.644,1.353976 8.56032,1.353976 3.50799,0.0094 12.726,0.258104 19.55505,-4.800226 0.75545,-0.567658 2.55703,-2.731104 2.55703,-2.731104 0,0 -0.37644,-0.57709 -1.04785,-0.790605 0.89779,-0.584808 1.8659,-1.211633 1.94993,-1.925921 z"
id="fish3" />
<path
id="fish6"
d="m 200.07076,80.737109 c 0.0489,-0.44418 -0.2178,-0.896934 -1.01784,-1.415715 -0.72801,-0.47505 -1.4826,-0.932949 -2.2149,-1.401138 -1.6035,-1.02813 -3.29018,-1.969653 -4.89798,-3.079245 -4.67074,-3.24131 -10.22127,-4.404923 -15.76322,-5.150939 -2.27235,-0.286401 -4.81223,-0.168925 -6.72186,-1.574351 -1.48174,-1.081294 -4.04993,-4.828523 -6.86506,-6.456038 -0.4862,-0.290688 -2.77227,-1.444869 -2.77227,-1.444869 0,0 1.30939,3.550006 1.60951,4.264295 0.69542,1.644664 -0.38158,3.063809 -0.83262,4.642447 -0.29069,1.04185 2.13772,0.8129 2.26463,1.782721 0.18179,1.432007 -4.15197,1.936211 -6.59152,2.417263 -3.65634,0.715146 -7.91635,2.082842 -11.56925,0.884072 -4.3046,-1.383131 -7.37269,-4.12967 -10.46566,-7.235496 1.43801,6.725289 5.4382,10.602857 5.6157,11.422617 0.18607,0.905508 -0.45961,1.091583 -1.04099,1.682394 -1.28967,1.265654 -6.91566,7.731125 -6.93366,9.781382 1.61379,-0.247815 3.56115,-1.660957 4.9803,-2.485862 1.58035,-0.905509 7.60593,-5.373029 9.29347,-6.065023 0.38587,-0.160351 5.0549,-1.531476 5.09434,-0.932948 0.0695,0.932948 -0.30784,1.137031 -0.18436,1.527188 0.22638,0.746016 1.44144,1.46545 2.02282,1.985088 1.50918,1.292237 3.21044,2.42841 4.27373,4.156252 1.49203,2.401827 1.55805,4.999163 1.98251,7.677102 0.99469,-0.111473 2.0091,-2.17545 2.55961,-2.992638 0.51278,-0.772598 2.38639,-4.071359 3.09725,-4.275442 0.67227,-0.204082 2.75511,0.958673 3.50284,1.180763 2.85973,0.848057 5.644,1.353976 8.56032,1.353976 3.50799,0.0094 12.726,0.258104 19.55505,-4.800226 0.75545,-0.567658 2.55703,-2.731104 2.55703,-2.731104 0,0 -0.37644,-0.57709 -1.04785,-0.790605 0.89779,-0.584808 1.8659,-1.211633 1.94993,-1.925921 z"
style="fill:#528484;fill-opacity:1"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccccccccccccccccc" />
<path
sodipodi:nodetypes="cccccccccccccccccccccccccccccccc"
inkscape:connector-curvature="0"
style="fill:#528484;fill-opacity:1"
d="m 77.275623,89.018799 c 0.0489,-0.44418 -0.2178,-0.896934 -1.01784,-1.415715 -0.72801,-0.47505 -1.4826,-0.932949 -2.2149,-1.401138 -1.6035,-1.02813 -3.29018,-1.969653 -4.89798,-3.079245 -4.67074,-3.24131 -10.22127,-4.404923 -15.76322,-5.150939 -2.272347,-0.286401 -4.812227,-0.168925 -6.721857,-1.574351 -1.48174,-1.081294 -4.04993,-4.828523 -6.86506,-6.456038 -0.4862,-0.290688 -2.77227,-1.444869 -2.77227,-1.444869 0,0 1.30939,3.550006 1.60951,4.264295 0.69542,1.644664 -0.38158,3.063809 -0.83262,4.642447 -0.29069,1.04185 2.13772,0.8129 2.26463,1.782721 0.18179,1.432007 -4.15197,1.936211 -6.59152,2.417263 -3.65634,0.715146 -7.91635,2.082842 -11.56925,0.884072 -4.3046,-1.383131 -7.37269,-4.12967 -10.46566,-7.235496 1.43801,6.725289 5.4382,10.602857 5.6157,11.422617 0.18607,0.905508 -0.45961,1.091583 -1.04099,1.682394 -1.28967,1.265654 -6.9156603,7.731122 -6.9336603,9.781382 1.6137903,-0.24782 3.5611503,-1.66096 4.9803003,-2.48586 1.58035,-0.90551 7.60593,-5.37303 9.29347,-6.065025 0.38587,-0.160351 5.0549,-1.531476 5.09434,-0.932948 0.0695,0.932948 -0.30784,1.137031 -0.18436,1.527183 0.22638,0.74602 1.44144,1.46546 2.02282,1.98509 1.50918,1.29224 3.21044,2.42841 4.27373,4.15625 1.49203,2.40183 1.55805,4.999171 1.98251,7.677111 0.99469,-0.11148 2.0091,-2.17545 2.55961,-2.99264 0.51278,-0.7726 2.38639,-4.071361 3.09725,-4.275441 0.67227,-0.20408 2.75511,0.95867 3.50284,1.18076 2.85973,0.84806 5.644,1.35398 8.560317,1.35398 3.50799,0.009 12.726,0.2581 19.55505,-4.80023 0.75545,-0.56766 2.55703,-2.7311 2.55703,-2.7311 0,0 -0.37644,-0.57709 -1.04785,-0.79061 0.89779,-0.58481 1.8659,-1.211632 1.94993,-1.92592 z"
id="fish4" />
<path
id="fish5"
d="m 127.65312,60.900973 c 0.0489,-0.44418 -0.2178,-0.896934 -1.01784,-1.415715 -0.72801,-0.47505 -1.4826,-0.932949 -2.2149,-1.401138 -1.6035,-1.02813 -3.29018,-1.969653 -4.89799,-3.079245 -4.67074,-3.24131 -10.22127,-4.404923 -15.76322,-5.150939 -2.27235,-0.286401 -4.812228,-0.168925 -6.721858,-1.574351 -1.48174,-1.081294 -4.04993,-4.828523 -6.86506,-6.456038 -0.4862,-0.290688 -2.77227,-1.444869 -2.77227,-1.444869 0,0 1.30939,3.550006 1.60951,4.264295 0.69542,1.644664 -0.38158,3.063809 -0.83262,4.642447 -0.29069,1.04185 2.13772,0.8129 2.26463,1.782721 0.18179,1.432007 -4.15197,1.936211 -6.59152,2.417263 -3.65634,0.715146 -7.91635,2.082842 -11.56925,0.884072 -4.3046,-1.383131 -7.37269,-4.12967 -10.46566,-7.235496 1.43801,6.725289 5.4382,10.602857 5.6157,11.422617 0.18607,0.905508 -0.45961,1.091583 -1.04099,1.682394 -1.28967,1.265654 -6.91566,7.731125 -6.93366,9.781382 1.61379,-0.247815 3.56115,-1.660957 4.9803,-2.485862 1.58035,-0.905509 7.60593,-5.373029 9.29347,-6.065023 0.38587,-0.160351 5.0549,-1.531476 5.09434,-0.932948 0.0695,0.932948 -0.30784,1.137031 -0.18436,1.527188 0.22638,0.746016 1.44144,1.46545 2.02282,1.985088 1.50918,1.292237 3.21044,2.42841 4.27373,4.156252 1.49203,2.401827 1.55805,4.999163 1.98251,7.677102 0.99469,-0.111473 2.0091,-2.17545 2.55961,-2.992638 0.51278,-0.772598 2.38639,-4.071359 3.09725,-4.275442 0.67227,-0.204082 2.75511,0.958673 3.50284,1.180763 2.85973,0.848057 5.643998,1.353976 8.560318,1.353976 3.50799,0.0094 12.726,0.258104 19.55506,-4.800226 0.75545,-0.567658 2.55703,-2.731104 2.55703,-2.731104 0,0 -0.37644,-0.57709 -1.04785,-0.790605 0.89779,-0.584808 1.8659,-1.211633 1.94993,-1.925921 z"
style="fill:#528484;fill-opacity:1"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccccccccccccccccc" />
<path
d="m 68.19699,20.522295 c 0.0489,-0.44418 -0.2178,-0.896934 -1.01784,-1.415715 -0.72801,-0.47505 -1.4826,-0.932949 -2.2149,-1.401138 -1.6035,-1.02813 -3.29018,-1.969653 -4.89798,-3.079245 C 55.39553,11.384887 49.845,10.221274 44.30305,9.4752582 42.0307,9.1888572 39.49082,9.3063332 37.58119,7.900907 36.09945,6.819613 33.53126,3.072384 30.71613,1.444869 30.22993,1.154181 27.94386,0 27.94386,0 c 0,0 1.30939,3.550006 1.60951,4.264295 0.69542,1.644664 -0.38158,3.063809 -0.83262,4.642447 -0.29069,1.0418502 2.13772,0.8129002 2.26463,1.782721 0.18179,1.432007 -4.15197,1.936211 -6.59152,2.417263 -3.65634,0.715146 -7.91635,2.082842 -11.56925,0.884072 C 8.52001,12.607667 5.45192,9.8611282 2.35895,6.755302 3.79696,13.480591 7.79715,17.358159 7.97465,18.177919 8.16072,19.083427 7.51504,19.269502 6.93366,19.860313 5.64399,21.125967 0.018,27.591438 0,29.641695 1.61379,29.39388 3.56115,27.980738 4.9803,27.155833 c 1.58035,-0.905509 7.60593,-5.373029 9.29347,-6.065023 0.38587,-0.160351 5.0549,-1.531476 5.09434,-0.932948 0.0695,0.932948 -0.30784,1.137031 -0.18436,1.527188 0.22638,0.746016 1.44144,1.46545 2.02282,1.985088 1.50918,1.292237 3.21044,2.42841 4.27373,4.156252 1.49203,2.401827 1.55805,4.999163 1.98251,7.677102 0.99469,-0.111473 2.0091,-2.17545 2.55961,-2.992638 0.51278,-0.772598 2.38639,-4.071359 3.09725,-4.275442 0.67227,-0.204082 2.75511,0.958673 3.50284,1.180763 2.85973,0.848057 5.644,1.353976 8.56032,1.353976 3.50799,0.0094 12.726,0.258104 19.55505,-4.800226 0.75545,-0.567658 2.55703,-2.731104 2.55703,-2.731104 0,0 -0.37644,-0.57709 -1.04785,-0.790605 0.89779,-0.584808 1.8659,-1.211633 1.94993,-1.925921 z"
id="fish1" />
</svg>

After

Width:  |  Height:  |  Size: 10 KiB

View file

@ -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);
}
}

View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FishComponent } from './fish.component';
describe('FishComponent', () => {
let component: FishComponent;
let fixture: ComponentFixture<FishComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [FishComponent]
})
.compileComponents();
fixture = TestBed.createComponent(FishComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View file

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

View file

@ -1,5 +1,6 @@
<div class="bottom-0 bg-secondary w-full flex flex-col"> <div class="bottom-0 bg-secondary w-full flex flex-col">
<iov-card [ctaUrl]="'hello'" <iov-fish></iov-fish>
<iov-card [ctaUrl]="'hello'"
class="mr-8 ml-8 relative -top-12"> class="mr-8 ml-8 relative -top-12">
<span left> <span left>
<span class="text-accent"> Talk is cheap</span> <span class="text-accent"> Talk is cheap</span>
@ -11,8 +12,22 @@
Let's Talk! Let's Talk!
</span> </span>
</iov-card> </iov-card>
<div class="text-center text-white p-4"> <div class="text-right text-sm text-white p-4">
Footer <div class="">Website made with Angular
Website made with etc... <a href="https://angular.io/">
<img class="h-6 w-6 mx-1 inline-grid" src="/assets/angular.svg">
</a>
</div>
<div>
and TailwindCSS
<a href="https://tailwindcss.com/">
<img class="h-6 w-6 mx-1 inline-grid" src="/assets/tailwind.svg">
</a>
<br/>
</div>
<div class="mt-2 font-bold">
<a href="https://github.com/lokenxo/loreiov.com">
Code <img src="/assets/github.svg" class="h-6 w-6 mx-1 inline-block" alt=""></a>
</div>
</div> </div>
</div> </div>

View file

@ -1,11 +1,13 @@
import { Component } from '@angular/core'; 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({ @Component({
selector: 'iov-footer', selector: 'iov-footer',
standalone: true, standalone: true,
imports: [ imports: [
CardComponent CardCtaComponent,
FishComponent
], ],
templateUrl: './footer.component.html', templateUrl: './footer.component.html',
styleUrl: './footer.component.scss' styleUrl: './footer.component.scss'

View file

@ -0,0 +1,15 @@
<iov-section [noHeight]="true">
<p class="text-center text-base">
<h2 class="text-2xl font-bold my-8" *ngIf="posts.length > 0">Latest blog post</h2>
<div class="grid grid-cols-3 justify-items-center bg-slate-100 gap-8">
<div *ngFor="let post of posts">
<iov-post-card [post]="post">
</iov-post-card>
</div>
</div>
<div class="text-center" *ngIf="posts.length === 0">
<p class="text-base">No posts yet.</p>
<br>
<a class="text-base" routerLink="/blog">View all posts</a>
</div>
</iov-section>

View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HighlightComponent } from './highlight.component';
describe('HighlightComponent', () => {
let component: HighlightComponent;
let fixture: ComponentFixture<HighlightComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HighlightComponent]
})
.compileComponents();
fixture = TestBed.createComponent(HighlightComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View file

@ -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'
}
]
}

View file

@ -1,7 +1,7 @@
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6"> <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6"> <div class="flex items-center flex-shrink-0 text-white mr-6">
<span class="font-semibold text-xl tracking-tight"> <span class="font-semibold text-xl tracking-tight">
<a href="/">Lore Iov</a> <a href="/">Home</a>
</span> </span>
</div> </div>
<div class="text-xl font-bold lg:flex-grow"> <div class="text-xl font-bold lg:flex-grow">
@ -11,9 +11,9 @@
<a href="portfolio" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4"> <a href="portfolio" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
Portfolio Portfolio
</a> </a>
<!--<a href="projects" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4"> <a href="projects" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
Projects Projects
</a>--> </a>
<!--<a href="blog" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4"> <!--<a href="blog" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
Blog Blog
</a>--> </a>-->

9
src/app/models/post.ts Normal file
View file

@ -0,0 +1,9 @@
export interface Post {
title: string;
slug: string;
description: string;
content: string;
date: Date;
readTime: number;
image: string;
}

View file

@ -1,5 +1,5 @@
<div class="relative"> <div class="relative">
<div class="mx-auto"> <div class="mx-auto pb-24">
<ng-content> <ng-content>
</ng-content> </ng-content>
</div> </div>

View file

@ -1,6 +1,6 @@
<iov-page> <iov-page>
<iov-section [title]="'Working smart, living hard'" <iov-section [title]="'Working smart, living hard'"
[titleColor]="'dark'" [titleColor]="'light'"
[backgroundImageUrl]="'/assets/section-smart.png'"></iov-section> [backgroundImageUrl]="'/assets/section-smart.png'"></iov-section>
<p>Since beginning my journey as a freelance designer over 11 years ago, I've done remote work for agencies, consulted for startups, and collaborated with talented people to create digital products for both business and consumer use. I'm quietly confident, naturally curious, and perpetually working on improving my chops one design problem at a time. <p>Since beginning my journey as a freelance designer over 11 years ago, I've done remote work for agencies, consulted for startups, and collaborated with talented people to create digital products for both business and consumer use. I'm quietly confident, naturally curious, and perpetually working on improving my chops one design problem at a time.
Designer Designer

View file

@ -3,11 +3,12 @@
</div> </div>
<iov-arrow-scroll-down></iov-arrow-scroll-down> <iov-arrow-scroll-down></iov-arrow-scroll-down>
<div class="mx-auto pb-24">
<iov-section> <iov-section
<p class="text-center text-base"> [backgroundColor]="'dark'">
Lorem ipsum dolor sit amet, consectet adipiscing elit. Nulla ac dui euismod, aliquam nunc quis, tincidunt nisl. Donec euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nunc nisl quis nunc. Nulla facilisi. Sed euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nunc nisl quis nunc. Nulla facilisi. Sed euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nunc nisl quis nunc. Nulla facilisi. Sed euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nunc nisl quis nunc. Nulla facilisi. Sed euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nunc nisl quis nunc. Nulla facilisi. Sed euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nunc nisl quis nunc. Nulla facilisi. Sed euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nunc nisl quis nunc. Nulla facilisi.</p> </iov-section>
<br> <iov-highlight></iov-highlight>
</iov-section> </div>

View file

@ -3,8 +3,10 @@ import {HeroComponent} from "../../hero/hero.component";
import {SectionComponent} from "../../section/section.component"; import {SectionComponent} from "../../section/section.component";
import {PageComponent} from "../../page/page.component"; import {PageComponent} from "../../page/page.component";
import {FooterComponent} from "../../footer/footer.component"; import {FooterComponent} from "../../footer/footer.component";
import {CardComponent} from "../../card/card.component";
import {ArrowScrollDownComponent} from "../../arrow-scroll-down/arrow-scroll-down.component"; import {ArrowScrollDownComponent} from "../../arrow-scroll-down/arrow-scroll-down.component";
import {FishComponent} from "../../fish/fish.component";
import {HighlightComponent} from "../../highlight/highlight.component";
import {CardCtaComponent} from "../../card-cta/card-cta.component";
@Component({ @Component({
selector: 'iov-home-page', selector: 'iov-home-page',
@ -14,8 +16,10 @@ import {ArrowScrollDownComponent} from "../../arrow-scroll-down/arrow-scroll-dow
SectionComponent, SectionComponent,
PageComponent, PageComponent,
FooterComponent, FooterComponent,
CardComponent, CardCtaComponent,
ArrowScrollDownComponent ArrowScrollDownComponent,
FishComponent,
HighlightComponent
], ],
templateUrl: './home.page.html', templateUrl: './home.page.html',
styleUrl: './home.page.scss' styleUrl: './home.page.scss'

View file

@ -0,0 +1,17 @@
<!-- This is an example component -->
<div class="">
<div class="bg-white shadow-md border border-gray-200 rounded-lg max-w-sm mb-5">
<a href="/blog/{{post?.slug}}">
<img class="rounded-t-lg" src="{{post?.image}}" alt="">
</a>
<div class="p-5">
<a href="#">
<h5 class="text-gray-900 font-bold text-2xl tracking-tight mb-2">{{post?.title}}</h5>
</a>
<p class="font-normal text-gray-700 mb-3">{{post?.description}}</p>
<a class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center" href="/blog/{{post?.slug}}">
Read more
</a>
</div>
</div>
</div>

View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PostCardComponent } from './post-card.component';
describe('PostCardComponent', () => {
let component: PostCardComponent;
let fixture: ComponentFixture<PostCardComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [PostCardComponent]
})
.compileComponents();
fixture = TestBed.createComponent(PostCardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View file

@ -0,0 +1,16 @@
import {Component, Input} from '@angular/core';
import {Post} from "../models/post";
import {JsonPipe} from "@angular/common";
@Component({
selector: 'iov-post-card',
standalone: true,
imports: [
JsonPipe
],
templateUrl: './post-card.component.html',
styleUrl: './post-card.component.scss'
})
export class PostCardComponent {
@Input() post: Post | undefined;
}

View file

@ -1,5 +1,9 @@
<div class="bg-center h-[150px] bg-no-repeat {{backgroundImageUrl ? 'url(' + backgroundImageUrl +')' : 'bg-secondary'}}" [style.background-image]="backgroundImageUrl ? 'url(' + backgroundImageUrl +')' : ''"> <div class="bg-center h-[150px] bg-no-repeat
<h2 class="pt-4 text-3xl text-gray-600 mr-6 font-extrabold text-{{titleColor == 'light' ? 'white' : 'primary'}}">{{title}}</h2> {{noHeight ? 'h-0' : 'h-[150px]'}}
bg-{{backgroundColor == 'light' ? 'white' : 'secondary'}}
{{backgroundImageUrl ? 'url(' + backgroundImageUrl +')' : ''}}"
[style.background-image]="backgroundImageUrl ? 'url(' + backgroundImageUrl +')' : ''">
<h2 class="mx-24 pt-4 text-4xl text-gray-600 mr-6 font-extrabold text-{{titleColor == 'light' ? 'white' : 'secondary'}}">{{title}}</h2>
</div> </div>
<div class="px-6"> <div class="px-6">
<div class="mx-auto max-w-4xl py-4"> <div class="mx-auto max-w-4xl py-4">

View file

@ -12,4 +12,6 @@ export class SectionComponent {
@Input() title: string = ''; @Input() title: string = '';
@Input() titleColor: 'light' | 'dark' = 'light'; @Input() titleColor: 'light' | 'dark' = 'light';
@Input() backgroundImageUrl: string = ''; @Input() backgroundImageUrl: string = '';
@Input() backgroundColor: 'light' | 'dark' = 'light';
@Input() noHeight: boolean = false;
} }

16
src/assets/angular.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
<style type="text/css">
.st0{fill:#DD0031;}
.st1{fill:#C3002F;}
.st2{fill:#FFFFFF;}
</style>
<g>
<polygon class="st0" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2 "/>
<polygon class="st1" points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30 "/>
<path class="st2" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 883 B

1
src/assets/tailwind.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33"><g clip-path="url(#prefix__clip0)"><path fill="#ffffff" fill-rule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" clip-rule="evenodd"/></g><defs><clipPath id="prefix__clip0"><path fill="#fff" d="M0 0h54v32.4H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 772 B