Compare commits
10 commits
a20e64ed70
...
0d41abbddf
| Author | SHA1 | Date | |
|---|---|---|---|
|
0d41abbddf | ||
|
|
294b80d468 | ||
|
|
8efa9abcc8 | ||
|
|
45ef5a1a64 | ||
|
|
d1f04364a7 | ||
|
|
9ebc817540 | ||
|
|
22bafb2578 | ||
|
|
860d581deb | ||
|
|
9d9af420e6 | ||
|
|
f8b2090a74 |
6 changed files with 894 additions and 762 deletions
51
.github/workflows/deploy.yml
vendored
51
.github/workflows/deploy.yml
vendored
|
|
@ -1,51 +0,0 @@
|
|||
name: Deploy to GitHub Pages
|
||||
|
||||
on:
|
||||
# Trigger deployment on push to main branch
|
||||
push:
|
||||
branches: [ main ]
|
||||
# Allow manual trigger from Actions tab
|
||||
workflow_dispatch:
|
||||
|
||||
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
# Only allow one concurrent deployment
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
# Build job
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Create .nojekyll file
|
||||
run: touch .nojekyll
|
||||
|
||||
- name: Setup Pages
|
||||
uses: actions/configure-pages@v4
|
||||
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
# Upload entire repository
|
||||
path: '.'
|
||||
|
||||
# Deployment job
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
runs-on: ubuntu-latest
|
||||
needs: build
|
||||
steps:
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
1
CNAME
1
CNAME
|
|
@ -1 +0,0 @@
|
|||
charlotte.sh
|
||||
230
index.html
230
index.html
|
|
@ -4,177 +4,111 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Charlotte Croce - Cybersecurity student and developer">
|
||||
<title>Charlotte Croce - ./charlotte.sh</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="#main-content" class="skip-to-content">Skip to main content</a>
|
||||
<div class="app-container">
|
||||
<header class="navbar">
|
||||
<div class="navbar-container">
|
||||
<div class="navbar-logo">
|
||||
./charlotte.sh
|
||||
</div>
|
||||
<div class="navbar-links">
|
||||
<button class="navbar-button" onclick="openSocialLink('https://github.com/charlottecroce')">
|
||||
GitHub <i data-lucide="external-link" class="ml-1" aria-hidden="true"></i>
|
||||
<span class="sr-only">(opens in new tab)</span>
|
||||
</button>
|
||||
<button class="navbar-button" onclick="openSocialLink('https://codeberg.org/charlottecroce')">
|
||||
Codeberg <i data-lucide="external-link" class="ml-1" aria-hidden="true"></i>
|
||||
<span class="sr-only">(opens in new tab)</span>
|
||||
</button>
|
||||
<button class="navbar-button" onclick="openSocialLink('https://linkedin.com/in/charlottecroce')">
|
||||
LinkedIn <i data-lucide="external-link" class="ml-1" aria-hidden="true"></i>
|
||||
<span class="sr-only">(opens in new tab)</span>
|
||||
</button>
|
||||
<button class="navbar-button" onclick="openSocialLink('https://hachyderm.io/@charlotte200')">
|
||||
Mastodon <i data-lucide="external-link" class="ml-1" aria-hidden="true"></i>
|
||||
<span class="sr-only">(opens in new tab)</span>
|
||||
</button>
|
||||
<button onclick="toggleDarkMode()" aria-label="Toggle dark mode" class="icon-button">
|
||||
<i data-lucide="moon" id="moon-icon" aria-hidden="true"></i>
|
||||
<i data-lucide="sun" id="sun-icon" style="display: none;" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<button class="icon-button mobile-menu-toggle" onclick="toggleMobileMenu()" aria-label="Toggle menu">
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
|
||||
<header>
|
||||
<nav aria-label="Main navigation">
|
||||
<div class="container">
|
||||
<a href="/" class="logo">./charlotte.sh</a>
|
||||
|
||||
<button class="menu-toggle" aria-expanded="false" aria-controls="primary-menu" aria-label="Toggle menu">
|
||||
<i data-lucide="menu" id="menu-icon" aria-hidden="true"></i>
|
||||
<i data-lucide="x" id="close-icon" style="display: none;" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links" id="primary-menu">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/resume.html" aria-current="page">Resume</a></li>
|
||||
<li><a href="https://github.com/charlottecroce" target="_blank" rel="noopener noreferrer">GitHub <i
|
||||
data-lucide="external-link" class="icon-small" aria-hidden="true"></i><span
|
||||
class="visually-hidden">(opens in new tab)</span></a></li>
|
||||
<li><a href="https://git.charlotte.sh/lotte" target="_blank" rel="noopener noreferrer">Forgejo <i
|
||||
data-lucide="external-link" class="icon-small" aria-hidden="true"></i><span
|
||||
class="visually-hidden">(opens in new tab)</span></a></li>
|
||||
<li><a href="https://linkedin.com/in/charlottecroce" target="_blank" rel="noopener noreferrer">LinkedIn <i
|
||||
data-lucide="external-link" class="icon-small" aria-hidden="true"></i><span
|
||||
class="visually-hidden">(opens in new tab)</span></a></li>
|
||||
<li>
|
||||
<button class="theme-toggle" aria-label="Toggle dark mode">
|
||||
<i data-lucide="moon" id="moon-icon" aria-hidden="true"></i>
|
||||
<i data-lucide="sun" id="sun-icon" style="display: none;" aria-hidden="true"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="mobile-menu" id="mobile-menu">
|
||||
<div class="mobile-menu-container">
|
||||
<button class="mobile-button" onclick="openSocialLink('https://github.com/charlottecroce')">
|
||||
GitHub
|
||||
</button>
|
||||
<button class="mobile-button" onclick="openSocialLink('https://codeberg.org/charlottecroce')">
|
||||
Codeberg
|
||||
</button>
|
||||
<button class="mobile-button" onclick="openSocialLink('https://linkedin.com/in/charlottecroce')">
|
||||
LinkedIn
|
||||
</button>
|
||||
<button class="mobile-button" onclick="openSocialLink('https://hachyderm.io/@charlotte200')">
|
||||
Mastodon
|
||||
</button>
|
||||
<button onclick="toggleDarkMode()" class="mobile-button mobile-button-with-icon">
|
||||
<i data-lucide="moon" class="icon-left" id="mobile-moon-icon"></i>
|
||||
<i data-lucide="sun" class="icon-left" id="mobile-sun-icon" style="display: none;"></i>
|
||||
<span id="dark-mode-text">Dark Mode</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<main class="main-content">
|
||||
<div>
|
||||
<div class="intro-section">
|
||||
<div class="intro-content">
|
||||
<div class="intro-text">
|
||||
|
||||
<main id="main-content">
|
||||
<div class="container">
|
||||
<section class="intro">
|
||||
<h1>Hi! I'm Charlotte</h1>
|
||||
<p class="text-xl">I put stuff here</p>
|
||||
<p class="text-lg">something else</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="projects-section">
|
||||
<h2 class="section-title">
|
||||
<span class="text-sage">Projects</span>
|
||||
<span class="title-line"></span>
|
||||
</h2>
|
||||
<div class="projects-grid">
|
||||
<div class="project-card">
|
||||
<div class="card-content">
|
||||
<h2>About Me</h2>
|
||||
<p>I'm a cybersecurity student from the Northeast USA. I do security engineering at the Leahy Center in
|
||||
Burlington, VT.</p>
|
||||
<p>You can find most of my coding projects at <a href="https://git.charlotte.sh/lotte" target="_blank"
|
||||
rel="noopener noreferrer">git.charlotte.sh<i data-lucide="external-link" class="icon-small"
|
||||
aria-hidden="true"></i><span class="visually-hidden">(opens in new tab)</span></a></p>
|
||||
</section>
|
||||
|
||||
<section class="projects">
|
||||
<h2>My Projects</h2>
|
||||
<div class="project-grid">
|
||||
|
||||
<article class="project">
|
||||
<h3>Fylgja SOC</h3>
|
||||
<p>A domain-specific language (DSL) for managing an ELK SIEM. Includes a CLI and SlackBot interface</p>
|
||||
<a href="https://git.charlotte.sh/lotte/fylgja" target="_blank"
|
||||
rel="noopener noreferrer">Source Code<i data-lucide="external-link" class="icon-small"
|
||||
aria-hidden="true"></i><span class="visually-hidden">(opens in new tab)</span></a>
|
||||
</article>
|
||||
|
||||
<article class="project">
|
||||
<h3>Champlain Tech Journals</h3>
|
||||
<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">
|
||||
<span>Source Code</span>
|
||||
<i data-lucide="external-link" class="icon-small" aria-hidden="true"></i>
|
||||
<span class="sr-only">(opens in new tab)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-card">
|
||||
<div class="card-content">
|
||||
rel="noopener noreferrer">Source Code<i data-lucide="external-link" class="icon-small"
|
||||
aria-hidden="true"></i><span class="visually-hidden">(opens in new tab)</span></a>
|
||||
</article>
|
||||
|
||||
<article class="project">
|
||||
<h3>Nøkken Health</h3>
|
||||
<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">
|
||||
class="source-link">
|
||||
<span>Source Code</span>
|
||||
<i data-lucide="external-link" class="icon-small" aria-hidden="true"></i>
|
||||
<span class="sr-only">(opens in new tab)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://git.charlotte.sh/lotte/nokken" target="_blank" rel="noopener noreferrer">Source Code<i
|
||||
data-lucide="external-link" class="icon-small" aria-hidden="true"></i><span
|
||||
class="visually-hidden">(opens in new tab)</span></a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="site-footer">
|
||||
<div class="social-footer-links">
|
||||
<a href="https://github.com/charlottecroce" target="_blank" rel="noopener noreferrer"
|
||||
class="footer-link">GitHub</a>
|
||||
<span class="footer-separator">•</span>
|
||||
<a href="https://codeberg.org/charlottecroce" target="_blank" rel="noopener noreferrer"
|
||||
class="footer-link">Codeberg</a>
|
||||
<span class="footer-separator">•</span>
|
||||
<a href="https://linkedin.com/in/charlottecroce" target="_blank" rel="noopener noreferrer"
|
||||
class="footer-link">LinkedIn</a>
|
||||
<span class="footer-separator">•</span>
|
||||
<a href="https://hachyderm.io/@charlotte200" target="_blank" rel="noopener noreferrer"
|
||||
class="footer-link">Mastodon</a>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<ul class="social-links">
|
||||
<li><a href="https://github.com/charlottecroce" target="_blank" rel="noopener noreferrer">GitHub</a></li>
|
||||
<li><a href="https://codeberg.org/charlottecroce" target="_blank" rel="noopener noreferrer">Codeberg</a></li>
|
||||
<li><a href="https://git.charlotte.sh/lotte" target="_blank" rel="noopener noreferrer">Forgejo</a></li>
|
||||
<li><a href="https://linkedin.com/in/charlottecroce" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
|
||||
<li><a href="https://hachyderm.io/@charlotte200" target="_blank" rel="noopener noreferrer me">Mastodon</a></li>
|
||||
<li><a href="https://bookwyrm.social/user/lottie" target="_blank" rel="noopener noreferrer">BookWyrm</a></li>
|
||||
</ul>
|
||||
<p>©<span id="current-year"></span> Charlotte Croce</p>
|
||||
<p class="theme-note">If you like the colors of this website, check out my <a
|
||||
href="https://marketplace.visualstudio.com/items?itemName=charlotte-dev.fruitbasket-theme" target="_blank"
|
||||
rel="noopener noreferrer">VS Code Theme<i data-lucide="external-link" class="icon-small"
|
||||
aria-hidden="true"></i><span class="visually-hidden">(opens in new tab)</span></a></p>
|
||||
</div>
|
||||
<p class="sr-only">Trans pride flag colors</p>
|
||||
<p>#55CDFC#F7A8B8#FFFFFF#F7A8B8#55CDFC</p>
|
||||
<p>©<span id="current-year"></span> Charlotte Croce</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
document.getElementById('current-year').textContent = new Date().getFullYear();
|
||||
|
||||
function toggleDarkMode() {
|
||||
const body = document.body;
|
||||
const isDarkMode = body.classList.toggle('dark-mode');
|
||||
document.getElementById('moon-icon').style.display = isDarkMode ? 'none' : 'block';
|
||||
document.getElementById('sun-icon').style.display = isDarkMode ? 'block' : 'none';
|
||||
document.getElementById('mobile-moon-icon').style.display = isDarkMode ? 'none' : 'block';
|
||||
document.getElementById('mobile-sun-icon').style.display = isDarkMode ? 'block' : 'none';
|
||||
document.getElementById('dark-mode-text').textContent = isDarkMode ? 'Light Mode' : 'Dark Mode';
|
||||
}
|
||||
|
||||
function toggleMobileMenu() {
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const isOpen = mobileMenu.classList.toggle('open');
|
||||
document.getElementById('menu-icon').style.display = isOpen ? 'none' : 'block';
|
||||
document.getElementById('close-icon').style.display = isOpen ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function openSocialLink(url) {
|
||||
window.open(url, '_blank', 'noopener,noreferrer');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
if (mobileMenu.classList.contains('open')) {
|
||||
toggleMobileMenu();
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
const isMobile = window.innerWidth < 768;
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
if (!isMobile && mobileMenu.classList.contains('open')) {
|
||||
mobileMenu.classList.remove('open');
|
||||
document.getElementById('menu-icon').style.display = 'block';
|
||||
document.getElementById('close-icon').style.display = 'none';
|
||||
}
|
||||
document.querySelector('.mobile-menu-toggle').style.display = isMobile ? 'flex' : 'none';
|
||||
});
|
||||
|
||||
document.querySelector('.mobile-menu-toggle').style.display = window.innerWidth < 768 ? 'flex' : 'none';
|
||||
</script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
179
resume.html
Normal file
179
resume.html
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Charlotte Croce - Resume">
|
||||
<title>Resume - Charlotte Croce</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
|
||||
<header>
|
||||
<nav aria-label="Main navigation">
|
||||
<div class="container">
|
||||
<a href="/" class="logo">./charlotte.sh</a>
|
||||
|
||||
<button class="menu-toggle" aria-expanded="false" aria-controls="primary-menu" aria-label="Toggle menu">
|
||||
<i data-lucide="menu" id="menu-icon" aria-hidden="true"></i>
|
||||
<i data-lucide="x" id="close-icon" style="display: none;" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links" id="primary-menu">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/resume.html" aria-current="page">Resume</a></li>
|
||||
<li><a href="https://github.com/charlottecroce" target="_blank" rel="noopener noreferrer">GitHub <i
|
||||
data-lucide="external-link" class="icon-small" aria-hidden="true"></i><span
|
||||
class="visually-hidden">(opens in new tab)</span></a></li>
|
||||
<li><a href="https://codeberg.org/charlottecroce" target="_blank" rel="noopener noreferrer">Codeberg <i
|
||||
data-lucide="external-link" class="icon-small" aria-hidden="true"></i><span
|
||||
class="visually-hidden">(opens in new tab)</span></a></li>
|
||||
<li><a href="https://linkedin.com/in/charlottecroce" target="_blank" rel="noopener noreferrer">LinkedIn <i
|
||||
data-lucide="external-link" class="icon-small" aria-hidden="true"></i><span
|
||||
class="visually-hidden">(opens in new tab)</span></a></li>
|
||||
<li>
|
||||
<button class="theme-toggle" aria-label="Toggle dark mode">
|
||||
<i data-lucide="moon" id="moon-icon" aria-hidden="true"></i>
|
||||
<i data-lucide="sun" id="sun-icon" style="display: none;" aria-hidden="true"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<div class="container">
|
||||
<section class="intro">
|
||||
<div class="resume-header">
|
||||
<h1>Charlotte Croce</h1>
|
||||
<div class="contact-info">
|
||||
<span>Burlington, VT (Open to Relocation)</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="resume-section">
|
||||
<h2>Education</h2>
|
||||
<div class="education-item">
|
||||
<div class="education-header">
|
||||
<h3>Champlain College</h3>
|
||||
<span class="location">Burlington, VT</span>
|
||||
</div>
|
||||
<div class="education-header">
|
||||
<div class="degree">Bachelor of Science in Computer Networking and Cybersecurity</div>
|
||||
<span class="date">Class of 2027</span>
|
||||
</div>
|
||||
<div class="gpa">GPA: 3.97/4.0</div>
|
||||
<div class="coursework">
|
||||
<strong>Relevant Coursework:</strong> Network Security Controls, Web & Application Security, Database
|
||||
Security, System Administration for Enterprise and Distributed Systems, Automation & Scripting
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="resume-section">
|
||||
<h2>Experience</h2>
|
||||
<div class="experience-item">
|
||||
<div class="experience-header">
|
||||
<h3>The Leahy Center</h3>
|
||||
<span class="location">Burlington, VT</span>
|
||||
</div>
|
||||
<div class="experience-header">
|
||||
<div class="job-title">Security Engineer</div>
|
||||
<span class="date">Jan 2024 — Present</span>
|
||||
</div>
|
||||
<ul class="bullet-list">
|
||||
<li>Maintained SIEM infrastructure, ensured uptime, and automated security operations</li>
|
||||
<li>Optimized a threat detection engine to expand security coverage while reducing false positives
|
||||
</li>
|
||||
<li>Developed an Elastic Stack dev environment for feature testing</li>
|
||||
<li>Collaborated with analysts on alert response</li>
|
||||
</ul>
|
||||
<div class="experience-header">
|
||||
<div class="job-title">SOC Intern</div>
|
||||
<span class="date">Oct 2023 — Dec 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="resume-section">
|
||||
<h2>Certifications</h2>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-category">CompTIA CySA+</div>
|
||||
<div class="skill-category">CompTIA Security+</div>
|
||||
<div class="skill-category">CompTIA A+</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="resume-section">
|
||||
<h2>Skills</h2>
|
||||
|
||||
<h3 class="skill-heading">Systems & Infrastructure</h3>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-category">Active Directory</div>
|
||||
<div class="skill-category">Debian Linux</div>
|
||||
<div class="skill-category">Docker</div>
|
||||
<div class="skill-category">RHEL Linux</div>
|
||||
<div class="skill-category">VMWare</div>
|
||||
<div class="skill-category">Windows Server</div>
|
||||
</div>
|
||||
|
||||
<h3 class="skill-heading">Security Tools & Frameworks</h3>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-category">Elastic Stack</div>
|
||||
<div class="skill-category">Firewalls</div>
|
||||
<div class="skill-category">PKI</div>
|
||||
<div class="skill-category">SIEM</div>
|
||||
<div class="skill-category">Wireshark</div>
|
||||
</div>
|
||||
|
||||
<h3 class="skill-heading">Networking</h3>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-category">VyOS</div>
|
||||
</div>
|
||||
|
||||
<h3 class="skill-heading">Programming & Scripting</h3>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-category">Ansible</div>
|
||||
<div class="skill-category">Bash</div>
|
||||
<div class="skill-category">Java</div>
|
||||
<div class="skill-category">JavaScript</div>
|
||||
<div class="skill-category">PowerShell</div>
|
||||
<div class="skill-category">Python</div>
|
||||
<div class="skill-category">SQL</div>
|
||||
</div>
|
||||
|
||||
<h3 class="skill-heading">Project Management</h3>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-category">Git / GitHub</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<ul class="social-links">
|
||||
<li><a href="https://github.com/charlottecroce" target="_blank" rel="noopener noreferrer">GitHub</a></li>
|
||||
<li><a href="https://codeberg.org/charlottecroce" target="_blank" rel="noopener noreferrer">Codeberg</a></li>
|
||||
<li><a href="https://linkedin.com/in/charlottecroce" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
|
||||
<li><a href="https://hachyderm.io/@charlotte200" target="_blank" rel="noopener noreferrer me">Mastodon</a></li>
|
||||
<li><a href="https://bookwyrm.social/user/lottie" target="_blank" rel="noopener noreferrer">BookWyrm</a></li>
|
||||
</ul>
|
||||
<p>©<span id="current-year"></span> Charlotte Croce</p>
|
||||
<p class="theme-note">If you like the colors of this website, check out my <a
|
||||
href="https://marketplace.visualstudio.com/items?itemName=charlotte-dev.fruitbasket-theme" target="_blank"
|
||||
rel="noopener noreferrer">VS Code Theme<i data-lucide="external-link" class="icon-small"
|
||||
aria-hidden="true"></i><span class="visually-hidden">(opens in new tab)</span></a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
49
script.js
Normal file
49
script.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
// Initialize Lucide icons
|
||||
lucide.createIcons();
|
||||
|
||||
// Update copyright year
|
||||
document.getElementById('current-year').textContent = new Date().getFullYear();
|
||||
|
||||
// Theme toggle
|
||||
const themeToggle = document.querySelector('.theme-toggle');
|
||||
const moonIcon = document.getElementById('moon-icon');
|
||||
const sunIcon = document.getElementById('sun-icon');
|
||||
|
||||
// Check for saved preference
|
||||
if (localStorage.getItem('darkMode') === 'true') {
|
||||
document.body.classList.add('dark-mode');
|
||||
moonIcon.style.display = 'none';
|
||||
sunIcon.style.display = 'block';
|
||||
}
|
||||
|
||||
themeToggle.addEventListener('click', () => {
|
||||
document.body.classList.toggle('dark-mode');
|
||||
const isDark = document.body.classList.contains('dark-mode');
|
||||
moonIcon.style.display = isDark ? 'none' : 'block';
|
||||
sunIcon.style.display = isDark ? 'block' : 'none';
|
||||
localStorage.setItem('darkMode', isDark ? 'true' : 'false');
|
||||
});
|
||||
|
||||
// Mobile menu
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
const menuIcon = document.getElementById('menu-icon');
|
||||
const closeIcon = document.getElementById('close-icon');
|
||||
|
||||
menuToggle.addEventListener('click', () => {
|
||||
const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
|
||||
menuToggle.setAttribute('aria-expanded', !isExpanded);
|
||||
navLinks.classList.toggle('menu-open');
|
||||
menuIcon.style.display = isExpanded ? 'block' : 'none';
|
||||
closeIcon.style.display = isExpanded ? 'none' : 'block';
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!event.target.closest('.menu-toggle') && !event.target.closest('.nav-links') && navLinks.classList.contains('menu-open')) {
|
||||
navLinks.classList.remove('menu-open');
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
menuIcon.style.display = 'block';
|
||||
closeIcon.style.display = 'none';
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue