<html>
<section id="project-timeline">
<style>
#project-timeline {
padding-block: var(--et-spacing-vertical);
padding-inline: var(--et-spacing-horizontal);
background-color: var(--et-colors-background);
}
@media (min-width: 1024px) {
#project-timeline {
padding-block: var(--et-spacing-vertical-lg);
padding-inline: var(--et-spacing-horizontal-lg);
}
}
#project-timeline .container {
margin-inline: auto;
max-width: 42rem;
}
@media (min-width: 1024px) {
#project-timeline .container {
max-width: 80rem;
}
}
#project-timeline .btn {
border-radius: var(--et-radius-button, 8px);
padding: 10px 14px;
font-size: 14px;
display: inline-flex;
align-items: center;
text-decoration: none;
margin-bottom: 12px;
}
#project-timeline .btn-primary {
background-color: var(--et-colors-brand);
color: var(--et-colors-background);
}
#project-timeline .btn-primary:hover {
background-color: color-mix(in srgb, var(--et-colors-brand) 90%, transparent);
}
#project-timeline .btn-primary:focus-visible {
outline: 2px solid var(--et-colors-brand);
outline-offset: 2px;
}
#project-timeline .link-secondary {
color: var(--et-colors-text);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
line-height: 1.25;
align-self: center;
border-bottom: 1px solid transparent;
margin-bottom: 12px;
}
#project-timeline .link-secondary:hover {
border-bottom: 1px solid currentColor;
}
#project-timeline .link-secondary:focus-visible {
outline: 1px dotted currentColor;
outline-offset: 2px;
}
#project-timeline .heading {
color: var(--et-colors-text);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
text-wrap: balance;
max-width: 42rem;
margin-bottom: 16px;
}
#project-timeline h2.heading {
font-size: 36px;
}
@media (min-width: 640px) {
#project-timeline h2.heading {
font-size: 48px;
}
}
#project-timeline .tag {
color: var(--et-colors-brand);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
text-wrap: balance;
font-size: 16px;
margin-bottom: 8px;
}
#project-timeline .paragraph {
color: var(--et-colors-text);
font-size: 18px;
opacity: 0.7;
text-wrap: balance;
max-width: 42rem;
margin-bottom: 20px;
}
#project-timeline .media {
display: block;
width: 100%;
height: auto;
object-fit: cover;
border-radius: var(--et-radius-image, 8px);
margin-bottom: 24px;
}
#project-timeline .media-wrap {
overflow: hidden;
border-radius: var(--et-radius-image, 8px);
margin-bottom: 24px;
}
#project-timeline ul {
padding-left: 1.25rem;
list-style: disc;
margin: 0 0 16px;
}
#project-timeline ol {
padding-left: 1.25rem;
list-style: decimal;
margin: 0 0 16px;
}
#project-timeline li {
margin: 4px 0;
color: var(--et-colors-text);
}
#project-timeline .last {
margin-bottom: 0 !important;
}
/* ── Purple highlight utility ── */
#project-timeline .highlight {
color: #a855f7;
font-weight: 700;
}
#project-timeline .highlight-bg {
background-color: rgba(168, 85, 247, 0.13);
color: #c084fc;
border-radius: 3px;
padding: 0 3px;
font-weight: 600;
}
/* ── Timeline layout ── */
#project-timeline .intro {
margin-bottom: 48px;
}
#project-timeline .timeline {
position: relative;
padding: 0;
margin: 0;
list-style: none;
}
/* Vertical spine */
#project-timeline .timeline::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 20px;
width: 2px;
background: linear-gradient(to bottom, #a855f7, rgba(168, 85, 247, 0.2));
border-radius: 2px;
}
@media (min-width: 768px) {
#project-timeline .timeline::before {
left: 50%;
transform: translateX(-50%);
}
}
#project-timeline .timeline-item {
position: relative;
padding: 0 0 48px 56px;
}
#project-timeline .timeline-item:last-child {
padding-bottom: 0;
}
@media (min-width: 768px) {
#project-timeline .timeline-item {
padding: 0 0 56px 0;
display: grid;
grid-template-columns: 1fr 40px 1fr;
gap: 0 24px;
align-items: start;
}
#project-timeline .timeline-item:last-child {
padding-bottom: 0;
}
/* Odd items: content left, empty right */
#project-timeline .timeline-item:nth-child(odd) .tl-card {
grid-column: 1;
grid-row: 1;
text-align: right;
}
#project-timeline .timeline-item:nth-child(odd) .tl-dot-col {
grid-column: 2;
grid-row: 1;
}
#project-timeline .timeline-item:nth-child(odd) .tl-empty {
grid-column: 3;
grid-row: 1;
}
/* Even items: empty left, content right */
#project-timeline .timeline-item:nth-child(even) .tl-card {
grid-column: 3;
grid-row: 1;
text-align: left;
}
#project-timeline .timeline-item:nth-child(even) .tl-dot-col {
grid-column: 2;
grid-row: 1;
}
#project-timeline .timeline-item:nth-child(even) .tl-empty {
grid-column: 1;
grid-row: 1;
}
}
/* Dot column */
#project-timeline .tl-dot-col {
display: flex;
flex-direction: column;
align-items: center;
}
/* Dot */
#project-timeline .tl-dot {
position: absolute;
left: 10px;
top: 4px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #a855f7;
border: 3px solid var(--et-colors-background);
box-shadow: 0 0 0 2px #a855f7;
flex-shrink: 0;
z-index: 1;
}
@media (min-width: 768px) {
#project-timeline .tl-dot {
position: static;
margin-top: 6px;
}
}
/* Pulsing dot for current/active milestone */
#project-timeline .tl-dot.active {
background-color: #a855f7;
box-shadow: 0 0 0 2px #a855f7;
animation: tl-pulse 2s ease-in-out infinite;
}
@keyframes tl-pulse {
0%, 100% { box-shadow: 0 0 0 2px #a855f7; }
50% { box-shadow: 0 0 0 8px rgba(168, 85, 247, 0.25); }
}
/* Card */
#project-timeline .tl-card {
background-color: var(--et-colors-card-background, #fff);
border: 1px solid var(--et-colors-border, #e5e7eb);
border-radius: 8px;
padding: 1.25rem 1.5rem;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
#project-timeline .tl-card:hover {
box-shadow: 0 4px 24px rgba(168, 85, 247, 0.18);
transform: translateY(-2px);
}
/* Active card highlight */
#project-timeline .tl-card.active {
border-color: #a855f7;
box-shadow: 0 0 0 1px #a855f7, 0 0 24px rgba(168, 85, 247, 0.15);
}
#project-timeline .tl-badge {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #c084fc;
background-color: rgba(168, 85, 247, 0.15);
border-radius: 4px;
padding: 2px 8px;
margin-bottom: 8px;
}
#project-timeline .tl-title {
color: var(--et-colors-text);
font-size: 18px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
margin-bottom: 8px;
}
#project-timeline .tl-desc {
color: var(--et-colors-text);
font-size: 15px;
opacity: 0.7;
line-height: 1.6;
margin-bottom: 0;
}
#project-timeline .tl-partners {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
padding: 0;
}
@media (min-width: 768px) {
#project-timeline .timeline-item:nth-child(odd) .tl-partners {
justify-content: flex-end;
}
}
#project-timeline .tl-partners li {
font-size: 12px;
color: var(--et-colors-text);
opacity: 0.6;
background-color: color-mix(in srgb, var(--et-colors-text) 8%, transparent);
border-radius: 4px;
padding: 2px 8px;
margin: 0;
}
/* Purple-accented partner tags for key milestones */
#project-timeline .tl-partners li.key {
color: #c084fc;
opacity: 1;
background-color: rgba(168, 85, 247, 0.13);
font-weight: 600;
}
#project-timeline .tl-empty {
display: none;
}
@media (min-width: 768px) {
#project-timeline .tl-empty {
display: block;
}
}
/* Progress bar */
#project-timeline .progress-wrap {
margin-bottom: 48px;
}
#project-timeline .progress-label {
display: flex;
justify-content: space-between;
font-size: 13px;
color: var(--et-colors-text);
opacity: 0.6;
margin-bottom: 8px;
}
#project-timeline .progress-bar {
height: 6px;
border-radius: 999px;
background-color: color-mix(in srgb, var(--et-colors-text) 12%, transparent);
overflow: hidden;
}
#project-timeline .progress-fill {
height: 100%;
border-radius: 999px;
background: linear-gradient(to right, #7c3aed, #a855f7, #c084fc);
width: 0%;
transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
<div class="container">
<!-- Intro -->
<header class="intro">
<h3 class="tag">Historia projektu</h3>
<h2 class="heading">Linia życia projektu<br>VividTech</h2>
<p class="paragraph last">Od <strong class="highlight">grantu badawczego na DSW</strong> po powołanie spółki i dedykowany <strong class="highlight">framework dostępności</strong> — śledź każdy krok naszej drogi.</p>
</header>
<!-- Progress bar -->
<div class="progress-wrap" aria-hidden="true">
<div class="progress-label">
<span>Kwiecień 2022</span>
<span>Teraz · 2025</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="timeline-progress-fill"></div>
</div>
</div>
<!-- Timeline -->
<ol class="timeline" aria-label="Kamienie milowe projektu VividTech">
<!-- Milestone 1 -->
<li class="timeline-item" id="milestone-2022-grant">
<div class="tl-card">
<span class="tl-badge">Kwiecień 2022</span>
<h4 class="tl-title">Przyznanie grantu badawczego</h4>
<p class="tl-desc">Otrzymaliśmy finansowanie w ramach <span class="highlight-bg">grantu badawczego</span> na Uniwersytecie Ideis DSW we Wrocławiu. Oficjalny start projektu — powołanie zespołu, określenie celów badawczych i uruchomienie pierwszych prac koncepcyjnych nad oprogramowaniem wspomagającym <span class="highlight-bg">dostępność cyfrową</span>.</p>
<ul class="tl-partners" aria-label="Partnerzy i instytucje">
<li class="key">Uniwersytet Ideis DSW</li>
<li class="key">Grant badawczy</li>
</ul>
</div>
<div class="tl-dot-col">
<div class="tl-dot" role="presentation"></div>
</div>
<div class="tl-empty" aria-hidden="true"></div>
</li>
<!-- Milestone 2 -->
<li class="timeline-item" id="milestone-2022-2023-dev">
<div class="tl-empty" aria-hidden="true"></div>
<div class="tl-dot-col">
<div class="tl-dot" role="presentation"></div>
</div>
<div class="tl-card">
<span class="tl-badge">2022–2023 · Rok prac</span>
<h4 class="tl-title">Intensywny rozwój oprogramowania</h4>
<p class="tl-desc">Przez cały rok prowadziliśmy równoległe prace nad budową <span class="highlight-bg">prototypu oprogramowania</span> oraz projektowaniem i realizacją <span class="highlight-bg">badań użytkowników</span>. Stworzono pierwszą działającą wersję narzędzia, przeprowadzono testy z grupami docelowymi i zgromadzono obszerny zbiór danych empirycznych.</p>
<ul class="tl-partners" aria-label="Działania">
<li class="key">Prototypowanie</li>
<li class="key">Badania użytkowników</li>
<li>Testy iteracyjne</li>
</ul>
</div>
</li>
<!-- Milestone 3 -->
<li class="timeline-item" id="milestone-2023-badania">
<div class="tl-card">
<span class="tl-badge">Luty 2023</span>
<h4 class="tl-title">Zakończenie badań i zebranie wyników</h4>
<p class="tl-desc">Sfinalizowanie pierwszego cyklu badań naukowych. Opracowanie <span class="highlight-bg">raportu z wynikami</span>, analiza statystyczna danych, <span class="highlight-bg">walidacja hipotez badawczych</span> dotyczących efektywności oprogramowania w kontekście poprawy dostępności cyfrowej.</p>
<ul class="tl-partners" aria-label="Działania">
<li class="key">Raport badawczy</li>
<li>Analiza danych</li>
<li class="key">Walidacja wyników</li>
</ul>
</div>
<div class="tl-dot-col">
<div class="tl-dot" role="presentation"></div>
</div>
<div class="tl-empty" aria-hidden="true"></div>
</li>
<!-- Milestone 4 -->
<li class="timeline-item" id="milestone-2024-konferencja">
<div class="tl-empty" aria-hidden="true"></div>
<div class="tl-dot-col">
<div class="tl-dot" role="presentation"></div>
</div>
<div class="tl-card">
<span class="tl-badge">2024 · Konferencja</span>
<h4 class="tl-title">Publikacja wyników — „Młodzi w Energetyce"</h4>
<p class="tl-desc">Prezentacja wyników badań na konferencji naukowej <span class="highlight-bg">„Młodzi w Energetyce"</span> organizowanej przez Politechnikę Wrocławską. Wystąpienie spotkało się z pozytywnym odbiorem środowiska akademickiego i otworzyło <span class="highlight-bg">nowe możliwości współpracy badawczej</span>.</p>
<ul class="tl-partners" aria-label="Partnerzy i instytucje">
<li class="key">Politechnika Wrocławska</li>
<li>Konferencja naukowa</li>
<li class="key">Publikacja</li>
</ul>
</div>
</li>
<!-- Milestone 5 -->
<li class="timeline-item" id="milestone-2023-2024-doskonalenie">
<div class="tl-card">
<span class="tl-badge">2023–2024 · Ciągły rozwój</span>
<h4 class="tl-title">Doskonalenie oprogramowania i know-how</h4>
<p class="tl-desc">W międzyczasie nieustannie rozwijaliśmy oprogramowanie — wprowadzano nowe funkcjonalności, optymalizowano algorytmy, gromadzono <span class="highlight-bg">wiedzę ekspercką z obszaru dostępności i neuroróżnorodności</span>. Budowa wewnętrznego repozytorium dobrych praktyk i metodologii testowania.</p>
<ul class="tl-partners" aria-label="Działania">
<li>Iteracyjny rozwój</li>
<li class="key">Dokumentacja</li>
<li class="key">Baza wiedzy</li>
</ul>
</div>
<div class="tl-dot-col">
<div class="tl-dot" role="presentation"></div>
</div>
<div class="tl-empty" aria-hidden="true"></div>
</li>
<!-- Milestone 6 -->
<li class="timeline-item" id="milestone-2025-spolka">
<div class="tl-empty" aria-hidden="true"></div>
<div class="tl-dot-col">
<div class="tl-dot" role="presentation"></div>
</div>
<div class="tl-card">
<span class="tl-badge">2025 · Spin-off</span>
<h4 class="tl-title">Powołanie spółki VividTech</h4>
<p class="tl-desc">Formalne <span class="highlight-bg">powołanie spółki VividTech</span> — komercjalizacja wyników badań i transformacja projektu akademickiego w podmiot rynkowy. Rozszerzenie zakresu prac o <span class="highlight-bg">badania z udziałem osób neuroróżnorodnych</span> we współpracy z Uniwersytetem Jagiellońskim w Krakowie.</p>
<ul class="tl-partners" aria-label="Partnerzy i instytucje">
<li class="key">VividTech Sp. z o.o.</li>
<li class="key">Uniwersytet Jagielloński</li>
<li class="key">Neuroróżnorodność</li>
</ul>
</div>
</li>
<!-- Milestone 7 — active/current -->
<li class="timeline-item" id="milestone-2025-teraz">
<div class="tl-card active">
<span class="tl-badge">Teraz · 2025</span>
<h4 class="tl-title">Dedykowany framework i analizy dostępności</h4>
<p class="tl-desc">Aktualny etap: tworzenie <span class="highlight-bg">dedykowanego frameworku dostępności cyfrowej</span>, realizacja kompleksowych analiz dostępności dla <span class="highlight-bg">instytucji kultury i edukacji</span>. Badania dostosowania oprogramowania pod kątem osób neuroróżnorodnych, <span class="highlight-bg">wdrożenia pilotażowe</span> oraz budowa standardów dostępności dla sektora publicznego.</p>
<ul class="tl-partners" aria-label="Partnerzy i działania">
<li class="key">Framework dostępności</li>
<li class="key">Instytucje kultury</li>
<li class="key">Edukacja</li>
<li class="key">Neuroróżnorodność</li>
<li class="key">UJ Kraków</li>
</ul>
</div>
<div class="tl-dot-col">
<div class="tl-dot active" role="presentation"></div>
</div>
<div class="tl-empty" aria-hidden="true"></div>
</li>
</ol>
</div>
<script>
(function () {
var fill = document.getElementById('timeline-progress-fill');
if (!fill) return;
var observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
fill.style.width = '88%';
observer.disconnect();
}
});
}, { threshold: 0.2 });
observer.observe(fill);
})();
</script>
</section>
</html>
