Tuned theme
This commit is contained in:
Dejvino
parent
6d73ee4ea6
commit
07cc610d05
95
index.php
95
index.php
@ -1,15 +1,54 @@
|
||||
<?php
|
||||
/**
|
||||
* Content config:
|
||||
*/
|
||||
$name = "David Hrdina Němeček";
|
||||
$site_title = "www.dejvino.cz";
|
||||
$site_url = "https://www.dejvino.cz/";
|
||||
$site_desc = "$name - Professional Software Developer";
|
||||
$subtitle = "Full-Stack Architect & Open Source Contributor";
|
||||
$photo_file = "photo.png";
|
||||
$email_user = "ciao";
|
||||
|
||||
$about_text = [
|
||||
"Full-stack developer focused on high-performance systems and minimalist architecture.",
|
||||
"Specializing in turning complex requirements into elegant, maintainable code."
|
||||
];
|
||||
|
||||
$nav_links = [
|
||||
"~/blog" => "https://wp.dejvino.com/",
|
||||
"~/projects" => "https://projects.dejvino.com/",
|
||||
"~/code" => "https://git.dejvino.cz/",
|
||||
"~/personal" => "https://www.dejvino.cz/"
|
||||
];
|
||||
|
||||
$hardware_info = "Mandolin, Mountain Biking, and tuning my MX-5.";
|
||||
|
||||
/**
|
||||
* Page design:
|
||||
* - clean and simple, human-maintaninable
|
||||
* - no dependencies
|
||||
* - single-file website
|
||||
*/
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>www.dejvino.cz</title>
|
||||
<title><?= $site_title ?></title>
|
||||
<link rel="canonical" href="<?= $site_url ?>">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="David Hrdina Němeček - Professional Software Developer">
|
||||
<meta name="author" content="David Hrdina Němeček">
|
||||
<meta name="description" content="<?= $site_desc ?>">
|
||||
<meta name="author" content="<?= $name ?>">
|
||||
|
||||
<!-- Open Graph / Social Media -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="<?= $site_url ?>">
|
||||
<meta property="og:title" content="<?= $name ?>">
|
||||
<meta property="og:description" content="<?= $subtitle ?>">
|
||||
|
||||
<style>
|
||||
<?php
|
||||
/* Cyberpunk Identity: Single-payload delivery.
|
||||
Internal logic is processed server-side to minimize client overhead. */
|
||||
include 'style.css';
|
||||
?>
|
||||
</style>
|
||||
@ -20,54 +59,54 @@
|
||||
<main class="bento-grid">
|
||||
<section class="card profile">
|
||||
<?php
|
||||
$avatarBase64 = base64_encode(file_get_contents('me.jpg'));
|
||||
if (file_exists($photo_file)) {
|
||||
$avatarBase64 = base64_encode(file_get_contents($photo_file));
|
||||
echo '<img src="data:image/png;base64,' . $avatarBase64 . '" alt="' . $name . '" class="avatar" width="120" height="160" />';
|
||||
} else {
|
||||
echo '<div class="avatar-placeholder"></div>';
|
||||
}
|
||||
?>
|
||||
<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>
|
||||
<h1><?= $name ?></h1>
|
||||
<p class="subtitle"><?= $subtitle ?></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<h2>Bio</h2>
|
||||
<?php foreach ($about_text as $para): ?>
|
||||
<p><?= $para ?></p>
|
||||
<?php endforeach; ?>
|
||||
</section>
|
||||
|
||||
<section class="card links">
|
||||
<h2>Navigation</h2>
|
||||
<ul class="link-grid">
|
||||
<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>
|
||||
<?php foreach ($nav_links as $label => $url): ?>
|
||||
<li><a href="<?= $url ?>"><span><?= $label ?></span></a></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="card interests">
|
||||
<h2>Hardware</h2>
|
||||
<p>Mandolin, Mountain Biking, and tuning my MX-5.</p>
|
||||
<h2>Likes</h2>
|
||||
<p><?= $hardware_info ?></p>
|
||||
</section>
|
||||
|
||||
<section class="card contact">
|
||||
<h2>Remote_Access</h2>
|
||||
<p class="mono-addr">
|
||||
Reach out via email: <span id="contact-mail">uncovering...</span>
|
||||
Contact email: <span id="contact-mail">uncovering...</span>
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
(p => {
|
||||
const a = `${p}@dejvino.cz`;
|
||||
document.getElementById("contact-mail").innerHTML = `<a href="mailto:${a}">${a}</a>`;
|
||||
})('david');
|
||||
((u, d, t) => {
|
||||
const addr = u + '@' + d + '.' + t;
|
||||
const el = document.getElementById("contact-mail");
|
||||
el.innerHTML = `<a href="mailto:${addr}">${addr}</a>`;
|
||||
})('<?= $email_user ?>', 'dejvino', 'cz');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
46
style.css
46
style.css
@ -42,14 +42,23 @@ body {
|
||||
border: 1px solid rgba(0, 243, 255, 0.15);
|
||||
box-shadow: var(--shadow);
|
||||
position: relative;
|
||||
backface-visibility: hidden; /* Fixes potential text blur on rotated cards */
|
||||
/* Chamfered tech-cut corners */
|
||||
clip-path: polygon(
|
||||
0 15px, 15px 0,
|
||||
100% 0,
|
||||
100% calc(100% - 15px), calc(100% - 15px) 100%,
|
||||
0 100%
|
||||
);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
/* Organic Displacement */
|
||||
.about { grid-column: span 2; transform: translate(-8px, 4px) rotate(-0.4deg); }
|
||||
.interests { grid-column: span 2; transform: translate(12px, 8px) rotate(0.6deg); }
|
||||
.links { grid-column: span 2; transform: translate(-4px, -6px) rotate(-0.3deg); }
|
||||
.contact { grid-column: span 2; transform: translate(6px, -12px) rotate(0.5deg); }
|
||||
|
||||
/* Navigation Blink - Restricted to the navigation card only */
|
||||
.links::after {
|
||||
@ -64,9 +73,9 @@ body {
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 140px;
|
||||
height: auto;
|
||||
aspect-ratio: 3 / 4;
|
||||
width: 120px;
|
||||
height: 160px; /* Explicit height for aspect ratio 3:4 */
|
||||
object-fit: cover;
|
||||
filter: brightness(1.2) contrast(1.2) sepia(1) hue-rotate(140deg);
|
||||
border: 1px solid var(--text-color);
|
||||
}
|
||||
@ -87,15 +96,6 @@ h2 {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.greeting-mono {
|
||||
font-size: 0.8rem;
|
||||
color: var(--accent-color);
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -108,19 +108,13 @@ h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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, .about, .interests, .links, .contact {
|
||||
grid-column: span 1;
|
||||
transform: none;
|
||||
}
|
||||
.profile { flex-direction: column; text-align: center; }
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user