Merge pull request #11 from dilanka-rathnasiri/projects

Complete basic css

Author: dilanka-rathnasiri

src/app/app.component.html

@@ -1,5 +1,5 @@
 <div id="rootMainBox">
     <app-nav-bar />
-    <router-outlet id="rootContentBox" />
-    <app-footer />
+    <router-outlet />
+    <app-footer id="rootFooter" />
 </div>

src/app/app.component.scss

@@ -4,6 +4,6 @@
     height: 100%;
 }
 
-#rootContentBox {
-    flex-grow: 1;
+#rootFooter {
+    margin-top: auto;
 }

src/app/blog/blog.component.html

@@ -1 +1,13 @@
-<p>blog works!</p>
+<div id="blogsMainBox" class="container">
+    @for (blog of blogs; track blog.title) {
+        <div class="card shadow">
+            <div class="card-body">
+                <h4>{{ blog.title }}</h4>
+                <p class="card-text">{{ blog.description }}</p>
+                <a [href]="blog.link" target="_blank" class="btn btn-primary">
+                    Read Article on <i class="fa-brands fa-dev"></i>
+                </a>
+            </div>
+        </div>
+    }
+</div>

src/app/blog/blog.component.scss

@@ -0,0 +1,22 @@
+#blogsMainBox {
+    display: flex;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    gap: 2rem;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    .card {
+        width: 30%;
+    }
+
+    .card-body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        p {
+            text-align: center;
+        }
+    }
+}

src/app/blog/blog.component.ts

@@ -1,9 +1,31 @@
 import { Component } from '@angular/core';
+import { BlogItem } from '../dto/BlogItem';
 
 @Component({
     selector: 'app-blog',
     imports: [],
     templateUrl: './blog.component.html',
     styleUrl: './blog.component.scss',
 })
-export class BlogComponent {}
+export class BlogComponent {
+    blogs: BlogItem[] = [
+        {
+            title: 'Understanding Angular Signals',
+            description:
+                'A deep dive into Angular signals and how they improve reactivity in modern applications.',
+            link: 'https://blog.example.com/angular-signals',
+        },
+        {
+            title: 'Deploying with AWS Amplify',
+            description:
+                'Step-by-step guide to deploying your web app using AWS Amplify.',
+            link: 'https://blog.example.com/aws-amplify-deploy',
+        },
+        {
+            title: 'TypeScript Tips & Tricks',
+            description:
+                'Boost your productivity with these essential TypeScript tips.',
+            link: 'https://blog.example.com/typescript-tips',
+        },
+    ];
+}

src/app/certifications/certifications.component.html

@@ -1 +1,18 @@
-<p>certifications works!</p>
+<div id="certificatesMainBox" class="container">
+    @for (certificate of certificates; track certificate.title) {
+        <div class="card shadow">
+            <div class="card-body">
+                <h4>{{ certificate.title }}</h4>
+                <h4>{{ certificate.organization }}</h4>
+                <h6 class="text-secondary">{{ certificate.time }}</h6>
+                <a
+                    [href]="certificate.link"
+                    target="_blank"
+                    class="btn btn-primary"
+                >
+                    View Certificate
+                </a>
+            </div>
+        </div>
+    }
+</div>

src/app/certifications/certifications.component.scss

@@ -0,0 +1,22 @@
+#certificatesMainBox {
+    display: flex;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    gap: 2rem;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    .card {
+        width: 30%;
+    }
+
+    .card-body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        h4 {
+            text-align: center;
+        }
+    }
+}

src/app/certifications/certifications.component.ts

@@ -1,9 +1,31 @@
 import { Component } from '@angular/core';
+import { CertificateItem } from '../dto/CertificateItem';
 
 @Component({
     selector: 'app-certifications',
     imports: [],
     templateUrl: './certifications.component.html',
     styleUrl: './certifications.component.scss',
 })
-export class CertificationsComponent {}
+export class CertificationsComponent {
+    certificates: CertificateItem[] = [
+        {
+            title: 'AWS Certified Solutions Architect',
+            organization: 'Amazon Web Services',
+            time: 'Jan 2023',
+            link: 'https://certificates.example.com/aws-solutions-architect',
+        },
+        {
+            title: 'Google Cloud Professional Engineer',
+            organization: 'Google Cloud',
+            time: 'Mar 2022',
+            link: 'https://certificates.example.com/gcp-professional',
+        },
+        {
+            title: 'Certified Kubernetes Administrator',
+            organization: 'Cloud Native Computing Foundation',
+            time: 'Sep 2021',
+            link: 'https://certificates.example.com/cka',
+        },
+    ];
+}

src/app/dto/BlogItem.ts

@@ -0,0 +1,5 @@
+export interface BlogItem {
+    title: string;
+    description: string;
+    link: string;
+}

src/app/dto/CertificateItem.ts

@@ -0,0 +1,6 @@
+export interface CertificateItem {
+    title: string;
+    organization: string;
+    time: string;
+    link: string;
+}