revamp ui - #24
Merged
Merged
Conversation
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 21 minutes and 34 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughRemoved runtime theming and the ModeToggle; consolidated and replaced color tokens with new semantic surface/paper/noise/chart variables; added grain utilities and smooth scroll behavior; introduced SectionDivider and Footer; adjusted layout and multiple components to use new semantic styles, wrappers, and scale-based animations. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/components/Header.tsx (1)
10-14:⚠️ Potential issue | 🟠 MajorGuard smooth scrolling behind reduced-motion preference.
Line 12 always animates scroll. For accessibility, switch to
"auto"whenprefers-reduced-motion: reduceis set.🎯 Proposed fix
const scrollToSection = (sectionId: string) => { + const prefersReducedMotion = window.matchMedia( + "(prefers-reduced-motion: reduce)", + ).matches; + document.getElementById(sectionId)?.scrollIntoView({ - behavior: "smooth", + behavior: prefersReducedMotion ? "auto" : "smooth", block: "start", });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Header.tsx` around lines 10 - 14, The scrollToSection function always uses smooth scrolling; update it to respect the user's reduced-motion preference by checking window.matchMedia('(prefers-reduced-motion: reduce)').matches and set the scrollIntoView behavior to "auto" when true and "smooth" otherwise (i.e. change the behavior value used in the document.getElementById(sectionId)?.scrollIntoView call accordingly).src/components/Introduction.tsx (1)
30-38:⚠️ Potential issue | 🟠 MajorAdd reduced-motion support to hero entrance animation.
The
Introductioncomponent animates from off-screen without respectingprefers-reduced-motion, whileSkillsandExperiencealready implement this pattern. UseuseReducedMotion()to conditionally set initial, animate, and transition values, matching the established pattern where reduced motion uses explicit non-animated state values andduration: 0transitions.Example fix
-import { motion } from "framer-motion"; +import { motion, useReducedMotion } from "framer-motion"; const Introduction = () => { + const shouldReduceMotion = useReducedMotion(); + return ( <section> <div className="hero-grain relative px-0 py-2 sm:py-4"> <motion.div className="relative" - initial={{ x: "-100vw", scale: 0 }} + initial={shouldReduceMotion ? { x: 0, scale: 1 } : { x: "-100vw", scale: 0 }} animate={{ x: 0, scale: 1 }} - transition={{ - type: "spring", - stiffness: 120, - duration: 0.2, - }} + transition={ + shouldReduceMotion + ? { duration: 0 } + : { type: "spring", stiffness: 120, duration: 0.2 } + } >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Introduction.tsx` around lines 30 - 38, Introduction's hero animation currently ignores prefers-reduced-motion; wrap the motion settings with useReducedMotion() like the other components so motion is disabled when reduced motion is requested: import and call useReducedMotion() in the Introduction component, then conditionally set the motion.div props (initial, animate, transition) to non-animated explicit values (e.g., initial and animate equal positions/scale) and transition: { duration: 0 } when reduced; update the motion.div in Introduction to use these conditional values so the entrance animation respects reduced-motion preferences.
🧹 Nitpick comments (2)
src/app/page.tsx (1)
56-71: Avoid vertical clipping in the Experience wrapper.Line 56 uses
overflow-hidden, which can clip hover lift/shadows from experience cards. Prefer clipping only the x-axis here.♻️ Proposed tweak
- <div className="relative mt-8 overflow-hidden pt-10"> + <div className="relative mt-8 overflow-x-clip pt-10">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/page.tsx` around lines 56 - 71, The wrapper div currently uses "overflow-hidden" which vertically clips hover lift/shadows from the Experience cards; change that class to "overflow-x-hidden" on the div that contains the Experience component (the element with className "relative mt-8 overflow-hidden pt-10") so only horizontal overflow is clipped and vertical shadows/transform effects from Experience children are preserved.src/components/Experience.tsx (1)
73-73: Remove duplicate surface/border classes fromticket-cardusage.Line 73 repeats border/background styles already defined by
.ticket-cardinsrc/app/globals.css(Line 145-147). Keeping only the utility reduces drift.♻️ Proposed cleanup
- <Card className="ticket-card group relative isolate overflow-hidden rounded-[1.5rem] border-[hsl(var(--paper-border))] bg-[hsl(var(--paper-card))] transition-transform duration-300 hover:-translate-y-1"> + <Card className="ticket-card group relative isolate overflow-hidden rounded-[1.5rem] transition-transform duration-300 hover:-translate-y-1">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Experience.tsx` at line 73, The Card usage in the Experience component duplicates surface/border utilities already defined by the .ticket-card CSS; edit the Card element (the JSX with className containing "ticket-card") and remove the repeated border and background utility classes (e.g., border-[hsl(var(--paper-border))] and bg-[hsl(var(--paper-card))]) so the className relies on "ticket-card" for those styles and retains only the remaining utilities like group, relative, isolate, overflow-hidden, transition-transform, duration-300, and hover:-translate-y-1.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/globals.css`:
- Around line 44-46: The global rule forcing smooth scrolling should respect
users' reduced-motion preference: wrap or override the html { scroll-behavior:
smooth; } rule with a media query for prefers-reduced-motion: no-preference so
that smooth scrolling only applies when the user has not requested reduced
motion; add a prefers-reduced-motion: reduce media query to set scroll-behavior:
auto (or unset) to disable animated scrolling for users who prefer reduced
motion. Reference the html selector and the scroll-behavior declaration in
src/app/globals.css when making this change.
---
Outside diff comments:
In `@src/components/Header.tsx`:
- Around line 10-14: The scrollToSection function always uses smooth scrolling;
update it to respect the user's reduced-motion preference by checking
window.matchMedia('(prefers-reduced-motion: reduce)').matches and set the
scrollIntoView behavior to "auto" when true and "smooth" otherwise (i.e. change
the behavior value used in the
document.getElementById(sectionId)?.scrollIntoView call accordingly).
In `@src/components/Introduction.tsx`:
- Around line 30-38: Introduction's hero animation currently ignores
prefers-reduced-motion; wrap the motion settings with useReducedMotion() like
the other components so motion is disabled when reduced motion is requested:
import and call useReducedMotion() in the Introduction component, then
conditionally set the motion.div props (initial, animate, transition) to
non-animated explicit values (e.g., initial and animate equal positions/scale)
and transition: { duration: 0 } when reduced; update the motion.div in
Introduction to use these conditional values so the entrance animation respects
reduced-motion preferences.
---
Nitpick comments:
In `@src/app/page.tsx`:
- Around line 56-71: The wrapper div currently uses "overflow-hidden" which
vertically clips hover lift/shadows from the Experience cards; change that class
to "overflow-x-hidden" on the div that contains the Experience component (the
element with className "relative mt-8 overflow-hidden pt-10") so only horizontal
overflow is clipped and vertical shadows/transform effects from Experience
children are preserved.
In `@src/components/Experience.tsx`:
- Line 73: The Card usage in the Experience component duplicates surface/border
utilities already defined by the .ticket-card CSS; edit the Card element (the
JSX with className containing "ticket-card") and remove the repeated border and
background utility classes (e.g., border-[hsl(var(--paper-border))] and
bg-[hsl(var(--paper-card))]) so the className relies on "ticket-card" for those
styles and retains only the remaining utilities like group, relative, isolate,
overflow-hidden, transition-transform, duration-300, and hover:-translate-y-1.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 1052d498-05c9-4110-b772-257788f6b5c7
📒 Files selected for processing (7)
src/app/globals.csssrc/app/layout.tsxsrc/app/page.tsxsrc/components/Experience.tsxsrc/components/Header.tsxsrc/components/Introduction.tsxsrc/components/Skills.tsx
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/globals.css`:
- Around line 92-296: Multiple selectors in this CSS block (e.g.,
.site-nav-button, .section-kicker, .hero-title, .social-link, .skill-card,
.experience-pill) are violating the Stylelint rule
declaration-empty-line-before; run the style fixer or manually adjust formatting
so each declaration block follows the project's declaration-empty-line-before
policy (add or remove blank lines before declarations as configured), or run
"stylelint --fix" / your formatter on src/app/globals.css to apply the required
spacing fixes across those selectors so the lint check passes.
In `@src/components/SectionDivider.tsx`:
- Around line 1-24: Prettier check fails due to formatting issues in the
SectionDivider component; run Prettier to reformat the file and commit the
changes. Specifically, format the SectionDivider function and the
SECTION_DIVIDER_PATH constant (and any import/JSX spacing around cn and the
<svg>/<path> elements) by running a formatter command (e.g., prettier --write)
or your editor’s format action, then stage and push the updated file so Prettier
--check passes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 63e4394e-f97f-46ac-b51e-381ac1fcda12
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (10)
package.jsonsrc/app/globals.csssrc/app/page.tsxsrc/components/Experience.tsxsrc/components/Header.tsxsrc/components/Introduction.tsxsrc/components/ModeToggle.tsxsrc/components/SectionDivider.tsxsrc/components/Skills.tsxsrc/components/theme-provider.tsx
💤 Files with no reviewable changes (3)
- package.json
- src/components/ModeToggle.tsx
- src/components/theme-provider.tsx
✅ Files skipped from review due to trivial changes (1)
- src/components/Introduction.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- src/components/Header.tsx
- src/app/page.tsx
- src/components/Experience.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/Footer.tsx`:
- Around line 8-11: The social links container in Footer (the div with className
"flex items-center justify-center gap-3" and aria-label="Social links") lacks
landmark semantics; replace that div with a semantic nav element (or add
role="navigation" if nav isn't possible) and keep the aria-label to provide an
accessible navigation landmark for screen readers inside the Footer component.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: adb628ac-953e-4017-81e5-8b36b7b40544
📒 Files selected for processing (10)
src/app/globals.csssrc/app/layout.tsxsrc/app/page.tsxsrc/components/Experience.tsxsrc/components/Footer.tsxsrc/components/Header.tsxsrc/components/Introduction.tsxsrc/components/SectionDivider.tsxsrc/components/Skills.tsxsrc/components/social-icons.tsx
✅ Files skipped from review due to trivial changes (1)
- src/components/SectionDivider.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
- src/app/layout.tsx
- src/components/Header.tsx
- src/components/Skills.tsx
- src/components/Experience.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/globals.css`:
- Around line 76-77: Selected text color is too dark against the
semi-transparent accent selection; update the selection rule that sets
background-color: hsl(var(--primary) / 0.4) and color: hsl(var(--background)) so
the text uses the site's foreground/contrast color instead of the background
variable — e.g., change the color property to use hsl(var(--foreground)) or a
fully opaque/high-contrast color token and ensure it's not using a
semi-transparent value, updating the CSS selector that contains background-color
and color accordingly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: f4fd4423-a357-4b8e-b091-121f23a5d81e
📒 Files selected for processing (5)
src/app/globals.csssrc/components/Experience.tsxsrc/components/Footer.tsxsrc/components/SectionDivider.tsxsrc/components/Skills.tsx
✅ Files skipped from review due to trivial changes (1)
- src/components/SectionDivider.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- src/components/Footer.tsx
- src/components/Skills.tsx
- src/components/Experience.tsx
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 by CodeRabbit
New Features
Style
Chores