first commit

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

@@ -0,0 +1,80 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SectionComponent } from '../../shared/ui/section/section.component';
+
+@Component({
+  selector: 'app-cv-section',
+  standalone: true,
+  imports: [CommonModule, SectionComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <app-section
+      [id]="sectionId"
+      eyebrow="CV"
+      title="Snapshot of my experience"
+      lead="Highlights of how I work and where I add value. Full CV is ready to share on request."
+    >
+      <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"
+        >
+          <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
+            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>• Partnering with design on component systems.</li>
+            <li>• Modernizing legacy code into maintainable stacks.</li>
+            <li>• Coaching teams on delivery practices and reviews.</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">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">
+              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">
+              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">
+              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">
+              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">
+              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">
+              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">
+              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"
+        >
+          <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
+            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>• Ship in small increments with measurable outcomes.</li>
+            <li>• Automate tests and checks to keep releases calm.</li>
+            <li>
+              • Document interfaces and patterns for future teammates.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </app-section>
+  `
+})
+export class CvSectionComponent {
+  readonly sectionId = 'cv';
+}