chore: Vue transition elements across multiple page and component

[gocanto]

Summary by CodeRabbit

• Bug Fixes

  • Improved animation sequencing across pages and components for smoother enter/leave transitions.
  • Fixed Projects skeleton behavior to dynamically reflect actual content count during loading.

• Style

  • Added/updated styling for side-nav social links and adjusted fade transition styles for more stable layout.
  • Refined Resume page layout classes for more consistent responsive spacing.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds mode="out-in" to many Vue <transition> wrappers to change enter/leave sequencing. Also: ProjectsPage replaces a hard-coded skeleton loop with a computed skeletonCount; ResumePage adds dynamic class binding; CSS adds a .blog-side-nav-social-link rule and removes some absolute-positioning from fade enter rules; SideNavPartial swaps to the new CSS class.

Changes

Cohort / File(s)	Summary
Simple transition mode changes src/components/WidgetSkillsTransitionWrapper.vue, src/components/WidgetSocialTransitionWrapper.vue, src/pages/AboutPage.vue, src/pages/PostPage.vue, src/pages/TagPostsPage.vue, src/partials/ArticlesListPartial.vue, src/partials/FeaturedProjectsPartial.vue, src/partials/TalksPartial.vue	Added mode="out-in" to existing <transition name="fade" appear> elements; no other logic changes.
Projects page — transition + skeleton logic src/pages/ProjectsPage.vue	Added mode="out-in"; replaced v-for="index in 4" skeleton loop with a computed skeletonCount that returns projects.length when present, otherwise 4; imported computed.
Resume page — transition + dynamic classes src/pages/ResumePage.vue	Added mode="out-in"; changed static classes to dynamic binding :class="['space-y-12', resumeSectionsTotalHeight]" on main content wrappers.
Accessible dialog transition src/components/AccessibleDialog.vue	Added mode="out-in" to the Transition wrapper; no API changes.
Side nav class change src/partials/SideNavPartial.vue	Swapped anchor CSS class from blog-side-nav-router-link-a-resting to the new blog-side-nav-social-link for social links.
CSS adjustments src/css/support/blog.css	Added .blog-side-nav-social-link styles (text color and hover + dark variants); removed absolute-positioning/layout adjustments from .fade-enter-active (kept pointer-events: none on .fade-leave-active), simplifying fade transition CSS.

Sequence Diagram(s)

sequenceDiagram
    participant UI as UI/Template
    participant Transition as Vue Transition
    participant Old as Outgoing Element (skeleton/error)
    participant New as Incoming Element (content)

    rect `#e6f4ea`
    Note right of Transition: New behavior — mode="out-in"
    UI->>Transition: toggle state (show content)
    Transition->>Old: start leave
    Old-->>Transition: leave complete
    Transition->>New: insert & start enter
    New-->>Transition: enter complete
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Homogeneous change across many files (same transition attribute) reduces review complexity.
• Files that merit focused attention:
  • src/pages/ProjectsPage.vue — verify skeletonCount logic and import of computed.
  • src/pages/ResumePage.vue — ensure resumeSectionsTotalHeight is defined and class binding behaves as intended.
  • src/css/support/blog.css and src/partials/SideNavPartial.vue — confirm visual/hover behavior for the new .blog-side-nav-social-link.

Possibly related PRs

• chore: Enhance UX - II #163 — Related set of transition/fade changes across multiple components (overlaps with mode="out-in" edits).
• feat: Skeletons cards + Format #85 — Changes around ProjectsPage skeleton/rendering logic; likely overlaps with the skeletonCount refactor.
• fix: View Transitions #165 — Modifications to fade transition CSS selectors and layout rules; directly related to the CSS adjustments here.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title 'chore: Vue transition elements across multiple page and component' is incomplete and cuts off mid-sentence, making it unclear and unprofessional.	Complete the title to clearly describe the main change, such as 'chore: Add out-in transition mode to Vue transition elements' or 'chore: Fix layout shifts with out-in transitions'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1d2bf72 and eb85eb0.

📒 Files selected for processing (3)

• src/components/AccessibleDialog.vue (1 hunks)
• src/css/support/blog.css (2 hunks)
• src/partials/SideNavPartial.vue (1 hunks)

---

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

[gocanto]

@codex review

[chatgpt-codex-connector]

Codex Review: Didn't find any major issues. Swish!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".