Update profile content from LinkedIn

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

@@ -2,6 +2,12 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SectionComponent } from '../../shared/ui/section/section.component';
 
+type CourseItem = {
+  title: string;
+  provider: string;
+  period: string;
+};
+
 @Component({
   selector: 'app-cv-section',
   standalone: true,
@@ -22,10 +28,10 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
             Experience focus
           </p>
           <ul class="mt-2 space-y-2 text-sm text-zinc-600 dark:text-zinc-300">
-            <li>• Leading front-end builds for product teams.</li>
+            <li>• Software architecture, product ownership, and team support.</li>
-            <li>• Partnering with design on component systems.</li>
+            <li>• Full-stack development across .NET, Angular, and mobile apps.</li>
-            <li>• Modernizing legacy code into maintainable stacks.</li>
+            <li>• Designing, testing, and maintaining reliable C# services.</li>
-            <li>• Coaching teams on delivery practices and reviews.</li>
+            <li>• Turning user feedback into prioritized product delivery.</li>
           </ul>
         </div>
         <div
@@ -40,19 +46,22 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
               TypeScript
             </span>
             <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
+              .NET
             </span>
             <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
+              Blazor
             </span>
             <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
+              Web API
             </span>
             <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
+              MSSQL
             </span>
             <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
+              .NET MAUI
+            </span>
+            <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">
+              Ionic
             </span>
           </div>
         </div>
@@ -63,18 +72,154 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
             How I structure work
           </p>
           <ul class="mt-2 space-y-2 text-sm text-zinc-600 dark:text-zinc-300">
-            <li>• Clarify requirements with fast prototypes.</li>
+            <li>• Shape product roadmaps through research and prioritization.</li>
-            <li>• Ship in small increments with measurable outcomes.</li>
+            <li>• Manage backlogs, reviews, and retrospectives.</li>
-            <li>• Automate tests and checks to keep releases calm.</li>
+            <li>• Collaborate with UX/UI, sales, marketing, and engineering.</li>
             <li>
-              • Document interfaces and patterns for future teammates.
+              • Monitor KPIs and user feedback for continuous improvement.
             </li>
           </ul>
         </div>
       </div>
+
+      <div
+        class="mt-6 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"
+      >
+        <div class="flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
+              Courses & certifications
+            </p>
+            <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
+              Publicly listed learning history from LinkedIn-derived profile data.
+            </p>
+          </div>
+          <span class="text-xs text-zinc-500 dark:text-zinc-400">
+            2018 - 2024
+          </span>
+        </div>
+
+        <div class="mt-4 grid gap-3 md:grid-cols-2">
+          @for (course of courses; track course.title) {
+            <article
+              class="rounded-lg border border-zinc-200/70 bg-white/55 p-3 dark:border-slate-800/70 dark:bg-slate-950/30"
+            >
+              <div class="flex items-start justify-between gap-3">
+                <h3 class="text-sm font-semibold text-zinc-800 dark:text-zinc-50">
+                  {{ course.title }}
+                </h3>
+                <span class="shrink-0 text-xs text-zinc-500 dark:text-zinc-400">
+                  {{ course.period }}
+                </span>
+              </div>
+              <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+                {{ course.provider }}
+              </p>
+            </article>
+          }
+        </div>
+      </div>
     </app-section>
   `
 })
 export class CvSectionComponent {
   readonly sectionId = 'cv';
+
+  readonly courses: CourseItem[] = [
+    {
+      title: 'Learn Go Course',
+      provider: 'Codecademy',
+      period: 'Apr 2024'
+    },
+    {
+      title: 'Reactive Angular RxJS (Angular 17)',
+      provider: 'Udemy',
+      period: 'Mar 2024'
+    },
+    {
+      title: 'C# Advanced Topics: Prepare for Technical Interviews',
+      provider: 'Udemy',
+      period: 'Sep 2021'
+    },
+    {
+      title: 'Learning Docker',
+      provider: 'LinkedIn',
+      period: 'Sep 2021'
+    },
+    {
+      title: 'Applying MVVM in Xamarin.Forms Applications',
+      provider: 'Pluralsight',
+      period: 'May 2021'
+    },
+    {
+      title: 'Architecting Xamarin.Forms Applications for code reuse',
+      provider: 'Pluralsight',
+      period: 'May 2021'
+    },
+    {
+      title: 'Learning Entity Framework Core',
+      provider: 'LinkedIn',
+      period: 'May 2021'
+    },
+    {
+      title: 'C# Intermediate: Classes, Objects and OOP',
+      provider: 'Udemy',
+      period: 'Oct 2020'
+    },
+    {
+      title: 'Xamarin Forms: Build Native Cross-platform Apps with C#',
+      provider: 'Udemy',
+      period: 'Sep 2020'
+    },
+    {
+      title: 'Building Web APIs with ASP.NET Core',
+      provider: 'LinkedIn',
+      period: 'Aug 2020'
+    },
+    {
+      title: 'Database Foundations: Storage',
+      provider: 'LinkedIn',
+      period: 'Jul 2020'
+    },
+    {
+      title: 'Software Architecture Foundations',
+      provider: 'LinkedIn',
+      period: 'Jul 2020'
+    },
+    {
+      title: 'C# Essential Training: 2 Flow Control, Arrays, and Exception Handling',
+      provider: 'LinkedIn',
+      period: 'Jan 2020'
+    },
+    {
+      title: 'C#: Interfaces and Generics',
+      provider: 'LinkedIn',
+      period: 'Jan 2020'
+    },
+    {
+      title: 'C# Essential Training: 1 Syntax and Object Oriented Programming',
+      provider: 'LinkedIn',
+      period: 'Dec 2019'
+    },
+    {
+      title: 'SQL Server - Easy Install & Configure a Developer Instance',
+      provider: 'Udemy',
+      period: 'Jan 2019'
+    },
+    {
+      title: 'C# Fundamentals by Coding',
+      provider: 'Udemy',
+      period: 'Dec 2018'
+    },
+    {
+      title: 'Javascript Essentials',
+      provider: 'Udemy',
+      period: 'Jul 2018'
+    },
+    {
+      title: 'Linux Command Line',
+      provider: 'Udemy',
+      period: 'Jul 2018'
+    }
+  ];
 }

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

@@ -0,0 +1,14 @@
+import { HomeSectionComponent } from './home-section.component';
+
+describe('HomeSectionComponent', () => {
+  it('orders the career timeline from newest to oldest', () => {
+    const component = new HomeSectionComponent();
+
+    expect(component.timeline.map(entry => entry.step)).toEqual([
+      '2025 - Present',
+      'Aug 2023 - Present',
+      'Nov 2020 - Present',
+      'Nov 2018 - 2020'
+    ]);
+  });
+});

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

@@ -114,33 +114,33 @@ export class HomeSectionComponent {
 
   readonly timeline: TimelineEntry[] = [
     {
-      step: '2000 - 2010',
+      step: '2025 - Present',
-      phase: 'COMP-2000 Ltd',
+      phase: 'Unija Smart Accounting BiH',
-      title: 'Junior Developer',
+      title: 'Senior Software Engineer',
-      subtitle: 'Started my career focusing on foundational programming skills and contributing to small-scale projects.',
+      subtitle: 'Currently focused on software engineering in the Unija Smart Accounting environment.',
-      side: 'left'
+      side: 'left',
+      pulsating: true
     },
     {
-      step: '2010 - 2020',
+      step: 'Aug 2023 - Present',
       phase: 'COMP-2000 Ltd',
-      title: 'Senior Developer',
+      title: 'Product Owner',
-      subtitle: 'Led development teams, implemented complex features, and mentored junior staff, specializing in backend systems.',
+      subtitle: 'Led product planning, backlog management, sprint reviews, retrospectives, and cross-functional delivery for a commercialist mobile app.',
       side: 'right'
     },
     {
-      step: '2020 - 2024',
+      step: 'Nov 2020 - Present',
       phase: 'COMP-2000 Ltd',
-      title: 'Technical Lead',
+      title: 'Software Developer',
-      subtitle: 'Architected scalable solutions and managed the technical roadmap for critical product lines.',
+      subtitle: 'Designed, developed, tested, and maintained C# applications across .NET, Blazor, Angular, Ionic, Web API, MSSQL, and .NET MAUI.',
       side: 'left'
     },
     {
-      step: '2024 - Present',
+      step: 'Nov 2018 - 2020',
-      phase: 'Unija ETL Group',
+      phase: 'COMP-2000 Ltd',
-      title: 'Senior Software Engineer',
+      title: 'Junior Software Developer',
-      subtitle: 'Currently focused on developing robust ETL processes and data integration solutions within a dynamic financial environment.',
+      subtitle: 'Built a foundation in C#, OOP, application lifecycle practices, MSSQL, Xamarin Forms, Angular, WPF, and Windows Forms.',
-      side: 'right',
+      side: 'right'
-      pulsating: true
     }
   ];
 }

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

@@ -18,8 +18,8 @@ type PortfolioItem = {
     <app-section
       [id]="sectionId"
       eyebrow="Portfolio"
-      title="Representative work"
+      title="Project and community work"
-      lead="A few examples of the kind of outcomes I like to deliver. Swap in your own case studies here."
+      lead="Selected project work from LinkedIn, covering youth development, cultural programs, community safety, and rescue service coordination."
     >
       <div class="grid gap-6 md:grid-cols-2">
         @for (item of items; track item.title) {
@@ -55,32 +55,39 @@ export class PortfolioSectionComponent {
 
   readonly items: PortfolioItem[] = [
     {
-      title: 'Design system foundation',
+      title: 'Cultural Sports Center CSC "Kakanj"',
-      period: '2024',
+      period: '2016',
       summary:
-        'Built a lightweight component system with clear tokens and documentation, reducing UI delivery time while keeping accessibility first.',
+        'Supported cultural and sports development in Kakanj, including translation work for Italian students on an EU project and curator work through the local museum.',
-      tags: ['Angular', 'Tailwind', 'Design systems']
+      tags: ['Culture', 'Translation', 'EU project']
     },
     {
-      title: 'Modernize a legacy SPA',
+      title: 'Institute for youth development "KULT"',
-      period: '2023',
+      period: '2016',
       summary:
-        'Incrementally refactored a legacy front end into modular features with typed APIs, improving stability and developer velocity.',
+        'Coordinated youth-focused project work with an NGO that develops and advocates legal and strategic solutions for young citizens, including education on alcohol, drugs, and STDs.',
-      tags: ['Refactoring', 'TypeScript', 'DX']
+      tags: ['Youth', 'Education', 'NGO']
     },
     {
-      title: 'API-first product slice',
+      title: 'WorldVision',
-      period: '2022',
+      period: '2015',
       summary:
-        'Shipped a new product slice with clear contracts between front end and services, enabling parallel delivery across teams.',
+        'Contributed to a two-day workshop focused on revising and designing hazard assessments, elemental disaster estimates, and safety planning.',
-      tags: ['Architecture', 'APIs', 'Collaboration']
+      tags: ['Workshop', 'Safety planning', 'Risk assessment']
     },
     {
-      title: 'Performance and observability pass',
+      title: 'Project Manager Alternative Wave (AlterVal)',
-      period: '2021',
+      period: '2015 - 2016',
       summary:
-        'Improved performance budgets, added monitoring, and set up alerting to catch regressions before they reached users.',
+        'Managed local projects in Kakanj addressing modern social challenges, including writing and realizing initiatives financed by WorldVision.',
-      tags: ['Performance', 'Monitoring', 'Quality']
+      tags: ['Project management', 'Community', 'WorldVision']
+    },
+    {
+      title: 'Mountain Rescue Service - Kakanj and Zavidovici',
+      period: '2013 - Present',
+      summary:
+        'Organized search and rescue groups with registered rescuers, managed equipment, and helped write and realize rescue service projects.',
+      tags: ['Rescue service', 'Operations', 'Equipment']
     }
   ];
 }