refine experience section surface and link styling

[aagra109]

Summary by CodeRabbit

• Style
  • Updated the color palette with a new surface-based theme system.
  • Enhanced the Experience section with refined styling and interactive company links featuring an icon and underline animation.
  • Improved visual presentation of job metadata and tech stack displays with updated color treatment.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b1edea4e-bd47-4a79-ad17-74c6355bb7e1

📥 Commits

Reviewing files that changed from the base of the PR and between 36e2829 and a2bfd90.

📒 Files selected for processing (3)

• src/app/globals.css
• src/components/Experience.tsx
• tailwind.config.ts

---

📝 Walkthrough

Walkthrough

This PR updates the design token system by replacing paper-based color variables with surface and ink-deep variants, adjusts Tailwind terracotta color configuration, introduces a new layered gradient background utility, and applies the updated theme tokens to the Experience component with interactive enhancements including arrow icons and animated underlines.

Changes

Experience Design Token and Component Refresh

Layer / File(s)	Summary
Color tokens and theme system tailwind.config.ts, src/app/globals.css	Tailwind terracotta is refactored from a single variable reference to an object with DEFAULT and bright variants. CSS :root theme palette is reworked by removing --paper-* variables and introducing --surface-* variants; --terracotta, --terracotta-bright, and --ink-deep HSL values are updated.
Experience surface gradient utility src/app/globals.css	New .experience-surface utility class in the utilities layer sets background to --ink-deep base with overlaid linear and radial gradients using --terracotta.
Experience component styling and interactions src/components/Experience.tsx	ArrowUpRight icon is imported and integrated into the company link markup with animated underline effect. Section and article containers apply the new experience-surface and ink-deep-card theme classes. Points and skills loops include indices in React keys. All text, border, and badge colors are updated to use the new ink-deep-card and --surface-* design tokens.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• aagra109/portfolio#31: Main PR's src/app/globals.css theme-token overhaul (introducing --terracotta/--ink-deep/surface colors) and src/components/Experience.tsx switch to the ink-deep/terracotta experience styling are directly aligned with the retrieved PR's experience-section redesign and matching theme-token updates.

Poem

🐰 Fresh hues in the palette, a gradient so bright,
Surface and ink-deep replace paper's pale light,
With arrows and underlines dancing with grace,
The experience section now has its own face! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main changes: refining the Experience section's surface styling (new CSS variables and utilities) and link styling (company links with icons and animations).
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch redesign-experience-section

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}