From 0ad194041c48f52f0c2e3d1d9d494b4cca71bb23 Mon Sep 17 00:00:00 2001 From: Dejvino Date: Mon, 18 May 2026 20:52:34 +0200 Subject: [PATCH] Improved style and added base CV --- index.php | 81 +++++++++++++++++++++++- style.css | 180 ++++++++++++++++++++++++++++++++++++++---------------- 2 files changed, 208 insertions(+), 53 deletions(-) diff --git a/index.php b/index.php index a3082d9..7865a8b 100644 --- a/index.php +++ b/index.php @@ -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

Navigation

@@ -98,6 +125,46 @@ $hardware_info = "Playing the mandolin, mountain biking, 3D printing and tinker Contact email: uncovering...

+ + + + + + + diff --git a/style.css b/style.css index f80e6b2..e9b4e06 100644 --- a/style.css +++ b/style.css @@ -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; }