Compare commits
5 Commits
0b6f467c13
...
834e3194ca
| Author | SHA1 | Date | |
|---|---|---|---|
|
834e3194ca | ||
|
|
07cc610d05 | ||
|
|
6d73ee4ea6 | ||
|
|
3aed7ffc1f | ||
|
|
b932bb6a9b |
32
.htaccess
Normal file
32
.htaccess
Normal file
@ -0,0 +1,32 @@
|
||||
# htaccess rules for subdomains and aliases
|
||||
# to create new subdomain, create a folder www/subdom/(subdomain name)
|
||||
# to create web for alias, create a folder www/domains/(whole domain name)
|
||||
|
||||
# htaccess pravidla pro subdomeny a samostatne weby aliasu
|
||||
# pro vytvoreni subdomeny vytvorte adresar www/subdom/(nazev subdomeny)
|
||||
# pro vytvoreni webu pro alias vytvorte adresar www/domains/(cely domenovy nazev)
|
||||
# dalsi info a priklady: http://kb.wedos.com/r/32/webhosting-htaccess.html
|
||||
|
||||
RewriteEngine On
|
||||
|
||||
# cele domeny (aliasy)
|
||||
RewriteCond %{REQUEST_URI} !^domains/
|
||||
RewriteCond %{REQUEST_URI} !^/domains/
|
||||
RewriteCond %{HTTP_HOST} ^(www\.)?(.*)$
|
||||
RewriteCond %{DOCUMENT_ROOT}/domains/%2 -d
|
||||
RewriteRule (.*) domains/%2/$1 [DPI]
|
||||
|
||||
# subdomeny (s nebo bez www na zacatku)
|
||||
RewriteCond %{REQUEST_URI} !^subdom/
|
||||
RewriteCond %{REQUEST_URI} !^/subdom/
|
||||
RewriteCond %{HTTP_HOST} ^(www\.)?(.*)\.([^\.]*)\.([^\.]*)$
|
||||
RewriteCond %{DOCUMENT_ROOT}/subdom/%2 -d
|
||||
RewriteRule (.*) subdom/%2/$1 [DPI]
|
||||
|
||||
# aliasy - spravne presmerovani pri chybejicim /
|
||||
RewriteCond %{REQUEST_FILENAME} -d
|
||||
RewriteRule ^domains/[^/]+/(.+[^/])$ /$1/ [R]
|
||||
|
||||
# subdomeny - spravne presmerovani pri chybejicim /
|
||||
RewriteCond %{REQUEST_FILENAME} -d
|
||||
RewriteRule ^subdom/[^/]+/(.+[^/])$ /$1/ [R]
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
111
index.php
Normal file
111
index.php
Normal file
@ -0,0 +1,111 @@
|
||||
<?php
|
||||
/**
|
||||
* Content config:
|
||||
*/
|
||||
$name = "David Hrdina Němeček";
|
||||
$site_title = "www.dejvino.cz";
|
||||
$site_url = "https://www.dejvino.cz/";
|
||||
$site_desc = "$name - Software Developer";
|
||||
$subtitle = "Software Developer, Architect, Problem Solver";
|
||||
$photo_file = "photo.png";
|
||||
$email_user = "ciao";
|
||||
|
||||
$about_text = [
|
||||
"Full-stack developer focused on pragmatic architecture, observability and performance.",
|
||||
//""
|
||||
];
|
||||
|
||||
$nav_links = [
|
||||
"~/blog" => "https://wp.dejvino.com/",
|
||||
"~/projects" => "https://projects.dejvino.com/",
|
||||
"~/code" => "https://git.dejvino.cz/",
|
||||
];
|
||||
|
||||
$hardware_info = "Playing the mandolin, mountain biking, 3D printing and tinkering.";
|
||||
|
||||
/**
|
||||
* Page design:
|
||||
* - clean and simple, human-maintaninable
|
||||
* - no dependencies
|
||||
* - single-file website
|
||||
*/
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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="<?= $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
|
||||
include 'style.css';
|
||||
?>
|
||||
</style>
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<main class="bento-grid">
|
||||
<section class="card profile">
|
||||
<?php
|
||||
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>';
|
||||
}
|
||||
?>
|
||||
<div class="header-text">
|
||||
<h1><?= $name ?></h1>
|
||||
<p class="subtitle"><?= $subtitle ?></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card about">
|
||||
<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">
|
||||
<?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>Likes</h2>
|
||||
<p><?= $hardware_info ?></p>
|
||||
</section>
|
||||
|
||||
<section class="card contact">
|
||||
<h2>Remote_Access</h2>
|
||||
<p class="mono-addr">
|
||||
Contact email: <span id="contact-mail">uncovering...</span>
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
((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>
|
||||
126
style.css
Normal file
126
style.css
Normal file
@ -0,0 +1,126 @@
|
||||
:root {
|
||||
--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;
|
||||
}
|
||||
|
||||
@keyframes pulse-trace {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
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);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
max-width: 900px;
|
||||
gap: 24px;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
padding: 24px;
|
||||
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; }
|
||||
|
||||
/* 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 {
|
||||
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: 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);
|
||||
}
|
||||
|
||||
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: 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);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
text-align: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.link-grid a:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-left-color: var(--accent-color);
|
||||
}
|
||||
|
||||
a { color: var(--link-color); text-decoration: none; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.bento-grid { grid-template-columns: 1fr; }
|
||||
.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