5-30. nextJS
This commit is contained in:
Charlotte Croce
parent
432a72b2f2
commit
93f8c057b6
51 changed files with 8939 additions and 372 deletions
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.next
|
||||
node_modules
|
||||
out
|
||||
build
|
||||
70
README.md
Normal file
70
README.md
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
113
index.html
113
index.html
|
|
@ -1,113 +0,0 @@
|
|||
<!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 - 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-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="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" 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>
|
||||
<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">
|
||||
<h1>Hi! I'm Charlotte</h1>
|
||||
<h2>About Me</h2>
|
||||
<p>I'm a cybersecurity student from the Northeast USA. I currently work as a security engineer at the Leahy
|
||||
Center in
|
||||
Burlington, VT.</p>
|
||||
<p>Most of my coding projects are hosted on my Forgejo server at <a href="https://git.charlotte.sh/"
|
||||
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>
|
||||
<p>Hiring? you can my find my resume <a href="resume.html">here</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://git.charlotte.sh/lotte/ChamplainTechJournals" 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>Nøkken Health</h3>
|
||||
<p>A Flutter app to track and analyze health data</p>
|
||||
<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>
|
||||
<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://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>
|
||||
<li><a href="https://rss.charlotte.sh" target="_blank" rel="noopener noreferrer"><i data-lucide="rss" class="icon-small" aria-hidden="true"></i><span class="visually-hidden">FreshRSS</span></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>
|
||||
6
next-env.d.ts
vendored
Normal file
6
next-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
/// <reference types="next/navigation-types/compat/navigation" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
17
next.config.js
Normal file
17
next.config.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
output: 'export',
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: '**',
|
||||
},
|
||||
],
|
||||
},
|
||||
experimental: {
|
||||
optimizeCss: true,
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
7352
package-lock.json
generated
Normal file
7352
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
30
package.json
Normal file
30
package.json
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"name": "charlotte-portfolio",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.454.0",
|
||||
"next": "15.3.1",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22",
|
||||
"@types/react": "^18.3.0",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.18.0",
|
||||
"eslint-config-next": "15.3.1",
|
||||
"critters": "^0.0.25",
|
||||
"postcss": "^8.4.49",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.7.3"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
43
public/index.html
Normal file
43
public/index.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Charlotte Croce's personal website"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>charlotte.sh</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/logo192.png
Normal file
BIN
public/logo192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
public/logo512.png
Normal file
BIN
public/logo512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
25
public/manifest.json
Normal file
25
public/manifest.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
3
public/robots.txt
Normal file
3
public/robots.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
177
resume.html
177
resume.html
|
|
@ -1,177 +0,0 @@
|
|||
<!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="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" 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>
|
||||
|
||||
<main id="main-content">
|
||||
<div class="container">
|
||||
<section class="intro">
|
||||
<div class="resume-header">
|
||||
<h1>Charlotte Croce</h1>
|
||||
<div class="contact-info">
|
||||
</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://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>
|
||||
<li><a href="https://rss.charlotte.sh" target="_blank" rel="noopener noreferrer"><i data-lucide="rss" class="icon-small" aria-hidden="true"></i><span class="visually-hidden">FreshRSS</span></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
49
script.js
|
|
@ -1,49 +0,0 @@
|
|||
// 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';
|
||||
}
|
||||
});
|
||||
188
src/App.js
Normal file
188
src/App.js
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
// Import pages
|
||||
import HomePage from './pages/HomePage';
|
||||
import { Sun, Moon, Menu, X, ExternalLink } from 'lucide-react';
|
||||
|
||||
/*
|
||||
==============================================
|
||||
Main App Component
|
||||
==============================================
|
||||
*/
|
||||
const App = () => {
|
||||
/*
|
||||
==============================================
|
||||
State Management
|
||||
==============================================
|
||||
*/
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
|
||||
|
||||
/*
|
||||
==============================================
|
||||
Effects
|
||||
==============================================
|
||||
*/
|
||||
// Handle dark mode
|
||||
useEffect(() => {
|
||||
if (darkMode) {
|
||||
document.body.classList.add('dark-mode');
|
||||
} else {
|
||||
document.body.classList.remove('dark-mode');
|
||||
}
|
||||
}, [darkMode]);
|
||||
|
||||
// Add resize listener to handle responsive behavior
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
const mobile = window.innerWidth < 768;
|
||||
setIsMobile(mobile);
|
||||
|
||||
// Close mobile menu on desktop
|
||||
if (!mobile && mobileMenuOpen) {
|
||||
setMobileMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, [mobileMenuOpen]);
|
||||
|
||||
/*
|
||||
==============================================
|
||||
Event Handlers
|
||||
==============================================
|
||||
*/
|
||||
const toggleDarkMode = () => {
|
||||
setDarkMode(!darkMode);
|
||||
};
|
||||
|
||||
// Function to open social links
|
||||
const openSocialLink = (url) => {
|
||||
window.open(url, '_blank', 'noopener,noreferrer');
|
||||
};
|
||||
|
||||
// Social links data
|
||||
const socialLinks = [
|
||||
{ name: 'GitHub', url: 'https://github.com/charlottecroce' },
|
||||
{ name: 'Codeberg', url: 'https://codeberg.org/charlottecroce' },
|
||||
{ name: 'LinkedIn', url: 'https://linkedin.com/in/charlottecroce' },
|
||||
{ name: 'Mastodon', url: 'https://hachyderm.io/@charlotte200' }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="app-container">
|
||||
{/*
|
||||
==============================================
|
||||
Navbar
|
||||
==============================================
|
||||
*/}
|
||||
<header className="navbar">
|
||||
<div className="navbar-container">
|
||||
<div className="navbar-logo">
|
||||
./charlotte.sh
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation Links */}
|
||||
<div className="navbar-links">
|
||||
{socialLinks.map((link) => (
|
||||
<button
|
||||
key={link.name}
|
||||
onClick={() => openSocialLink(link.url)}
|
||||
className="navbar-button"
|
||||
>
|
||||
{link.name} <ExternalLink size={16} className="ml-1" />
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={toggleDarkMode}
|
||||
aria-label={darkMode ? "Switch to light mode" : "Switch to dark mode"}
|
||||
className="icon-button"
|
||||
>
|
||||
{darkMode ? <Sun size={18} /> : <Moon size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className="icon-button mobile-menu-toggle"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
|
||||
style={{ display: isMobile ? 'flex' : 'none' }}
|
||||
>
|
||||
{mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/*
|
||||
==============================================
|
||||
Mobile Menu
|
||||
==============================================
|
||||
*/}
|
||||
<div className={`mobile-menu ${mobileMenuOpen && isMobile ? 'open' : ''}`}>
|
||||
<div className="mobile-menu-container">
|
||||
{/* Social Links for Mobile */}
|
||||
{socialLinks.map((link) => (
|
||||
<button
|
||||
key={link.name}
|
||||
onClick={() => {
|
||||
openSocialLink(link.url);
|
||||
setMobileMenuOpen(false);
|
||||
}}
|
||||
className="mobile-button"
|
||||
>
|
||||
{link.name}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={toggleDarkMode}
|
||||
className="mobile-button mobile-button-with-icon"
|
||||
>
|
||||
{darkMode ?
|
||||
<Sun size={18} className="icon-left" /> :
|
||||
<Moon size={18} className="icon-left" />
|
||||
}
|
||||
{darkMode ? 'Light Mode' : 'Dark Mode'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*
|
||||
==============================================
|
||||
Main Content
|
||||
==============================================
|
||||
*/}
|
||||
<main className="main-content">
|
||||
<HomePage />
|
||||
</main>
|
||||
|
||||
{/*
|
||||
==============================================
|
||||
Footer
|
||||
==============================================
|
||||
*/}
|
||||
<footer className="site-footer">
|
||||
<div className="social-footer-links" style={{ marginBottom: '16px' }}>
|
||||
{socialLinks.map((link, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{index > 0 && <span style={{ margin: '0 8px' }}>•</span>}
|
||||
<a
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="footer-link"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
<p>©{new Date().getFullYear()} Charlotte Croce • Made with React JS & Codeberg Pages</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
/* CSS Variables */
|
||||
:root {
|
||||
/* Pink palette */
|
||||
--pink-50: #FFF0F5;
|
||||
--pink-100: #FFE0EB;
|
||||
--pink-200: #FFB8D9;
|
||||
|
|
@ -8,24 +6,20 @@
|
|||
--pink-400: #F45D9E;
|
||||
--pink-500: #D23B80;
|
||||
|
||||
/* Sage palette */
|
||||
--sage-200: #D4E6D5;
|
||||
--sage-300: #B5D4B7;
|
||||
--sage-400: #8AB68C;
|
||||
--sage-500: #6A9A6C;
|
||||
|
||||
/* Neutral palette */
|
||||
--cream-50: #FFFEF5;
|
||||
--cream-100: #FFF9F0;
|
||||
|
||||
/* Semantic colors */
|
||||
--text: #4a4a4a;
|
||||
--bg-primary: var(--pink-50);
|
||||
--bg-secondary: white;
|
||||
--accent-primary: var(--pink-400);
|
||||
--accent-secondary: var(--sage-400);
|
||||
|
||||
/* Spacing */
|
||||
--space-xs: 0.25rem;
|
||||
--space-sm: 0.5rem;
|
||||
--space-md: 1rem;
|
||||
|
|
@ -33,14 +27,10 @@
|
|||
--space-xl: 2rem;
|
||||
--space-xxl: 3rem;
|
||||
|
||||
/* Container */
|
||||
--container-max: 1200px;
|
||||
|
||||
/* Animation */
|
||||
--transition: 0.2s ease;
|
||||
}
|
||||
|
||||
/* Reset */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
|
|
@ -49,7 +39,6 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', sans-serif;
|
||||
line-height: 1.6;
|
||||
|
|
@ -68,7 +57,6 @@ body {
|
|||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
|
|
@ -96,7 +84,6 @@ body {
|
|||
border: 0;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
|
|
@ -135,13 +122,11 @@ a:focus {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
:focus {
|
||||
outline: 3px solid var(--pink-300);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
/* Header & Navigation */
|
||||
header {
|
||||
background-color: var(--bg-primary);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -239,7 +224,6 @@ nav .container {
|
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
main {
|
||||
flex: 1;
|
||||
padding: var(--space-xxl) 0;
|
||||
|
|
@ -318,7 +302,6 @@ main {
|
|||
margin-left: var(--space-xs);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background-color: var(--pink-100);
|
||||
padding: var(--space-xl);
|
||||
|
|
@ -345,7 +328,6 @@ footer {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
.dark-mode {
|
||||
--pink-50: #3A2A35;
|
||||
--pink-100: #59354B;
|
||||
|
|
@ -365,7 +347,6 @@ footer {
|
|||
background: linear-gradient(to right, var(--pink-400), transparent);
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.menu-toggle {
|
||||
display: flex;
|
||||
|
|
@ -430,10 +411,6 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Resume header and contact info */
|
||||
.resume-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -448,7 +425,6 @@ footer {
|
|||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Resume sections */
|
||||
.resume-section {
|
||||
background-color: var(--bg-secondary);
|
||||
border-radius: 0.75rem;
|
||||
|
|
@ -481,7 +457,6 @@ footer {
|
|||
background: linear-gradient(to right, var(--pink-400), transparent);
|
||||
}
|
||||
|
||||
/* Education and experience items */
|
||||
.education-item,
|
||||
.experience-item {
|
||||
margin-bottom: var(--space-lg);
|
||||
|
|
@ -528,7 +503,6 @@ footer {
|
|||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
/* Skills grid */
|
||||
.skills-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
|
|
@ -547,7 +521,6 @@ footer {
|
|||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
body {
|
||||
background-color: white;
|
||||
|
|
@ -577,7 +550,6 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
/* Skill category headings */
|
||||
.skill-heading {
|
||||
font-size: 1.1rem;
|
||||
color: var(--accent-primary);
|
||||
|
|
@ -587,19 +559,15 @@ footer {
|
|||
padding-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
/* Make the first skill heading not have extra top margin */
|
||||
.skill-heading:first-of-type {
|
||||
margin-top: 0;
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
/* Dark mode styling for skill headings */
|
||||
.dark-mode .skill-heading {
|
||||
border-bottom-color: var(--pink-300);
|
||||
}
|
||||
|
||||
/* Responsive adjustments for resume */
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.education-header,
|
||||
.experience-header {
|
||||
flex-direction: column;
|
||||
|
|
@ -612,4 +580,8 @@ footer {
|
|||
.skills-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
26
src/app/layout.tsx
Normal file
26
src/app/layout.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
'use client';
|
||||
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { Header } from '@/components/Header/Header';
|
||||
import { Footer } from '@/components/Footer/Footer';
|
||||
import './globals.css';
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
const isWorkoutPage = pathname?.startsWith('/workouts');
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<a href="#main-content" className="skip-link">Skip to main content</a>
|
||||
<Header />
|
||||
<main id="main-content">{children}</main>
|
||||
{!isWorkoutPage && <Footer />}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
26
src/app/page.tsx
Normal file
26
src/app/page.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import Link from 'next/link';
|
||||
import { ProjectCard } from '@/components/ProjectCard/ProjectCard';
|
||||
import { projects } from '@/data/projects';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="container">
|
||||
<section className="intro">
|
||||
<h1>Hi! I'm Charlotte</h1>
|
||||
<h2>About Me</h2>
|
||||
<p>I'm a cybersecurity student from the Northeast USA. I currently work as a security engineer at the Leahy Center in Burlington, VT.</p>
|
||||
<p>Most of my coding projects are hosted on my Forgejo server at <a href="https://git.charlotte.sh/" target="_blank" rel="noopener noreferrer">git.charlotte.sh</a></p>
|
||||
<p>Hiring? you can find my resume <Link href="/resume">here</Link></p>
|
||||
</section>
|
||||
|
||||
<section className="projects">
|
||||
<h2>My Projects</h2>
|
||||
<div className="project-grid">
|
||||
{projects.map((project) => (
|
||||
<ProjectCard key={project.id} project={project} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
0
src/app/providers.tsx
Normal file
0
src/app/providers.tsx
Normal file
25
src/app/resume/page.tsx
Normal file
25
src/app/resume/page.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import type { Metadata } from 'next';
|
||||
import { ResumeHeader } from '@/components/Resume/ResumeHeader';
|
||||
import { EducationSection } from '@/components/Resume/EducationSection';
|
||||
import { ExperienceSection } from '@/components/Resume/ExperienceSection';
|
||||
import { CertificationsSection } from '@/components/Resume/CertificationsSection';
|
||||
import { SkillsSection } from '@/components/Resume/SkillsSection';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Resume - Charlotte Croce',
|
||||
description: 'Charlotte Croce - Resume',
|
||||
};
|
||||
|
||||
export default function Resume() {
|
||||
return (
|
||||
<div className="container">
|
||||
<section className="intro">
|
||||
<ResumeHeader />
|
||||
</section>
|
||||
<EducationSection />
|
||||
<ExperienceSection />
|
||||
<CertificationsSection />
|
||||
<SkillsSection />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
src/components/AnimationStyle.js
Normal file
19
src/components/AnimationStyle.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import React from "react";
|
||||
|
||||
// Simplified animations
|
||||
const AnimationStyle = () => {
|
||||
return (
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
`}} />
|
||||
);
|
||||
};
|
||||
|
||||
export default AnimationStyle;
|
||||
35
src/components/Footer/Footer.tsx
Normal file
35
src/components/Footer/Footer.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { ExternalLink, Rss } from 'lucide-react';
|
||||
import { footerLinks } from '@/data/social';
|
||||
|
||||
export function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<footer>
|
||||
<div className="container">
|
||||
<ul className="social-links">
|
||||
{footerLinks.map((link) => (
|
||||
<li key={link.name}>
|
||||
<a href={link.url} target="_blank" rel="noopener noreferrer">
|
||||
{link.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p>©{currentYear} Charlotte Croce</p>
|
||||
<p className="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
|
||||
<ExternalLink className="icon-small" aria-hidden="true" />
|
||||
<span className="visually-hidden">(opens in new tab)</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
9
src/components/Header/Header.tsx
Normal file
9
src/components/Header/Header.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { Navigation } from './Navigation';
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<header>
|
||||
<Navigation />
|
||||
</header>
|
||||
);
|
||||
}
|
||||
55
src/components/Header/Navigation.tsx
Normal file
55
src/components/Header/Navigation.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Menu, X, ExternalLink } from 'lucide-react';
|
||||
import { ThemeToggle } from './ThemeToggle';
|
||||
import { headerLinks } from '@/data/social';
|
||||
|
||||
export function Navigation() {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
const target = event.target as HTMLElement;
|
||||
if (!target.closest('.menu-toggle') && !target.closest('.nav-links') && isMenuOpen) {
|
||||
setIsMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
return () => document.removeEventListener('click', handleClickOutside);
|
||||
}, [isMenuOpen]);
|
||||
|
||||
return (
|
||||
<nav aria-label="Main navigation">
|
||||
<div className="container">
|
||||
<Link href="/" className="logo">./charlotte.sh</Link>
|
||||
|
||||
<button
|
||||
className="menu-toggle"
|
||||
aria-expanded={isMenuOpen}
|
||||
aria-controls="primary-menu"
|
||||
aria-label="Toggle menu"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</button>
|
||||
|
||||
<ul className={`nav-links ${isMenuOpen ? 'menu-open' : ''}`} id="primary-menu">
|
||||
{headerLinks.map((link) => (
|
||||
<li key={link.name}>
|
||||
<a href={link.url} target="_blank" rel="noopener noreferrer">
|
||||
{link.name} <ExternalLink className="icon-small" />
|
||||
<span className="visually-hidden">(opens in new tab)</span>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
<li>
|
||||
<ThemeToggle />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
20
src/components/Header/ThemeToggle.tsx
Normal file
20
src/components/Header/ThemeToggle.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
'use client';
|
||||
|
||||
import { Moon, Sun } from 'lucide-react';
|
||||
import { useTheme } from '@/hooks/useTheme';
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { isDarkMode, toggleTheme, mounted } = useTheme();
|
||||
|
||||
if (!mounted) return <div className="w-9 h-9" />;
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="theme-toggle"
|
||||
aria-label="Toggle dark mode"
|
||||
>
|
||||
{isDarkMode ? <Sun size={18} /> : <Moon size={18} />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
12
src/components/Icons/IconWrapper.tsx
Normal file
12
src/components/Icons/IconWrapper.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import * as lucideIcons from 'lucide-react';
|
||||
|
||||
export function IconWrapper({ name, className = '', ...props }: { name: string; className?: string; [key: string]: any }) {
|
||||
const Icon = lucideIcons[name as keyof typeof lucideIcons] as any;
|
||||
|
||||
if (!Icon) return null;
|
||||
|
||||
return <Icon className={className} {...props} />;
|
||||
}
|
||||
30
src/components/ProjectCard.js
Normal file
30
src/components/ProjectCard.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import React from 'react';
|
||||
import { ExternalLink } from 'lucide-react';
|
||||
|
||||
const ProjectCard = ({ title, description, sourceUrl, className }) => (
|
||||
<div
|
||||
className={`group rounded-lg bg-white dark:bg-gray-800
|
||||
hover:shadow-medium hover:-translate-y-1 mb-6 ${className || ''}`}
|
||||
>
|
||||
<div className="p-3">
|
||||
<h3 className="text-xl font-bold mb-1 text-sage-400 dark:text-sage-300">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="mb-2">{description}</p>
|
||||
{sourceUrl && (
|
||||
<a
|
||||
href={sourceUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center gap-1 hover:bg-pink-300 hover:scale-105 text-sm"
|
||||
aria-label="View Source Code"
|
||||
>
|
||||
<span>Source Code</span>
|
||||
<ExternalLink size={14} />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default ProjectCard;
|
||||
16
src/components/ProjectCard/ProjectCard.tsx
Normal file
16
src/components/ProjectCard/ProjectCard.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { ExternalLink } from 'lucide-react';
|
||||
import { Project } from '@/types';
|
||||
|
||||
export function ProjectCard({ project }: { project: Project }) {
|
||||
return (
|
||||
<article className="project">
|
||||
<h3>{project.title}</h3>
|
||||
<p>{project.description}</p>
|
||||
<a href={project.sourceUrl} target="_blank" rel="noopener noreferrer">
|
||||
Source Code
|
||||
<ExternalLink className="icon-small" aria-hidden="true" />
|
||||
<span className="visually-hidden">(opens in new tab)</span>
|
||||
</a>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
20
src/components/Resume/CertificationsSection.tsx
Normal file
20
src/components/Resume/CertificationsSection.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
export function CertificationsSection() {
|
||||
const certifications = [
|
||||
"CompTIA CySA+",
|
||||
"CompTIA Security+",
|
||||
"CompTIA A+"
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="resume-section">
|
||||
<h2>Certifications</h2>
|
||||
<div className="skills-grid">
|
||||
{certifications.map((cert, index) => (
|
||||
<div key={index} className="skill-category">
|
||||
{cert}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
34
src/components/Resume/EducationItem.tsx
Normal file
34
src/components/Resume/EducationItem.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
interface EducationItemProps {
|
||||
institution: string;
|
||||
location: string;
|
||||
degree: string;
|
||||
graduationYear: string;
|
||||
gpa: string;
|
||||
coursework: string;
|
||||
}
|
||||
|
||||
export function EducationItem({
|
||||
institution,
|
||||
location,
|
||||
degree,
|
||||
graduationYear,
|
||||
gpa,
|
||||
coursework,
|
||||
}: EducationItemProps) {
|
||||
return (
|
||||
<div className="education-item">
|
||||
<div className="education-header">
|
||||
<h3>{institution}</h3>
|
||||
<span className="location">{location}</span>
|
||||
</div>
|
||||
<div className="education-header">
|
||||
<div className="degree">{degree}</div>
|
||||
<span className="date">{graduationYear}</span>
|
||||
</div>
|
||||
<div className="gpa">GPA: {gpa}</div>
|
||||
<div className="coursework">
|
||||
<strong>Relevant Coursework:</strong> {coursework}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
17
src/components/Resume/EducationSection.tsx
Normal file
17
src/components/Resume/EducationSection.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { EducationItem } from './EducationItem';
|
||||
|
||||
export function EducationSection() {
|
||||
return (
|
||||
<section className="resume-section">
|
||||
<h2>Education</h2>
|
||||
<EducationItem
|
||||
institution="Champlain College"
|
||||
location="Burlington, VT"
|
||||
degree="Bachelor of Science in Computer Networking and Cybersecurity"
|
||||
graduationYear="Class of 2027"
|
||||
gpa="3.97/4.0"
|
||||
coursework="Network Security Controls, Web & Application Security, Database Security, System Administration for Enterprise and Distributed Systems, Automation & Scripting"
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
40
src/components/Resume/ExperienceItem.tsx
Normal file
40
src/components/Resume/ExperienceItem.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
interface Position {
|
||||
title: string;
|
||||
dateRange: string;
|
||||
responsibilities: string[];
|
||||
}
|
||||
|
||||
interface ExperienceItemProps {
|
||||
experience: {
|
||||
company: string;
|
||||
location: string;
|
||||
positions: Position[];
|
||||
};
|
||||
}
|
||||
|
||||
export function ExperienceItem({ experience }: ExperienceItemProps) {
|
||||
return (
|
||||
<div className="experience-item">
|
||||
<div className="experience-header">
|
||||
<h3>{experience.company}</h3>
|
||||
<span className="location">{experience.location}</span>
|
||||
</div>
|
||||
|
||||
{experience.positions.map((position, index) => (
|
||||
<div key={index}>
|
||||
<div className="experience-header">
|
||||
<div className="job-title">{position.title}</div>
|
||||
<span className="date">{position.dateRange}</span>
|
||||
</div>
|
||||
{position.responsibilities.length > 0 && (
|
||||
<ul className="bullet-list">
|
||||
{position.responsibilities.map((responsibility, respIndex) => (
|
||||
<li key={respIndex}>{responsibility}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
40
src/components/Resume/ExperienceSection.tsx
Normal file
40
src/components/Resume/ExperienceSection.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { ExperienceItem } from './ExperienceItem';
|
||||
|
||||
export function ExperienceSection() {
|
||||
const leahyCenterExperience = {
|
||||
company: "The Leahy Center",
|
||||
location: "Burlington, VT",
|
||||
positions: [
|
||||
{
|
||||
title: "Lead Security Engineer",
|
||||
dateRange: "May 2025 — Present",
|
||||
responsibilities: [
|
||||
"Planned, led, and executed a full-stack migration from VMware to Proxmox VE using iDRAC for remote server management"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Security Engineer",
|
||||
dateRange: "Jan 2024 — May 2025",
|
||||
responsibilities: [
|
||||
"Maintained Elastic Stack SIEM infrastructure, ensured uptime, and automated security operations",
|
||||
"Optimized a threat detection engine to expand security coverage while reducing false positives",
|
||||
"Collaborated with analysts on alert response"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Security Operations Intern",
|
||||
dateRange: "Oct 2023 — Dec 2023",
|
||||
responsibilities: [
|
||||
"Learning the ropes 🙃"
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="resume-section">
|
||||
<h2>Experience</h2>
|
||||
<ExperienceItem experience={leahyCenterExperience} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
9
src/components/Resume/ResumeHeader.tsx
Normal file
9
src/components/Resume/ResumeHeader.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export function ResumeHeader() {
|
||||
return (
|
||||
<div className="resume-header">
|
||||
<h1>Charlotte Croce</h1>
|
||||
<div className="contact-info">
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
14
src/components/Resume/SkillsSection.tsx
Normal file
14
src/components/Resume/SkillsSection.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { SkillGrid } from '@/components/Skills/SkillGrid';
|
||||
import { skills } from '@/data/skills';
|
||||
|
||||
export function SkillsSection() {
|
||||
return (
|
||||
<section className="resume-section">
|
||||
<div style={{ display: 'flex', gap: '0.2rem', alignItems: 'center' }}>
|
||||
<h2 style={{ textDecoration: 'line-through', margin: 0 }}>Keywords</h2>
|
||||
<h2 style={{ margin: 0 }}>Skills</h2>
|
||||
</div>
|
||||
<SkillGrid skills={skills} showHeadings={true} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
10
src/components/SectionTitle.js
Normal file
10
src/components/SectionTitle.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import React from "react";
|
||||
|
||||
const SectionTitle = ({ children }) => (
|
||||
<h2 className="text-2xl font-bold mb-8 flex items-center">
|
||||
<span className="text-sage-400">{children}</span>
|
||||
<span className="flex-grow h-px ml-4 bg-gradient-to-r from-pink-200 to-transparent dark:from-pink-400 dark:to-transparent"></span>
|
||||
</h2>
|
||||
);
|
||||
|
||||
export default SectionTitle;
|
||||
34
src/components/Skills/SkillGrid.tsx
Normal file
34
src/components/Skills/SkillGrid.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { Skill } from '@/types';
|
||||
|
||||
export function SkillGrid({ skills, showHeadings = false }: { skills: Skill[]; showHeadings?: boolean }) {
|
||||
if (showHeadings) {
|
||||
return (
|
||||
<div className="skills-sections">
|
||||
{skills.map((skillCategory, index) => (
|
||||
<div key={skillCategory.category} className={`skill-section ${index === 0 ? 'first-section' : ''}`}>
|
||||
<h3 className="skill-heading">{skillCategory.category}</h3>
|
||||
<div className="skills-grid">
|
||||
{skillCategory.items.map((skill) => (
|
||||
<div key={skill} className="skill-category">
|
||||
{skill}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="skills-grid">
|
||||
{skills.map((skillCategory) =>
|
||||
skillCategory.items.map((skill) => (
|
||||
<div key={skill} className="skill-category">
|
||||
{skill}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
22
src/data/projects.ts
Normal file
22
src/data/projects.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { Project } from '@/types';
|
||||
|
||||
export const projects: Project[] = [
|
||||
/* {
|
||||
id: 'fylgja-soc',
|
||||
title: 'Fylgja SOC',
|
||||
description: 'A domain-specific language (DSL) for managing an ELK SIEM. Includes a CLI and SlackBot interface [WIP]',
|
||||
sourceUrl: 'https://git.charlotte.sh/lotte/fylgja'
|
||||
},*/
|
||||
{
|
||||
id: 'champlain-tech-journals',
|
||||
title: 'Champlain Tech Journals',
|
||||
description: 'Notes, code, and lab write-ups from my Champlain College courses',
|
||||
sourceUrl: 'https://git.charlotte.sh/lotte/ChamplainTechJournals'
|
||||
},
|
||||
/* {
|
||||
id: 'nokken-health',
|
||||
title: 'Nøkken Health',
|
||||
description: 'A Flutter app to track and analyze health data [MVP]',
|
||||
sourceUrl: 'https://git.charlotte.sh/lotte/nokken'
|
||||
} */
|
||||
];
|
||||
24
src/data/skills.ts
Normal file
24
src/data/skills.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { Skill } from '@/types';
|
||||
|
||||
export const skills: Skill[] = [
|
||||
{
|
||||
category: 'Systems & Infrastructure',
|
||||
items: ['Active Directory', 'Debian Linux', 'Docker', 'iDRAC', 'Proxmox VE', 'RHEL Linux', 'VMware', 'Windows Server']
|
||||
},
|
||||
{
|
||||
category: 'Security Tools & Frameworks',
|
||||
items: ['Elastic Stack', 'Firewalls', 'PKI', 'SIEM', 'Wireshark']
|
||||
},
|
||||
{
|
||||
category: 'Networking',
|
||||
items: ['VyOS']
|
||||
},
|
||||
{
|
||||
category: 'Programming & Scripting',
|
||||
items: ['Ansible', 'Bash', 'Java', 'JavaScript', 'PowerShell', 'Python', 'SQL']
|
||||
},
|
||||
{
|
||||
category: 'Project Management',
|
||||
items: ['Git / GitHub']
|
||||
}
|
||||
];
|
||||
13
src/data/social.ts
Normal file
13
src/data/social.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { SocialLink } from '@/types';
|
||||
|
||||
export const headerLinks: SocialLink[] = [
|
||||
{ name: 'GitHub', url: 'https://github.com/charlottecroce' },
|
||||
{ name: 'Forgejo', url: 'https://git.charlotte.sh' },
|
||||
{ name: 'LinkedIn', url: 'https://linkedin.com/in/charlottecroce' }
|
||||
];
|
||||
|
||||
export const footerLinks: SocialLink[] = [
|
||||
{ name: 'GitHub', url: 'https://github.com/charlottecroce' },
|
||||
{ name: 'Forgejo', url: 'https://git.charlotte.sh/lotte' },
|
||||
{ name: 'LinkedIn', url: 'https://linkedin.com/in/charlottecroce' }
|
||||
];
|
||||
30
src/hooks/useTheme.ts
Normal file
30
src/hooks/useTheme.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export function useTheme() {
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const savedTheme = localStorage.getItem('darkMode');
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
if (savedTheme === 'true' || (savedTheme === null && prefersDark)) {
|
||||
setIsDarkMode(true);
|
||||
document.body.classList.add('dark-mode');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const toggleTheme = () => {
|
||||
setIsDarkMode(prev => {
|
||||
const newValue = !prev;
|
||||
document.body.classList.toggle('dark-mode', newValue);
|
||||
localStorage.setItem('darkMode', String(newValue));
|
||||
return newValue;
|
||||
});
|
||||
};
|
||||
|
||||
return { isDarkMode, toggleTheme, mounted };
|
||||
}
|
||||
404
src/index.css
Normal file
404
src/index.css
Normal file
|
|
@ -0,0 +1,404 @@
|
|||
/*
|
||||
==============================================
|
||||
TABLE OF CONTENTS
|
||||
==============================================
|
||||
1. CSS Variables
|
||||
2. Base Styles
|
||||
3. Typography
|
||||
4. Layout & Container
|
||||
5. Navigation & Header
|
||||
6. Mobile Menu
|
||||
7. Button & Controls
|
||||
8. Form Elements
|
||||
9. Cards & Panels
|
||||
10. Animations
|
||||
11. Dark Mode
|
||||
12. Utility Classes
|
||||
13. Media Queries
|
||||
==============================================
|
||||
*/
|
||||
|
||||
/*
|
||||
==============================================
|
||||
1. CSS Variables
|
||||
==============================================
|
||||
*/
|
||||
:root {
|
||||
--color-pink-50: #FFF0F5;
|
||||
--color-pink-100: #FFE0EB;
|
||||
--color-pink-200: #FFB8D9;
|
||||
--color-pink-300: #FF8AC8;
|
||||
--color-pink-400: #F45D9E;
|
||||
--color-pink-500: #D23B80;
|
||||
--color-sage-200: #D4E6D5;
|
||||
--color-sage-300: #B5D4B7;
|
||||
--color-sage-400: #8AB68C;
|
||||
--color-sage-500: #6A9A6C;
|
||||
--color-cream-50: #FFFEF5;
|
||||
--color-cream-100: #FFF9F0;
|
||||
}
|
||||
|
||||
/*
|
||||
==============================================
|
||||
2. Base Styles
|
||||
==============================================
|
||||
*/
|
||||
* {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Segoe UI', 'Roboto', 'Oxygen', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: var(--color-pink-50);
|
||||
color: #4a4a4a;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/*
|
||||
==============================================
|
||||
3. Typography
|
||||
==============================================
|
||||
*/
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
color: var(--color-pink-400);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
color: var(--color-sage-400);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-pink-400);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-pink-400);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-sage-400);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
==============================================
|
||||
4. Layout & Container
|
||||
==============================================
|
||||
*/
|
||||
.app-container {
|
||||
min-height: 100vh;
|
||||
padding-top: 80px;
|
||||
background-color: var(--color-pink-50);
|
||||
color: #4a4a4a;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
padding: 24px;
|
||||
margin-top: 80px;
|
||||
background-color: var(--color-pink-100);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
==============================================
|
||||
5. Navigation & Header
|
||||
==============================================
|
||||
*/
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--color-pink-50);
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-logo {
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
color: var(--color-pink-400);
|
||||
}
|
||||
|
||||
.navbar-links {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
==============================================
|
||||
6. Mobile Menu
|
||||
==============================================
|
||||
*/
|
||||
.mobile-menu {
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: var(--color-pink-50);
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
border-top: 1px solid var(--color-pink-200);
|
||||
}
|
||||
|
||||
.mobile-menu.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-menu-container {
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
==============================================
|
||||
7. Button & Controls
|
||||
==============================================
|
||||
*/
|
||||
button:not([class*="bg-"]):not([class*="rounded-"]) {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.75rem;
|
||||
border: none;
|
||||
background-color: var(--color-sage-400);
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
button:not([class*="bg-"]):not([class*="rounded-"]):hover {
|
||||
background-color: var(--color-sage-400);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar-button {
|
||||
border-radius: 9999px;
|
||||
background-color: var(--color-sage-100);
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.navbar-button:hover {
|
||||
background-color: var(--color-pink-200);
|
||||
}
|
||||
|
||||
.social-link{
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
border-radius: 9999px;
|
||||
background-color: var(--color-pink-100);
|
||||
padding: 8px;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.mobile-button {
|
||||
border-radius: 9999px;
|
||||
background-color: var(--color-pink-100);
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.mobile-button.active {
|
||||
background-color: var(--color-pink-300);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.mobile-button-with-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-left {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
==============================================
|
||||
8. Form Elements
|
||||
==============================================
|
||||
*/
|
||||
/* No styles defined yet */
|
||||
|
||||
/*
|
||||
==============================================
|
||||
9. Cards & Panels
|
||||
==============================================
|
||||
*/
|
||||
/* No styles defined yet */
|
||||
|
||||
/*
|
||||
==============================================
|
||||
10. Animations
|
||||
==============================================
|
||||
*/
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
==============================================
|
||||
11. Dark Mode
|
||||
==============================================
|
||||
*/
|
||||
.dark-mode {
|
||||
--color-pink-50: #3A2A35;
|
||||
--color-pink-100: #59354B;
|
||||
--color-pink-200: #8E5773;
|
||||
--color-pink-300: #B47A93;
|
||||
--color-pink-400: #D7A1B8;
|
||||
--color-pink-500: #E9C3D3;
|
||||
--color-sage-300: #7BA97D;
|
||||
--color-sage-400: #5D8F5F;
|
||||
--color-sage-500: #456E47;
|
||||
--color-cream-50: #2C2C27;
|
||||
--color-cream-100: #3A3A33;
|
||||
}
|
||||
|
||||
.dark-mode h1,
|
||||
.dark-mode h3 {
|
||||
color: var(--color-pink-400);
|
||||
}
|
||||
|
||||
.dark-mode h2
|
||||
{
|
||||
color: var(--color-sage-300);
|
||||
}
|
||||
|
||||
.dark-mode .card {
|
||||
background-color: #2d2d33;
|
||||
border-color: var(--color-sage-400);
|
||||
}
|
||||
|
||||
.dark-mode button {
|
||||
background-color: var(--color-sage-400);
|
||||
}
|
||||
|
||||
.dark-mode button:hover {
|
||||
background-color: var(--color-pink-300);
|
||||
}
|
||||
|
||||
.dark-mode .app-container {
|
||||
background-color: #1a202c;
|
||||
color: #f7fafc;
|
||||
}
|
||||
|
||||
.dark-mode .navbar {
|
||||
background-color: #1a202c;
|
||||
}
|
||||
|
||||
.dark-mode .site-footer {
|
||||
background-color: #2d3748;
|
||||
}
|
||||
|
||||
.dark-mode .mobile-menu {
|
||||
background-color: #1a202c;
|
||||
}
|
||||
|
||||
/*
|
||||
==============================================
|
||||
12. Utility Classes
|
||||
==============================================
|
||||
*/
|
||||
.text-sage {
|
||||
color: var(--color-sage-400) !important;
|
||||
}
|
||||
|
||||
.text-pink {
|
||||
color: var(--color-pink-400) !important;
|
||||
}
|
||||
|
||||
.border-sage {
|
||||
border-color: var(--color-sage-400) !important;
|
||||
}
|
||||
|
||||
.border-pink {
|
||||
border-color: var(--color-pink-400) !important;
|
||||
}
|
||||
|
||||
.shadow-soft {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.shadow-medium {
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/*
|
||||
==============================================
|
||||
13. Media Queries
|
||||
==============================================
|
||||
*/
|
||||
@media (max-width: 767px) {
|
||||
.navbar-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.mobile-menu {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
16
src/index.js
Normal file
16
src/index.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
reportWebVitals();
|
||||
1
src/logo.svg
Normal file
1
src/logo.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
58
src/pages/HomePage.js
Normal file
58
src/pages/HomePage.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import React from "react";
|
||||
import SectionTitle from "../components/SectionTitle";
|
||||
import ProjectCard from "../components/ProjectCard";
|
||||
|
||||
/*
|
||||
==============================================
|
||||
HomePage Component
|
||||
==============================================
|
||||
*/
|
||||
const HomePage = () => {
|
||||
return (
|
||||
<div>
|
||||
{/*
|
||||
==============================================
|
||||
Intro Section
|
||||
==============================================
|
||||
*/}
|
||||
<div className="relative rounded-xl mb-12 bg-white dark:bg-gray-800 overflow-hidden">
|
||||
<div className="p-8 md:p-12">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6 text-pink-400 dark:text-pink-300">
|
||||
Hi! I'm Charlotte
|
||||
</h1>
|
||||
<p className="text-xl mb-6">
|
||||
I put stuff here
|
||||
</p>
|
||||
<p className="mb-8 text-lg">
|
||||
something else
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*
|
||||
==============================================
|
||||
Projects Section
|
||||
==============================================
|
||||
*/}
|
||||
<div className="mb-16">
|
||||
<SectionTitle>-- Projects --</SectionTitle>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<ProjectCard
|
||||
title="Champlain Tech Journals"
|
||||
description="Notes, code, and lab write-ups from my Champlain College courses"
|
||||
sourceUrl="https://codeberg.org/charlottecroce/ChamplainTechJournals"
|
||||
/>
|
||||
<ProjectCard
|
||||
title="Nøkken Health"
|
||||
description="A mobile app to track and analyze health data"
|
||||
sourceUrl="https://codeberg.org/charlottecroce/nokken"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
13
src/reportWebVitals.js
Normal file
13
src/reportWebVitals.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
27
src/types/index.ts
Normal file
27
src/types/index.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
export interface Project {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
sourceUrl: string;
|
||||
}
|
||||
|
||||
export interface Skill {
|
||||
category: string;
|
||||
items: string[];
|
||||
}
|
||||
|
||||
export interface SocialLink {
|
||||
name: string;
|
||||
url: string;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
export interface Experience {
|
||||
company: string;
|
||||
location: string;
|
||||
positions: {
|
||||
title: string;
|
||||
date: string;
|
||||
bullets?: string[];
|
||||
}[];
|
||||
}
|
||||
20
src/types/resume.ts
Normal file
20
src/types/resume.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
export interface Position {
|
||||
title: string;
|
||||
dateRange: string;
|
||||
responsibilities: string[];
|
||||
}
|
||||
|
||||
export interface Experience {
|
||||
company: string;
|
||||
location: string;
|
||||
positions: Position[];
|
||||
}
|
||||
|
||||
export interface Education {
|
||||
institution: string;
|
||||
location: string;
|
||||
degree: string;
|
||||
graduationYear: string;
|
||||
gpa: string;
|
||||
coursework: string;
|
||||
}
|
||||
50
tailwind.config.ts
Normal file
50
tailwind.config.ts
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import type { Config } from 'tailwindcss'
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
pink: {
|
||||
50: '#FFF0F5',
|
||||
100: '#FFE0EB',
|
||||
200: '#FFB8D9',
|
||||
300: '#FF8AC8',
|
||||
400: '#F45D9E',
|
||||
500: '#D23B80',
|
||||
},
|
||||
sage: {
|
||||
200: '#D4E6D5',
|
||||
300: '#B5D4B7',
|
||||
400: '#8AB68C',
|
||||
500: '#6A9A6C',
|
||||
},
|
||||
cream: {
|
||||
50: '#FFFEF5',
|
||||
100: '#FFF9F0',
|
||||
},
|
||||
},
|
||||
spacing: {
|
||||
'xs': '0.25rem',
|
||||
'sm': '0.5rem',
|
||||
'md': '1rem',
|
||||
'lg': '1.5rem',
|
||||
'xl': '2rem',
|
||||
'xxl': '3rem',
|
||||
},
|
||||
maxWidth: {
|
||||
'container': '1200px',
|
||||
},
|
||||
transitionDuration: {
|
||||
'transition': '200ms',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
export default config
|
||||
27
tsconfig.json
Normal file
27
tsconfig.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue