Upgrade Angular and soften light theme

src/app/features/about/about-it-section.component.ts

@@ -16,7 +16,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
     >
       <div class="grid gap-6 lg:grid-cols-3">
         <div
-          class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
+          class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
         >
           <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
             Architecture
@@ -27,7 +27,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
           </p>
         </div>
         <div
-          class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
+          class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
         >
           <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">Front end</p>
           <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
@@ -36,7 +36,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
           </p>
         </div>
         <div
-          class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
+          class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
         >
           <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
             Delivery
@@ -47,7 +47,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
           </p>
         </div>
         <div
-          class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
+          class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
         >
           <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
             Backend Integration
@@ -57,7 +57,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
           </p>
         </div>
         <div
-          class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
+          class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
         >
           <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
             API Contracts
@@ -67,7 +67,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
           </p>
         </div>
         <div
-          class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
+          class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
         >
           <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
             Client Handling

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

@@ -29,7 +29,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
         </div>
         <div class="grid gap-3">
           <div
-            class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
+            class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
           >
             <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
               Working principles
@@ -41,7 +41,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
             </ul>
           </div>
           <div
-            class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
+            class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
           >
             <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">Ways I help</p>
             <ul class="mt-2 space-y-2 text-sm text-zinc-600 dark:text-zinc-300">

src/app/features/cv/cv-section.component.ts

@@ -16,7 +16,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
     >
       <div class="grid gap-6 lg:grid-cols-3">
         <div
-          class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
+          class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
         >
           <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
             Experience focus
@@ -29,35 +29,35 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
           </ul>
         </div>
         <div
-          class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
+          class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
         >
           <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">Skills & tools</p>
           <div class="mt-3 flex flex-wrap gap-2 text-xs">
-            <span class="rounded-full bg-zinc-100 px-3 py-1 text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200">
+            <span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
               Angular
             </span>
-            <span class="rounded-full bg-zinc-100 px-3 py-1 text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200">
+            <span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
               TypeScript
             </span>
-            <span class="rounded-full bg-zinc-100 px-3 py-1 text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200">
+            <span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
               Node.js
             </span>
-            <span class="rounded-full bg-zinc-100 px-3 py-1 text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200">
+            <span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
               Tailwind
             </span>
-            <span class="rounded-full bg-zinc-100 px-3 py-1 text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200">
+            <span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
               Design systems
             </span>
-            <span class="rounded-full bg-zinc-100 px-3 py-1 text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200">
+            <span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
               Testing
             </span>
-            <span class="rounded-full bg-zinc-100 px-3 py-1 text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200">
+            <span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
               CI/CD
             </span>
           </div>
         </div>
         <div
-          class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
+          class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
         >
           <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
             How I structure work

src/app/features/home/home-section.component.ts

@@ -26,7 +26,7 @@ type TimelineEntry = {
       lead="Here’s a timeline of my professional growth and key milestones, highlighting significant roles and contributions."
     >
       <div
-        class="overflow-hidden rounded-3xl border border-zinc-200 bg-white/60 shadow-xl shadow-emerald-500/5 backdrop-blur-sm transition-colors duration-300 dark:border-slate-800/60 dark:bg-slate-950/40 dark:shadow-emerald-900/20"
+        class="overflow-hidden rounded-3xl border border-zinc-200/70 bg-[#fbfcfa]/80 shadow-xl shadow-emerald-900/5 backdrop-blur-sm transition-colors duration-300 dark:border-slate-800/60 dark:bg-slate-950/40 dark:shadow-emerald-900/20"
       >
         <div class="relative px-4 py-16 md:px-12">
           <!-- Central Line -->
@@ -47,7 +47,7 @@ type TimelineEntry = {
                       <span class="mb-2 inline-block text-xs font-bold uppercase tracking-widest text-emerald-600/90 dark:text-emerald-500/80">
                         {{ entry.step }} &bull; {{ entry.phase }}
                       </span>
-                      <h3 class="mb-2 text-xl font-semibold text-zinc-900 transition-colors group-hover:text-emerald-600 dark:text-slate-100 dark:group-hover:text-emerald-400">
+                      <h3 class="mb-2 text-xl font-semibold text-zinc-800 transition-colors group-hover:text-emerald-600 dark:text-slate-100 dark:group-hover:text-emerald-400">
                         {{ entry.title }}
                       </h3>
                       <p class="text-base text-zinc-600 leading-relaxed dark:text-slate-400">
@@ -66,7 +66,7 @@ type TimelineEntry = {
                       ></span>
                     }
                     <div
-                      class="relative h-3 w-3 rounded-full bg-emerald-500 ring-4 ring-white shadow-[0_0_12px_rgba(16,185,129,0.6)] transition-all duration-300 group-hover:scale-125 dark:ring-slate-950"
+                      class="relative h-3 w-3 rounded-full bg-emerald-500 ring-4 ring-[#f4f7f5] shadow-[0_0_12px_rgba(16,185,129,0.45)] transition-all duration-300 group-hover:scale-125 dark:ring-slate-950"
                     ></div>
                   </div>
                 </div>
@@ -78,7 +78,7 @@ type TimelineEntry = {
                       <span class="mb-2 inline-block text-xs font-bold uppercase tracking-widest text-emerald-600/90 dark:text-emerald-500/80">
                         {{ entry.step }} &bull; {{ entry.phase }}
                       </span>
-                      <h3 class="mb-2 text-xl font-semibold text-zinc-900 transition-colors group-hover:text-emerald-600 dark:text-slate-100 dark:group-hover:text-emerald-400">
+                      <h3 class="mb-2 text-xl font-semibold text-zinc-800 transition-colors group-hover:text-emerald-600 dark:text-slate-100 dark:group-hover:text-emerald-400">
                         {{ entry.title }}
                       </h3>
                       <p class="text-base text-zinc-600 leading-relaxed dark:text-slate-400">
@@ -92,7 +92,7 @@ type TimelineEntry = {
                        <span class="mb-2 inline-block text-xs font-bold uppercase tracking-widest text-emerald-600/90 dark:text-emerald-500/80">
                         {{ entry.step }} &bull; {{ entry.phase }}
                       </span>
-                      <h3 class="mb-2 text-xl font-semibold text-zinc-900 transition-colors group-hover:text-emerald-600 dark:text-slate-100 dark:group-hover:text-emerald-400">
+                      <h3 class="mb-2 text-xl font-semibold text-zinc-800 transition-colors group-hover:text-emerald-600 dark:text-slate-100 dark:group-hover:text-emerald-400">
                         {{ entry.title }}
                       </h3>
                       <p class="text-base text-zinc-600 leading-relaxed dark:text-slate-400">

src/app/features/portfolio/portfolio-section.component.ts

@@ -24,21 +24,21 @@ type PortfolioItem = {
       <div class="grid gap-6 md:grid-cols-2">
         @for (item of items; track item.title) {
           <article
-            class="flex h-full flex-col gap-3 rounded-xl border border-zinc-200 bg-white/60 p-5 dark:border-slate-800/60 dark:bg-slate-900/40"
+            class="flex h-full flex-col gap-3 rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-5 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
           >
             <div class="flex items-center justify-between text-sm text-zinc-500 dark:text-zinc-400">
               <span>{{ item.period }}</span>
               <div class="flex flex-wrap gap-1">
                 @for (tag of item.tags; track tag) {
                   <span
-                    class="rounded-full bg-zinc-100 px-2 py-1 text-[11px] text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200"
+                    class="rounded-full bg-emerald-50/80 px-2 py-1 text-[11px] text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0"
                   >
                     {{ tag }}
                   </span>
                 }
               </div>
             </div>
-            <h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
+            <h3 class="text-lg font-semibold text-zinc-800 dark:text-zinc-50">
               {{ item.title }}
             </h3>
             <p class="text-sm text-zinc-600 dark:text-zinc-300">