first commit

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

@@ -0,0 +1,60 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SectionComponent } from '../../shared/ui/section/section.component';
+
+@Component({
+  selector: 'app-about-me-section',
+  standalone: true,
+  imports: [CommonModule, SectionComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <app-section
+      [id]="sectionId"
+      eyebrow="About me"
+      title="Engineer, collaborator, perpetual learner"
+      lead="I like to keep teams moving: establish a clear plan, align stakeholders, and turn good ideas into shipped, measurable outcomes."
+    >
+      <div class="grid gap-8 lg:grid-cols-2">
+        <div class="space-y-4 text-zinc-600 dark:text-zinc-200">
+          <p>
+            I care about pairing good taste with solid engineering practices.
+            Whether building a new product or refining an existing one, I work
+            to keep the codebase tidy, the UI cohesive, and the delivery
+            predictable.
+          </p>
+          <p>
+            I thrive in cross-functional teams, translating between design,
+            product, and engineering to keep efforts aligned and transparent.
+          </p>
+        </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"
+          >
+            <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
+              Working principles
+            </p>
+            <ul class="mt-2 space-y-2 text-sm text-zinc-600 dark:text-zinc-300">
+              <li>• Design for clarity, then refine for speed.</li>
+              <li>• Prefer simple interfaces over clever abstractions.</li>
+              <li>• Optimize for maintainability and team velocity.</li>
+            </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"
+          >
+            <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">
+              <li>• Structuring design systems and component libraries.</li>
+              <li>• Improving developer experience and tooling.</li>
+              <li>• Coaching teams on pragmatic testing and reviews.</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </app-section>
+  `
+})
+export class AboutMeSectionComponent {
+  readonly sectionId = 'about-me';
+}