fixed Modified location
This commit is contained in:
Dejvino
parent
6ffb41b23e
commit
bd849d6e34
@ -228,8 +228,6 @@ $cv_skills = $cvData['skills'] ?? [];
|
||||
</label>
|
||||
|
||||
<div class="cv-content">
|
||||
<?php $file_mod_time = filemtime(__FILE__); ?>
|
||||
<p class="cv-modified hidden hidden-toggle">Modified: <?= date("Y-m-d", $file_mod_time) ?></p>
|
||||
<?php
|
||||
$firstJob = $cv_experience[0] ?? null;
|
||||
if ($firstJob):
|
||||
@ -393,6 +391,8 @@ $cv_skills = $cvData['skills'] ?? [];
|
||||
</script>
|
||||
<!-- Cloudflare Web Analytics -->
|
||||
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "90827cb740cd4b1db611be059f64daa9"}'></script><!-- End Cloudflare Web Analytics -->
|
||||
<?php $file_mod_time = filemtime(__FILE__); ?>
|
||||
<p class="page-footer">Modified: <?= date("Y-m-d", $file_mod_time) ?></p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
132
style.css
132
style.css
@ -7,6 +7,7 @@
|
||||
--mono-font: 'SFMono-Regular', Consolas, Menlo, monospace;
|
||||
}
|
||||
|
||||
|
||||
/* Prevent animations/transitions on initial load */
|
||||
.preload * {
|
||||
-webkit-transition: none !important;
|
||||
@ -17,11 +18,13 @@
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
|
||||
@keyframes pulse-trace {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
|
||||
@keyframes scan-line {
|
||||
0% { transform: translateX(-150%) skewX(-45deg); opacity: 0; }
|
||||
10% { opacity: 0.5; }
|
||||
@ -29,6 +32,7 @@
|
||||
100% { transform: translateX(150%) skewX(-45deg); opacity: 0; }
|
||||
}
|
||||
|
||||
|
||||
@keyframes grow-reveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -42,6 +46,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes shrink-fade-away { /* New animation for shrinking */
|
||||
from {
|
||||
opacity: 1;
|
||||
@ -55,6 +60,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
@ -65,13 +71,15 @@ body {
|
||||
background-size: 24px 24px;
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 40px 20px;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
max-width: 1000px;
|
||||
@ -79,6 +87,7 @@ body {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
padding: 24px;
|
||||
@ -97,6 +106,7 @@ body {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/* Desktop-only effects: Shuffle and Gradient Borders */
|
||||
@media (min-width: 769px) {
|
||||
.card {
|
||||
@ -151,6 +161,7 @@ body {
|
||||
.education { transform: translate(2px, 3px) rotate(-0.4deg); }
|
||||
}
|
||||
|
||||
|
||||
.experience, .skills, .education {
|
||||
display: none; /* Keep out of layout entirely when off */
|
||||
opacity: 0;
|
||||
@ -159,6 +170,7 @@ body {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card {
|
||||
border-color: rgba(0, 243, 255, 0.3);
|
||||
@ -168,6 +180,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.profile { display: flex; align-items: center; gap: 32px; }
|
||||
|
||||
.hero {
|
||||
@ -175,34 +188,42 @@ body {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.hero-identity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.hero-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hero-name h1 {
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.hero-name .headline {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 1rem;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.hero-name .location {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hero-description p {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/**
|
||||
* Link pills – shared base
|
||||
*/
|
||||
@ -220,22 +241,26 @@ body {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.pill-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
.pill-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.pill-url {
|
||||
font-size: 0.72rem;
|
||||
opacity: 0.5;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Contact pills – gold accent
|
||||
*/
|
||||
@ -245,22 +270,26 @@ body {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
.contact-pill {
|
||||
color: var(--link-color);
|
||||
background: rgba(255, 215, 0, 0.06);
|
||||
border-color: rgba(255, 215, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
.contact-pill:hover {
|
||||
background: rgba(255, 215, 0, 0.12);
|
||||
border-color: rgba(255, 215, 0, 0.5);
|
||||
box-shadow: 0 0 12px rgba(255, 215, 0, 0.15);
|
||||
}
|
||||
|
||||
|
||||
.contact-pill .pill-url {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Nav pills – cyan accent
|
||||
*/
|
||||
@ -272,22 +301,26 @@ body {
|
||||
border-top: 1px solid rgba(0, 243, 255, 0.12);
|
||||
}
|
||||
|
||||
|
||||
.nav-pill {
|
||||
color: var(--text-color);
|
||||
background: rgba(0, 243, 255, 0.04);
|
||||
border-color: rgba(0, 243, 255, 0.15);
|
||||
}
|
||||
|
||||
|
||||
.nav-pill:hover {
|
||||
background: rgba(0, 243, 255, 0.1);
|
||||
border-color: rgba(0, 243, 255, 0.4);
|
||||
box-shadow: 0 0 12px rgba(0, 243, 255, 0.15);
|
||||
}
|
||||
|
||||
|
||||
.nav-pill .pill-url {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Personal interests – narrow side panel, non-interactive
|
||||
*/
|
||||
@ -296,6 +329,7 @@ body {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.personal-tag {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-color);
|
||||
@ -304,12 +338,14 @@ body {
|
||||
border-left: 2px solid rgba(0, 243, 255, 0.15);
|
||||
}
|
||||
|
||||
|
||||
.hiring-toggle {
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, filter 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.hiring-toggle:hover {
|
||||
filter: brightness(1.2);
|
||||
transform: translate(-2px, 3px) rotate(0.2deg) scale(1.01);
|
||||
@ -317,10 +353,12 @@ body {
|
||||
linear-gradient(135deg, rgba(255, 0, 255, 0.6), rgba(0, 243, 255, 0.6)) border-box;
|
||||
}
|
||||
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
.reveal {
|
||||
display: block !important;
|
||||
pointer-events: auto;
|
||||
@ -330,6 +368,7 @@ body {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
.fade-out {
|
||||
display: block !important;
|
||||
/* This class will be applied when content is being hidden */
|
||||
@ -339,6 +378,7 @@ body {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* CV Specific Content Styles */
|
||||
.cv-section {
|
||||
background: rgba(0, 243, 255, 0.03);
|
||||
@ -354,17 +394,20 @@ body {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.cv-section:hover {
|
||||
background: rgba(0, 243, 255, 0.07);
|
||||
border-color: rgba(0, 243, 255, 0.3);
|
||||
}
|
||||
|
||||
|
||||
.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-item-header, .cv-header {
|
||||
@ -374,15 +417,18 @@ body {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
|
||||
address.mono-addr {
|
||||
font-style: normal;
|
||||
margin-bottom: 15px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
address.mono-addr span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.cv-title {
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
@ -390,17 +436,20 @@ address.mono-addr span {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.cv-date {
|
||||
font-size: 0.7rem;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
|
||||
.cv-org {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
|
||||
.cv-desc {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
@ -408,6 +457,7 @@ address.mono-addr span {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
|
||||
.cv-modified {
|
||||
text-align: right;
|
||||
font-size: 0.7rem;
|
||||
@ -417,6 +467,7 @@ address.mono-addr span {
|
||||
font-family: var(--mono-font);
|
||||
}
|
||||
|
||||
|
||||
.skill-categories {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@ -424,6 +475,7 @@ address.mono-addr span {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
|
||||
.skill-group h3 {
|
||||
font-size: 0.6rem;
|
||||
text-transform: uppercase;
|
||||
@ -434,14 +486,16 @@ address.mono-addr span {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
||||
.skill-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 1.5rem;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
@ -449,11 +503,13 @@ address.mono-addr span {
|
||||
transition: opacity 0.4s ease, transform 0.4s ease;
|
||||
}
|
||||
|
||||
|
||||
.reveal .tag {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
|
||||
.profile::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -466,11 +522,13 @@ address.mono-addr span {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.link-grid {
|
||||
list-style: none; padding: 0; display: grid; gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.link-grid a {
|
||||
font-size: 0.75rem;
|
||||
display: block;
|
||||
@ -485,6 +543,7 @@ address.mono-addr span {
|
||||
text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
.link-grid a:hover {
|
||||
background: rgba(0, 243, 255, 0.25);
|
||||
border-left-color: var(--accent-color);
|
||||
@ -492,12 +551,14 @@ address.mono-addr span {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
|
||||
/* Specific styling for the small contact buttons */
|
||||
.contact .link-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
.links::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -509,6 +570,7 @@ address.mono-addr span {
|
||||
animation: pulse-trace 1s infinite;
|
||||
}
|
||||
|
||||
|
||||
/* Cyberpunk Toggle Switch */
|
||||
.cv-toggle-container {
|
||||
display: flex;
|
||||
@ -523,10 +585,12 @@ address.mono-addr span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.cv-mode .cv-toggle-container span {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -534,6 +598,7 @@ address.mono-addr span {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
|
||||
.switch input { opacity: 0; width: 0; height: 0; }
|
||||
|
||||
.slider {
|
||||
@ -545,6 +610,7 @@ address.mono-addr span {
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
@ -555,6 +621,7 @@ address.mono-addr span {
|
||||
box-shadow: 0 0 10px var(--accent-color);
|
||||
}
|
||||
|
||||
|
||||
input:checked + .slider { background-color: rgba(0, 243, 255, 0.2); border-color: var(--text-color); }
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(20px);
|
||||
@ -562,6 +629,7 @@ input:checked + .slider:before {
|
||||
box-shadow: 0 0 10px var(--text-color);
|
||||
}
|
||||
|
||||
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 160px; /* Explicit height for aspect ratio 3:4 */
|
||||
@ -570,6 +638,7 @@ input:checked + .slider:before {
|
||||
border: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(1.5rem, 5vw, 2.2rem);
|
||||
@ -578,6 +647,7 @@ h1 {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
@ -588,6 +658,7 @@ h2 {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
|
||||
a { color: var(--link-color); text-decoration: none; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@ -614,6 +685,7 @@ a { color: var(--link-color); text-decoration: none; }
|
||||
.pill-url { display: inline; }
|
||||
}
|
||||
|
||||
|
||||
/* Print mode */
|
||||
/* Condensed Print Mode - White Background */
|
||||
@media print {
|
||||
@ -769,6 +841,43 @@ a { color: var(--link-color); text-decoration: none; }
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
|
||||
/* Hero layout – keep photo left, name right (like desktop) */
|
||||
.hero {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 12px !important;
|
||||
}
|
||||
.hero-identity {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
gap: 16px !important;
|
||||
}
|
||||
|
||||
|
||||
/* Selected Work highlights – give titles and items room */
|
||||
.highlight-item {
|
||||
margin: 12px 0 !important;
|
||||
padding: 8px 0 !important;
|
||||
border-bottom: 1px solid #eee !important;
|
||||
}
|
||||
.highlight-item:last-child {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.highlight-item h3 {
|
||||
font-size: 13px !important;
|
||||
margin: 0 0 4px 0 !important;
|
||||
}
|
||||
.highlight-subtitle {
|
||||
font-size: 0.85em !important;
|
||||
margin: 0 0 6px 0 !important;
|
||||
font-style: italic !important;
|
||||
}
|
||||
.highlight-description {
|
||||
font-size: 0.9em !important;
|
||||
margin: 0 !important;
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
/* Links grid */
|
||||
.link-grid a {
|
||||
color: #000 !important;
|
||||
@ -863,4 +972,21 @@ a { color: var(--link-color); text-decoration: none; }
|
||||
border-radius: 3px !important;
|
||||
background: #f7f7f7 !important;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
font-size: 0.7rem !important;
|
||||
color: #888 !important;
|
||||
margin: 16px 0 0 !important;
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.page-footer {
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
color: #666;
|
||||
margin: 24px 0 0;
|
||||
padding: 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user