diff --git a/index.php b/index.php index dfa3e70..aa955c1 100644 --- a/index.php +++ b/index.php @@ -228,8 +228,6 @@ $cv_skills = $cvData['skills'] ?? [];
- - + + diff --git a/style.css b/style.css index 65fceb1..f6d27ad 100644 --- a/style.css +++ b/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; }