diff --git a/src/app/Navigation.css b/src/app/Navigation.css
new file mode 100644
index 0000000..4decb97
--- /dev/null
+++ b/src/app/Navigation.css
@@ -0,0 +1,134 @@
+/* Navigation.css - Fix alignment and padding issues */
+
+/* Ensure navigation uses your existing nav structure */
+nav {
+ padding-block: var(--space-md);
+ }
+
+ nav .container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ /* Logo active state - only addition to existing logo styles */
+ .logo.active {
+ color: var(--color-accent-secondary);
+ }
+
+ /* Navigation content container - ensure single line layout */
+ .nav-content {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex: 1;
+ margin-left: var(--space-xl);
+ }
+
+ /* Internal navigation links (left-aligned) */
+ .nav-links-internal {
+ display: flex;
+ list-style: none;
+ gap: var(--space-sm);
+ align-items: center;
+ margin: 0;
+ padding: 0;
+ }
+
+ /* External navigation links (right-aligned) */
+ .nav-links-external {
+ display: flex;
+ list-style: none;
+ gap: var(--space-sm);
+ align-items: center;
+ margin: 0;
+ padding: 0;
+ }
+
+ /* Apply existing nav-links hover styles */
+ .nav-links-internal a:hover,
+ .nav-links-internal a:focus,
+ .nav-links-external a:hover,
+ .nav-links-external a:focus {
+ background-color: var(--pink-100);
+ }
+
+ /* Active state for internal navigation */
+ .nav-links-internal a.active {
+ color: var(--color-accent-secondary);
+ background-color: var(--pink-100);
+ }
+
+ /* Mobile styles - keep exact same behavior as original .nav-links */
+ @media (max-width: 768px) {
+ .menu-toggle {
+ display: flex;
+ }
+
+ .nav-content {
+ position: fixed;
+ top: 60px;
+ left: 0;
+ right: 0;
+ background-color: var(--color-bg-primary);
+ flex-direction: column;
+ gap: var(--space-md);
+ padding: var(--space-md);
+ box-shadow: var(--shadow-lg);
+ border-top: 1px solid var(--pink-200);
+ transform: translateY(-100%);
+ opacity: 0;
+ pointer-events: none;
+ transition: all var(--duration-normal) var(--ease-out);
+ z-index: 100;
+ margin-left: 0;
+ justify-content: flex-start;
+ }
+
+ .nav-content.menu-open {
+ transform: translateY(0);
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ .nav-links-internal,
+ .nav-links-external {
+ flex-direction: column;
+ width: 100%;
+ gap: 0;
+ }
+
+ .nav-links-internal {
+ border-bottom: 1px solid var(--pink-200);
+ padding-bottom: var(--space-md);
+ }
+
+ .nav-links-external {
+ padding-top: var(--space-md);
+ }
+
+ .nav-links-internal li,
+ .nav-links-external li {
+ width: 100%;
+ }
+
+ .nav-links-internal a,
+ .nav-links-external a {
+ width: 100%;
+ justify-content: center;
+ padding: var(--space-md);
+ margin-bottom: var(--space-xs);
+ }
+ }
+
+ /* Dark mode - apply to new classes */
+ .dark-mode .nav-links-internal a:hover,
+ .dark-mode .nav-links-internal a:focus,
+ .dark-mode .nav-links-external a:hover,
+ .dark-mode .nav-links-external a:focus {
+ background-color: var(--pink-100);
+ }
+
+ .dark-mode .nav-links-internal a.active {
+ background-color: var(--pink-100);
+ }
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index cef606b..8547c64 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -6,66 +6,125 @@
--pink-400: #F45D9E;
--pink-500: #D23B80;
- --sage-200: #D4E6D5;
- --sage-300: #B5D4B7;
- --sage-400: #8AB68C;
- --sage-500: #6A9A6C;
+ --sage-200: #B8D1BA;
+ --sage-300: #9BC49E;
+ --sage-400: #6B9A6D;
+ --sage-500: #4A7A4C;
--cream-50: #FFFEF5;
--cream-100: #FFF9F0;
- --text: #4a4a4a;
- --bg-primary: var(--pink-50);
- --bg-secondary: white;
- --accent-primary: var(--pink-400);
- --accent-secondary: var(--sage-400);
-
- --space-xs: 0.25rem;
- --space-sm: 0.5rem;
+ --color-text-primary: #4a4a4a;
+ --color-text-secondary: #6b7280;
+ --color-bg-primary: var(--pink-50);
+ --color-bg-secondary: white;
+ --color-accent-primary: var(--pink-400);
+ --color-accent-secondary: var(--sage-400);
+ --color-border: var(--sage-200);
+
+ --space-3xs: 0.125rem;
+ --space-2xs: 0.25rem;
+ --space-xs: 0.5rem;
+ --space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
- --space-xxl: 3rem;
+ --space-2xl: 2.5rem;
+ --space-3xl: 3rem;
+
+ --font-size-xs: 0.75rem;
+ --font-size-sm: 0.875rem;
+ --font-size-base: 1rem;
+ --font-size-lg: 1.125rem;
+ --font-size-xl: 1.25rem;
+ --font-size-2xl: 1.5rem;
+ --font-size-3xl: 1.875rem;
+ --font-size-4xl: 2.25rem;
+ --font-size-5xl: 3rem;
--container-max: 1200px;
- --transition: 0.2s ease;
+ --container-padding: var(--space-md);
+
+ --duration-fast: 0.15s;
+ --duration-normal: 0.2s;
+ --duration-slow: 0.3s;
+ --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+ --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+ --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
+
+ --radius-sm: 0.25rem;
+ --radius-md: 0.5rem;
+ --radius-lg: 0.75rem;
+ --radius-xl: 1rem;
+ --radius-full: 9999px;
+
+ --focus-ring: 0 0 0 3px var(--pink-300);
}
*,
*::before,
*::after {
box-sizing: border-box;
+}
+
+* {
margin: 0;
padding: 0;
}
-body {
+html {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizeLegibility;
+ scroll-behavior: smooth;
+}
+
+body {
line-height: 1.6;
- color: var(--text);
- background-color: var(--bg-primary);
+ color: var(--color-text-primary);
+ background-color: var(--color-bg-primary);
min-height: 100vh;
display: flex;
flex-direction: column;
- -webkit-font-smoothing: antialiased;
+ font-size: var(--font-size-base);
+}
+
+:focus {
+ outline: none;
+ box-shadow: var(--focus-ring);
+ outline-offset: 2px;
+}
+
+:focus:not(:focus-visible) {
+ box-shadow: none;
+}
+
+:focus-visible {
+ box-shadow: var(--focus-ring);
}
.container {
width: 100%;
max-width: var(--container-max);
- margin: 0 auto;
- padding: 0 var(--space-md);
+ margin-inline: auto;
+ padding-inline: var(--container-padding);
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
- padding: var(--space-sm) var(--space-md);
- background-color: var(--accent-primary);
+ padding: var(--space-xs) var(--space-md);
+ background-color: var(--color-accent-primary);
color: white;
z-index: 100;
- transition: top var(--transition);
+ transition: top var(--duration-normal) var(--ease-out);
+ border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus {
@@ -84,59 +143,105 @@ body {
border: 0;
}
-h1,
-h2,
-h3 {
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--space-xs) var(--space-md);
+ border: 2px solid transparent;
+ border-radius: var(--radius-full);
+ font-size: var(--font-size-sm);
+ font-weight: 500;
+ text-decoration: none;
+ cursor: pointer;
+ transition: all var(--duration-normal) var(--ease-out);
+ user-select: none;
+}
+
+.btn:hover,
+.btn:focus {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-md);
+}
+
+.btn--primary {
+ background-color: var(--color-accent-primary);
+ color: white;
+}
+
+.btn--secondary {
+ background-color: var(--sage-200);
+ color: var(--color-text-primary);
+}
+
+h1, h2, h3, h4, h5, h6 {
line-height: 1.3;
margin-bottom: var(--space-md);
+ font-weight: 600;
+ letter-spacing: -0.025em;
}
h1 {
- font-size: clamp(2.25rem, 5vw, 3rem);
- color: var(--accent-primary);
+ font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
+ color: var(--color-accent-primary);
+ font-weight: 700;
}
h2 {
- font-size: clamp(1.75rem, 4vw, 2rem);
- color: var(--accent-secondary);
+ font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-3xl));
+ color: var(--color-accent-secondary);
}
h3 {
- font-size: clamp(1.25rem, 3vw, 1.5rem);
- color: var(--accent-primary);
+ font-size: clamp(var(--font-size-xl), 3vw, var(--font-size-2xl));
+ color: var(--color-accent-primary);
}
p {
margin-bottom: var(--space-md);
+ max-width: 65ch;
}
a {
- color: var(--accent-primary);
+ color: var(--color-accent-primary);
text-decoration: none;
- transition: color var(--transition);
+ transition: all var(--duration-normal) var(--ease-out);
+ position: relative;
}
a:hover,
a:focus {
- color: var(--accent-secondary);
- text-decoration: underline;
+ color: var(--color-accent-secondary);
}
-:focus {
- outline: 3px solid var(--pink-300);
- outline-offset: 3px;
+a:not(.btn):not(.logo)::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 0;
+ height: 2px;
+ background-color: currentColor;
+ transition: width var(--duration-normal) var(--ease-out);
+}
+
+a:not(.btn):not(.logo):hover::after,
+a:not(.btn):not(.logo):focus::after {
+ width: 100%;
}
header {
- background-color: var(--bg-primary);
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ background-color: var(--color-bg-primary);
+ box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 10;
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
}
nav {
- padding: var(--space-md) 0;
+ padding-block: var(--space-md);
}
nav .container {
@@ -146,14 +251,10 @@ nav .container {
}
.logo {
- font-weight: bold;
- font-size: 1.25rem;
- color: var(--accent-primary);
-}
-
-.logo:hover,
-.logo:focus {
- text-decoration: none;
+ font-weight: 700;
+ font-size: var(--font-size-xl);
+ color: var(--color-accent-primary);
+ letter-spacing: -0.025em;
}
.nav-links {
@@ -163,82 +264,59 @@ nav .container {
align-items: center;
}
-.nav-links a {
- display: inline-flex;
- align-items: center;
- padding: var(--space-sm) var(--space-md);
- border-radius: 9999px;
- background-color: var(--sage-200);
- color: var(--text);
- transition: all var(--transition);
-}
-
.nav-links a:hover,
.nav-links a:focus {
- background-color: var(--pink-200);
- text-decoration: none;
- transform: translateY(-2px);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ background-color: var(--pink-100);
}
-.theme-toggle {
+.theme-toggle,
+.menu-toggle {
background-color: var(--pink-300);
border: none;
color: white;
width: 36px;
height: 36px;
- border-radius: 50%;
+ border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
- transition: all var(--transition);
+ transition: all var(--duration-normal) var(--ease-out);
}
.theme-toggle:hover,
-.theme-toggle:focus {
+.theme-toggle:focus,
+.menu-toggle:hover,
+.menu-toggle:focus {
background-color: var(--pink-200);
- transform: translateY(-2px);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ transform: translateY(-2px) scale(1.05);
+ box-shadow: var(--shadow-md);
}
.menu-toggle {
display: none;
- background-color: var(--pink-300);
- border: none;
- width: 36px;
- height: 36px;
- border-radius: 50%;
- position: relative;
- cursor: pointer;
- color: white;
- align-items: center;
- justify-content: center;
- transition: all var(--transition);
-}
-
-.menu-toggle:hover,
-.menu-toggle:focus {
- background-color: var(--pink-200);
- transform: translateY(-2px);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
main {
flex: 1;
- padding: var(--space-xxl) 0;
+ padding-block: var(--space-3xl);
}
.intro {
- background-color: var(--bg-secondary);
- border-radius: 0.75rem;
+ background-color: var(--color-bg-secondary);
+ border-radius: var(--radius-lg);
padding: var(--space-xl);
- margin-bottom: var(--space-xxl);
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+ margin-bottom: var(--space-3xl);
+ box-shadow: var(--shadow-md);
+ transition: box-shadow var(--duration-slow) var(--ease-out);
+}
+
+.intro:hover {
+ box-shadow: var(--shadow-lg);
}
.projects {
- margin-bottom: var(--space-xxl);
+ margin-bottom: var(--space-3xl);
}
.projects h2 {
@@ -253,27 +331,28 @@ main {
flex: 1;
height: 1px;
margin-left: var(--space-md);
- background-color: var(--sage-200);
+ background: linear-gradient(to right, var(--color-border), transparent);
}
.project-grid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
gap: var(--space-lg);
}
.project {
- background-color: var(--bg-secondary);
- border-radius: 0.5rem;
+ background-color: var(--color-bg-secondary);
+ border-radius: var(--radius-md);
padding: var(--space-md);
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
- transition: transform var(--transition), box-shadow var(--transition);
+ box-shadow: var(--shadow-sm);
+ transition: box-shadow var(--duration-normal) var(--ease-out);
+ border: 1px solid transparent;
}
.project:hover,
.project:focus-within {
- transform: translateY(-4px);
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
+ box-shadow: var(--shadow-lg);
+ border-color: var(--pink-200);
}
.project h3 {
@@ -282,133 +361,20 @@ main {
.project p {
margin-bottom: var(--space-sm);
+ color: var(--color-text-secondary);
}
.project a {
display: inline-flex;
align-items: center;
- font-size: 0.875rem;
- transition: all var(--transition);
-}
-
-.project a:hover,
-.project a:focus {
- transform: translateY(-2px);
+ font-size: var(--font-size-sm);
+ font-weight: 500;
}
.icon-small {
width: 14px;
height: 14px;
- margin-left: var(--space-xs);
-}
-
-footer {
- background-color: var(--pink-100);
- padding: var(--space-xl);
- text-align: center;
-}
-
-.social-links {
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
- gap: var(--space-xs);
- list-style: none;
- margin-bottom: var(--space-md);
-}
-
-.social-links li:not(:last-child)::after {
- content: "•";
- margin: 0 var(--space-xs);
-}
-
-.theme-note {
- margin-top: var(--space-md);
- padding: var(--space-sm) var(--space-md);
- display: inline-block;
-}
-
-.dark-mode {
- --pink-50: #3A2A35;
- --pink-100: #59354B;
- --pink-200: #8E5773;
- --pink-300: #B47A93;
- --pink-400: #D7A1B8;
- --pink-500: #E9C3D3;
- --sage-200: #3D5D3E;
- --sage-300: #7BA97D;
- --sage-400: #5D8F5F;
- --text: #f7fafc;
- --bg-primary: #1a202c;
- --bg-secondary: #2d3748;
-}
-
-.dark-mode .projects h2::after {
- background: linear-gradient(to right, var(--pink-400), transparent);
-}
-
-@media (max-width: 768px) {
- .menu-toggle {
- display: flex;
- }
-
- .nav-links {
- position: fixed;
- top: 60px;
- left: 0;
- right: 0;
- background-color: var(--bg-primary);
- flex-direction: column;
- padding: var(--space-md);
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- border-top: 1px solid var(--pink-200);
- transform: translateY(-100%);
- opacity: 0;
- pointer-events: none;
- transition: transform var(--transition), opacity var(--transition);
- z-index: 100;
- }
-
- .nav-links.menu-open {
- transform: translateY(0);
- opacity: 1;
- pointer-events: auto;
- }
-
- .nav-links li {
- width: 100%;
- }
-
- .nav-links a {
- display: flex;
- width: 100%;
- padding: var(--space-md);
- margin-bottom: var(--space-xs);
- transform: none;
- }
-
- .nav-links a:hover,
- .nav-links a:focus {
- transform: none;
- box-shadow: none;
- background-color: var(--pink-200);
- }
-
- .intro {
- padding: var(--space-lg);
- }
-}
-
-@media (min-width: 769px) {
- .project-grid {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-
-@media (min-width: 1024px) {
- .project-grid {
- grid-template-columns: repeat(3, 1fr);
- }
+ margin-left: var(--space-2xs);
}
.resume-header {
@@ -422,20 +388,22 @@ footer {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
- font-size: 0.95rem;
+ font-size: var(--font-size-sm);
}
.resume-section {
- background-color: var(--bg-secondary);
- border-radius: 0.75rem;
+ background-color: var(--color-bg-secondary);
+ border-radius: var(--radius-lg);
padding: var(--space-xl);
margin-bottom: var(--space-xl);
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
- transition: transform var(--transition), box-shadow var(--transition);
+ box-shadow: var(--shadow-md);
+ transition: box-shadow var(--duration-normal) var(--ease-out);
+ border: 1px solid transparent;
}
.resume-section:hover {
- box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+ box-shadow: var(--shadow-lg);
+ border-color: var(--pink-100);
}
.resume-section h2 {
@@ -450,11 +418,7 @@ footer {
flex: 1;
height: 1px;
margin-left: var(--space-md);
- background-color: var(--sage-200);
-}
-
-.dark-mode .resume-section h2::after {
- background: linear-gradient(to right, var(--pink-400), transparent);
+ background: linear-gradient(to right, var(--color-border), transparent);
}
.education-item,
@@ -468,26 +432,29 @@ footer {
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: var(--space-xs);
+ gap: var(--space-xs);
}
.location {
- color: var(--accent-primary);
+ color: var(--color-accent-primary);
font-weight: 500;
}
.date {
- color: var(--text);
+ color: var(--color-text-secondary);
font-style: italic;
+ font-size: var(--font-size-sm);
}
.degree,
.job-title {
font-weight: 600;
- color: var(--accent-secondary);
+ color: var(--color-accent-secondary);
}
.gpa {
margin-bottom: var(--space-md);
+ font-size: var(--font-size-sm);
}
.coursework {
@@ -501,29 +468,274 @@ footer {
.bullet-list li {
margin-bottom: var(--space-xs);
+ line-height: 1.7;
+}
+
+.skills-sections {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2xl);
+}
+
+.skill-section {
+ position: relative;
+}
+
+.skill-heading {
+ font-size: var(--font-size-lg);
+ color: var(--color-accent-primary);
+ margin-bottom: var(--space-lg);
+ border-bottom: 2px solid var(--color-border);
+ padding-bottom: var(--space-sm);
+ position: relative;
+}
+
+.skill-heading::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 60px;
+ height: 2px;
+ background-color: var(--color-accent-primary);
}
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
- gap: var(--space-md);
+ gap: var(--space-sm);
}
.skill-category {
- display: flex;
- align-items: center;
- gap: var(--space-xs);
+ background: linear-gradient(135deg, var(--pink-50), var(--cream-50));
+ border: 1px solid var(--pink-200);
+ border-radius: var(--radius-md);
+ padding: var(--space-sm) var(--space-md);
+ font-size: var(--font-size-sm);
+ font-weight: 500;
+ color: var(--color-text-primary);
+ text-align: center;
+ position: relative;
+ overflow: hidden;
}
.skill-category::before {
- content: '•';
- color: var(--accent-primary);
- font-size: 1.5rem;
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
+.skill-category:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-md);
+ border-color: var(--color-accent-primary);
+ background: linear-gradient(135deg, var(--pink-100), var(--cream-100));
+}
+
+.skill-category:hover::before {
+ left: 100%;
+}
+
+footer {
+ background-color: var(--pink-100);
+ padding: var(--space-xl);
+ text-align: center;
+ margin-top: auto;
+}
+
+.social-links {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: var(--space-md);
+ list-style: none;
+ margin-bottom: var(--space-md);
+}
+
+.social-links li {
+ position: relative;
+}
+
+.social-links li:not(:last-child)::after {
+ content: "•";
+ position: absolute;
+ right: calc(-1 * var(--space-md) / 2);
+ color: var(--color-text-secondary);
+}
+
+.theme-note {
+ margin-top: var(--space-md);
+ padding: var(--space-sm) var(--space-md);
+ display: inline-block;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: var(--radius-md);
+ font-size: var(--font-size-sm);
+}
+
+.back-link:hover {
+ transform: translateX(-4px);
+}
+
+.dark-mode {
+ --pink-50: #3A2A35;
+ --pink-100: #59354B;
+ --pink-200: #8E5773;
+ --pink-300: #B47A93;
+ --pink-400: #D7A1B8;
+ --pink-500: #E9C3D3;
+ --sage-200: #3D5D3E;
+ --sage-300: #7BA97D;
+ --sage-400: #5D8F5F;
+ --sage-500: #4A7A4C;
+ --color-text-primary: #f7fafc;
+ --color-text-secondary: #a0aec0;
+ --color-bg-primary: #1a202c;
+ --color-bg-secondary: #2d3748;
+ --color-border: var(--pink-300);
+}
+
+
+.dark-mode .projects h2::after,
+.dark-mode .resume-section h2::after {
+ background: linear-gradient(to right, var(--pink-400), transparent);
+}
+
+.dark-mode .skill-heading {
+ border-bottom-color: var(--pink-300);
+}
+
+.dark-mode .skill-heading::after {
+ background-color: var(--pink-400);
+}
+
+.dark-mode .skill-category {
+ background: linear-gradient(135deg, var(--pink-100), var(--sage-200));
+ border-color: var(--pink-300);
+ color: var(--color-text-primary);
+}
+
+.dark-mode .skill-category:hover {
+ background: linear-gradient(135deg, var(--pink-200), var(--sage-300));
+ border-color: var(--pink-400);
+}
+
+@media (max-width: 768px) {
+ :root {
+ --container-padding: var(--space-sm);
+ }
+
+ .menu-toggle {
+ display: flex;
+ }
+
+ .nav-links {
+ position: fixed;
+ top: 60px;
+ left: 0;
+ right: 0;
+ background-color: var(--color-bg-primary);
+ flex-direction: column;
+ padding: var(--space-md);
+ box-shadow: var(--shadow-lg);
+ border-top: 1px solid var(--pink-200);
+ transform: translateY(-100%);
+ opacity: 0;
+ pointer-events: none;
+ transition: all var(--duration-normal) var(--ease-out);
+ z-index: 100;
+ }
+
+ .nav-links.menu-open {
+ transform: translateY(0);
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ .nav-links li {
+ width: 100%;
+ }
+
+ .nav-links a {
+ width: 100%;
+ justify-content: center;
+ padding: var(--space-md);
+ margin-bottom: var(--space-xs);
+ }
+
+ .intro {
+ padding: var(--space-lg);
+ }
+
+ .education-header,
+ .experience-header {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .resume-section {
+ padding: var(--space-lg);
+ }
+
+ .skills-grid {
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ }
+
+ .project-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .skills-sections {
+ gap: var(--space-xl);
+ }
+}
+
+@media (min-width: 769px) {
+ .project-grid {
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ }
+
+ .skills-grid {
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+ }
+}
+
+@media (min-width: 1024px) {
+ .project-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ .skills-grid {
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
}
@media print {
+ :root {
+ --color-bg-primary: white;
+ --color-bg-secondary: white;
+ --shadow-sm: none;
+ --shadow-md: none;
+ --shadow-lg: none;
+ }
+
body {
background-color: white;
+ color: black;
}
header,
@@ -542,46 +754,25 @@ footer {
box-shadow: none;
page-break-inside: avoid;
margin-bottom: var(--space-lg);
+ border: 1px solid #ddd;
}
.resume-section:hover {
transform: none;
box-shadow: none;
}
-}
-.skill-heading {
- font-size: 1.1rem;
- color: var(--accent-primary);
- margin-top: var(--space-lg);
- margin-bottom: var(--space-sm);
- border-bottom: 1px solid var(--sage-200);
- padding-bottom: var(--space-xs);
-}
-
-.skill-heading:first-of-type {
- margin-top: var(--space-lg);
-}
-
-.dark-mode .skill-heading {
- border-bottom-color: var(--pink-300);
-}
-
-@media (max-width: 768px) {
- .education-header,
- .experience-header {
- flex-direction: column;
+ a {
+ color: black;
+ text-decoration: underline;
}
- .resume-section {
- padding: var(--space-lg);
+ .project {
+ border: 1px solid #ddd;
}
- .skills-grid {
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ .skill-category {
+ background: #f5f5f5;
+ border: 1px solid #ddd;
}
-}
-
-.back-link:hover {
- transform: translateX(-4px);
}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index bef093c..7541cee 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { usePathname } from 'next/navigation';
import { Header } from '@/components/Header/Header';
import { Footer } from '@/components/Footer/Footer';
import './globals.css';
+import './Navigation.css';
export default function RootLayout({
children,
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 21cfcf6..af7ccc8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,8 +9,6 @@ export default function Home() {
Hi! I'm Charlotte
About Me
I'm a cybersecurity student from the Northeast USA. I currently work as a security engineer at the Leahy Center in Burlington, VT.
- Most of my coding projects are hosted on my Forgejo server at git.charlotte.sh
- Hiring? you can find my resume here
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 6e798af..b4e7045 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,5 +1,5 @@
import { ExternalLink, Rss } from 'lucide-react';
-import { footerLinks } from '@/data/social';
+import { footerLinks } from '@/data/navigation';
export function Footer() {
const currentYear = new Date().getFullYear();
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index ffcecb5..b93a403 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,8 +1,9 @@
+// Header.tsx
import { Navigation } from './Navigation';
export function Header() {
return (
-