From e12b33f4d4b338a2e5560e4586671d3a2a87ab4c Mon Sep 17 00:00:00 2001 From: Alex Dean Date: Sat, 7 Dec 2024 09:29:31 -0800 Subject: [PATCH] Overhaul website styling and interactivity --- books.html | 24 +++- engineering.html | 24 +++- index.html | 32 ++++- research.html | 22 ++- scripts/mobile-nav.js | 32 +++++ scripts/theme.js | 38 +++++ styles/index.css | 327 +++++++++++++++++++++++++++++++++++++++++- 7 files changed, 484 insertions(+), 15 deletions(-) create mode 100644 scripts/mobile-nav.js create mode 100644 scripts/theme.js diff --git a/books.html b/books.html index 425c10b..3d8c60e 100644 --- a/books.html +++ b/books.html @@ -5,9 +5,24 @@ Alex Dean + + + + + +
+ Home + Books + Engineering + Research +
@@ -17,9 +32,14 @@
+
+ + ← + Back + +

Alex Dean

- Back - +

There's nothing quite like a book that changes how you see the world. There's nothing quite like perceiving life through some unspoken lens, and then having diff --git a/engineering.html b/engineering.html index 8310a48..7172877 100644 --- a/engineering.html +++ b/engineering.html @@ -5,9 +5,24 @@ Alex Dean + + + + + +

+ Home + Books + Engineering + Research +
@@ -17,9 +32,14 @@
+
+ + ← + Back + +

Alex Dean

- Back - +

What follows is a list of my personal projects. This list is ordered from most to least recent.

diff --git a/index.html b/index.html index fb54e71..475f90b 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,24 @@ Alex Dean + + + + + +
+ Home + Books + Engineering + Research +
Books
@@ -20,16 +35,19 @@

Alex Dean

- I'm a software engineer interested in large-scale distributed machine learning - systems. I studied computer science at the University of Illinois - Urbana-Champaign. + I'm a software engineer at Amazon Web Services. I'm interested in large-scale + distributed machine learning systems. I studied computer science at the + University of Illinois Urbana-Champaign.

+ +

- At Capital One, I work on developing and deploying NLP models for call intent - prediction, transcription, and sentiment analysis. I strongly believe in the - power of self-directed personal projects to expand your engineering abilities. - For more information, see my projects and + I strongly believe in the power of self-directed personal projects to expand your + engineering abilities. For more information, see + my projects and my GitHub.

diff --git a/research.html b/research.html index 483c745..625937f 100644 --- a/research.html +++ b/research.html @@ -5,9 +5,24 @@ Alex Dean + + + + + +
+ Home + Books + Engineering + Research +
@@ -17,8 +32,13 @@
+
+ + ← + Back + +

Alex Dean

- Back

Papers & Publications

diff --git a/scripts/mobile-nav.js b/scripts/mobile-nav.js new file mode 100644 index 0000000..63df383 --- /dev/null +++ b/scripts/mobile-nav.js @@ -0,0 +1,32 @@ +document.addEventListener('DOMContentLoaded', function() { + const mobileNavToggle = document.querySelector('.mobile-nav-toggle'); + const mobileMenu = document.querySelector('.mobile-menu'); + const toggleSpans = mobileNavToggle.querySelectorAll('span'); + + mobileNavToggle.addEventListener('click', function() { + mobileMenu.classList.toggle('active'); + + // Animate hamburger to X + toggleSpans[0].style.transform = mobileMenu.classList.contains('active') + ? 'rotate(45deg) translate(5px, 6px)' + : 'none'; + toggleSpans[1].style.opacity = mobileMenu.classList.contains('active') + ? '0' + : '1'; + toggleSpans[2].style.transform = mobileMenu.classList.contains('active') + ? 'rotate(-45deg) translate(5px, -6px)' + : 'none'; + }); + + // Close menu when clicking outside + document.addEventListener('click', function(event) { + if (!mobileMenu.contains(event.target) && + !mobileNavToggle.contains(event.target) && + mobileMenu.classList.contains('active')) { + mobileMenu.classList.remove('active'); + toggleSpans[0].style.transform = 'none'; + toggleSpans[1].style.opacity = '1'; + toggleSpans[2].style.transform = 'none'; + } + }); +}); \ No newline at end of file diff --git a/scripts/theme.js b/scripts/theme.js new file mode 100644 index 0000000..4e9a4ef --- /dev/null +++ b/scripts/theme.js @@ -0,0 +1,38 @@ +function initializeTheme() { + // Check for saved theme preference or default to dark + const savedTheme = localStorage.getItem('theme') || 'dark'; + document.documentElement.setAttribute('data-theme', savedTheme); + + // Create and append the toggle button + const toggleButton = document.createElement('button'); + toggleButton.className = 'theme-toggle'; + + // Use more reliable Unicode characters with fallback + const sunIcon = '☀️'; + const moonIcon = '🌙'; + + // Set initial button text with fallback + function updateButtonText(theme) { + if (theme === 'dark') { + toggleButton.innerHTML = `${sunIcon} Light`; + } else { + toggleButton.innerHTML = `${moonIcon} Dark`; + } + } + + updateButtonText(savedTheme); + + toggleButton.addEventListener('click', () => { + const currentTheme = document.documentElement.getAttribute('data-theme'); + const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; + + document.documentElement.setAttribute('data-theme', newTheme); + localStorage.setItem('theme', newTheme); + updateButtonText(newTheme); + }); + + document.body.appendChild(toggleButton); +} + +// Initialize theme when DOM is loaded +document.addEventListener('DOMContentLoaded', initializeTheme); \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index 434b0f6..d063995 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,20 +1,341 @@ +/* ========================================================================== + 1. Imports andRoot Variables + ========================================================================== */ +@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Source+Serif+Pro:wght@400;500&display=swap'); + +:root { + /* Dark theme (default) */ + --bg-color: #1a1a1a; + --text-color: #f0f0f0; + --bg-gradient-from: #1a1a1a; + --bg-gradient-to: #2a2a2a; + --link-color: #7dd3fc; + --link-hover-color: #38bdf8; + --border-color: rgba(255, 255, 255, 0.1); +} + +:root[data-theme="light"] { + --bg-color: #ffffff; + --text-color: #1a1a1a; + --bg-gradient-from: #ffffff; + --bg-gradient-to: #f0f0f0; + --link-color: #0066cc; + --link-hover-color: #0044aa; + --border-color: rgba(0, 0, 0, 0.1); +} + +/* ========================================================================== + 2. Base Styles + ========================================================================== */ +body { + background-color: var(--bg-color); + color: var(--text-color); + font-family: 'Source Serif Pro', Georgia, serif; + line-height: 1.8; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 400; + font-size: 1.05rem; +} + +* { + transition: background-color 0.3s ease, color 0.3s ease; +} + +/* ========================================================================== + 3. Typography + ========================================================================== */ +h1, h2, h3, h4, h5, h6 { + font-family: 'Playfair Display', Georgia, serif; + color: var(--text-color); + margin-bottom: 1rem; + font-weight: 500; + letter-spacing: -0.02em; + line-height: 1.3; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 1.5rem; +} + +h2 { + font-size: 1.75rem; + margin-top: 2rem; +} + +p { + margin-bottom: 1.5rem; + letter-spacing: -0.003em; +} + +/* ========================================================================== + 4. Layout + ========================================================================== */ +.front-page { + background: linear-gradient(145deg, var(--bg-gradient-from) 0%, var(--bg-gradient-to) 100%); + padding: 2rem; + border-radius: 12px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); +} + @media screen and (min-width: 640px) { .front-page { position: absolute; left: 50%; top: 5%; - -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); line-height: 25px; display: flex; + max-width: 1200px; + width: 90%; } .page-description { flex: 5; + padding-right: 2rem; + } +} + +/* ========================================================================== + 5. Navigation + ========================================================================== */ +.page-navigation { + padding-top: 2.5%; + flex: 1; +} + +.page-navigation a { + font-family: 'Playfair Display', Georgia, serif; + font-size: 1.2rem; + font-weight: 500; + letter-spacing: 0.01em; + margin-bottom: 1rem; + display: inline-block; + transition: all 0.2s ease; +} + +.page-navigation a:hover { + transform: translateX(3px); + text-decoration: none; + background-color: rgba(255, 255, 255, 0.1); +} + +@media screen and (min-width: 640px) { + .page-navigation { + border-left: 1px solid var(--border-color); + padding-left: 2rem; + } +} + +/* ========================================================================== + 6. Links and Buttons + ========================================================================== */ +a { + color: var(--link-color); + text-decoration: none; + transition: color 0.2s ease; +} + +a:hover { + color: var(--link-hover-color); + text-decoration: underline; +} + +/* Theme Toggle Button */ +.theme-toggle { + position: fixed; + top: 2rem; + right: 2.5rem; + padding: 0.35rem 0.7rem; + border-radius: 20px; + border: 1px solid var(--border-color); + background-color: var(--bg-color); + color: var(--text-color); + cursor: pointer; + transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; + z-index: 1000; + font-size: 0.85rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + gap: 0.3rem; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + transform: translateY(0); +} + +.theme-toggle:hover { + background-color: var(--link-color); + color: var(--bg-color); + transform: translateY(-1px); +} + +/* Back Button */ +.back-button { + display: inline-flex; + align-items: center; + padding: 0.5rem 1rem; + border-radius: 20px; + background-color: var(--bg-gradient-from); + border: 1px solid var(--border-color); + color: var(--text-color) !important; + text-decoration: none; + transition: all 0.2s ease; + font-size: 0.9rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + font-family: 'Inter', sans-serif; + font-weight: 500; +} + +.back-button:hover { + transform: translateX(-3px); + background-color: var(--bg-gradient-to); + text-decoration: none !important; +} + +.back-arrow { + margin-right: 0.5rem; + font-size: 1.1rem; + line-height: 1; + position: relative; + top: -1px; +} + +/* ========================================================================== + 7. Mobile Navigation + ========================================================================== */ +.mobile-nav-toggle { + display: none; + position: fixed; + top: 1.2rem; + left: 1.2rem; + z-index: 1001; + background: none; + border: none; + padding: 0.5rem; + cursor: pointer; + color: var(--text-color); + transition: transform 0.3s ease; + transform: translateY(0); +} + +.mobile-nav-toggle span { + display: block; + width: 24px; + height: 2px; + margin: 5px 0; + background: var(--text-color); + transition: all 0.3s ease; +} + +.mobile-menu { + position: fixed; + top: 0; + left: -100%; + width: 80%; + max-width: 300px; + height: 100vh; + background: var(--bg-gradient-from); + padding: 4rem 1.5rem; + transition: left 0.3s ease; + z-index: 1000; + box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); +} + +.mobile-menu.active { + left: 0; + position: fixed; + top: 0; + z-index: 1003; +} + +.mobile-menu a { + display: block; + padding: 1rem 0; + color: var(--text-color); + text-decoration: none; + font-family: 'Playfair Display', Georgia, serif; + font-size: 1.3rem; + font-weight: 500; + letter-spacing: 0.01em; + transition: all 0.2s ease; +} + +.mobile-menu a:hover { + color: var(--link-color); + transform: translateX(3px); +} + +/* ========================================================================== + 8. Media Queries + ========================================================================== */ +/* Mobile and Tablet */ +@media screen and (max-width: 768px) { + .front-page { + margin-top: 0; + padding: 3.5rem 1.5rem 1.5rem; + position: relative; + } + + .mobile-nav-toggle { + position: absolute; + top: 1rem; + left: 1rem; + display: block; + } + + .theme-toggle { + position: absolute; + top: 1rem; + right: 1rem; + padding: 0.3rem 0.6rem; + font-size: 0.8rem; + z-index: 1002; } .page-navigation { - padding-top: 2.5%; - flex: 1; + display: none; + } +} + +/* iPhone XR/similar sizes */ +@media screen and (max-width: 414px) { + .front-page { + padding: 3rem 1rem 1rem; + border-radius: 12px; + } + + .mobile-nav-toggle { + top: 0.8rem; + left: 0.8rem; + } + + .theme-toggle { + top: 0.8rem; + right: 0.8rem; } } + +/* Laptop screens (13-14 inch) */ +@media screen and (min-width: 1024px) and (max-width: 1440px) { + .front-page { + width: 85%; + max-width: 1100px; + } +} + +/* Book title styling */ +.page-description ol i { + color: #d4a5a5; /* Soft rose for dark mode */ + transition: color 0.2s ease; +} + +/* Adjust book title color for light mode */ +:root[data-theme="light"] .page-description ol i { + color: #9e4244; /* Deep rose for light mode */ +} + +/* Optional hover effect */ +.page-description ol i:hover { + color: var(--link-color); +}