v2.2.0 - Bug and template fixes and structural improvements

🎉 Release Notes for Version 2.2.0

📅 Release Date: July 2026

🐛 Critical Bug Fixes

✅ Runtime & Memory Issues Resolved

• Removed duplicate <router-outlet> from HeaderComponent — every routed page was being rendered twice, doubling DOM elements and lifecycle calls
• Fixed setTimeout memory leak in HomeComponent — the recursive typing animation timer now stores its ID and is properly cancelled in ngOnDestroy, preventing background timer accumulation after navigation
• Added implements OnInit to FooterComponent — lifecycle hook is now enforced at compile time instead of relying on duck typing

🔧 Important Fixes

⚙️ Configuration & Providers

• Removed conflicting animation providers — provideAnimations() and provideAnimationsAsync() were both registered; only the modern async variant is kept

🎨 UI & Template Fixes

• Fixed duplicate class attribute on header brand link — navbar-brand and text-light classes were being silently discarded by the browser
• Fixed invalid Pydantic tag color — double ## in the CSS color value caused the tag to render with no background
• Removed duplicate Tag.LOMBOK entries in two portfolio project tag arrays (Tutor Mate API, Library Manager API)
• Fixed missing px unit on card min-width — unitless value was ignored by the browser; constraint moved to component CSS
• Fixed @for track expression in CardComponent — was tracking by parent array reference; now tracks by individual tag item
• Added Portfolio heading to the portfolio section for visual consistency with other pages

🔒 Security

• Added rel="noopener noreferrer" to all target="_blank" external links across header, footer, contact, and modal templates — prevents tabnapping attacks

♿ Accessibility & HTML Validity

• Replaced <button><a> anti-pattern in home, about, and contact templates with properly styled standalone <a> elements — fixes invalid HTML nesting and broken keyboard navigation
• Updated contact image alt text from "Contact Image" to "Barbara Calderon"

🖥️ Modal Component

• Replaced global document.querySelector with @ViewChild('swiperRef') — component no longer queries outside its own DOM, fixing a fragile global selector

🏗️ Structural Improvements

📂 Code Organisation

• Extracted project data from PortfolioComponent into src/app/data/projects.data.ts — component now holds presentation logic only; data is independently readable and maintainable
• Renamed Skills → Education across the codebase — route path (/skills → /education), component class (SkillsComponent → EducationComponent), files, selector, and nav link now all match the displayed content
• Removed unused customClass property from AccordionComponent
• Removed empty providers: [] from PortfolioComponent decorator

🧹 Minor Cleanup

• Updated <title> in index.html from the default Angular scaffold value to "Barbara Calderon | Software Engineer"
• Fixed typo "Brazillian" → "Brazilian" in accordion content

🧪 Testing & Quality

🆕 New Spec Files

• card.component.spec.ts — 5 tests covering component creation, card.name rendering, card.summary rendering, tag chip count, and modal dialog opening on button click
• modal.component.spec.ts — 6 tests covering component creation, MAT_DIALOG_DATA assignment, title/description/tag rendering, and close button behaviour

✅ All Tests Pass

• 33 tests across 6 spec files — all passing

📈 What This Release Demonstrates

• ✅ Correct Angular lifecycle management — no dangling timers or unimplemented interfaces
• ✅ Secure external linking — all target="_blank" anchors protected
• ✅ Valid, accessible HTML — no illegal element nesting, descriptive alt text
• ✅ Separation of concerns — data, presentation, and routing are cleanly separated
• ✅ Meaningful test coverage — key components verified with real assertions