:root { /* Color palette */ --color-deepest: #001D39; --color-navy: #0A4174; --color-slate: #49769F; --color-teal: #4E8EA2; --color-muted: #6EA2B3; --color-sky: #7BBDE8; --color-pale: #BDD8E9; --color-white: #ffffff; --color-frost: #f0f7fd; --color-ice: #daeef9; --color-abyss: #000d1a; /* Light theme */ --clr-bg: var(--color-frost); --clr-bg-alt: var(--color-ice); --clr-text: var(--color-deepest); --clr-text-bottom: var(--color-navy); --clr-clickable: var(--color-navy); --clr-clickable-hover: var(--color-slate); --clr-border: var(--color-pale); --clr-card: var(--color-white); --clr-nav: var(--color-sky); --clr-nav-text: var(--color-navy); --clr-timeline: var(--color-sky); --clr-timeline-dot: var(--color-navy); /* Type scale*/ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.75rem; --text-4xl: 3.75rem; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* Animates bg/text/border when dark mode toggles */ --transition-theme: background-color 500ms ease, color 500ms ease, border-color 500ms ease; /* 1.56 goes above 1.0 causing a slight overshoot/spring on hover */ --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } /* Overrides light theme variables when JS adds class="dark" to */ body.dark { --clr-bg: #001220; --clr-bg-alt: var(--color-deepest); --clr-text: var(--color-pale); --clr-text-bottom: var(--color-sky); --clr-clickable: var(--color-sky); --clr-clickable-hover: var(--color-pale); --clr-border: var(--color-navy); --clr-card: var(--color-deepest); --clr-nav: var(--color-abyss); --clr-nav-text: var(--color-sky); --clr-timeline: var(--color-navy); --clr-timeline-dot: var(--color-sky); } /* Wipes browser default margins/padding so all browsers start the same */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Roboto Mono', monospace; background-color: var(--clr-bg); color: var(--clr-text); transition: var(--transition-theme); min-height: 100vh; line-height: 1.65; } /* Headings use Spectral (serif), contrasts with Roboto Mono body font */ h1, h2, h3, h4 { font-family: 'Spectral', serif; color: var(--clr-text); line-height: 1.2; transition: color 500ms ease; } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } p { color: var(--clr-text); transition: color 500ms ease; } a { color: var(--clr-clickable); text-decoration: none; transition: color 300ms ease; } a:hover { color: var(--clr-clickable-hover); } nav { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-8); background-color: var(--clr-nav); /* sticky keeps nav at the top as user scrolls */ position: sticky; top: 0; /* z-index ensures nav stays above all other content */ z-index: 100; transition: background-color 500ms ease; border-bottom: 2px solid var(--color-navy); } .nav-left { display: flex; gap: var(--space-4); } .nav-right { display: flex; gap: var(--space-4); align-items: center; } .nav-right img { transition: transform 300ms var(--easing-bounce); display: block; width: 40px; height: 40px; object-fit: contain; opacity: 0.85; } .nav-right a:hover img { opacity: 1; transform: scale(1.15); } nav .nav-btn, nav #themeBtn { background: transparent; border: 1px solid var(--color-slate); color: var(--clr-nav-text); font-family: 'Roboto Mono', monospace; font-size: var(--text-sm); letter-spacing: 0.08em; padding: var(--space-2) var(--space-4); cursor: pointer; border-radius: 4px; transition: background-color 200ms ease, color 200ms ease, transform 200ms var(--easing-bounce); } nav .nav-btn:hover { background-color: var(--color-navy); color: var(--color-pale); transform: translateY(-2px); } #themeBtn { font-size: var(--text-base); padding: var(--space-2) var(--space-3); border-color: var(--color-teal); } .hero { /* subtracts nav height so hero fills exactly the remaining screen */ min-height: calc(100vh - 68px); display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: var(--space-16) var(--space-12); gap: var(--space-12); background: linear-gradient(135deg, var(--clr-bg) 0%, var(--clr-bg-alt) 100%); transition: background 500ms ease; overflow: hidden; } .hero-text { grid-column: 1; } .hero-greeting { font-family: 'Roboto Mono', monospace; font-size: var(--text-lg); color: var(--clr-clickable); letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: var(--space-4); /* starts invisible+shifted, animation-fill-mode: both holds the start state until animation-delay kicks in */ opacity: 0; transform: translateY(20px); animation: fadeUp 0.6s ease both; animation-delay: 0.1s; } .hero h1 { /* clamp: min 2.5rem, scales with viewport, max --text-4xl */ font-size: clamp(2.5rem, 5vw, var(--text-4xl)); margin-bottom: var(--space-6); opacity: 0; transform: translateY(24px); animation: fadeUp 0.7s ease both; animation-delay: 0.5s; } .hero-sub { font-size: var(--text-lg); color: var(--clr-text-bottom); max-width: 520px; margin-bottom: var(--space-8); opacity: 0; transform: translateY(20px); animation: fadeUp 0.7s ease both; animation-delay: 0.7s; } .hero-cta { display: inline-block; padding: var(--space-4) var(--space-8); background-color: var(--clr-clickable); color: var(--color-pale); border-radius: 6px; font-family: 'Roboto Mono', monospace; font-size: var(--text-base); font-weight: 600; letter-spacing: 0.05em; transition: background-color 250ms ease, transform 250ms var(--easing-bounce), box-shadow 250ms ease; opacity: 0; animation: fadeUp 0.7s ease both; animation-delay: 1s; } .hero-cta:hover { background-color: var(--color-slate); color: #fff; transform: translateY(-3px); box-shadow: 0 8px 24px rgba(10, 65, 116, 0.3); } .hero-visual { grid-column: 2; display: flex; justify-content: center; align-items: center; opacity: 0; transform: scale(0.9); animation: scaleIn 0.8s ease both; animation-delay: 0.4s; } .hero-visual img { width: 320px; height: 320px; border-radius: 50%; object-fit: cover; /* focuses crop on face rather than bottom of image */ object-position: top; border: 5px solid var(--clr-border); box-shadow: 0 16px 48px rgba(0, 29, 57, 0.25); transition: border-color 500ms ease; } .page-container { max-width: 960px; margin: 0 auto; padding: var(--space-16) var(--space-8); } .page-header { margin-bottom: var(--space-12); padding-bottom: var(--space-6); border-bottom: 2px solid var(--clr-border); transition: border-color 500ms ease; } .page-header h1 { font-size: var(--text-3xl); } .page-header p { margin-top: var(--space-3); font-size: var(--text-lg); color: var(--clr-text-bottom); } .personal-statement { font-size: var(--text-base); line-height: 1.8; max-width: 720px; margin-bottom: var(--space-16); padding: var(--space-8); background-color: var(--clr-card); border-left: 4px solid var(--clr-clickable); /* 0 on left corners keeps them sharp so the left border looks like a stripe */ border-radius: 0 8px 8px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.05); transition: background-color 500ms ease, border-color 500ms ease; } .timeline-section h2 { font-size: var(--text-2xl); margin-bottom: var(--space-8); } .timeline { list-style: none; padding: 0; margin: 0 auto; max-width: 860px; /* relative needed so ::before (the vertical line) positions itself inside this */ position: relative; } /* ::before draws the vertical center line, content:'' is required even though it's empty, otherwise the element won't render */ .timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, var(--clr-timeline), var(--color-muted)); transform: translateX(-50%); transition: background 500ms ease; } .timeline-item { width: 44%; margin-bottom: var(--space-8); cursor: pointer; position: relative; } .timeline-item:nth-child(odd) { margin-left: 0; } .timeline-item:nth-child(even) { margin-left: 56%; } /* ::after draws the circle dot, same idea as ::before, empty box given dimensions and border-radius:50% to become a circle */ .timeline-item::after { content: ''; position: absolute; top: 20px; width: 14px; height: 14px; background-color: var(--clr-timeline-dot); /* border matches page bg, creating a visual gap between dot and line */ border: 3px solid var(--clr-bg); border-radius: 50%; transition: background-color 300ms ease, transform 300ms var(--easing-bounce); } .timeline-item:nth-child(odd)::after { right: -8%; transform: translateX(50%); } .timeline-item:nth-child(even)::after { left: -8%; transform: translateX(-50%); } .timeline-item:hover::after, .timeline-item.expanded::after { background-color: var(--color-sky); transform: translateX(50%) scale(1.3); } /* even items need different translateX to stay on their side while scaling */ .timeline-item:nth-child(even):hover::after, .timeline-item:nth-child(even).expanded::after { transform: translateX(-50%) scale(1.3); } .timeline-item .content { background-color: var(--clr-card); border: 1px solid var(--clr-border); border-radius: 8px; padding: var(--space-4) var(--space-6); transition: background-color 500ms ease, border-color 500ms ease, box-shadow 300ms ease, transform 300ms var(--easing-bounce); } .timeline-item:hover .content { box-shadow: 0 6px 24px rgba(10, 65, 116, 0.15); transform: translateY(-2px); } .timeline-item h2 { margin: 0; font-size: var(--text-base); font-family: 'Roboto Mono', monospace; font-weight: 600; color: var(--clr-clickable); } /* max-height:0 + overflow:hidden hides the text. Animating max-height (not height) is the trick, height:auto can't be animated in CSS */ .timeline-item p { max-height: 0; overflow: hidden; opacity: 0; margin: 0; font-size: var(--text-sm); line-height: 1.7; transition: max-height 0.4s ease, opacity 0.3s ease; } .timeline-item.expanded p { max-height: 300px; opacity: 1; margin-top: var(--space-3); } .filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); } .filter-btn { padding: var(--space-2) var(--space-4); border: 1.5px solid var(--clr-border); border-radius: 20px; background: transparent; color: var(--clr-text-bottom); font-family: 'Roboto Mono', monospace; font-size: var(--text-sm); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms var(--easing-bounce); } .filter-btn:hover, .filter-btn.active { background-color: var(--clr-clickable); color: var(--color-pale); border-color: var(--clr-clickable); transform: translateY(-2px); } .projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); } .project-card { background-color: var(--clr-card); border: 1px solid var(--clr-border); border-radius: 12px; padding: var(--space-8); transition: background-color 500ms ease, border-color 500ms ease, box-shadow 300ms ease, transform 300ms var(--easing-bounce); display: flex; flex-direction: column; gap: var(--space-4); } .project-card:hover { box-shadow: 0 10px 36px rgba(10, 65, 116, 0.18); transform: translateY(-4px); } .project-card h3 { font-size: var(--text-xl); color: var(--clr-clickable); } /* flex:1 makes paragraph stretch to fill space, keeping card heights equal */ .project-card p { font-size: var(--text-sm); line-height: 1.75; flex: 1; } .project-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); } .tag { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); background-color: var(--clr-bg-alt); border-radius: 12px; color: var(--clr-text-bottom); font-family: 'Roboto Mono', monospace; letter-spacing: 0.04em; transition: background-color 500ms ease, color 500ms ease; } .project-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--clr-clickable); font-size: var(--text-sm); font-weight: 600; transition: color 200ms ease, gap 200ms ease; } .project-link:hover { color: var(--clr-clickable-hover); gap: var(--space-3); } .project-card.hidden { display: none; } .contact-grid { display: grid; /* right column (form) is 1.5x wider than left (info) */ grid-template-columns: 1fr 1.5fr; gap: var(--space-12); align-items: start; } .contact-info { display: flex; flex-direction: column; gap: var(--space-6); } .contact-info h2 { font-size: var(--text-xl); } .contact-info p { font-size: var(--text-base); line-height: 1.7; color: var(--clr-text-bottom); } .contact-links { display: flex; flex-direction: column; gap: var(--space-3); } .contact-link { display: flex; align-items: center; gap: var(--space-3); color: var(--clr-text-bottom); font-size: var(--text-base); transition: color 200ms ease, transform 200ms var(--easing-bounce); } .contact-link:hover { color: var(--clr-clickable); transform: translateX(4px); } .contact-link img { width: 24px; height: 24px; opacity: 0.7; transition: opacity 200ms ease; } .contact-link:hover img { opacity: 1; } .contact-form { background-color: var(--clr-card); border: 1px solid var(--clr-border); border-radius: 12px; padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); transition: background-color 500ms ease, border-color 500ms ease; } .form-group { display: flex; flex-direction: column; gap: var(--space-2); } .form-group label { font-size: var(--text-sm); font-weight: 600; color: var(--clr-text-bottom); letter-spacing: 0.04em; text-transform: uppercase; font-family: 'Roboto Mono', monospace; } .form-group input, .form-group textarea { background-color: var(--clr-bg); border: 1.5px solid var(--clr-border); border-radius: 6px; padding: var(--space-3) var(--space-4); color: var(--clr-text); font-family: 'Roboto Mono', monospace; font-size: var(--text-base); transition: border-color 200ms ease, background-color 500ms ease, color 500ms ease; /* outline:none removes browser default focus ring, replaced by box-shadow below */ outline: none; } .form-group input:focus, .form-group textarea:focus { border-color: var(--clr-clickable); box-shadow: 0 0 0 3px rgba(10, 65, 116, 0.15); } .form-group textarea { resize: vertical; min-height: 120px; } .error-msg { font-size: var(--text-xs); color: #d0453a; display: none; margin-top: var(--space-1); } /* JS adds class="error" to the form-group to show the red border and error message */ .form-group.error input, .form-group.error textarea { border-color: #d0453a; } .form-group.error .error-msg { display: block; } .submit-btn { padding: var(--space-4) var(--space-8); background-color: var(--clr-clickable); color: var(--color-pale); border: none; border-radius: 6px; font-family: 'Roboto Mono', monospace; font-size: var(--text-base); font-weight: 600; cursor: pointer; transition: background-color 250ms ease, transform 250ms var(--easing-bounce), box-shadow 250ms ease; /* stops button from stretching to full column width */ align-self: flex-start; } .submit-btn:hover { background-color: var(--color-slate); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(10, 65, 116, 0.25); } .form-success { display: none; text-align: center; padding: var(--space-8); } .form-success.visible { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); animation: fadeUp 0.5s ease both; } .success-icon { font-size: 3rem; } .form-success h3 { color: var(--clr-clickable); } .form-success p { color: var(--clr-text-bottom); } /* Elements start invisible+shifted, JS adds .visible when they scroll into view */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } } /* Users who enable reduced motion in device settings won't see animations, prevents discomfort for some people.*/ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } @media (max-width: 768px) { .hero { grid-template-columns: 1fr; grid-template-rows: auto auto; padding: var(--space-12) var(--space-6); min-height: auto; gap: var(--space-8); } /* grid-row swaps the order, photo on top, text below */ .hero-text { grid-column: 1; grid-row: 2; } .hero-visual { grid-column: 1; grid-row: 1; } .hero-visual img { width: 200px; height: 200px; } .projects-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .timeline::before { left: 20px; } .timeline-item, .timeline-item:nth-child(even) { width: 80%; margin-left: 48px; } .timeline-item::after, .timeline-item:nth-child(even)::after { left: -34px; right: auto; transform: none; } .timeline-item:hover::after, .timeline-item:nth-child(even):hover::after, .timeline-item.expanded::after, .timeline-item:nth-child(even).expanded::after { transform: scale(1.3); } nav { flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4); } } @media (max-width: 480px) { h1 { font-size: var(--text-2xl); } .page-container { padding: var(--space-8) var(--space-4); } .nav-left { gap: var(--space-2); } .nav-right img { width: 28px; } }