jamerno/Linus-Torvalds-Homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vers. 1.0

Browse Source
This commit is contained in:
jamerno
2026-03-01 00:08:33 +01:00
commit 0060f234f6
9 changed files with 403 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.prettierrc
+9
View File
@@ -0,0 +1,9 @@
{
"tabWidth": 4,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 80,
"endOfLine": "lf"
}
Linus-Torvalds-Homepage.zip
BIN
View File
Binary file not shown.
README.md
+8
View File
@@ -0,0 +1,8 @@
## Lizenzhinweis
Dieses Projekt dient ausschließlich schulischen Zwecken
und ist nicht für die Veröffentlichung vorgesehen.
Der JavaScript Teil und CSS Teil für die Animation ist bis auf kleine Optimierungen vollständig
mit Copilot generiert oder von https://stackoverflow.com kopiert.
images/LinusT.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

images/tux.avif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

index.html
+90
View File
@@ -0,0 +1,90 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Linus Torvalds — Informationsseite</title>
<meta
name="description"
content="Kurzinformationen über Linus Torvalds, den Erfinder des Linux-Kernels und Git."
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="images/tux.avif" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="site-header">
<h1>Linus Torvalds</h1>
<p class="tagline">
Erfinder des Linux-Kernels &amp; Schöpfer von Git
</p>
<div>
<a class="main-link" href="links.html">Links</a>
</div>
</header>
<main class="container">
<section class="bio">
<img
src="images/LinusT.jpg"
alt="Linus Torvalds"
class="portrait"
/>
<div class="summary">
<h2>Kurzbiographie</h2>
<p>
Linus Benedict Torvalds (* 28. Dezember 1969 in
Helsinki, Finnland) ist ein Softwareentwickler, bekannt
als Initiator und Hauptentwickler des Linux-Kernels. Er
ist außerdem der ursprüngliche Autor von Git, dem
verteilten Versionskontrollsystem.
</p>
<p>
Torvalds veröffentlichte den ersten Linux-Kernel 1991
und betreut seitdem die Entwicklung in einer
Maintainer-Rolle. Seine Arbeit hat die Welt der
Open-Source-Software nachhaltig geprägt.
</p>
</div>
</section>
<section>
<h3>Zeitleiste</h3>
<ol id="timeline" class="timeline">
<li>
<button class="toggle">
1991 — Linux veröffentlicht
</button>
<div class="content">
Torvalds kündigte Linux in einer Usenet-Nachricht an
und veröffentlichte den Kernel unter einer freien
Lizenz.
</div>
</li>
<li>
<button class="toggle">2005 — Git entsteht</button>
<div class="content">
Als Reaktion auf Probleme mit der vorherigen
Versionsverwaltung entwickelte Torvalds Git, ein
schnelles verteiltes System.
</div>
</li>
<li>
<button class="toggle">Aktiv</button>
<div class="content">
Er ist weiterhin als Maintainer aktiv und
kommentiert die Entwicklung des Kernels und der
Open-Source-Community.
</div>
</li>
</ol>
</section>
</main>
<footer class="site-footer">
<small>Quellen: Wikipedia, Kernel.org, Git-Website</small>
</footer>
<script src="script.js" async defer></script>
</body>
</html>
links.html
+30
View File
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Links</title>
<meta name="description" content="Nützliche Links zu Linus Torvalds, Linux und Git.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/tux.avif">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<h1>Linus Torvalds</h1>
<p class="tagline">Erfinder des Linux-Kernels &amp; Schöpfer von Git</p>
<div>
<a class="main-link" href="index.html">Hauptseite</a>
</div>
</header>
<ul class="links">
<li><a href="https://git-scm.com/" target="_blank" rel="noopener">Git — Offizielle Seite</a></li>
<li><a href="https://github.com/torvalds" target="_blank" rel="noopener">GitHub — Linus Torvalds</a></li>
<li><a href="https://de.wikipedia.org/wiki/Linus_Torvalds" target="_blank" rel="noopener">Wikipedia (DE) — Linus Torvalds</a></li>
<li><a href="https://www.kernel.org/" target="_blank" rel="noopener">Kernel.org — Offizielle Linux-Kernel-Website</a></li>
</ul>
<script src="script.js" async defer></script>
</body>
</html>
script.js
+83
View File
@@ -0,0 +1,83 @@
(() => {
// wrap content into .inner for independent inner animation
document.querySelectorAll('.timeline .content').forEach((c) => {
if (!c.querySelector('.inner')) {
const wrap = document.createElement('div');
wrap.className = 'inner';
wrap.innerHTML = c.innerHTML;
c.innerHTML = '';
c.appendChild(wrap);
}
});
// delegate clicks for toggles
document.addEventListener('click', (e) => {
const btn = e.target.closest('.toggle');
if (!btn) return;
const content = btn.nextElementSibling;
if (!content) return;
toggle(content, btn);
});
function toggle(content, button) {
const isOpen = content.classList.contains('open');
// ensure we have an inner element
const inner = content.querySelector('.inner') || content;
// measure current height
const computed = getComputedStyle(content);
const startHeight = parseFloat(computed.height) || 0;
// freeze current height so transition starts from visual state
content.style.height = startHeight + 'px';
if (isOpen) {
// close: remove open class to start inner exit animation, then collapse height
content.classList.remove('open');
button.setAttribute('aria-expanded', 'false');
content.setAttribute('aria-hidden', 'true');
// after paint, animate height to 0
requestAnimationFrame(() => {
// start from the frozen pixel height
content.style.height = startHeight + 'px';
requestAnimationFrame(() => {
content.style.height = '0px';
});
});
const onEnd = (ev) => {
if (ev.propertyName !== 'height') return;
content.style.height = '';
content.removeEventListener('transitionend', onEnd);
};
content.addEventListener('transitionend', onEnd);
} else {
// open: add class first so computed scrollHeight includes padding/margins
button.setAttribute('aria-expanded', 'true');
content.setAttribute('aria-hidden', 'false');
// ensure starting height (likely 0)
content.style.height = startHeight + 'px';
// paint, add class, then measure target height
requestAnimationFrame(() => {
content.classList.add('open');
requestAnimationFrame(() => {
const target = content.scrollHeight;
content.style.height = target + 'px';
const onEnd = (ev) => {
if (ev.propertyName !== 'height') return;
content.style.height = '';
content.removeEventListener('transitionend', onEnd);
};
content.addEventListener('transitionend', onEnd);
});
});
}
}
})();
style.css
+183
View File
@@ -0,0 +1,183 @@
:root {
--bg: #152035;
--fg: #e6eef8;
--expand-duration: 360ms;
--expand-easing: cubic-bezier(.2,.9,.2,1);
--muted: #9aa6b2;
--accent: #60a5fa;
--card: #0e1a2e;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
font-family:
Inter,
system-ui,
-apple-system,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial;
background: #060e20;
color: #e6eef8;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.site-header {
padding: 28px 20px;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.02), transparent);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.site-header h1 {
margin: 0;
font-size: 1.6rem;
}
.tagline {
margin: 4px 0 0;
color: #7c7f83;
}
.site-header h1 {
grid-column: 1;
justify-self: start;
text-align: left;
}
.site-header .tagline {
grid-column: 2;
justify-self: center;
text-align: center;
}
.site-header > div {
grid-column: 3;
justify-self: end;
}
.container {
max-width: 980px;
margin: 28px auto;
padding: 0 20px;
}
.bio {
display: flex;
gap: 20px;
align-items: center;
}
.portrait {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.summary {
font-size: 20px;
}
.timeline {
list-style: none;
padding: 0;
margin: 0;
}
.timeline li {
margin-bottom: 8px;
}
.toggle {
width: 100%;
text-align: left;
padding: 10px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.06);
background: var(--card);
color: #e6eef8;
cursor: pointer;
}
.content {
padding: 0 12px;
margin-top: 0;
border-radius: 8px;
background: rgba(0, 0, 0, 0.02);
color: #7c7f83;
height: 0;
overflow: hidden;
transition: height var(--expand-duration) var(--expand-easing), opacity 220ms ease;
opacity: 0;
will-change: height, opacity;
}
.content.open {
opacity: 1;
height: auto;
}
.content .inner {
transform-origin: top;
transform: translateY(6px);
opacity: 0;
transition: transform 300ms var(--expand-easing), opacity 220ms ease;
will-change: transform, opacity;
padding: 10px 0 6px;
}
.content.open .inner {
transform: translateY(0);
opacity: 1;
}
.site-footer {
max-width: 980px;
margin: 40px auto;
padding: 10px 20px;
color: #ffffff;
font-size: 0.9rem;
}
@media (max-width: 720px) {
.hero {
flex-direction: column;
align-items: flex-start;
}
.portrait {
width: 160px;
height: 160px;
}
}
.main-link {
width: 120px;
display: inline-block;
box-sizing: border-box;
background: transparent;
border: 1px solid #7c7f83;
padding: 6px 0;
border-radius: 6px;
color: #e6eef8;
text-decoration: none;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main-link:hover {
background: rgba(255, 255, 255, 0.24);
border-color: #7c7f83;
}
.links {
font-size: 20px;
list-style: none;
padding: 10px;
margin: 20px;
display: flex;
align-items: center;
flex-direction: column;
gap: 24px;
}