Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technowire | Where Code Meets History</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Cursor follower -->
<div class="cursor"></div>
<div class="cursor-follower"></div>
<!-- Navigation -->
<nav class="nav">
<div class="nav-container">
<a href="#" class="logo">
<span class="logo-bracket"><</span>
<span class="logo-text">Technowire</span>
<span class="logo-bracket">/></span>
</a>
<div class="nav-links">
<a href="#about" class="nav-link" data-text="About">About</a>
<a href="#timeline" class="nav-link" data-text="Timeline">Timeline</a>
<a href="#silicon" class="nav-link" data-text="Silicon Valley">Silicon Valley</a>
<a href="#legends" class="nav-link" data-text="Legends">Legends</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="hero-bg">
<div class="gradient-orb orb-1"></div>
<div class="gradient-orb orb-2"></div>
<div class="gradient-orb orb-3"></div>
<div class="gradient-orb orb-4"></div>
</div>
<div class="hero-grid"></div>
<div class="hero-content">
<div class="hero-badge">
<span class="badge-dot"></span>
<span>Exploring Tech History Since 2023</span>
</div>
<h1 class="hero-title">
<span class="title-line">
<span class="word" style="--delay: 0">The</span>
<span class="word" style="--delay: 1">Evolution</span>
<span class="word" style="--delay: 2">of</span>
</span>
<span class="title-line gradient-text">
<span class="word" style="--delay: 3">Technology</span>
</span>
</h1>
<p class="hero-subtitle">
Journey through the digital revolution — from the first lines of code
to the tech giants that shape our world today.
</p>
<div class="hero-cta">
<a href="#timeline" class="btn btn-primary">
<span>Explore Timeline</span>
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
<a href="#about" class="btn btn-secondary">
<span>Learn More</span>
</a>
</div>
<div class="hero-stats">
<div class="stat">
<span class="stat-number" data-target="70">0</span>
<span class="stat-label">Years of Innovation</span>
</div>
<div class="stat">
<span class="stat-number" data-target="50">0</span>
<span class="stat-plus">+</span>
<span class="stat-label">Languages Created</span>
</div>
<div class="stat">
<span class="stat-number" data-target="100">0</span>
<span class="stat-label">Tech Pioneers</span>
</div>
</div>
</div>
<div class="scroll-indicator">
<div class="mouse">
<div class="wheel"></div>
</div>
<span>Scroll to explore</span>
</div>
</section>
<!-- About Section -->
<section class="about" id="about">
<div class="section-container">
<div class="about-grid">
<div class="about-content">
<span class="section-tag">// ABOUT</span>
<h2 class="section-title">
Where <span class="highlight">Code</span> Meets <span class="highlight">History</span>
</h2>
<p class="about-text">
Technowire is your portal to the digital past. We document the remarkable
journey of computing — from room-sized machines to the smartphones in our
pockets. Every algorithm, every breakthrough, every visionary who dared
to dream differently.
</p>
<div class="about-features">
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="16,18 22,12 16,6"></polyline>
<polyline points="8,6 2,12 8,18"></polyline>
</svg>
</div>
<div class="feature-content">
<h3>Programming Languages</h3>
<p>From Fortran to Rust — the complete evolution</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<polygon points="10,8 16,12 10,16"></polygon>
</svg>
</div>
<div class="feature-content">
<h3>Silicon Valley Stories</h3>
<p>The garage startups that changed everything</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
<div class="feature-content">
<h3>Tech Legends</h3>
<p>The visionaries who built our digital world</p>
</div>
</div>
</div>
</div>
<div class="about-visual">
<div class="code-window">
<div class="window-header">
<div class="window-dots">
<span class="dot red"></span>
<span class="dot yellow"></span>
<span class="dot green"></span>
</div>
<span class="window-title">history.js</span>
</div>
<div class="code-content">
<pre><code><span class="code-keyword">const</span> <span class="code-variable">techHistory</span> = {
<span class="code-property">mission</span>: <span class="code-string">"Preserve the digital past"</span>,
<span class="code-property">founded</span>: <span class="code-number">2023</span>,
<span class="code-property">topics</span>: [
<span class="code-string">"Programming Languages"</span>,
<span class="code-string">"Silicon Valley"</span>,
<span class="code-string">"Tech Pioneers"</span>
],
<span class="code-function">explore</span>() {
<span class="code-keyword">return</span> <span class="code-string">"Journey begins..."</span>;
}
};
techHistory.<span class="code-function">explore</span>();
<span class="code-comment">// → "Journey begins..."</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section class="timeline-section" id="timeline">
<div class="section-container">
<div class="section-header">
<span class="section-tag">// TIMELINE</span>
<h2 class="section-title">
The <span class="gradient-text">Language</span> Revolution
</h2>
<p class="section-subtitle">
Trace the evolution of programming languages that shaped our digital infrastructure
</p>
</div>
<div class="timeline-wrapper">
<div class="timeline-line"></div>
<div class="timeline-item" data-year="1957">
<div class="timeline-marker">
<div class="marker-dot"></div>
</div>
<div class="timeline-card">
<div class="card-year">1957</div>
<div class="card-icon fortran">
<span>F</span>
</div>
<h3>Fortran</h3>
<p>The first high-level programming language, designed for scientific calculations. Still used in supercomputing today.</p>
<div class="card-tags">
<span class="tag">Scientific</span>
<span class="tag">IBM</span>
</div>
</div>
</div>
<div class="timeline-item" data-year="1959">
<div class="timeline-marker">
<div class="marker-dot"></div>
</div>
<div class="timeline-card">
<div class="card-year">1959</div>
<div class="card-icon cobol">
<span>CB</span>
</div>
<h3>COBOL</h3>
<p>Business-oriented language that still runs 95% of ATM transactions and 80% of in-person transactions worldwide.</p>
<div class="card-tags">
<span class="tag">Business</span>
<span class="tag">Enterprise</span>
</div>
</div>
</div>
<div class="timeline-item" data-year="1964">
<div class="timeline-marker">
<div class="marker-dot"></div>
</div>
<div class="timeline-card">
<div class="card-year">1964</div>
<div class="card-icon basic">
<span>BA</span>
</div>
<h3>BASIC</h3>
<p>Designed to democratize programming. Made computers accessible to students and launched the personal computer revolution.</p>
<div class="card-tags">
<span class="tag">Education</span>
<span class="tag">Beginner</span>
</div>
</div>
</div>
<div class="timeline-item" data-year="1972">
<div class="timeline-marker">
<div class="marker-dot"></div>
</div>
<div class="timeline-card">
<div class="card-year">1972</div>
<div class="card-icon c-lang">
<span>C</span>
</div>
<h3>C</h3>
<p>The mother of modern programming. Created at Bell Labs, it became the foundation for Unix, Linux, and countless systems.</p>
<div class="card-tags">
<span class="tag">Systems</span>
<span class="tag">Bell Labs</span>
</div>
</div>
</div>
<div class="timeline-item" data-year="1983">
<div class="timeline-marker">
<div class="marker-dot"></div>
</div>
<div class="timeline-card">
<div class="card-year">1983</div>
<div class="card-icon cpp">
<span>C++</span>
</div>
<h3>C++</h3>
<p>Extended C with object-oriented features. Powers game engines, browsers, and performance-critical applications.</p>
<div class="card-tags">
<span class="tag">OOP</span>
<span class="tag">Performance</span>
</div>
</div>
</div>
<div class="timeline-item" data-year="1991">
<div class="timeline-marker">
<div class="marker-dot"></div>
</div>
<div class="timeline-card">
<div class="card-year">1991</div>
<div class="card-icon python">
<span>Py</span>
</div>
<h3>Python</h3>
<p>Guido van Rossum's gift to developers. Known for readable syntax, it now dominates AI, data science, and automation.</p>
<div class="card-tags">
<span class="tag">AI/ML</span>
<span class="tag">Readable</span>
</div>
</div>
</div>
<div class="timeline-item" data-year="1995">
<div class="timeline-marker">
<div class="marker-dot"></div>
</div>
<div class="timeline-card">
<div class="card-year">1995</div>
<div class="card-icon java">
<span>Jv</span>
</div>
<h3>Java</h3>
<p>"Write once, run anywhere." Powers Android, enterprise systems, and remains one of the most popular languages.</p>
<div class="card-tags">
<span class="tag">Enterprise</span>
<span class="tag">Android</span>
</div>
</div>
</div>
<div class="timeline-item" data-year="1995">
<div class="timeline-marker">
<div class="marker-dot"></div>
</div>
<div class="timeline-card">
<div class="card-year">1995</div>
<div class="card-icon javascript">
<span>JS</span>
</div>
<h3>JavaScript</h3>
<p>Created in 10 days, now powers the entire web. From browser scripting to servers with Node.js — it's everywhere.</p>
<div class="card-tags">
<span class="tag">Web</span>
<span class="tag">Full-Stack</span>
</div>
</div>
</div>
<div class="timeline-item" data-year="2012">
<div class="timeline-marker">
<div class="marker-dot"></div>
</div>
<div class="timeline-card">
<div class="card-year">2012</div>
<div class="card-icon typescript">
<span>TS</span>
</div>
<h3>TypeScript</h3>
<p>Microsoft's superset of JavaScript. Brings static typing to the web, making large-scale applications maintainable.</p>
<div class="card-tags">
<span class="tag">Typed</span>
<span class="tag">Microsoft</span>
</div>
</div>
</div>
<div class="timeline-item" data-year="2015">
<div class="timeline-marker">
<div class="marker-dot"></div>
</div>
<div class="timeline-card">
<div class="card-year">2015</div>
<div class="card-icon rust">
<span>Rs</span>
</div>
<h3>Rust</h3>
<p>Memory safety without garbage collection. Loved by developers for 8 consecutive years on Stack Overflow surveys.</p>
<div class="card-tags">
<span class="tag">Safe</span>
<span class="tag">Systems</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Silicon Valley Section -->
<section class="silicon-section" id="silicon">
<div class="section-container">
<div class="section-header">
<span class="section-tag">// SILICON VALLEY</span>
<h2 class="section-title">
From <span class="gradient-text">Orchards</span> to <span class="gradient-text">Algorithms</span>
</h2>
<p class="section-subtitle">
How a California valley became the epicenter of global innovation
</p>
</div>
<div class="silicon-grid">
<div class="silicon-card" data-aos="fade-up">
<div class="card-header">
<span class="decade">1938</span>
<div class="card-line"></div>
</div>
<h3>The Valley of Heart's Delight</h3>
<p>Before silicon, there were apricots. The Santa Clara Valley was America's fruit basket — miles of orchards under California sun.</p>
</div>
<div class="silicon-card" data-aos="fade-up">
<div class="card-header">
<span class="decade">1939</span>
<div class="card-line"></div>
</div>
<h3>The HP Garage</h3>
<p>Bill Hewlett and Dave Packard start HP in a Palo Alto garage with $538. Disney becomes their first customer. The garage is now "Birthplace of Silicon Valley."</p>
</div>
<div class="silicon-card" data-aos="fade-up">
<div class="card-header">
<span class="decade">1956</span>
<div class="card-line"></div>
</div>
<h3>Shockley Semiconductor</h3>
<p>Nobel laureate William Shockley opens shop. His brilliant but difficult management style would accidentally birth an entire industry.</p>
</div>
<div class="silicon-card" data-aos="fade-up">
<div class="card-header">
<span class="decade">1957</span>
<div class="card-line"></div>
</div>
<h3>The Traitorous Eight</h3>
<p>Eight engineers leave Shockley to found Fairchild Semiconductor. This defection creates the blueprint for Silicon Valley's culture of spin-offs.</p>
</div>
<div class="silicon-card" data-aos="fade-up">
<div class="card-header">
<span class="decade">1968</span>
<div class="card-line"></div>
</div>
<h3>Intel is Born</h3>
<p>Gordon Moore and Robert Noyce leave Fairchild to start Intel. Moore's Law is born — processing power doubles every two years.</p>
</div>
<div class="silicon-card" data-aos="fade-up">
<div class="card-header">
<span class="decade">1976</span>
<div class="card-line"></div>
</div>
<h3>Apple Computer</h3>
<p>Two Steves in another garage. Jobs and Wozniak build the Apple I, igniting the personal computer revolution.</p>
</div>
<div class="silicon-card" data-aos="fade-up">
<div class="card-header">
<span class="decade">1998</span>
<div class="card-line"></div>
</div>
<h3>Google</h3>
<p>Larry Page and Sergey Brin organize the world's information from a Stanford dorm room. The internet gets searchable.</p>
</div>
<div class="silicon-card" data-aos="fade-up">
<div class="card-header">
<span class="decade">2004</span>
<div class="card-line"></div>
</div>
<h3>Facebook</h3>
<p>Mark Zuckerberg connects Harvard, then the world. Social networking goes from experiment to essential infrastructure.</p>
</div>
</div>
</div>
</section>
<!-- Legends Section -->
<section class="legends-section" id="legends">
<div class="section-container">
<div class="section-header">
<span class="section-tag">// HALL OF FAME</span>
<h2 class="section-title">
The <span class="gradient-text">Architects</span> of Tomorrow
</h2>
<p class="section-subtitle">
Visionaries who turned imagination into innovation
</p>
</div>
<div class="legends-carousel">
<div class="legend-card active">
<div class="legend-image">
<div class="image-placeholder steve">
<span>SJ</span>
</div>
</div>
<div class="legend-info">
<h3>Steve Jobs</h3>
<span class="legend-title">Co-founder of Apple</span>
<p class="legend-quote">"The people who are crazy enough to think they can change the world are the ones who do."</p>
<div class="legend-achievements">
<div class="achievement">
<span class="achievement-icon">🍎</span>
<span>Apple Inc.</span>
</div>
<div class="achievement">
<span class="achievement-icon">📱</span>
<span>iPhone</span>
</div>
<div class="achievement">
<span class="achievement-icon">🎬</span>
<span>Pixar</span>
</div>
</div>
</div>
</div>
<div class="legend-card">
<div class="legend-image">
<div class="image-placeholder bill">
<span>BG</span>
</div>
</div>
<div class="legend-info">
<h3>Bill Gates</h3>
<span class="legend-title">Co-founder of Microsoft</span>
<p class="legend-quote">"Your most unhappy customers are your greatest source of learning."</p>
<div class="legend-achievements">
<div class="achievement">
<span class="achievement-icon">🪟</span>
<span>Windows</span>
</div>
<div class="achievement">
<span class="achievement-icon">💼</span>
<span>Microsoft</span>
</div>
<div class="achievement">
<span class="achievement-icon">🌍</span>
<span>Gates Foundation</span>
</div>
</div>
</div>
</div>
<div class="legend-card">
<div class="legend-image">
<div class="image-placeholder linus">
<span>LT</span>
</div>
</div>
<div class="legend-info">
<h3>Linus Torvalds</h3>
<span class="legend-title">Creator of Linux & Git</span>
<p class="legend-quote">"Talk is cheap. Show me the code."</p>
<div class="legend-achievements">
<div class="achievement">
<span class="achievement-icon">🐧</span>
<span>Linux</span>
</div>
<div class="achievement">
<span class="achievement-icon">📂</span>
<span>Git</span>
</div>
<div class="achievement">
<span class="achievement-icon">🌐</span>
<span>Open Source</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-nav">
<button class="carousel-btn prev" aria-label="Previous">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M19 12H5M12 19l-7-7 7-7"/>
</svg>
</button>
<div class="carousel-dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<button class="carousel-btn next" aria-label="Next">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
</div>
</div>
</section>
<!-- Terminal Section -->
<section class="terminal-section">
<div class="section-container">
<div class="terminal-window">
<div class="terminal-header">
<div class="terminal-dots">
<span class="dot red"></span>
<span class="dot yellow"></span>
<span class="dot green"></span>
</div>
<span class="terminal-title">technowire@history ~ %</span>
</div>
<div class="terminal-body">
<div class="terminal-line">
<span class="prompt">$</span>
<span class="command typing" id="typing-text"></span>
<span class="cursor">▋</span>
</div>
<div class="terminal-output" id="terminal-output">
<!-- Output will be added by JS -->
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-container">
<div class="footer-content">
<div class="footer-brand">
<a href="#" class="logo">
<span class="logo-bracket"><</span>
<span class="logo-text">Technowire</span>
<span class="logo-bracket">/></span>
</a>
<p>Documenting the digital revolution, one commit at a time.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<h4>Explore</h4>
<a href="#timeline">Timeline</a>
<a href="#silicon">Silicon Valley</a>
<a href="#legends">Legends</a>
</div>
<div class="footer-col">
<h4>Connect</h4>
<a href="#">GitHub</a>
<a href="#">Twitter</a>
<a href="#">Discord</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 Technowire. Crafted with <span class="heart">♥</span> and lots of <span class="coffee">☕</span></p>
<p class="footer-code">git commit -m "Made with passion"</p>
</div>
</div>
</footer>
<script src="script.JS"></script>
</body>
</html>