feat: experience mobile ui

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

@@ -0,0 +1,23 @@
+<div class="timeline mx-auto p-0">
+  <div class="outer">
+    <div
+      *ngFor="let experience of experienceData; let i = index"
+      class="card relative max-w-[400px] px-4 py-6 md:px-6 md:py-8"
+      [ngClass]="{'pl-8 pr-4': i % 2 === 0, 'pr-8 pl-4': i % 2 !== 0}">
+      <div class="info flex flex-col text-gray-500 rounded-md p-3">
+        <h3 class="title relative text-primary">
+         <span class="font-poppins font-semibold">{{ experience.company.name }}</span>
+          <span class="text-xs">( {{ experience.timePeriod.startDate | date : 'MMM yyyy' }} )</span>
+        </h3>
+        <h3 class="relative text-foreground">
+          <span class="font-nunito font-normal">{{experience.job}}</span>
+        </h3>
+        <div
+          class="description bg-transparent mb-4 text-gray-700 list-disc list-inside"
+          [innerHTML]="getSanitizedDescription(experience.description)">
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,72 @@
+.card::before {
+  @apply border-primary;
+  content: "";
+  position: absolute;
+  width: 50%;
+  animation: flow 3s linear infinite;
+}
+
+.title::before {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: white;
+  border-radius: 999px;
+  border-width: 3px;
+  @apply border-primary;
+}
+
+/* text right if the card is even  */
+.card:nth-child(even) > .info > .title {
+  text-align: right;
+}
+
+/* setting dot to the left if the card is odd */
+.card:nth-child(odd) > .info > .title::before {
+  left: -45px;
+}
+
+/* setting dot to the right if the card is odd */
+.card:nth-child(even) > .info > .title::before {
+  right: -45px;
+}
+
+
+
+@keyframes flow {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 0% 100%;
+  }
+}
+
+.card::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  animation: flow 3s linear infinite;
+}
+
+.card:nth-child(odd)::before {
+  left: 0;
+  top: -4.5px;
+  bottom: -4.5px;
+  border-width: 5px 0 5px 5px;
+  border-radius: 50px 0 0 50px;
+}
+
+.card:nth-child(even)::before {
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-width: 5px 5px 5px 0;
+  border-radius: 0 50px 50px 0;
+}
+
+.card:first-child::before {
+  border-top: 0;
+  border-top-left-radius: 0;
+}

src/app/modules/dashboard/components/experience/exp-mobile-timelines/exp-mobile-timelines.component.spec.ts

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

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

@@ -0,0 +1,26 @@
+import { Component} from '@angular/core';
+
+import { EXPERIENCE } from '../../../pages/experience/data/experience';
+import { ITimelineData } from 'src/app/core/models/experience.model';
+import { CommonModule, DatePipe } from '@angular/common';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Component({
+  selector: 'tmr-exp-mobile-timelines',
+  standalone: true,
+  imports: [CommonModule, DatePipe],
+  templateUrl: './exp-mobile-timelines.component.html',
+  styleUrl: './exp-mobile-timelines.component.scss'
+})
+export class ExpMobileTimelinesComponent{
+  experienceData: ITimelineData[] = EXPERIENCE;
+  selectedIndex: number = 0;
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+
+ getSanitizedDescription(description: string): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(description);
+  }
+
+}

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

@@ -10,7 +10,7 @@
       </div>
     </div>
 
-    <div class="ml-6 pt-5 grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
+    <div class="ml-6 pt-5 grid grid-cols-4 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>

src/app/modules/dashboard/pages/experience/experience.component.html

@@ -5,17 +5,22 @@
 
   <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-4">
     <div class="lg:col-span-3 xl:col-span-4">
-      <div class="p-4 lg:p-10 bg-background">
-        <div class="lg:flex mt-10 text-center ml-10 mr-10 lg:ml-36 lg:mr-36">
+      <div class="p-0 sm:p-4 lg:p-10 bg-background">
+        <div class="lg:flex mt-10 text-center ml-10 mr-10 lg:ml-36 lg:mr-36 pt-4">
           <div class="lg:mr-20 lg:w-1/4">
             <h1 class="font-bold italic mb-10">TECHNOLOGIES THAT I USED</h1>
             <tmr-exp-technologies [tech]="technology"></tmr-exp-technologies>
           </div>
 
           <div class="lg:w-3/4">
             <h1 class="font-bold italic mb-10">WORK TIMELINES</h1>
+            <div *ngIf="isDesktop$ | async; else isMobileTemplate">
+              <tmr-exp-timelines [timelineData]="experience"></tmr-exp-timelines>
+            </div>
+            <ng-template #isMobileTemplate>
+              <tmr-exp-mobile-timelines></tmr-exp-mobile-timelines>
+            </ng-template>
 
-            <tmr-exp-timelines [timelineData]="experience"></tmr-exp-timelines>
           </div>
         </div>
       </div>

src/app/modules/dashboard/pages/experience/experience.component.ts

@@ -6,19 +6,26 @@ import { ITimelineData } from 'src/app/core/models/experience.model';
 import { EXPERIENCE } from './data/experience';
 import { ITechnology } from 'src/app/core/models/project.model';
 import { TECHNOLOGIES } from './data/technologies';
+import { ResponsiveService } from 'src/app/core/services/responsive.service';
+import { CommonModule } from '@angular/common';
+import { ExpMobileTimelinesComponent } from '../../components/experience/exp-mobile-timelines/exp-mobile-timelines.component';
 
 @Component({
   selector: 'app-experience',
   standalone: true,
-  imports: [ExpHeaderComponent, ExpTechnologiesComponent, ExpTimelinesComponent],
+  imports: [CommonModule, ExpHeaderComponent, ExpTechnologiesComponent, ExpTimelinesComponent, ExpMobileTimelinesComponent],
   templateUrl: './experience.component.html',
   styleUrl: './experience.component.scss',
 })
 export class ExperienceComponent {
   experience: ITimelineData[];
   technology: ITechnology[];
-  constructor() {
-    this.experience = EXPERIENCE;
-    this.technology = TECHNOLOGIES;
-  }
+
+    isMobile$ = this.responsiveService.isMobile$;
+    isDesktop$ = this.responsiveService.isDesktop$;
+
+    constructor(private responsiveService: ResponsiveService) {
+      this.experience = EXPERIENCE;
+      this.technology = TECHNOLOGIES;
+    }
 }

src/app/modules/dashboard/pages/index/index.component.html

@@ -53,7 +53,7 @@
   </div>
 </div>
 <ng-template #isMobileTemplate>
-  <div class="h-xsh mt-2" tmr-bg-l1 dark="/assets/bg/mobile/mountain.webp" light="/assets/bg/mobile/white02.webp">
+  <div class="h-xsh mt-2" tmr-bg-l1 dark="/assets/bg/mobile/mountain.webp" light="/assets/bg/mobile/white04.jpg">
     <tmr-idx-mobile
       [socialLinks]="socialLinks"
       [isColor]="true"