| class ExecutiveTimeline extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| :host { |
| display: block; |
| padding: 2rem 0; |
| } |
| .timeline-container { |
| max-width: 800px; |
| margin: 0 auto; |
| } |
| .timeline-header { |
| text-align: center; |
| margin-bottom: 3rem; |
| } |
| .timeline-header h2 { |
| font-family: 'Playfair Display', serif; |
| font-size: 2.25rem; |
| color: var(--primary-800); |
| margin-bottom: 1rem; |
| } |
| .timeline-item { |
| position: relative; |
| padding-left: 3rem; |
| margin-bottom: 3rem; |
| border-left: 2px solid var(--primary-300); |
| } |
| .timeline-item:last-child { |
| margin-bottom: 0; |
| } |
| .timeline-item:before { |
| content: ''; |
| position: absolute; |
| left: -11px; |
| top: 0; |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background: var(--primary-600); |
| border: 4px solid white; |
| box-shadow: 0 0 0 3px var(--primary-200); |
| } |
| .timeline-date { |
| font-weight: 600; |
| color: var(--primary-600); |
| margin-bottom: 0.5rem; |
| } |
| .timeline-title { |
| font-size: 1.25rem; |
| font-weight: 600; |
| color: var(--primary-900); |
| margin-bottom: 0.5rem; |
| } |
| .timeline-company { |
| font-weight: 500; |
| color: var(--primary-700); |
| margin-bottom: 0.75rem; |
| } |
| .timeline-description { |
| color: var(--primary-500); |
| line-height: 1.6; |
| } |
| </style> |
| <div class="timeline-container"> |
| <div class="timeline-header"> |
| <h2 class="executive-heading">Professional Journey</h2> |
| <p>My career milestones and achievements</p> |
| </div> |
| |
| <div class="timeline-item"> |
| <div class="timeline-date">2020 - Present</div> |
| <h3 class="timeline-title">Senior Executive Assistant</h3> |
| <div class="timeline-company">Global Tech Solutions</div> |
| <p class="timeline-description"> |
| Supporting C-level executives with strategic planning, complex scheduling, |
| and high-level administrative support for international operations. |
| </p> |
| </div> |
| |
| <div class="timeline-item"> |
| <div class="timeline-date">2016 - 2020</div> |
| <h3 class="timeline-title">Executive Assistant</h3> |
| <div class="timeline-company">Innovate Corp</div> |
| <p class="timeline-description"> |
| Managed executive calendars, coordinated international travel, |
| and acted as liaison between executives and stakeholders. |
| </p> |
| </div> |
| |
| <div class="timeline-item"> |
| <div class="timeline-date">2012 - 2016</div> |
| <h3 class="timeline-title">Administrative Coordinator</h3> |
| <div class="timeline-company">Strategic Partners LLC</div> |
| <p class="timeline-description"> |
| Provided comprehensive support to multiple executives, |
| organized corporate events, and implemented new filing systems. |
| </p> |
| </div> |
| </div> |
| `; |
| } |
| } |
|
|
| customElements.define('executive-timeline', ExecutiveTimeline); |
