move experience section from home to about and center eyebrows properly

src/pages/about/about.css

@@ -5,6 +5,7 @@
 
 .section {
   margin-bottom: 3rem;
+  scroll-margin-top: 5.5rem;
 }
 
 .hero {
@@ -81,6 +82,35 @@ h1 {
   margin-top: 0.5rem;
 }
 
+.timeline {
+  display: grid;
+  gap: 1rem;
+}
+
+.timeline-item {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 1rem;
+  padding: 1.1rem;
+  border-left: 3px solid #2f81f7;
+  border-radius: 12px;
+  background: rgba(22, 27, 34, 0.85);
+}
+
+.timeline-item ul {
+  margin: 0;
+  padding-left: 1rem;
+  color: #c9d1d9;
+}
+
+.timeline-item li + li {
+  margin-top: 0.45rem;
+}
+
+.meta {
+  color: #8b949e;
+}
+
 @media (max-width: 760px) {
   .page {
     padding-top: 0.5rem;
@@ -89,4 +119,8 @@ h1 {
   .hero {
     padding: 2rem 1.2rem;
   }
+
+  .timeline-item {
+    grid-template-columns: 1fr;
+  }
 }

src/pages/about/about.html

@@ -33,4 +33,26 @@
       </ul>
     </app-card>
   </section>
+
+  <section class="section" id="experience">
+    <div class="section-title-row">
+      <h2>Experience</h2>
+      <p>Hands-on delivery in backend systems and product architecture.</p>
+    </div>
+    <div class="timeline">
+      @for (item of timeline; track item.role + item.company) {
+      <article class="timeline-item">
+        <div>
+          <h3>{{ item.role }}</h3>
+          <p class="meta">{{ item.company }} - {{ item.period }}</p>
+        </div>
+        <ul>
+          @for (highlight of item.highlights; track highlight) {
+          <li>{{ highlight }}</li>
+          }
+        </ul>
+      </article>
+      }
+    </div>
+  </section>
 </div>

src/pages/about/about.spec.ts

@@ -25,5 +25,7 @@ describe('About', () => {
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('h1')?.textContent).toContain('Fullstack developer');
     expect(compiled.querySelectorAll('.card').length).toBe(component.pillars.length + 1);
+    expect(compiled.querySelector('#experience h2')?.textContent).toContain('Experience');
+    expect(compiled.querySelectorAll('#experience .timeline-item').length).toBe(component.timeline.length);
   });
 });

src/pages/about/about.ts

@@ -6,6 +6,13 @@ export interface Pillar {
   description: string;
 }
 
+interface TimelineItem {
+  role: string;
+  company: string;
+  period: string;
+  highlights: string[];
+}
+
 @Component({
   selector: 'app-about',
   imports: [CardComponent],
@@ -35,6 +42,19 @@ export class About {
     'Keep the codebase simple, testable, and easy to evolve.',
     'Balance visual polish with performance and real-world usability.',
   ];
+
+  readonly timeline: TimelineItem[] = [
+    {
+      role: 'Internship - Backend & Architecture Engineer',
+      company: 'Industrie Informatik GmbH',
+      period: '2025',
+      highlights: [
+        'Implemented a Spring Boot API for the Tasktimer Application including database access and reporting capabilities.',
+        'Designed and implemented a reliable Jira connectivity solution for the Tasktimer backend, ensuring consistent data synchronization and performance.',
+        'Contributed to architectural discussions and decisions, influencing the overall direction and stability of the Tasktimer application.',
+      ],
+    },
+  ];
 }
 
 export {};

src/pages/home/home.css

@@ -20,7 +20,7 @@
 .eyebrow {
   width: fit-content;
   margin: 0 0 1rem;
-  padding: 0.3rem 0.7rem;
+  padding: 0.35rem 0.5rem 0.1rem 0.5rem;
   border: 1px solid rgba(88, 166, 255, 0.5);
   border-radius: 999px;
   font-size: 0.82rem;
@@ -158,31 +158,6 @@ h2 {
   font-weight: 500;
 }
 
-.timeline {
-  display: grid;
-  gap: 1rem;
-}
-
-.timeline-item {
-  display: grid;
-  grid-template-columns: 260px 1fr;
-  gap: 1rem;
-  padding: 1.1rem;
-  border-left: 3px solid #2f81f7;
-  border-radius: 12px;
-  background: rgba(22, 27, 34, 0.85);
-}
-
-.timeline-item ul {
-  margin: 0;
-  padding-left: 1rem;
-  color: #c9d1d9;
-}
-
-.timeline-item li + li {
-  margin-top: 0.45rem;
-}
-
 @media (max-width: 760px) {
   .page-wrap {
     padding-top: 0.5rem;
@@ -191,8 +166,4 @@ h2 {
   .hero {
     padding: 2rem 1.2rem;
   }
-
-  .timeline-item {
-    grid-template-columns: 1fr;
-  }
 }

src/pages/home/home.html

@@ -44,22 +44,4 @@
     </div>
   </section>
 
-  <section class="section" id="experience">
-    <h2>Experience</h2>
-    <div class="timeline">
-      @for (item of timeline; track item.role + item.company) {
-      <article class="timeline-item">
-        <div>
-          <h3>{{ item.role }}</h3>
-          <p class="meta">{{ item.company }} - {{ item.period }}</p>
-        </div>
-        <ul>
-          @for (highlight of item.highlights; track highlight) {
-          <li>{{ highlight }}</li>
-          }
-        </ul>
-      </article>
-      }
-    </div>
-  </section>
 </div>

src/pages/home/home.ts

@@ -9,13 +9,6 @@ interface Skill {
   level: string;
 }
 
-interface TimelineItem {
-  role: string;
-  company: string;
-  period: string;
-  highlights: string[];
-}
-
 @Component({
   selector: 'app-home',
   imports: [RouterLink, CardComponent],
@@ -46,17 +39,4 @@ export class Home {
   ];
 
   readonly projects: Project[] = PROJECTS;
-
-  readonly timeline: TimelineItem[] = [
-    {
-      role: 'Internship - Backend & Architecture Engineer',
-      company: 'Industrie Informatik GmbH',
-      period: '2025',
-      highlights: [
-        'Implemented a Spring Boot API for the Tasktimer Application including database access and reporting capabilities.',
-        'Designed and implemented a reliable Jira connectivity solution for the Tasktimer backend, ensuring consistent data synchronization and performance.',
-        'Contributed to architectural discussions and decisions, influencing the overall direction and stability of the Tasktimer application.',
-      ],
-    },
-  ];
 }

src/pages/projects/project-detail/project-detail.css

@@ -17,7 +17,7 @@
 .eyebrow {
   width: fit-content;
   margin: 0 0 1rem;
-  padding: 0.35rem 0.7rem;
+  padding: 0.35rem 0.5rem 0.1rem 0.5rem;
   border: 1px solid rgba(88, 166, 255, 0.5);
   border-radius: 999px;
   color: #9ecbff;

src/pages/projects/projects.css

@@ -17,7 +17,7 @@
 .eyebrow {
   width: fit-content;
   margin: 0 0 1rem;
-  padding: 0.35rem 0.7rem;
+  padding: 0.35rem 0.5rem 0.1rem 0.5rem;
   border: 1px solid rgba(88, 166, 255, 0.5);
   border-radius: 999px;
   color: #9ecbff;