diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index 3780093..2bfa1be 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -1,5 +1,5 @@ import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import {CommonModule, NgOptimizedImage} from '@angular/common'; import {HomeComponent} from "./home.component"; import {StackSliderComponent} from "./stack-slider/stack-slider.component"; import {StackCardComponent} from "./stack-slider/stack-card/stack-card.component"; @@ -15,7 +15,8 @@ import {NgxGlideComponent} from "ngx-glide"; ], imports: [ CommonModule, - NgxGlideComponent + NgxGlideComponent, + NgOptimizedImage ] }) export class HomeModule { } diff --git a/src/app/home/stack-slider/stack-slider.component.ts b/src/app/home/stack-slider/stack-slider.component.ts index 527ba34..465537a 100644 --- a/src/app/home/stack-slider/stack-slider.component.ts +++ b/src/app/home/stack-slider/stack-slider.component.ts @@ -15,33 +15,58 @@ export class StackSliderComponent implements AfterViewInit { stacks: Stack[] = [ { name: 'Angular', - image: 'https://picsum.photos/id/1/100/100', + image: './assets/stacks/angular.svg', description: 'Angular is a platform for building mobile and desktop web applications.', }, { - name: 'React', - image: 'https://picsum.photos/id/2/100/100', + name: 'Next.js', + image: './assets/stacks/nextjs.svg', description: 'React is a JavaScript library for building user interfaces.', }, { - name: 'Vue', - image: 'https://picsum.photos/id/3/100/100', - description: 'Vue is a progressive framework for building user interfaces.', + name: 'FastAPI', + image: './assets/stacks/fastapi.svg', + description: 'FastAPI is a modern, fast (high-performance), web framework for building APIs.', }, { - name: 'Svelte', - image: 'https://picsum.photos/id/4/100/100', - description: 'Svelte is a radical new approach to building user interfaces.', + name: 'Node.js', + image: './assets/stacks/nodejs.svg', + description: 'Node.js is an open-source, cross-platform, back-end JavaScript runtime environment.', }, { - name: 'Ember', - image: 'https://picsum.photos/id/5/100/100', - description: 'Ember.js is an open-source JavaScript web framework.', + name: 'Spring Boot', + image: './assets/stacks/spring.svg', + description: 'Spring Boot makes it easy to create stand-alone, production-grade APIs', }, { - name: 'Preact', - image: 'https://picsum.photos/id/6/100/100', - description: 'Preact is a fast 3kB alternative to React with the same modern API.', + name: 'Docker', + image: './assets/stacks/docker.svg', + description: 'Docker is a set of platform as a service products to deliver software in packages called containers.', + }, + { + name: 'Kubernetes', + image: './assets/stacks/kubernetes.svg', + description: 'Kubernetes is an open-source container-orchestration system for automating deployment, scaling, and management.', + }, + { + name: 'Terraform', + image: './assets/stacks/terraform.svg', + description: 'Terraform is an open-source infrastructure as code software tool.', + }, + { + name: 'PostgreSQL', + image: './assets/stacks/postgresql.svg', + description: 'PostgreSQL is a free and open-source relational database.', + }, + { + name: 'Redis', + image: './assets/stacks/redis.svg', + description: 'Redis is an in-memory data structure store.', + }, + { + name: 'AWS', + image: './assets/stacks/aws.svg', + description: 'Amazon Web Services is a subsidiary of Amazon providing on-demand cloud computing.', } ] diff --git a/src/assets/stacks/angular.svg b/src/assets/stacks/angular.svg new file mode 100644 index 0000000..468c4ba --- /dev/null +++ b/src/assets/stacks/angular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/stacks/aws.svg b/src/assets/stacks/aws.svg new file mode 100644 index 0000000..3840f92 --- /dev/null +++ b/src/assets/stacks/aws.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/stacks/docker.svg b/src/assets/stacks/docker.svg new file mode 100644 index 0000000..0a9c6b0 --- /dev/null +++ b/src/assets/stacks/docker.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/stacks/fastapi.svg b/src/assets/stacks/fastapi.svg new file mode 100644 index 0000000..c307de8 --- /dev/null +++ b/src/assets/stacks/fastapi.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/stacks/kubernetes.svg b/src/assets/stacks/kubernetes.svg new file mode 100644 index 0000000..9825631 --- /dev/null +++ b/src/assets/stacks/kubernetes.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/stacks/nextjs.svg b/src/assets/stacks/nextjs.svg new file mode 100644 index 0000000..14b3837 --- /dev/null +++ b/src/assets/stacks/nextjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/stacks/nodejs.svg b/src/assets/stacks/nodejs.svg new file mode 100644 index 0000000..0481f9f --- /dev/null +++ b/src/assets/stacks/nodejs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/stacks/postgresql.svg b/src/assets/stacks/postgresql.svg new file mode 100644 index 0000000..9fa5c4d --- /dev/null +++ b/src/assets/stacks/postgresql.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/stacks/redis.svg b/src/assets/stacks/redis.svg new file mode 100644 index 0000000..0712975 --- /dev/null +++ b/src/assets/stacks/redis.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/stacks/spring.svg b/src/assets/stacks/spring.svg new file mode 100644 index 0000000..ce9bba0 --- /dev/null +++ b/src/assets/stacks/spring.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/stacks/terraform.svg b/src/assets/stacks/terraform.svg new file mode 100644 index 0000000..4929cd9 --- /dev/null +++ b/src/assets/stacks/terraform.svg @@ -0,0 +1 @@ + \ No newline at end of file