import { Component,  signal, effect } from '@angular/core';

@Component({
  selector: 'app-about-me',
  template: `
    <section class="about-me">
      <h1>Hi there 👋, I'm {{name()}}</h1>
      <p>I am a freelance software engineer based in {{location()}}.</p>
      <p>I regularly write articles on
        <a href="https://frontendbase.com" alt="frontendbase" target="_blank">{{blog()}}</a>
      </p>
      <h3>My Techstack ⚒️</h3>
      <ul>
        <li>Angular</li>
        <li>NextJs</li>
        <li>Java/Spring</li>
        <li>Azure Cloud</li>
      </ul>
    </section>
  `,
  standalone: true
})
export class AboutMeComponent {
  name = signal('Muhammed Misir');
  location = signal('Zurich / Switzerland');
  blog = signal('frontendbase.com');

  constructor() {
    effect(() => {
      console.log(`Greetings from ${this.name()}👋!`);
    });
  }
}