feat: experience dynamic page

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "Photoshop"
+    ]
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tmr-johann",
   "displayName": "TMR (Johann)",
-  "version": "0.2.beta",
+  "version": "0.3.beta",
   "description": "Angular 18",
   "homepage": "https://angular-tailwind-nine.vercel.app/",
   "keywords": [
@@ -86,4 +86,4 @@
     "tailwindcss": "^3.1.6",
     "typescript": "~5.4.5"
   }
-}
+}

src/app/core/models/experience.model.ts

@@ -0,0 +1,24 @@
+export interface IExpTechStack {
+  url?: string;
+  name: string;
+  icon?: string;
+}
+
+export interface ITimePeriod {
+  startDate: string;
+  endDate: string;
+}
+
+export interface IExpCompany {
+  name: string;
+  website?: string;
+  address: string;
+}
+
+export interface ITimelineData {
+  timePeriod: ITimePeriod;
+  company: IExpCompany;
+  job: string;
+  techStacks: IExpTechStack[];
+  description: string;
+}

src/app/modules/dashboard/components/experience/exp-simple-timeline/exp-simple-timeline.component.html

@@ -0,0 +1,222 @@
+<div class="relative mt-5 text-left">
+  <div class="flex items-center relative">
+    <div class="hidden md:block w-20">
+      <div class="font-bold italic">2020</div>
+      <div class="md:flex space-x-1 text-xs">
+        <div>Apr.</div>
+        <div>-</div>
+        <div>Jun.</div>
+      </div>
+    </div>
+
+    <div class="border-r-2 border-black absolute h-full left-1 md:left-20 top-2 z-10 animate-pulse">
+      <i class="fas fa-circle -top-1 -ml-2 absolute"></i>
+    </div>
+
+    <div class="ml-10">
+      <div class="font-bold">Company 1</div>
+      <div class="italic md:mb-4">Angular Developer</div>
+      <div class="mb-4 mt-2 md:hidden">
+        <div class="font-bold">2022</div>
+        <div class="text-xs">April - June</div>
+      </div>
+      <div class="mb-10">
+        Lorem ipsum odor amet, consectetuer adipiscing elit. Eu molestie cubilia fringilla consectetur fermentum vitae
+        hendrerit. Nam senectus per hac risus luctus fermentum at? Velit molestie erat, tristique orci vel tortor
+        interdum. Pretium et morbi est quis aenean; elementum ante morbi. Tellus sit aptent turpis eu tellus dapibus
+        praesent? Mattis quis sem cursus pretium vulputate platea varius felis. Curae ridiculus donec fringilla natoque
+        libero sem.
+      </div>
+    </div>
+  </div>
+
+  <div class="flex items-center relative">
+    <div class="hidden md:block w-20">
+      <div class="font-bold italic">2020</div>
+      <div class="md:flex space-x-1 text-xs">
+        <div>Apr.</div>
+        <div>-</div>
+        <div>Jun.</div>
+      </div>
+    </div>
+
+    <div class="border-r-2 border-black absolute h-full left-1 md:left-20 top-2 z-10">
+      <i class="fas fa-circle -top-1 -ml-2 absolute"></i>
+    </div>
+
+    <div class="ml-10">
+      <div class="font-bold">Company 1</div>
+      <div class="italic md:mb-4">Angular Developer</div>
+      <div class="mb-4 mt-2 md:hidden">
+        <div class="font-bold">2022</div>
+        <div class="text-xs">April - June</div>
+      </div>
+      <div class="mb-10">
+        Lorem ipsum odor amet, consectetuer adipiscing elit. Eu molestie cubilia fringilla consectetur fermentum vitae
+        hendrerit. Nam senectus per hac risus luctus fermentum at? Velit molestie erat, tristique orci vel tortor
+        interdum. Pretium et morbi est quis aenean; elementum ante morbi. Tellus sit aptent turpis eu tellus dapibus
+        praesent? Mattis quis sem cursus pretium vulputate platea varius felis. Curae ridiculus donec fringilla natoque
+        libero sem.
+      </div>
+    </div>
+  </div>
+
+  <div class="flex items-center relative">
+    <div class="hidden md:block w-20">
+      <div class="font-bold italic">2020</div>
+      <div class="md:flex space-x-1 text-xs">
+        <div>Jul.</div>
+        <div>-</div>
+        <div>Aug.</div>
+      </div>
+    </div>
+
+    <div class="border-r-2 border-black absolute h-full left-1 md:left-20 top-2 z-10">
+      <i class="fas fa-circle -top-1 -ml-2 absolute"></i>
+    </div>
+
+    <div class="ml-10">
+      <div class="font-bold">Company 2</div>
+      <div class="italic md:mb-4">Developer 2</div>
+      <div class="mb-4 mt-2 md:hidden">
+        <div class="font-bold">2020</div>
+        <div class="text-xs">Jun - Dec</div>
+      </div>
+      <div class="mb-10">
+        Lorem ipsum odor amet, consectetuer adipiscing elit. Eu molestie cubilia fringilla consectetur fermentum vitae
+        hendrerit. Nam senectus per hac risus luctus fermentum at? Velit molestie erat, tristique orci vel tortor
+        interdum. Pretium et morbi est quis aenean; elementum ante morbi. Tellus sit aptent turpis eu tellus dapibus
+        praesent? Mattis quis sem cursus pretium vulputate platea varius felis. Curae ridiculus donec fringilla natoque
+        libero sem.
+      </div>
+    </div>
+  </div>
+
+  <div class="flex items-center relative">
+    <div class="hidden md:block w-20">
+      <div class="font-bold italic">2023</div>
+      <div class="md:flex space-x-1 text-xs">
+        <div>Aug.</div>
+        <div>-</div>
+        <div>Sept.</div>
+      </div>
+    </div>
+
+    <div class="border-r-2 border-black absolute h-full left-1 md:left-20 top-2 z-10">
+      <i class="fas fa-circle -top-1 -ml-2 absolute"></i>
+      <i class="fas fa-circle bottom-0 -ml-2 absolute"></i>
+    </div>
+
+    <div class="ml-10">
+      <div class="font-bold">Company 3</div>
+      <div class="italic md:mb-4">Full stack developer</div>
+      <div class="mb-4 mt-2 md:hidden">
+        <div class="font-bold">2024</div>
+        <div class="text-xs">Aug - Sept</div>
+      </div>
+      <div class="mb-10">
+        Lorem ipsum odor amet, consectetuer adipiscing elit. Eu molestie cubilia fringilla consectetur fermentum vitae
+        hendrerit. Nam senectus per hac risus luctus fermentum at? Velit molestie erat, tristique orci vel tortor
+        interdum. Pretium et morbi est quis aenean; elementum ante morbi. Tellus sit aptent turpis eu tellus dapibus
+        praesent? Mattis quis sem cursus pretium vulputate platea varius felis. Curae ridiculus donec fringilla natoque
+        libero sem.
+      </div>
+    </div>
+  </div>
+
+  <div class="flex items-center relative">
+    <div class="hidden md:block w-20">
+      <div class="font-bold italic">2023</div>
+      <div class="md:flex space-x-1 text-xs">
+        <div>Aug.</div>
+        <div>-</div>
+        <div>Sept.</div>
+      </div>
+    </div>
+
+    <div class="border-r-2 border-black absolute h-full left-1 md:left-20 top-2 z-10">
+      <i class="fas fa-circle -top-1 -ml-2 absolute"></i>
+      <i class="fas fa-circle bottom-0 -ml-2 absolute"></i>
+    </div>
+
+    <div class="ml-10">
+      <div class="font-bold">Company 3</div>
+      <div class="italic md:mb-4">Full stack developer</div>
+      <div class="mb-4 mt-2 md:hidden">
+        <div class="font-bold">2024</div>
+        <div class="text-xs">Aug - Sept</div>
+      </div>
+      <div class="mb-10">
+        Lorem ipsum odor amet, consectetuer adipiscing elit. Eu molestie cubilia fringilla consectetur fermentum vitae
+        hendrerit. Nam senectus per hac risus luctus fermentum at? Velit molestie erat, tristique orci vel tortor
+        interdum. Pretium et morbi est quis aenean; elementum ante morbi. Tellus sit aptent turpis eu tellus dapibus
+        praesent? Mattis quis sem cursus pretium vulputate platea varius felis. Curae ridiculus donec fringilla natoque
+        libero sem.
+      </div>
+    </div>
+  </div>
+
+  <div class="flex items-center relative">
+    <div class="hidden md:block w-20">
+      <div class="font-bold italic">2023</div>
+      <div class="md:flex space-x-1 text-xs">
+        <div>Aug.</div>
+        <div>-</div>
+        <div>Sept.</div>
+      </div>
+    </div>
+
+    <div class="border-r-2 border-black absolute h-full left-1 md:left-20 top-2 z-10">
+      <i class="fas fa-circle -top-1 -ml-2 absolute"></i>
+      <i class="fas fa-circle bottom-0 -ml-2 absolute"></i>
+    </div>
+
+    <div class="ml-10">
+      <div class="font-bold">Company 3</div>
+      <div class="italic md:mb-4">Full stack developer</div>
+      <div class="mb-4 mt-2 md:hidden">
+        <div class="font-bold">2024</div>
+        <div class="text-xs">Aug - Sept</div>
+      </div>
+      <div class="mb-10">
+        Lorem ipsum odor amet, consectetuer adipiscing elit. Eu molestie cubilia fringilla consectetur fermentum vitae
+        hendrerit. Nam senectus per hac risus luctus fermentum at? Velit molestie erat, tristique orci vel tortor
+        interdum. Pretium et morbi est quis aenean; elementum ante morbi. Tellus sit aptent turpis eu tellus dapibus
+        praesent? Mattis quis sem cursus pretium vulputate platea varius felis. Curae ridiculus donec fringilla natoque
+        libero sem.
+      </div>
+    </div>
+  </div>
+
+  <div class="flex items-center relative">
+    <div class="hidden md:block w-20">
+      <div class="font-bold italic">2023</div>
+      <div class="md:flex space-x-1 text-xs">
+        <div>Aug.</div>
+        <div>-</div>
+        <div>Sept.</div>
+      </div>
+    </div>
+
+    <div class="border-r-2 border-black absolute h-full left-1 md:left-20 top-2 z-10">
+      <i class="fas fa-circle -top-1 -ml-2 absolute"></i>
+      <i class="fas fa-circle bottom-0 -ml-2 absolute"></i>
+    </div>
+
+    <div class="ml-10">
+      <div class="font-bold">Company 3</div>
+      <div class="italic md:mb-4">Full stack developer</div>
+      <div class="mb-4 mt-2 md:hidden">
+        <div class="font-bold">2024</div>
+        <div class="text-xs">Aug - Sept</div>
+      </div>
+      <div class="mb-10">
+        Lorem ipsum odor amet, consectetuer adipiscing elit. Eu molestie cubilia fringilla consectetur fermentum vitae
+        hendrerit. Nam senectus per hac risus luctus fermentum at? Velit molestie erat, tristique orci vel tortor
+        interdum. Pretium et morbi est quis aenean; elementum ante morbi. Tellus sit aptent turpis eu tellus dapibus
+        praesent? Mattis quis sem cursus pretium vulputate platea varius felis. Curae ridiculus donec fringilla natoque
+        libero sem.
+      </div>
+    </div>
+  </div>
+</div>

src/app/modules/dashboard/components/experience/exp-simple-timeline/exp-simple-timeline.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExpSimpleTimelineComponent } from './exp-simple-timeline.component';
+
+describe('ExpSimpleTimelineComponent', () => {
+  let component: ExpSimpleTimelineComponent;
+  let fixture: ComponentFixture<ExpSimpleTimelineComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ExpSimpleTimelineComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ExpSimpleTimelineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/dashboard/components/experience/exp-simple-timeline/exp-simple-timeline.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-exp-simple-timeline',
+  standalone: true,
+  imports: [],
+  templateUrl: './exp-simple-timeline.component.html',
+  styleUrl: './exp-simple-timeline.component.scss',
+})
+export class ExpSimpleTimelineComponent {}

src/app/modules/dashboard/components/experience/exp-technologies/exp-technologies.component.html

@@ -1 +1,19 @@
-<p>exp-technologies works!</p>
+<div class="relative mt-5 text-left text-foreground">
+  <div
+    *ngFor="let t of tech; let i = index"
+    [ngClass]="{ 'pb-5 pt-5': i % 2 === 0 }"
+    class="flex items-center relative justify-start">
+    <div class="border-r-2 border-foreground absolute h-full top-2 z-10">
+      <i class="fas fa-circle -top-1 -ml-2 absolute"></i>
+      <div class="absolute seccion -ml-8 font-bold italic text-gray-400">
+        {{ t.category }}
+      </div>
+    </div>
+
+    <div class="ml-6 pt-5 grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
+      <div *ngFor="let item of t.items" class="flex mb-4 space-x-16">
+        <svg-icon [src]="item.logo || ''" [svgClass]="'h-12 w-12 mb-2 text-foreground'"></svg-icon>
+      </div>
+    </div>
+  </div>
+</div>

src/app/modules/dashboard/components/experience/exp-technologies/exp-technologies.component.scss

@@ -0,0 +1,14 @@
+.seccion {
+  text-transform: uppercase;
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+  -webkit-transform-origin: 0 0;
+  -moz-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  -o-transform-origin: 0 0;
+  transform-origin: 0 0;
+  top: 60%;
+}

src/app/modules/dashboard/components/experience/exp-technologies/exp-technologies.component.ts

@@ -1,10 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { AngularSvgIconModule } from 'angular-svg-icon';
+import { ITechnology } from 'src/app/core/models/project.model';
+import { TECHNOLOGIES } from '../../../pages/experience/data/technologies';
+import { NgClass, NgFor } from '@angular/common';
 
 @Component({
-  selector: 'app-exp-technologies',
+  selector: 'tmr-exp-technologies',
   standalone: true,
-  imports: [],
+  imports: [AngularSvgIconModule, NgFor, NgClass],
   templateUrl: './exp-technologies.component.html',
   styleUrl: './exp-technologies.component.scss',
 })
-export class ExpTechnologiesComponent {}
+export class ExpTechnologiesComponent {
+  @Input() tech: ITechnology[] = TECHNOLOGIES;
+}

src/app/modules/dashboard/components/experience/exp-timelines/exp-timelines.component.html

@@ -0,0 +1,38 @@
+<div class="timeline-container">
+  <section class="timeline text-foreground">
+    <ol>
+      <li *ngFor="let event of timelineData" class="timeline-item">
+        <div class="hidden md:block w-20 -ml-16 -mb-12 seccion">
+          <div class="font-normal italic text-xs lowercase text-gray-400">
+            {{ getTotalDuration(event.timePeriod.startDate, event.timePeriod.endDate) }}
+          </div>
+          <div class="md:flex space-x-1 text-xs font-medium">
+            <div>{{ event.timePeriod.startDate | date : 'MMM yyyy' }}.</div>
+            <div>-</div>
+            <div>{{ event.timePeriod.endDate | date : 'MMM yyyy' }}.</div>
+          </div>
+        </div>
+        <div class="item-inner">
+          <div class="time-wrapper">
+            <time class="font-bold"><span class="text-gray-500 font-medium"></span>{{ event.job }}</time>
+          </div>
+          <div class="details">
+            <h3 class="italic font-semibold mb-0 font-matemasie">{{ event.company.name }}</h3>
+            <div
+              class="description mb-4 text-gray-700 list-disc list-inside"
+              [innerHTML]="getSanitizedDescription(event.description)"></div>
+            <div class="tech-stacks flex flex-wrap">
+              <tmr-badge-a1
+                *ngFor="let tech of event.techStacks"
+                [icon]="tech.icon ?? ''"
+                [text]="tech.name"
+                [bgColor]="'bg-gray-200'"
+                [hoverBgColor]="'hover:bg-gray-300'"
+                [textColor]="'text-gray-600'"></tmr-badge-a1>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ol>
+  </section>
+</div>