Merge pull request #13 from dilanka-rathnasiri/optimizing

Optimize app

Author: dilanka-rathnasiri

public/dilanka.jpg

@@ -0,0 +1,20 @@
+<div id="aboutMeMainBox" class="global-container">
+    <div id="aboutMeLeftBox">
+        <h1>Dilanka Rathnasiri</h1>
+        <h4 class="text-secondary">Software Engineer</h4>
+        <p>
+            Passionate software engineer with expertise in cloud technologies,
+            microservices architecture, and infrastructure as code.
+        </p>
+    </div>
+
+    <img
+        id="profilePic"
+        ngSrc="assets/dilanka.jpg"
+        class="rounded-circle border border-light shadow-lg border-5 profile-pic-img"
+        alt="Dilanka Rathnasiri"
+        width="300"
+        height="300"
+        priority
+    />
+</div>

src/app/about-me/about-me.component.html

@@ -0,0 +1,17 @@
+#aboutMeMainBox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5rem;
+    flex-wrap: wrap;
+}
+
+#aboutMeLeftBox {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    min-width: 20rem;
+    max-width: 35rem;
+    text-align: center;
+}

src/app/about-me/about-me.component.scss

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { NgOptimizedImage } from '@angular/common';
+
+@Component({
+    selector: 'app-about-me',
+    imports: [NgOptimizedImage],
+    templateUrl: './about-me.component.html',
+    styleUrl: './about-me.component.scss',
+})
+export class AboutMeComponent {}

src/app/about-me/about-me.component.ts

@@ -2,14 +2,10 @@ import { Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { ProjectComponent } from './project/project.component';
 import { BlogComponent } from './blog/blog.component';
-import { CertificationsComponent } from './certifications/certifications.component';
-import { ExperienceComponent } from './experience/experience.component';
 
 export const routes: Routes = [
     { path: '', component: HomeComponent, pathMatch: 'full' },
-    { path: 'experience', component: ExperienceComponent },
     { path: 'projects', component: ProjectComponent },
     { path: 'blogs', component: BlogComponent },
-    { path: 'certifications', component: CertificationsComponent },
     { path: '**', component: HomeComponent },
 ];

src/app/app.routes.ts

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

src/app/blog/blog.component.html

@@ -6,7 +6,6 @@ import { DataService } from '../services/data.service';
     selector: 'app-blog',
     imports: [],
     templateUrl: './blog.component.html',
-    styleUrl: './blog.component.scss',
 })
 export class BlogComponent implements OnInit {
     blogs: BlogItem[] = [];

src/app/blog/blog.component.scss

@@ -1,18 +1,23 @@
-<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 class="home-section-box">
+    <h1>Certifications</h1>
+    <div class="global-section-content-box">
+        @for (certificate of certificates; track certificate.title) {
+            <div class="global-item-card">
+                <div class="card-body">
+                    <h4>{{ certificate.title }}</h4>
+                    <h4 class="text-secondary">
+                        {{ certificate.organization }}
+                    </h4>
+                    <h6>{{ certificate.time }}</h6>
+                    <a
+                        [href]="certificate.link"
+                        target="_blank"
+                        class="btn btn-primary"
+                    >
+                        View Certificate
+                    </a>
+                </div>
             </div>
-        </div>
-    }
+        }
+    </div>
 </div>