tui-timeline
The Timeline component lets you present events chronologically with a Terminal UI aesthetic. It supports vertical and horizontal orientations.
Vertical
<ul class="tui-timeline vertical">
<li class="tui-timeline-item">
<div class="tui-timeline-time">1940s – 1950s</div>
<div class="tui-timeline-divider"></div>
<div class="tui-timeline-body">
1️⃣ First Generation
> Technology: Vacuum tubes, punched cards, magnetic drums
The first generation of computers relied on **vacuum tubes** for circuitry and **magnetic drums** for memory. These machines were enormous, often taking up entire rooms, and consumed vast amounts of electricity. They generated a lot of heat, which made them prone to frequent breakdowns.
Programming was done in **machine language** or very early assembly languages. Input and output were managed through punched cards and paper tape, while printed output was common. Famous examples include the **ENIAC** and **UNIVAC I**.
:::info ⚡ Main characteristic
Bulky, slow, and expensive, but they marked the birth of electronic mputing.
:::
</div>
</li>
<li class="tui-timeline-item">
<div class="tui-timeline-time">1950s – 1960s</div>
<div class="tui-timeline-divider"></div>
<div class="tui-timeline-body">
2️⃣ Second Generation
> Technology: Transistors, magnetic core memory
The introduction of **transistors** revolutionized computer design. They replaced vacuum tubes, making computers smaller, faster, more reliable, and more energy-efficient. Magnetic core memory began to replace drum storage, offering faster access to data.
High-level programming languages such as **COBOL** and **FORTRAN** emerged, making programming more accessible. Computers became more widely used in business, research, and government applications.
:::info 🛠 Key shift
From machine-level to higher-level programming, enabling broader adoption.
:::
</div>
</li>
<li class="tui-timeline-item">
<div class="tui-timeline-time">1960s – 1970s</div>
<div class="tui-timeline-divider"></div>
<div class="tui-timeline-body">
3️⃣ Third Generation
> Technology: Integrated Circuits (ICs), minicomputers
**Integrated circuits** (ICs) brought multiple transistors into a single chip, drastically increasing performance while reducing cost and size. This generation saw the birth of **minicomputers**, which made computing power available to smaller businesses and organizations.
Operating systems became more sophisticated, enabling **time-sharing** and **multi-programming**. This period also marked the rise of computer terminals, replacing punch cards for interaction.
:::info 💡 Impact
Computing became more interactive and affordable.
:::
</div>
</li>
<li class="tui-timeline-item">
<div class="tui-timeline-time">1970s – 1990s</div>
<div class="tui-timeline-divider"></div>
<div class="tui-timeline-body">
4️⃣ Fourth Generation
> Technology: Microprocessors, personal computers (PCs)
The **microprocessor**—a CPU on a single chip—sparked the personal computer revolution. This generation made computing accessible to individuals, not just institutions. Brands like **Apple**, **IBM**, and **Commodore** brought PCs into homes and offices.
Graphical User Interfaces (**GUIs**) emerged, making computers more user-friendly. Networking technologies such as Ethernet and the early Internet protocols also appeared, laying the foundation for today’s connected world.
:::info 🌐 Highlight
Democratization of computing through affordable PCs.
:::
</div>
</li>
<li class="tui-timeline-item">
<div class="tui-timeline-time">1990s – Present</div>
<div class="tui-timeline-divider"></div>
<div class="tui-timeline-body">
5️⃣ Fifth Generation
> Technology: AI, parallel processing, cloud computing
Fifth-generation computers focus on **artificial intelligence**, **machine learning**, and advanced **parallel processing**. They use cutting-edge microprocessors, massive storage, and high-speed networking. Cloud computing allows users to access resources from anywhere, while mobile devices bring computing to the palm of the hand.
Natural language processing, neural networks, and quantum computing research are pushing the boundaries of what computers can do. The emphasis is on **knowledge processing** rather than just data processing.
:::info 🤖 Ongoing goal
Create machines capable of reasoning, learning, and adapting.
:::
</div>
</li>
</ul>- 1940s – 1950s
1️⃣ First Generation
Technology: Vacuum tubes, punched cards, magnetic drums
The first generation of computers relied on vacuum tubes for circuitry and magnetic drums for memory. These machines were enormous, often taking up entire rooms, and consumed vast amounts of electricity. They generated a lot of heat, which made them prone to frequent breakdowns.
Programming was done in machine language or very early assembly languages. Input and output were managed through punched cards and paper tape, while printed output was common. Famous examples include the ENIAC and UNIVAC I.
⚡ Main characteristic
Bulky, slow, and expensive, but they marked the birth of electronic mputing.
- 1950s – 1960s
2️⃣ Second Generation
Technology: Transistors, magnetic core memory
The introduction of transistors revolutionized computer design. They replaced vacuum tubes, making computers smaller, faster, more reliable, and more energy-efficient. Magnetic core memory began to replace drum storage, offering faster access to data.
High-level programming languages such as COBOL and FORTRAN emerged, making programming more accessible. Computers became more widely used in business, research, and government applications.
🛠 Key shift
From machine-level to higher-level programming, enabling broader adoption.
- 1960s – 1970s
3️⃣ Third Generation
Technology: Integrated Circuits (ICs), minicomputers
Integrated circuits (ICs) brought multiple transistors into a single chip, drastically increasing performance while reducing cost and size. This generation saw the birth of minicomputers, which made computing power available to smaller businesses and organizations.
Operating systems became more sophisticated, enabling time-sharing and multi-programming. This period also marked the rise of computer terminals, replacing punch cards for interaction.
💡 Impact
Computing became more interactive and affordable.
- 1970s – 1990s
4️⃣ Fourth Generation
Technology: Microprocessors, personal computers (PCs)
The microprocessor—a CPU on a single chip—sparked the personal computer revolution. This generation made computing accessible to individuals, not just institutions. Brands like Apple, IBM, and Commodore brought PCs into homes and offices.
Graphical User Interfaces (GUIs) emerged, making computers more user-friendly. Networking technologies such as Ethernet and the early Internet protocols also appeared, laying the foundation for today’s connected world.
🌐 Highlight
Democratization of computing through affordable PCs.
- 1990s – Present
5️⃣ Fifth Generation
Technology: AI, parallel processing, cloud computing
Fifth-generation computers focus on artificial intelligence, machine learning, and advanced parallel processing. They use cutting-edge microprocessors, massive storage, and high-speed networking. Cloud computing allows users to access resources from anywhere, while mobile devices bring computing to the palm of the hand.
Natural language processing, neural networks, and quantum computing research are pushing the boundaries of what computers can do. The emphasis is on knowledge processing rather than just data processing.
🤖 Ongoing goal
Create machines capable of reasoning, learning, and adapting.
Horizontal
<ul class="tui-timeline horizontal">
<li class="tui-timeline-item">
<div class="tui-timeline-time">1940s – 1950s</div>
<div class="tui-timeline-divider"></div>
<div class="tui-timeline-body">
1️⃣ First Generation
> Technology: Vacuum tubes, punched cards, magnetic drums
The first generation of computers relied on **vacuum tubes** for circuitry and **magnetic drums** for memory. These machines were enormous, often taking up entire rooms, and consumed vast amounts of electricity. They generated a lot of heat, which made them prone to frequent breakdowns.
Programming was done in **machine language** or very early assembly languages. Input and output were managed through punched cards and paper tape, while printed output was common. Famous examples include the **ENIAC** and **UNIVAC I**.
:::info ⚡ Main characteristic
Bulky, slow, and expensive, but they marked the birth of electronic mputing.
:::
</div>
</li>
<li class="tui-timeline-item">
<div class="tui-timeline-time">1950s – 1960s</div>
<div class="tui-timeline-divider"></div>
<div class="tui-timeline-body">
2️⃣ Second Generation
> Technology: Transistors, magnetic core memory
The introduction of **transistors** revolutionized computer design. They replaced vacuum tubes, making computers smaller, faster, more reliable, and more energy-efficient. Magnetic core memory began to replace drum storage, offering faster access to data.
High-level programming languages such as **COBOL** and **FORTRAN** emerged, making programming more accessible. Computers became more widely used in business, research, and government applications.
:::info 🛠 Key shift
From machine-level to higher-level programming, enabling broader adoption.
:::
</div>
</li>
<li class="tui-timeline-item">
<div class="tui-timeline-time">1960s – 1970s</div>
<div class="tui-timeline-divider"></div>
<div class="tui-timeline-body">
3️⃣ Third Generation
> Technology: Integrated Circuits (ICs), minicomputers
**Integrated circuits** (ICs) brought multiple transistors into a single chip, drastically increasing performance while reducing cost and size. This generation saw the birth of **minicomputers**, which made computing power available to smaller businesses and organizations.
Operating systems became more sophisticated, enabling **time-sharing** and **multi-programming**. This period also marked the rise of computer terminals, replacing punch cards for interaction.
:::info 💡 Impact
Computing became more interactive and affordable.
:::
</div>
</li>
<li class="tui-timeline-item">
<div class="tui-timeline-time">1970s – 1990s</div>
<div class="tui-timeline-divider"></div>
<div class="tui-timeline-body">
4️⃣ Fourth Generation
> Technology: Microprocessors, personal computers (PCs)
The **microprocessor**—a CPU on a single chip—sparked the personal computer revolution. This generation made computing accessible to individuals, not just institutions. Brands like **Apple**, **IBM**, and **Commodore** brought PCs into homes and offices.
Graphical User Interfaces (**GUIs**) emerged, making computers more user-friendly. Networking technologies such as Ethernet and the early Internet protocols also appeared, laying the foundation for today’s connected world.
:::info 🌐 Highlight
Democratization of computing through affordable PCs.
:::
</div>
</li>
<li class="tui-timeline-item">
<div class="tui-timeline-time">1990s – Present</div>
<div class="tui-timeline-divider"></div>
<div class="tui-timeline-body">
5️⃣ Fifth Generation
> Technology: AI, parallel processing, cloud computing
Fifth-generation computers focus on **artificial intelligence**, **machine learning**, and advanced **parallel processing**. They use cutting-edge microprocessors, massive storage, and high-speed networking. Cloud computing allows users to access resources from anywhere, while mobile devices bring computing to the palm of the hand.
Natural language processing, neural networks, and quantum computing research are pushing the boundaries of what computers can do. The emphasis is on **knowledge processing** rather than just data processing.
:::info 🤖 Ongoing goal
Create machines capable of reasoning, learning, and adapting.
:::
</div>
</li>
</ul>- 1940s – 1950s
1️⃣ First Generation
Technology: Vacuum tubes, punched cards, magnetic drums
The first generation of computers relied on vacuum tubes for circuitry and magnetic drums for memory. These machines were enormous, often taking up entire rooms, and consumed vast amounts of electricity. They generated a lot of heat, which made them prone to frequent breakdowns.
Programming was done in machine language or very early assembly languages. Input and output were managed through punched cards and paper tape, while printed output was common. Famous examples include the ENIAC and UNIVAC I.
⚡ Main characteristic
Bulky, slow, and expensive, but they marked the birth of electronic mputing.
- 1950s – 1960s
2️⃣ Second Generation
Technology: Transistors, magnetic core memory
The introduction of transistors revolutionized computer design. They replaced vacuum tubes, making computers smaller, faster, more reliable, and more energy-efficient. Magnetic core memory began to replace drum storage, offering faster access to data.
High-level programming languages such as COBOL and FORTRAN emerged, making programming more accessible. Computers became more widely used in business, research, and government applications.
🛠 Key shift
From machine-level to higher-level programming, enabling broader adoption.
- 1960s – 1970s
3️⃣ Third Generation
Technology: Integrated Circuits (ICs), minicomputers
Integrated circuits (ICs) brought multiple transistors into a single chip, drastically increasing performance while reducing cost and size. This generation saw the birth of minicomputers, which made computing power available to smaller businesses and organizations.
Operating systems became more sophisticated, enabling time-sharing and multi-programming. This period also marked the rise of computer terminals, replacing punch cards for interaction.
💡 Impact
Computing became more interactive and affordable.
- 1970s – 1990s
4️⃣ Fourth Generation
Technology: Microprocessors, personal computers (PCs)
The microprocessor—a CPU on a single chip—sparked the personal computer revolution. This generation made computing accessible to individuals, not just institutions. Brands like Apple, IBM, and Commodore brought PCs into homes and offices.
Graphical User Interfaces (GUIs) emerged, making computers more user-friendly. Networking technologies such as Ethernet and the early Internet protocols also appeared, laying the foundation for today’s connected world.
🌐 Highlight
Democratization of computing through affordable PCs.
- 1990s – Present
5️⃣ Fifth Generation
Technology: AI, parallel processing, cloud computing
Fifth-generation computers focus on artificial intelligence, machine learning, and advanced parallel processing. They use cutting-edge microprocessors, massive storage, and high-speed networking. Cloud computing allows users to access resources from anywhere, while mobile devices bring computing to the palm of the hand.
Natural language processing, neural networks, and quantum computing research are pushing the boundaries of what computers can do. The emphasis is on knowledge processing rather than just data processing.
🤖 Ongoing goal
Create machines capable of reasoning, learning, and adapting.