Home page #2
28 changed files with 436 additions and 31 deletions
|
|
@ -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<CardComponent>;
|
||||
let component: CardCtaComponent;
|
||||
let fixture: ComponentFixture<CardCtaComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CardComponent]
|
||||
imports: [CardCtaComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CardComponent);
|
||||
fixture = TestBed.createComponent(CardCtaComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
|
@ -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 = '';
|
||||
35
src/app/fish/fish.component.html
Normal file
35
src/app/fish/fish.component.html
Normal 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 |
121
src/app/fish/fish.component.scss
Normal file
121
src/app/fish/fish.component.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
23
src/app/fish/fish.component.spec.ts
Normal file
23
src/app/fish/fish.component.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
||||
12
src/app/fish/fish.component.ts
Normal file
12
src/app/fish/fish.component.ts
Normal 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 {
|
||||
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<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">
|
||||
<span left>
|
||||
<span class="text-accent"> Talk is cheap</span>
|
||||
|
|
@ -11,8 +12,22 @@
|
|||
Let's Talk!
|
||||
</span>
|
||||
</iov-card>
|
||||
<div class="text-center text-white p-4">
|
||||
Footer
|
||||
Website made with etc...
|
||||
<div class="text-right text-sm text-white p-4">
|
||||
<div class="">Website made with Angular
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
15
src/app/highlight/highlight.component.html
Normal file
15
src/app/highlight/highlight.component.html
Normal 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>
|
||||
0
src/app/highlight/highlight.component.scss
Normal file
0
src/app/highlight/highlight.component.scss
Normal file
23
src/app/highlight/highlight.component.spec.ts
Normal file
23
src/app/highlight/highlight.component.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
||||
66
src/app/highlight/highlight.component.ts
Normal file
66
src/app/highlight/highlight.component.ts
Normal 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'
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<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">
|
||||
<span class="font-semibold text-xl tracking-tight">
|
||||
<a href="/">Lore Iov</a>
|
||||
<a href="/">Home</a>
|
||||
</span>
|
||||
</div>
|
||||
<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">
|
||||
Portfolio
|
||||
</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
|
||||
</a>-->
|
||||
</a>
|
||||
<!--<a href="blog" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
|
||||
Blog
|
||||
</a>-->
|
||||
|
|
|
|||
9
src/app/models/post.ts
Normal file
9
src/app/models/post.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export interface Post {
|
||||
title: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
content: string;
|
||||
date: Date;
|
||||
readTime: number;
|
||||
image: string;
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="relative">
|
||||
<div class="mx-auto">
|
||||
<div class="mx-auto pb-24">
|
||||
<ng-content>
|
||||
</ng-content>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<iov-page>
|
||||
<iov-section [title]="'Working smart, living hard'"
|
||||
[titleColor]="'dark'"
|
||||
[titleColor]="'light'"
|
||||
[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.
|
||||
Designer
|
||||
|
|
|
|||
|
|
@ -3,11 +3,12 @@
|
|||
</div>
|
||||
|
||||
<iov-arrow-scroll-down></iov-arrow-scroll-down>
|
||||
|
||||
<iov-section>
|
||||
<p class="text-center text-base">
|
||||
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>
|
||||
<br>
|
||||
</iov-section>
|
||||
<div class="mx-auto pb-24">
|
||||
<iov-section
|
||||
[backgroundColor]="'dark'">
|
||||
</iov-section>
|
||||
<iov-highlight></iov-highlight>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,10 @@ import {HeroComponent} from "../../hero/hero.component";
|
|||
import {SectionComponent} from "../../section/section.component";
|
||||
import {PageComponent} from "../../page/page.component";
|
||||
import {FooterComponent} from "../../footer/footer.component";
|
||||
import {CardComponent} from "../../card/card.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({
|
||||
selector: 'iov-home-page',
|
||||
|
|
@ -14,8 +16,10 @@ import {ArrowScrollDownComponent} from "../../arrow-scroll-down/arrow-scroll-dow
|
|||
SectionComponent,
|
||||
PageComponent,
|
||||
FooterComponent,
|
||||
CardComponent,
|
||||
ArrowScrollDownComponent
|
||||
CardCtaComponent,
|
||||
ArrowScrollDownComponent,
|
||||
FishComponent,
|
||||
HighlightComponent
|
||||
],
|
||||
templateUrl: './home.page.html',
|
||||
styleUrl: './home.page.scss'
|
||||
|
|
|
|||
17
src/app/post-card/post-card.component.html
Normal file
17
src/app/post-card/post-card.component.html
Normal 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>
|
||||
0
src/app/post-card/post-card.component.scss
Normal file
0
src/app/post-card/post-card.component.scss
Normal file
23
src/app/post-card/post-card.component.spec.ts
Normal file
23
src/app/post-card/post-card.component.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
||||
16
src/app/post-card/post-card.component.ts
Normal file
16
src/app/post-card/post-card.component.ts
Normal 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;
|
||||
}
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
<div class="bg-center h-[150px] bg-no-repeat {{backgroundImageUrl ? 'url(' + backgroundImageUrl +')' : 'bg-secondary'}}" [style.background-image]="backgroundImageUrl ? 'url(' + backgroundImageUrl +')' : ''">
|
||||
<h2 class="pt-4 text-3xl text-gray-600 mr-6 font-extrabold text-{{titleColor == 'light' ? 'white' : 'primary'}}">{{title}}</h2>
|
||||
<div class="bg-center h-[150px] bg-no-repeat
|
||||
{{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 class="px-6">
|
||||
<div class="mx-auto max-w-4xl py-4">
|
||||
|
|
|
|||
|
|
@ -12,4 +12,6 @@ export class SectionComponent {
|
|||
@Input() title: string = '';
|
||||
@Input() titleColor: 'light' | 'dark' = 'light';
|
||||
@Input() backgroundImageUrl: string = '';
|
||||
@Input() backgroundColor: 'light' | 'dark' = 'light';
|
||||
@Input() noHeight: boolean = false;
|
||||
}
|
||||
|
|
|
|||
16
src/assets/angular.svg
Normal file
16
src/assets/angular.svg
Normal 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
1
src/assets/tailwind.svg
Normal 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 |
Loading…
Add table
Add a link
Reference in a new issue