mirror of
https://github.com/kennethreitz/kennethreitz.org.git
synced 2026-06-05 22:50:17 +00:00
kennethreitz
345f0d6a0b
Update UI from terminal-focused aesthetic to a clean, professional developer experience inspired by modern code editors. Improve typography, color scheme, and component styling while simplifying interactive elements.
179 lines
8.1 KiB
HTML
179 lines
8.1 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Kenneth Reitz - Python for Humans, Open Source Creator, REST API Designer, Neural Explorer">
|
|
<meta name="keywords" content="Python, Open Source, Requests, Pipenv, APIs, Programming, Code, Neural Networks, Consciousness">
|
|
<meta name="author" content="Kenneth Reitz">
|
|
<meta name="theme-color" content="#4e57ae">
|
|
<meta property="og:title" content="{% block og_title %}kennethreitz.org{% endblock %}">
|
|
<meta property="og:description" content="{% block og_description %}Python for Humans, Open Source Creator, REST API Designer, Neural Explorer{% endblock %}">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://kennethreitz.org{{ request.path }}">
|
|
<meta property="og:image" content="https://kennethreitz.org/static/images/og-image.jpg">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@kennethreitz42">
|
|
|
|
<title>{% block title %}kennethreitz.org — {% endblock %}</title>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Fira+Code:wght@400;500&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--heroku-purple: 65, 45, 105;
|
|
--heroku-light-purple: 110, 80, 175;
|
|
--heroku-dark-purple: 40, 28, 65;
|
|
--heroku-fuchsia: 200, 50, 130;
|
|
--heroku-blue: 45, 156, 219;
|
|
--heroku-green: 90, 220, 120;
|
|
--heroku-amber: 255, 180, 60;
|
|
--terminal-black: 13, 13, 13;
|
|
--terminal-white: 240, 240, 240;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "JetBrains Mono", "Fira Code", "IBM Plex Mono", monospace;
|
|
background-color: rgb(var(--terminal-black));
|
|
color: rgb(var(--terminal-white));
|
|
overflow-x: hidden;
|
|
opacity: 0;
|
|
animation: fadeIn 0.5s forwards;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
to { opacity: 1; }
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="/static/custom.css">
|
|
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>" type="image/svg+xml">
|
|
<link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png">
|
|
<link rel="manifest" href="/static/manifest.json">
|
|
|
|
{% block head %}{% endblock %}
|
|
|
|
<script>
|
|
document.documentElement.classList.toggle("mobile-device",
|
|
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="matrix-container" aria-hidden="true"></div>
|
|
|
|
<noscript>
|
|
<div class="noscript-message">
|
|
<p>For the best experience, please enable JavaScript. The site is still functional, but you will miss out on some interactive features.</p>
|
|
</div>
|
|
</noscript>
|
|
|
|
<header id="site-header" class="site-header" role="banner">
|
|
<div class="container header-container">
|
|
<div class="site-title">
|
|
<div class="window-controls-container">
|
|
<div class="window-control close"></div>
|
|
<div class="window-control minimize"></div>
|
|
<div class="window-control maximize"></div>
|
|
</div>
|
|
<a href="/" class="main-logo" aria-label="Kenneth Reitz - Homepage">
|
|
<span class="cmd-prompt">root@</span><span class="logo-text">kennethreitz</span><span class="cmd-prompt">:~#</span>
|
|
</a>
|
|
</div>
|
|
|
|
<nav class="main-nav" id="main-navigation" role="navigation" aria-label="Main navigation">
|
|
<div class="nav-wrapper editor-sidebar">
|
|
<ul class="nav-links" role="menubar">
|
|
<li class="nav-item" role="none">
|
|
<a href="/software" role="menuitem" {% if request.path.startswith('/software') %}class="active" aria-current="page"{% endif %}>
|
|
<span class="cmd-prompt">$</span>
|
|
<span class="nav-text">code</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item" role="none">
|
|
<a href="/essays" role="menuitem" {% if request.path.startswith('/essays') %}class="active" aria-current="page"{% endif %}>
|
|
<span class="cmd-prompt">$</span>
|
|
<span class="nav-text">blog</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item" role="none">
|
|
<a href="/music" role="menuitem" {% if request.path.startswith('/music') %}class="active" aria-current="page"{% endif %}>
|
|
<span class="cmd-prompt">$</span>
|
|
<span class="nav-text">audio</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item" role="none">
|
|
<a href="/artificial-intelligence" role="menuitem" {% if request.path.startswith('/artificial-intelligence') %}class="active" aria-current="page"{% endif %}>
|
|
<span class="cmd-prompt">$</span>
|
|
<span class="nav-text">ai</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main-content">
|
|
<div class="container">
|
|
<div class="content-wrapper">
|
|
<div class="content-narrow">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<button id="back-to-top" class="back-to-top" aria-label="Back to top">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="18 15 12 9 6 15"></polyline>
|
|
</svg>
|
|
</button>
|
|
|
|
<div id="toast-container" class="toast-container" role="status" aria-live="polite"></div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const isMobile = window.matchMedia("(max-width: 768px)").matches;
|
|
const isTinyMobile = window.matchMedia("(max-width: 480px)").matches;
|
|
|
|
document.body.classList.toggle("is-mobile", isMobile);
|
|
document.body.classList.toggle("is-tiny-mobile", isTinyMobile);
|
|
|
|
const backToTopButton = document.getElementById("back-to-top");
|
|
if (backToTopButton) {
|
|
backToTopButton.style.display = "none";
|
|
|
|
window.addEventListener("scroll", function() {
|
|
if (window.scrollY > 300) {
|
|
backToTopButton.style.display = "flex";
|
|
} else {
|
|
backToTopButton.style.display = "none";
|
|
}
|
|
});
|
|
|
|
backToTopButton.addEventListener("click", function() {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth"
|
|
});
|
|
});
|
|
}
|
|
|
|
window.addEventListener("resize", function() {
|
|
const isMobileNow = window.matchMedia("(max-width: 768px)").matches;
|
|
const isTinyMobileNow = window.matchMedia("(max-width: 480px)").matches;
|
|
document.body.classList.toggle("is-mobile", isMobileNow);
|
|
document.body.classList.toggle("is-tiny-mobile", isTinyMobileNow);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|