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

Socials

Browse Source
This commit is contained in:
Dejvino 2026-05-19 20:26:17 +02:00
parent 26fa67a233
commit ff65b74864
2 changed files with 21 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
index.php
View File

@ -23,9 +23,7 @@ $nav_links = [
$hardware_info = "Playing the mandolin, mountain biking, 3D printing and tinkering."; $hardware_info = "Playing the mandolin, mountain biking, 3D printing and tinkering.";
$extra_contact_links = [ $extra_contact_links = [
"LinkedIn" => "https://www.linkedin.com/in/hrdinadavid/", "LinkedIn" => "https://cz.linkedin.com/in/dejvino",
"GitHub" => "https://github.com/dejvino",
"StackOverflow" => "https://stackoverflow.com/users/3551523/dejvino",
]; ];
/** /**
@ -121,18 +119,19 @@ $cv_skills = [
<address class="mono-addr"> <address class="mono-addr">
Email: <span id="contact-mail">uncovering...</span> Email: <span id="contact-mail">uncovering...</span>
</address> </address>
<ul class="link-grid"> <address class="mono-addr">
<?php foreach ($extra_contact_links as $label => $url): ?> Socials:
<li><a href="<?= $url ?>" target="_blank"><span><?= $label ?></span></a></li> <?php foreach ($extra_contact_links as $label => $url): ?>
<?php endforeach; ?> <br><a href="<?= $url ?>" target="_blank"><?= $label ?></a>
</ul> <?php endforeach; ?>
</address>
</section> </section>
<section class="card links"> <section class="card links">
<h2>Navigation</h2> <h2>Navigation</h2>
<ul class="link-grid"> <ul class="link-grid">
<?php foreach ($nav_links as $label => $url): ?> <?php foreach ($nav_links as $label => $url): ?>
<li><a href="<?= $url ?>" target="_blank"><span><?= $label ?></span></a></li> <li><a href="<?= trim($url) ?>" target="_blank"><span><?= $label ?></span></a></li>
<?php endforeach; ?> <?php endforeach; ?>
</ul> </ul>
</section> </section>
@ -208,32 +207,14 @@ $cv_skills = [
<script> <script>
((u, d, t) => { ((u, d, t) => {
const addr = u + '@' + d + '.' + t; const addr = (atob(u) + '@' + d + '.' + t).trim();
const el = document.getElementById("contact-mail"); const el = document.getElementById("contact-mail");
el.innerHTML = `<a href="mailto:${addr}">${addr}</a>`; if (el) el.innerHTML = `<a href="mailto:${addr}">${addr}</a>`;
})('<?= $email_user ?>', 'dejvino', 'cz'); })('<?= base64_encode($email_user) ?>', 'dejvino', 'cz');
const animationDuration = 500; // Matches CSS animation duration (0.5s) const animationDuration = 500; // Matches CSS animation duration (0.5s)
const staggerDelay = 200; // Delay between each panel unrolling (ms) const staggerDelay = 200; // Delay between each panel unrolling (ms)
const applyShifting = (el, flashAtEnd = true, delay = animationDuration) => {
if (!el) return;
const card = el.classList.contains('card') ? el : el.closest('.card');
if (card && !card.dataset.isShifting) {
card.dataset.isShifting = "true";
card.classList.add('shifting');
setTimeout(() => {
card.classList.remove('shifting');
delete card.dataset.isShifting;
if (!flashAtEnd) return;
card.classList.add('flash-glow');
setTimeout(() => card.classList.remove('flash-glow'), 600);
}, delay);
}
};
const toggleCV = (show, updateHash = true, animate = true) => { const toggleCV = (show, updateHash = true, animate = true) => {
const grid = document.querySelector('.bento-grid'); const grid = document.querySelector('.bento-grid');
const labelText = document.getElementById('toggle-label-text'); const labelText = document.getElementById('toggle-label-text');
@ -255,7 +236,6 @@ $cv_skills = [
el.classList.remove('hidden', 'fade-out', 'reveal'); el.classList.remove('hidden', 'fade-out', 'reveal');
void el.offsetWidth; // Force reflow void el.offsetWidth; // Force reflow
el.classList.add('reveal'); el.classList.add('reveal');
if (animate) applyShifting(el, true, animationDuration);
}; };
if (animate) setTimeout(reveal, index * staggerDelay); if (animate) setTimeout(reveal, index * staggerDelay);
else reveal(); else reveal();
@ -267,7 +247,6 @@ $cv_skills = [
el.classList.remove('reveal'); el.classList.remove('reveal');
if (animate) { if (animate) {
el.classList.add('fade-out'); el.classList.add('fade-out');
applyShifting(el, false);
setTimeout(() => { setTimeout(() => {
el.classList.add('hidden'); el.classList.add('hidden');
el.classList.remove('fade-out'); el.classList.remove('fade-out');

23
style.css
View File

@ -35,8 +35,6 @@
max-height: 0; max-height: 0;
transform: scale(0.95); transform: scale(0.95);
} }
/* Start fading in early so the flash effect has content to highlight */
15% { opacity: 0.3; }
to { to {
opacity: 1; opacity: 1;
max-height: 1000px; /* Reduced to match content better and speed up animation */ max-height: 1000px; /* Reduced to match content better and speed up animation */
@ -191,13 +189,6 @@ body {
backface-visibility: hidden; backface-visibility: hidden;
} }
.shifting {
filter: blur(1px) grayscale(0.8) brightness(0.7);
z-index: 10;
pointer-events: none !important;
transition: filter 0.5s ease;
}
/* CV Specific Content Styles */ /* CV Specific Content Styles */
.cv-section { .cv-section {
background: rgba(0, 243, 255, 0.03); background: rgba(0, 243, 255, 0.03);
@ -233,9 +224,13 @@ body {
margin-bottom: 4px; margin-bottom: 4px;
} }
.address.mono-addr { address.mono-addr {
font-style: normal; font-style: normal;
margin-bottom: 15px; margin-bottom: 15px;
padding-top: 5px;
}
address.mono-addr span {
display: block;
} }
.cv-title { .cv-title {
@ -273,8 +268,8 @@ body {
} }
.skill-categories { .skill-categories {
display: flex; display: grid;
flex-direction: column; grid-template-columns: 1fr 1fr;
gap: 2rem; gap: 2rem;
padding: 1rem 0; padding: 1rem 0;
} }
@ -321,7 +316,7 @@ body {
pointer-events: none; pointer-events: none;
} }
.link-grid { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .link-grid { list-style: none; padding: 0; display: grid; gap: 10px; }
.link-grid a { .link-grid a {
font-size: 0.75rem; font-size: 0.75rem;
@ -426,6 +421,8 @@ h1 {
margin: 0; margin: 0;
font-size: clamp(1.5rem, 5vw, 2.2rem); font-size: clamp(1.5rem, 5vw, 2.2rem);
color: #fff; color: #fff;
text-shadow: 1px 1px var(--accent-color), -1px -1px var(--text-color), 0 0 15px rgba(255, 255, 255, 0.3);
letter-spacing: 1px;
} }
h2 { h2 {