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

Improved style and added base CV

Browse Source
This commit is contained in:
Dejvino 2026-05-18 20:52:34 +02:00
parent 29581ad66e
commit 0ad194041c
2 changed files with 208 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
index.php
View File

@ -19,10 +19,35 @@ $nav_links = [
"~/blog" => "https://wp.dejvino.com/",
"~/projects" => "https://projects.dejvino.com/",
"~/code" => "https://git.dejvino.cz/",
"~/cv" => "#",
];
$hardware_info = "Playing the mandolin, mountain biking, 3D printing and tinkering.";
/**
* CV Data
*/
$cv_experience = [
[
"title" => "Senior Software Engineer / Architect",
"org" => "Self-Employed / Various Projects",
"date" => "2018 - Present",
"desc" => "Designing and implementing scalable backend architectures, focusing on performance, observability, and clean code principles."
],
[
"title" => "Full-stack Developer",
"org" => "Tech Innovations s.r.o.",
"date" => "2014 - 2018",
"desc" => "Built complex web applications using PHP and modern JavaScript frameworks, optimized database performance."
]
];
$cv_education = [
[ "title" => "Master of Computer Science", "org" => "Technical University", "date" => "2014", "desc" => "" ]
];
$cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis", "Linux", "Git"];
/**
* Page design:
* - clean and simple, human-maintaninable
@ -81,8 +106,10 @@ $hardware_info = "Playing the mandolin, mountain biking, 3D printing and tinker
<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 foreach ($nav_links as $label => $url):
$id_attr = ($url === "#") ? 'id="cv-toggle"' : '';
?>
<li><a href="<?= $url ?>" <?= $id_attr ?>><span><?= $label ?></span></a></li>
<?php endforeach; ?>
</ul>
</section>
@ -98,6 +125,46 @@ $hardware_info = "Playing the mandolin, mountain biking, 3D printing and tinker
Contact email: <span id="contact-mail">uncovering...</span>
</p>
</section>
<!-- CV Hidden Sections -->
<section class="card experience hidden">
<h2>Experience</h2>
<?php foreach ($cv_experience as $job): ?>
<div class="cv-item">
<div class="cv-header">
<span class="cv-title"><?= $job['title'] ?></span>
<span class="cv-date"><?= $job['date'] ?></span>
</div>
<div class="cv-org"><?= $job['org'] ?></div>
<div class="cv-desc"><?= $job['desc'] ?></div>
</div>
<?php endforeach; ?>
</section>
<section class="card skills hidden">
<h2>Skills</h2>
<div class="skill-tags">
<?php foreach ($cv_skills as $skill): ?>
<span class="tag"><?= $skill ?></span>
<?php endforeach; ?>
</div>
</section>
<section class="card education hidden">
<h2>Education</h2>
<?php foreach ($cv_education as $edu): ?>
<div class="cv-item">
<div class="cv-header">
<span class="cv-title"><?= $edu['title'] ?></span>
<span class="cv-date"><?= $edu['date'] ?></span>
</div>
<div class="cv-org"><?= $edu['org'] ?></div>
<?php if ($edu['desc']): ?>
<div class="cv-desc"><?= $edu['desc'] ?></div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</section>
</main>
<script>
@ -106,6 +173,16 @@ $hardware_info = "Playing the mandolin, mountain biking, 3D printing and tinker
const el = document.getElementById("contact-mail");
el.innerHTML = `<a href="mailto:${addr}">${addr}</a>`;
})('<?= $email_user ?>', 'dejvino', 'cz');
document.getElementById('cv-toggle')?.addEventListener('click', (e) => {
e.preventDefault();
const hiddenCards = document.querySelectorAll('.card.hidden');
hiddenCards.forEach(card => {
card.classList.remove('hidden');
card.classList.add('reveal');
});
e.currentTarget.parentElement.style.display = 'none';
});
</script>
</body>
</html>

180
style.css
View File

@ -12,12 +12,6 @@
50% { opacity: 1; }
}
@keyframes background-flare {
0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.1; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.2; }
100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.1; }
}
@keyframes scan-line {
0% { transform: translateX(-150%) skewX(-45deg); opacity: 0; }
10% { opacity: 0.5; }
@ -25,34 +19,26 @@
100% { transform: translateX(150%) skewX(-45deg); opacity: 0; }
}
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--mono-font);
background-color: var(--bg-color);
background-image: radial-gradient(rgba(0, 243, 255, 0.15) 1px, transparent 1px);
background-size: 24px 24px; /* Slightly larger grid for more presence */
background-image: radial-gradient(rgba(0, 243, 255, 0.15) 1px, transparent 1px); /* Grid background */
background-size: 24px 24px;
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
align-items: flex-start;
min-height: 100vh;
padding: 20px;
position: relative;
overflow: hidden;
}
body::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 150vw;
height: 150vh;
background: radial-gradient(circle at center, rgba(0, 243, 255, 0.05) 0%, transparent 50%);
animation: background-flare 20s ease-in-out infinite alternate;
z-index: -1;
padding: 40px 20px;
overflow-x: hidden;
}
.bento-grid {
@ -65,7 +51,8 @@ body::before {
.card {
background: var(--card-bg);
padding: 24px;
border: 0.2rem solid rgba(0, 243, 255, 0.3);
border: 0.2rem solid transparent;
overflow: hidden;
filter: drop-shadow(0 0 10px rgba(0, 243, 255, 0.3))
drop-shadow(0 0 30px rgba(0, 243, 255, 0.15));
position: relative;
@ -79,15 +66,107 @@ body::before {
);
}
.card:hover {
filter: drop-shadow(0 0 15px rgba(0, 243, 255, 0.5))
drop-shadow(0 0 50px rgba(0, 243, 255, 0.3));
border-color: rgba(0, 243, 255, 0.6);
transform: scale(1.02);
/* Desktop-only effects: Shuffle and Gradient Borders */
@media (min-width: 769px) {
.card {
background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
linear-gradient(135deg, rgba(0, 243, 255, 0.4), rgba(255, 0, 255, 0.4)) border-box;
}
.card:hover {
filter: drop-shadow(0 0 15px rgba(0, 243, 255, 0.5))
drop-shadow(0 0 50px rgba(0, 243, 255, 0.3));
background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
linear-gradient(135deg, rgba(0, 243, 255, 0.8), rgba(255, 0, 255, 0.8)) border-box;
}
/* Shuffle Logic */
.profile { transform: rotate(0.1deg); }
.about { transform: translate(-4px, 2px) rotate(-0.5deg); }
.interests { transform: translate(6px, -2px) rotate(0.4deg); }
.links { transform: translate(-2px, -4px) rotate(-0.3deg); }
.contact { transform: translate(4px, 6px) rotate(0.5deg); }
/* CV sections also shuffled */
.experience { transform: translate(3px, -2px) rotate(-0.2deg); }
.skills { transform: translate(-3px, 4px) rotate(0.6deg); }
.education { transform: translate(2px, 3px) rotate(-0.4deg); }
}
@media (max-width: 768px) {
.card {
border-color: rgba(0, 243, 255, 0.3);
}
.card:hover {
border-color: rgba(0, 243, 255, 0.6);
}
}
.profile { grid-column: span 4; display: flex; align-items: center; gap: 32px; }
.experience, .education { grid-column: span 3; }
.skills { grid-column: span 1; }
.hidden {
display: none;
}
.reveal {
animation: fade-in-up 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
/* CV Specific Content Styles */
.cv-item {
margin-bottom: 20px;
border-left: 2px solid rgba(0, 243, 255, 0.2);
padding-left: 15px;
}
.cv-item:last-child { margin-bottom: 0; }
.cv-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
}
.cv-title {
font-weight: bold;
color: #fff;
font-size: 1rem;
}
.cv-date {
font-size: 0.7rem;
color: var(--accent-color);
}
.cv-org {
font-size: 0.8rem;
color: var(--link-color);
margin-bottom: 8px;
}
.cv-desc {
font-size: 0.85rem;
line-height: 1.4;
opacity: 0.9;
}
.skill-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
font-size: 0.7rem;
padding: 4px 8px;
background: rgba(0, 243, 255, 0.1);
border: 1px solid rgba(0, 243, 255, 0.3);
}
.profile::before {
content: "";
position: absolute;
@ -100,12 +179,24 @@ body::before {
pointer-events: none;
}
.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); }
.about { grid-column: span 2; }
.interests { grid-column: span 2; }
.links { grid-column: span 2; }
.contact { grid-column: span 2; }
.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;
}
/* Navigation Blink - Restricted to the navigation card only */
.links::after {
content: "";
position: absolute;
@ -116,12 +207,11 @@ body::before {
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);
filter: brightness(0.8) contrast(1.2) sepia(1) hue-rotate(140deg);
border: 1px solid var(--text-color);
}
@ -142,19 +232,6 @@ h2 {
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);
@ -165,7 +242,8 @@ a { color: var(--link-color); text-decoration: none; }
@media (max-width: 768px) {
.bento-grid { grid-template-columns: 1fr; }
.profile, .about, .interests, .links, .contact {
.profile, .about, .interests, .links, .contact,
.experience, .skills, .education {
grid-column: span 1;
transform: none;
}