lotte/website
1
Code Activity

build11

Browse source
This commit is contained in:
Charlotte Croce 2025-04-04 13:06:24 -04:00
parent ac4a300a62
commit 6d2262bdb3
2 changed files with 88 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

86
index.html
View file

@ -1,51 +1,50 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>./charlotte.sh</title> <title>Charlotte Croce - ./charlotte.sh</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<!-- Lucide icons via CDN -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script> <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
</head> </head>
<body> <body>
<a href="#main-content" class="skip-to-content">Skip to main content</a>
<div class="app-container"> <div class="app-container">
<!-- Navbar -->
<header class="navbar"> <header class="navbar">
<div class="navbar-container"> <div class="navbar-container">
<div class="navbar-logo"> <div class="navbar-logo">
./charlotte.sh ./charlotte.sh
</div> </div>
<!-- Desktop Navigation Links -->
<div class="navbar-links"> <div class="navbar-links">
<button class="navbar-button" onclick="openSocialLink('https://github.com/charlottecroce')"> <button class="navbar-button" onclick="openSocialLink('https://github.com/charlottecroce')">
GitHub <i data-lucide="external-link" class="ml-1"></i> GitHub <i data-lucide="external-link" class="ml-1" aria-hidden="true"></i>
<span class="sr-only">(opens in new tab)</span>
</button> </button>
<button class="navbar-button" onclick="openSocialLink('https://codeberg.org/charlottecroce')"> <button class="navbar-button" onclick="openSocialLink('https://codeberg.org/charlottecroce')">
Codeberg <i data-lucide="external-link" class="ml-1"></i> Codeberg <i data-lucide="external-link" class="ml-1" aria-hidden="true"></i>
<span class="sr-only">(opens in new tab)</span>
</button> </button>
<button class="navbar-button" onclick="openSocialLink('https://linkedin.com/in/charlottecroce')"> <button class="navbar-button" onclick="openSocialLink('https://linkedin.com/in/charlottecroce')">
LinkedIn <i data-lucide="external-link" class="ml-1"></i> LinkedIn <i data-lucide="external-link" class="ml-1" aria-hidden="true"></i>
<span class="sr-only">(opens in new tab)</span>
</button> </button>
<button class="navbar-button" onclick="openSocialLink('https://hachyderm.io/@charlotte200')"> <button class="navbar-button" onclick="openSocialLink('https://hachyderm.io/@charlotte200')">
Mastodon <i data-lucide="external-link" class="ml-1"></i> Mastodon <i data-lucide="external-link" class="ml-1" aria-hidden="true"></i>
<span class="sr-only">(opens in new tab)</span>
</button> </button>
<button onclick="toggleDarkMode()" aria-label="Toggle dark mode" class="icon-button"> <button onclick="toggleDarkMode()" aria-label="Toggle dark mode" class="icon-button">
<i data-lucide="moon" id="moon-icon"></i> <i data-lucide="moon" id="moon-icon" aria-hidden="true"></i>
<i data-lucide="sun" id="sun-icon" style="display: none;"></i> <i data-lucide="sun" id="sun-icon" style="display: none;" aria-hidden="true"></i>
</button> </button>
</div> </div>
<!-- Mobile Menu Button -->
<button class="icon-button mobile-menu-toggle" onclick="toggleMobileMenu()" aria-label="Toggle menu"> <button class="icon-button mobile-menu-toggle" onclick="toggleMobileMenu()" aria-label="Toggle menu">
<i data-lucide="menu" id="menu-icon"></i> <i data-lucide="menu" id="menu-icon" aria-hidden="true"></i>
<i data-lucide="x" id="close-icon" style="display: none;"></i> <i data-lucide="x" id="close-icon" style="display: none;" aria-hidden="true"></i>
</button> </button>
</div> </div>
</header> </header>
<!-- Mobile Menu -->
<div class="mobile-menu" id="mobile-menu"> <div class="mobile-menu" id="mobile-menu">
<div class="mobile-menu-container"> <div class="mobile-menu-container">
<button class="mobile-button" onclick="openSocialLink('https://github.com/charlottecroce')"> <button class="mobile-button" onclick="openSocialLink('https://github.com/charlottecroce')">
@ -67,11 +66,8 @@
</button> </button>
</div> </div>
</div> </div>
<!-- Main Content -->
<main class="main-content"> <main class="main-content">
<div> <div>
<!-- Intro Section -->
<div class="intro-section"> <div class="intro-section">
<div class="intro-content"> <div class="intro-content">
<div class="intro-text"> <div class="intro-text">
@ -81,8 +77,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Projects Section -->
<div class="projects-section"> <div class="projects-section">
<h2 class="section-title"> <h2 class="section-title">
<span class="text-sage">Projects</span> <span class="text-sage">Projects</span>
@ -93,9 +87,11 @@
<div class="card-content"> <div class="card-content">
<h3>Champlain Tech Journals</h3> <h3>Champlain Tech Journals</h3>
<p>Notes, code, and lab write-ups from my Champlain College courses</p> <p>Notes, code, and lab write-ups from my Champlain College courses</p>
<a href="https://codeberg.org/charlottecroce/ChamplainTechJournals" target="_blank" rel="noopener noreferrer" class="source-link"> <a href="https://codeberg.org/charlottecroce/ChamplainTechJournals" target="_blank"
rel="noopener noreferrer" class="source-link">
<span>Source Code</span> <span>Source Code</span>
<i data-lucide="external-link" class="icon-small"></i> <i data-lucide="external-link" class="icon-small" aria-hidden="true"></i>
<span class="sr-only">(opens in new tab)</span>
</a> </a>
</div> </div>
</div> </div>
@ -103,9 +99,12 @@
<div class="card-content"> <div class="card-content">
<h3>Nøkken Health</h3> <h3>Nøkken Health</h3>
<p>A Flutter app to track and analyze health data</p> <p>A Flutter app to track and analyze health data</p>
<a href="https://codeberg.org/charlottecroce/nokken" target="_blank" rel="noopener noreferrer" class="source-link"> <a href="https://codeberg.org/charlottecroce/nokken" target="_blank" rel="noopener noreferrer"
class="source-link">
class="source-link">
<span>Source Code</span> <span>Source Code</span>
<i data-lucide="external-link" class="icon-small"></i> <i data-lucide="external-link" class="icon-small" aria-hidden="true"></i>
<span class="sr-only">(opens in new tab)</span>
</a> </a>
</div> </div>
</div> </div>
@ -113,84 +112,69 @@
</div> </div>
</div> </div>
</main> </main>
<!-- Footer -->
<footer class="site-footer"> <footer class="site-footer">
<div class="social-footer-links"> <div class="social-footer-links">
<a href="https://github.com/charlottecroce" target="_blank" rel="noopener noreferrer" class="footer-link">GitHub</a> <a href="https://github.com/charlottecroce" target="_blank" rel="noopener noreferrer"
class="footer-link">GitHub</a>
<span class="footer-separator">•</span> <span class="footer-separator">•</span>
<a href="https://codeberg.org/charlottecroce" target="_blank" rel="noopener noreferrer" class="footer-link">Codeberg</a> <a href="https://codeberg.org/charlottecroce" target="_blank" rel="noopener noreferrer"
class="footer-link">Codeberg</a>
<span class="footer-separator">•</span> <span class="footer-separator">•</span>
<a href="https://linkedin.com/in/charlottecroce" target="_blank" rel="noopener noreferrer" class="footer-link">LinkedIn</a> <a href="https://linkedin.com/in/charlottecroce" target="_blank" rel="noopener noreferrer"
class="footer-link">LinkedIn</a>
<span class="footer-separator">•</span> <span class="footer-separator">•</span>
<a href="https://hachyderm.io/@charlotte200" target="_blank" rel="noopener noreferrer" class="footer-link">Mastodon</a> <a href="https://hachyderm.io/@charlotte200" target="_blank" rel="noopener noreferrer"
class="footer-link">Mastodon</a>
</div> </div>
<p class="sr-only">Trans pride flag colors</p>
<p>#55CDFC#F7A8B8#FFFFFF#F7A8B8#55CDFC</p> <p>#55CDFC#F7A8B8#FFFFFF#F7A8B8#55CDFC</p>
<p>©<span id="current-year"></span> Charlotte Croce</p> <p>©<span id="current-year"></span> Charlotte Croce</p>
</footer> </footer>
</div> </div>
<script> <script>
// Initialize Lucide icons
lucide.createIcons(); lucide.createIcons();
// Set current year in footer
document.getElementById('current-year').textContent = new Date().getFullYear(); document.getElementById('current-year').textContent = new Date().getFullYear();
// Dark mode toggle
function toggleDarkMode() { function toggleDarkMode() {
const body = document.body; const body = document.body;
const isDarkMode = body.classList.toggle('dark-mode'); const isDarkMode = body.classList.toggle('dark-mode');
// Update icon visibility
document.getElementById('moon-icon').style.display = isDarkMode ? 'none' : 'block'; document.getElementById('moon-icon').style.display = isDarkMode ? 'none' : 'block';
document.getElementById('sun-icon').style.display = isDarkMode ? 'block' : 'none'; document.getElementById('sun-icon').style.display = isDarkMode ? 'block' : 'none';
document.getElementById('mobile-moon-icon').style.display = isDarkMode ? 'none' : 'block'; document.getElementById('mobile-moon-icon').style.display = isDarkMode ? 'none' : 'block';
document.getElementById('mobile-sun-icon').style.display = isDarkMode ? 'block' : 'none'; document.getElementById('mobile-sun-icon').style.display = isDarkMode ? 'block' : 'none';
// Update text
document.getElementById('dark-mode-text').textContent = isDarkMode ? 'Light Mode' : 'Dark Mode'; document.getElementById('dark-mode-text').textContent = isDarkMode ? 'Light Mode' : 'Dark Mode';
} }
// Mobile menu toggle
function toggleMobileMenu() { function toggleMobileMenu() {
const mobileMenu = document.getElementById('mobile-menu'); const mobileMenu = document.getElementById('mobile-menu');
const isOpen = mobileMenu.classList.toggle('open'); const isOpen = mobileMenu.classList.toggle('open');
// Update icon visibility
document.getElementById('menu-icon').style.display = isOpen ? 'none' : 'block'; document.getElementById('menu-icon').style.display = isOpen ? 'none' : 'block';
document.getElementById('close-icon').style.display = isOpen ? 'block' : 'none'; document.getElementById('close-icon').style.display = isOpen ? 'block' : 'none';
} }
// Open social links
function openSocialLink(url) { function openSocialLink(url) {
window.open(url, '_blank', 'noopener,noreferrer'); window.open(url, '_blank', 'noopener,noreferrer');
// Close mobile menu if open
const mobileMenu = document.getElementById('mobile-menu'); const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenu.classList.contains('open')) { if (mobileMenu.classList.contains('open')) {
toggleMobileMenu(); toggleMobileMenu();
} }
} }
// Handle mobile menu on window resize
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
const isMobile = window.innerWidth < 768; const isMobile = window.innerWidth < 768;
const mobileMenu = document.getElementById('mobile-menu'); const mobileMenu = document.getElementById('mobile-menu');
// Close mobile menu on desktop
if (!isMobile && mobileMenu.classList.contains('open')) { if (!isMobile && mobileMenu.classList.contains('open')) {
mobileMenu.classList.remove('open'); mobileMenu.classList.remove('open');
document.getElementById('menu-icon').style.display = 'block'; document.getElementById('menu-icon').style.display = 'block';
document.getElementById('close-icon').style.display = 'none'; document.getElementById('close-icon').style.display = 'none';
} }
// Show/hide mobile menu toggle button
document.querySelector('.mobile-menu-toggle').style.display = isMobile ? 'flex' : 'none'; document.querySelector('.mobile-menu-toggle').style.display = isMobile ? 'flex' : 'none';
}); });
// Initial setup
document.querySelector('.mobile-menu-toggle').style.display = window.innerWidth < 768 ? 'flex' : 'none'; document.querySelector('.mobile-menu-toggle').style.display = window.innerWidth < 768 ? 'flex' : 'none';
</script> </script>
</body> </body>
</html> </html>

46
style.css
View file

@ -545,3 +545,49 @@ button:hover {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
} }
/*
==============================================
12. Accessibility
==============================================
*/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.skip-to-content {
position: absolute;
top: -40px;
left: 0;
background: var(--color-pink-400);
color: white;
padding: 8px;
z-index: 2000;
transition: top 0.2s;
}
.skip-to-content:focus {
top: 0;
}
/* Focus states */
a:focus, button:focus {
outline: 3px solid var(--color-pink-300);
outline-offset: 2px;
}
/* Better keyboard navigation */
a:focus-visible, button:focus-visible {
outline: 3px solid var(--color-pink-300);
outline-offset: 2px;
}