dejvino/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cyberpunk style

Browse Source
This commit is contained in:
Dejvino 2026-05-17 23:51:54 +02:00
parent 3aed7ffc1f
commit 6d73ee4ea6
2 changed files with 136 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
index.php
View File

@ -8,7 +8,8 @@
<meta name="author" content="David Hrdina Němeček">
<style>
<?php
/** KISS page: single download for users, but split across files for managing it */
/* Cyberpunk Identity: Single-payload delivery.
Internal logic is processed server-side to minimize client overhead. */
include 'style.css';
?>
</style>
@ -16,53 +17,57 @@
</head>
<body>
<main class="container">
<header class="profile-header">
<main class="bento-grid">
<section class="card profile">
<?php
$avatarPath = 'me.jpg';
$avatarBase64 = base64_encode(file_get_contents($avatarPath));
$avatarBase64 = base64_encode(file_get_contents('me.jpg'));
?>
<img src="data:image/jpeg;base64,<?php echo $avatarBase64; ?>" alt="photo of David Hrdina Němeček" class="avatar" />
<h1>David Hrdina Němeček</h1>
<p class="subtitle">Software Developer</p>
</header>
<section class="card">
<h2>About</h2>
<p>
Professional software developer with a passion for open-source,
problem solving, efficiency.
</p>
<p>
Outside of code, I love to play the mandolin or go mountain biking.
</p>
<img src="data:image/jpeg;base64,<?= $avatarBase64 ?>" alt="David Hrdina Němeček" class="avatar" />
<div class="header-text">
<p class="greeting-mono"><span>[</span><?php $hour = date('H');
if ($hour < 12) echo "SYSTEM_INIT_DAWN";
elseif ($hour < 18) echo "SYSTEM_INIT_DAY";
else echo "SYSTEM_INIT_DUSK";
?><span>]</span></p>
<h1>David Hrdina Němeček</h1>
<p class="subtitle">Full-Stack Architect & Open Source Contributor</p>
</div>
</section>
<section class="card">
<h2>Links</h2>
<section class="card about">
<h2>System_Info</h2>
<p>Full-stack developer focused on high-performance systems and minimalist architecture.</p>
<p>Specializing in turning complex requirements into elegant, maintainable code.</p>
</section>
<section class="card links">
<h2>Navigation</h2>
<ul class="link-grid">
<li><strong>Blog:</strong> <a href="https://wp.dejvino.com/">wp.dejvino.com</a></li>
<li><strong>Projects:</strong> <a href="https://projects.dejvino.com/">projects.dejvino.com</a></li>
<li><strong>Code:</strong> <a href="https://git.dejvino.cz/">git.dejvino.cz</a></li>
<li><strong>Personal:</strong> <a href="https://www.dejvino.cz/">www.dejvino.cz</a></li>
<li><a href="https://wp.dejvino.com/"><span>~/blog</span></a></li>
<li><a href="https://projects.dejvino.com/"><span>~/projects</span></a></li>
<li><a href="https://git.dejvino.cz/"><span>~/code</span></a></li>
<li><a href="https://www.dejvino.cz/"><span>~/personal</span></a></li>
</ul>
</section>
<section class="card">
<h2>Contact</h2>
<p>
<section class="card interests">
<h2>Hardware</h2>
<p>Mandolin, Mountain Biking, and tuning my MX-5.</p>
</section>
<section class="card contact">
<h2>Remote_Access</h2>
<p class="mono-addr">
Reach out via email: <span id="contact-mail">uncovering...</span>
</p>
</section>
</main>
<script>
(function uncoverContact($prefix) {
var elem = document.getElementById("contact-mail");
var addr = $prefix + "@" + "dej" + "vino." + "cz";
elem.innerHTML = '<a href="mai' + 'lto' + ':' + addr + '">'
+ addr + '</a>';
})('ciao');
(p => {
const a = `${p}@dejvino.cz`;
document.getElementById("contact-mail").innerHTML = `<a href="mailto:${a}">${a}</a>`;
})('david');
</script>
</body>
</html>

160
style.css
View File

@ -1,92 +1,126 @@
:root {
--bg-color: #f4f4f9;
--text-color: #333;
--card-bg: #ffffff;
--accent-color: #2c3e50;
--link-color: #3498db;
--border-radius: 8px;
--shadow: 0 2px 5px rgba(0,0,0,0.05);
--avatar-shadow: 0 4px 10px rgba(0,0,0,0.1);
--bg-color: #050505;
--text-color: #00f3ff;
--card-bg: #0a0a0f;
--accent-color: #ff00ff;
--link-color: #ffd700;
--shadow: 0 0 20px rgba(0, 243, 255, 0.1);
--mono-font: 'SFMono-Regular', Consolas, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #0d0d0e;
--text-color: #d1d1d1;
--card-bg: #1a1a1b;
--accent-color: #ecf0f1;
--link-color: #5dade2;
--shadow: 0 4px 15px rgba(0,0,0,0.4);
--avatar-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
@keyframes pulse-trace {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
* {
box-sizing: border-box;
}
* { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-family: var(--mono-font);
background-color: var(--bg-color);
background-image: radial-gradient(rgba(19, 69, 72, 0.21) 1px, transparent 1px);
background-size: 18px 18px;
color: var(--text-color);
line-height: 1.6;
display: flex;
justify-content: center;
padding: 2rem 1rem;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 700px;
width: 100%;
.bento-grid {
display: grid;
max-width: 900px;
gap: 24px;
grid-template-columns: repeat(4, 1fr);
}
.profile-header {
text-align: center;
margin-bottom: 3rem;
}
.avatar {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--card-bg);
box-shadow: var(--avatar-shadow);
margin-bottom: 1rem;
}
h1 { margin: 0; font-size: 2rem; color: var(--accent-color); }
.subtitle { margin: 0; font-size: 1.1rem; opacity: 0.7; }
.card {
background: var(--card-bg);
padding: 1.5rem;
border-radius: var(--border-radius);
padding: 24px;
border: 1px solid rgba(0, 243, 255, 0.15);
box-shadow: var(--shadow);
margin-bottom: 1.5rem;
position: relative;
}
h2 {
margin-top: 0;
font-size: 1.25rem;
border-bottom: 2px solid var(--bg-color);
padding-bottom: 0.5rem;
.profile { grid-column: span 4; display: flex; align-items: center; gap: 32px; }
.about, .interests, .links, .contact { grid-column: span 2; }
.card:hover {
border-color: var(--accent-color);
}
/* Navigation Blink - Restricted to the navigation card only */
.links::after {
content: "";
position: absolute;
top: 10px; right: 10px;
width: 6px; height: 6px;
background: var(--link-color);
box-shadow: 0 0 10px var(--link-color);
border-radius: 50%;
animation: pulse-trace 1s infinite;
}
.avatar {
width: 140px;
height: auto;
aspect-ratio: 3 / 4;
filter: brightness(1.2) contrast(1.2) sepia(1) hue-rotate(140deg);
border: 1px solid var(--text-color);
}
h1 {
margin: 0;
font-size: clamp(1.5rem, 5vw, 2.2rem);
color: #fff;
text-shadow: 2px 2px 0 var(--accent-color), -2px -2px 0 var(--text-color);
}
h2 {
font-size: 0.75rem;
text-transform: uppercase;
color: var(--accent-color);
margin-bottom: 16px;
margin-top: 0;
letter-spacing: 2px;
}
.link-grid {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.5rem;
.greeting-mono {
font-size: 0.8rem;
color: var(--accent-color);
margin: 0;
font-weight: bold;
}
a {
.greeting-mono span { opacity: 0.5; }
.link-grid { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.link-grid a {
font-size: 0.75rem;
display: block;
padding: 8px;
border-left: 3px solid var(--text-color);
color: var(--link-color);
text-decoration: none;
background: rgba(255, 255, 255, 0.02);
text-align: center;
}
a:hover { text-decoration: underline; }
.link-grid a:hover {
background: var(--text-color);
color: #000;
box-shadow: 0 0 10px var(--text-color);
}
.mono-addr { font-size: 0.85rem; color: #fff; border-bottom: 1px dashed var(--text-color); }
a { color: var(--link-color); text-decoration: none; }
a:hover { text-shadow: 0 0 8px var(--link-color); }
@media (max-width: 768px) {
.bento-grid { grid-template-columns: 1fr; }
.profile, .about, .interests, .links, .contact { grid-column: span 1; }
.profile { flex-direction: column; text-align: center; }
}