Building a Personal Timeline Component

How I built a timeline component for my personal homepage to showcase my experience and career milestones.

3 min read

3/8/2025

Introduction

When crafting a personal website, showcasing your journey in an elegant and interactive way can enhance your portfolio. I decided to implement a timeline component that presents my professional experience and key milestones. The goal was to create a visually appealing, responsive, and animated component that fits seamlessly into my homepage.

Why a Timeline?

A timeline is an excellent way to present chronological information without overwhelming the viewer. It provides:

Clear structure: Easy navigation through different career phases.
Engagement: Smooth animations make it more interactive.
Minimalism: Concise descriptions ensure a clean layout.

Building the Timeline Component

I structured my timeline using HTML, CSS, and JavaScript while ensuring responsiveness and animation effects for a modern look.

The Data Structure

I created a structured array to hold my experience and milestones:

const timelineEvents = [
    {
        year: "2016-2021",
        title: "Technological High School Max Valier",
        description:
            "Technical high school with a focus on computer science and electronics.",
    },
    {
        year: 2019,
        title: "Internship: COOLORANGE",
        description:
            "Gaining my first working experience as a Software Developer and working with Azure Pipelines and Powershell.",
    },
    {
        year: "2021 - 2022",
        title: "Software Developer at 426",
        description:
            "Implementation of various international e-commerce projects, working on Shopware 5 & 6 plugins, and refactoring old code.",
    },
    {
        year: "2022 and ongoing",
        title: "Bachelor of Science in Computer Science at the University of Salzburg",
        description:
            "Currently studying computer science at the University of Salzburg.",
    },
];

HTML & JSX Structure

Each timeline item dynamically maps over this array, rendering structured content with alternating alignment:

<section class="timeline-section">
  <div class="timeline-container">
    <div class="timeline-header">
      <h2 class="text-primary">My Experience</h2>
    </div>
    <div class="timeline">
      <div class="timeline-line"></div>
      {timelineEvents.map((event, index) => (
        <div class={`timeline-item ${index % 2 === 0 ? "left" : "right"}`}>
          <div class="timeline-content bg-background">
            <div class="year">{event.year}</div>
            <h3 class="text-primary">{event.title}</h3>
            <p class="text-text">{event.description}</p>
          </div>
          <div class="timeline-marker"></div>
        </div>
      ))}
    </div>
  </div>
</section>

Styling the Timeline

CSS ensures a clean look, with a central timeline line and alternating event placements:

.timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: #618b3c;
    transform: translateX(-50%);
}

.timeline-item {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}

.timeline-item.fade-in {
    opacity: 1;
    transform: translateY(0);
}

Adding Animation

To animate timeline items as they come into view, I used an IntersectionObserver:

document.addEventListener("DOMContentLoaded", () => {
    const observer = new IntersectionObserver(
        (entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.classList.add("fade-in");
                }
            });
        },
        { threshold: 0.2 }
    );

    document.querySelectorAll(".timeline-item").forEach((item) => {
        observer.observe(item);
    });
});

Improvements & Future Enhancements

While this timeline serves its purpose, I have some ideas for improvements:

Interactive Elements: Adding expandable sections for more details.
Icons & Images: Visual enhancements to make key moments stand out.