Linus Torvalds — Informationsseite

commit 0060f234f66295a284ed67a6af35bc5e11f1692b Author: jamerno Date: Sun Mar 1 00:08:33 2026 +0100 Vers. 1.0 diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..1165cca --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": true, + "trailingComma": "es5", + "printWidth": 80, + "endOfLine": "lf" +} diff --git a/Linus-Torvalds-Homepage.zip b/Linus-Torvalds-Homepage.zip new file mode 100644 index 0000000..6d836f3 Binary files /dev/null and b/Linus-Torvalds-Homepage.zip differ diff --git a/README.md b/README.md new file mode 100644 index 0000000..0c66da7 --- /dev/null +++ b/README.md @@ -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. diff --git a/images/LinusT.jpg b/images/LinusT.jpg new file mode 100644 index 0000000..8b51165 Binary files /dev/null and b/images/LinusT.jpg differ diff --git a/images/tux.avif b/images/tux.avif new file mode 100644 index 0000000..a42d3ec Binary files /dev/null and b/images/tux.avif differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..4653df9 --- /dev/null +++ b/index.html @@ -0,0 +1,90 @@ + + + + + + Linus Torvalds — Informationsseite + + + + + + + + +

Kurzbiographie

+ 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. +

+ 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. +

+ +

Zeitleiste

+ +
+ Torvalds kündigte Linux in einer Usenet-Nachricht an + und veröffentlichte den Kernel unter einer freien + Lizenz. +
+
+ +
+ Als Reaktion auf Probleme mit der vorherigen + Versionsverwaltung entwickelte Torvalds Git, ein + schnelles verteiltes System. +
+
+ +
+ Er ist weiterhin als Maintainer aktiv und + kommentiert die Entwicklung des Kernels und der + Open-Source-Community. +
+

+ + + + + + diff --git a/links.html b/links.html new file mode 100644 index 0000000..70ada28 --- /dev/null +++ b/links.html @@ -0,0 +1,30 @@ + + + + + + Links + + + + + + + + +

+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..55f3c1b --- /dev/null +++ b/script.js @@ -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); + }); + }); + } + } + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..4d676f2 --- /dev/null +++ b/style.css @@ -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; +}