Update background, navbar, and theme styling - #25
Merged
Conversation
Update navbar styling to create a frosted glass effect: - Apply backdrop-blur-md with semi-transparent background - Move padding from header to nav element - Add rounded-lg corners for polished appearance - Reduce header top padding to pt-2 The blur effect is applied only to the nav element's padded area, creating a floating navbar appearance over the animated background.
- Changed font import from Inter to Instrument_Sans in layout.tsx - Updated font variable name from 'inter' to 'instrumentsans' - Updated Tailwind config to reference new font variable - Maintained Space Mono as monospace typewriter font - Switched background color from: - bg-neutral-950 to bg-[#1a0089] - bg-neutral-100 to bg-[#ff5e33]
- Adjusted top padding to only apply on large screens (lg:pt-6) - Made border radius responsive (lg:rounded-lg) - Removed max-w-full constraint for better fluid layout - Maintained backdrop blur and transparency effects
- Added 'peer: true' flags to multiple dependencies - Includes @mdx-js/loader, @mdx-js/react, @types/react - Includes TypeScript, ESLint plugins, and other dev dependencies - No functional changes, metadata update only
for better consistency with the design system.
Add @paper-design/shaders-react v0.0.60 to enable animated gradient and dithering effects for multiple components.
Replace static image with ImageDithering component. Background adapts to theme: orange (#ff3600) in light mode, blue (#1a0098) in dark mode. Fix copy icon visibility in light mode (white text instead of slate).
…ture Add patch-package patches for @paper-design/shaders@0.0.60 and @paper-design/shaders-react@0.0.60 to enable imageAlphaMode parameter on PaperTexture component. This allows controlling transparency behavior for images with alpha channels (opaque/preserve/blend modes). Cherry-picked off 6ae053e ref: 6ae053e
Replace static organization logo images with PaperTexture shader that adapts to theme. Background matches DynamicBackground colors: orange (#ff5e33) in light mode, blue (#1a0098) in dark mode.
- Update responsive max-width breakpoints (lg:max-w-3xl, xl:max-w-4xl, 2xl:max-w-5xl) - Add bottom margin (mb-3) and remove rounded corners - Improve hover text contrast in HoverHighlighter (gray-100 vs gray-200)
Add semantic color definitions for the design system: - dark-blue and portland-orange for primary brand colors - selago color scale for dark mode text and UI elements - chinese-black color scale for light mode text and UI elements These named colors replace hardcoded hex values throughout the app for better maintainability and theme consistency.
Replace hardcoded hex colors and generic gray palette with semantic theme colors for better design consistency: - Body background and text colors now use portland-orange/dark-blue and chinese-black/selago scales - Section heading gradients updated with theme-aware colors - Badge component styling updated with semantic colors and improved hover states - Remove unnecessary color classes from Footer and RecordTile duration This migration improves theme coherence and makes future color adjustments easier to manage centrally.
Increase bottom margins on large breakpoints (lg) to improve vertical spacing and readability on desktop screens: - Section components: mb-12 → lg:mb-20 - Header component: mb-10 → lg:mb-16
- Add 'use client' directive and theme detection to About component - Implement dynamic color switching based on dark/light mode - Add new color variants: 'turq' and 'darkpink' - Adjust highlight positioning and sizing for better visual balance - Update light mode colors to full opacity (remove /80 and /75 suffixes)
- Update LinkWithArrow components to use white text in light mode - Maintain colored links in dark mode for visual distinction - Adjust copy button text color from white to black in light mode - Update hypercube code link to point to dev branch instead of main - Refine dark mode link colors for better consistency
- Add white color option to StrikeHighlight component - Update StrikeHighlight colors to use white in light mode - Reverse section heading gradients from black-to-white for better contrast - Add explicit text colors to RecordTile duration for consistency - Apply gradient updates across Education, Experience, Projects & Skills sections
- Change heading gradient to use chinese-black colors in light mode - Add explicit styling to BackButton component - Update link colors to use chinese-black palette for consistency - Maintain dark mode styling with slate colors
…nces - Add skip-to-main-content link in home layout (WCAG 2.4.1) - Add aria-labels to copy-email button and theme switch (WCAG 4.1.2) - Add aria-hidden to decorative icons in Header and ThemeSwitch - Add focus-visible outline indicators to all interactive elements: Navbar links, LinkWithArrow, Accordion trigger, BackButton, ThemeSwitch - Fix heading hierarchy in RecordTile: h2/h3 → h3/h4 (WCAG 1.3.1) - Fix setTimeout memory leak in Header copy effect (add cleanup) - Add prefers-reduced-motion CSS rule to disable animations for users who prefer reduced motion
- Remove useMediaQuery from Header.tsx — replace isTablet conditional rendering of headshot with CSS md:hidden / hidden md:block classes - Remove useMediaQuery from RecordTile.tsx — replace isTablet/isDesktop with CSS md: and xl: responsive classes for duration positioning and logo hover reveal; eliminates hydration mismatch and layout flash - Remove useState wrappers for static prop data in Experiences.tsx, Projects.tsx, Skills.tsx — use props directly to allow server rendering
- Replace accordion height animation with grid-template-rows transition to avoid layout recalculation on every animation frame; remove unused keyframes from tailwind config - Remove mounted guards from RecordTile and About — resolvedTheme defaults to light mode (undefined !== 'dark') before hydration, so shader colors render correctly without blocking initial paint - Remove duplicate key props from inner ExperienceTile and ProjectTile (BlurFade parent already carries the correct key) - Fix font-weight mismatch in fonts.css: PyeongChangPeace-Bold.ttf declared as 400 but should be 700
- Remove :root/:dark CSS variable blocks and body color/background declarations from globals.css — these conflicted with the Tailwind bg-portland-orange / dark:bg-dark-blue classes on <body> and were never used by any component - Remove unused background/foreground tokens from tailwind.config.ts - Add cobalt-blue (#2b40f5) and portland-peach (#ff9871) to the design token palette — these were previously hard-coded in Badge.tsx - Replace dark:text-[#60d394] in About.tsx with dark:text-spring-green-400 - Replace dark:text-[#40b9d0] in ProjectTile.tsx with dark:text-firefly-300 - Update Badge.tsx default variant to use portland-peach / cobalt-blue tokens - Fix Badge outline variant: replace text-foreground (removed token) with explicit text-chinese-black-950 dark:text-selago-100
"is a interdisplinary" → "is an interdisciplinary"
All five section headings (About, Experience, Education, Skills, Projects) used identical bg-gradient-to-r clip-text styling — a decorative AI slop pattern that added visual noise without meaning. Replace with solid text-chinese-black-950 dark:text-selago-100, letting the distinctive Starlight font carry the heading character on its own. Also remove now-unused cn() utility imports from all five components.
… CSS dark: variants
…code quality fixes
…s-visible to Education link
…across components
Updated dependencies to fix Next.js and React CVE vulnerabilities. The fix-react2shell-next tool automatically updated the following packages to their secure versions: - next - react-server-dom-webpack - react-server-dom-parcel - react-server-dom-turbopack All package.json files have been scanned and vulnerable versions have been patched to the correct fixed versions based on the official React advisory. Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
* Update dark badge styling * Move blur fade delay config * style(badge): replace pure white dark mode bg with tinted selago-100 Swaps dark:bg-white for dark:bg-selago-100 to avoid a pure-white badge in dark mode, which looked jarring and off-brand. The selago-100 tint keeps legibility (contrast ~17:1) while staying on-palette and creating a natural rest→hover progression with the existing selago-200 hover. Also makes dark:hover:text-chinese-black-950 explicit for resilience.
…d-and-navbar # Conflicts: # src/components/Navbar.tsx
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Checks
Note: this project does not currently define a dedicated test script.