refactor: group experience/ui components into subdirectories

Add animation tokens to :root (--ease-spring, --ease-decelerate,
--ease-default, --duration-fast/normal/slow/spring). Apply spring easing
to section title enter. Add separate section-body transition: fast
blur-out exit (100ms), clean slide-in enter (350ms) delayed by 200ms so
content appears after the title animation completes.

next.config.ts

@@ -8,6 +8,9 @@ const isExport = process.env.STATIC_EXPORT === 'true';
 const nextConfig: NextConfig = {
   ...(isExport ? { output: 'export' } : {}),
   images: { unoptimized: true },
+  experimental: {
+    viewTransition: true,
+  },
 };
 
 export default nextConfig;

src/entities/Section/ui/SectionAccordion/SectionAccordion.test.tsx

@@ -56,9 +56,9 @@ describe('SectionAccordion', () => {
       expect(screen.queryByRole('link')).not.toBeInTheDocument();
     });
 
-    it('content wrapper has animate-fadeIn class', () => {
+    it('content wrapper has section-content class', () => {
       const { container } = render(<SectionAccordion {...activeProps} />);
-      expect(container.querySelector('.animate-fadeIn')).toBeInTheDocument();
+      expect(container.querySelector('.section-content')).toBeInTheDocument();
     });
   });
 });

src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import type { ReactNode } from 'react';
+import { ViewTransitionWrapper } from '$shared/ui';
 
 interface SectionAccordionProps {
   /**
@@ -36,23 +37,24 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
     <section id={id} className="scroll-mt-8">
       {isActive ? (
         <div className="mb-12">
-          <div className="mb-16">
+          <ViewTransitionWrapper name="section-content">
-            <h1
+            <div className="mb-16">
-              className="font-heading font-black text-5xl leading-[1.2] mb-0"
+              <h1
-              style={{ fontVariationSettings: "'WONK' 1, 'SOFT' 0" }}
+                className="font-heading font-black text-5xl leading-[1.2] mb-0"
-            >
+                style={{ fontVariationSettings: "'WONK' 1, 'SOFT' 0" }}
-              {number}. {title}
+              >
-            </h1>
+                {number}. {title}
-          </div>
+              </h1>
-          <div className="animate-fadeIn">{children}</div>
+            </div>
+          </ViewTransitionWrapper>
+          <ViewTransitionWrapper name="section-body">
+            <div className="section-content">{children}</div>
+          </ViewTransitionWrapper>
         </div>
       ) : (
-        <Link
+        <Link href={href} className="block w-full text-left mb-3 py-3 group border-b-0 hover:border-b-0">
-          href={href}
-          className="block w-full text-left mb-3 py-3 transition-all duration-200 hover:opacity-60 group border-b-0 hover:border-b-0"
-        >
           <h2
-            className="font-heading font-black text-2xl sm:text-3xl opacity-30 group-hover:opacity-50 transition-opacity"
+            className="font-heading font-black text-2xl sm:text-3xl opacity-30 group-hover:opacity-60 transition-opacity duration-200"
             style={{ fontVariationSettings: "'WONK' 1, 'SOFT' 0" }}
           >
             {number}. {title}

src/entities/experience/index.ts

@@ -1 +1 @@
-export { ExperienceCard } from './ui/ExperienceCard';
+export { ExperienceCard } from './ui';

src/entities/experience/ui/index.ts

@@ -0,0 +1 @@
+export { ExperienceCard } from './ExperienceCard/ExperienceCard';

src/entities/project/index.ts

@@ -1,3 +1 @@
-export { DetailedProjectCard } from './ui/DetailedProjectCard';
+export { DetailedProjectCard, ProjectCard, ProjectMetadata } from './ui';
-export { ProjectCard } from './ui/ProjectCard';
-export { ProjectMetadata } from './ui/ProjectMetadata';

src/entities/project/ui/DetailedProjectCard/DetailedProjectCard.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import { Card } from '$shared/ui';
-import { ProjectMetadata } from './ProjectMetadata';
+import { ProjectMetadata } from '../ProjectMetadata/ProjectMetadata';
 
 type Props = {
   /**

src/entities/project/ui/index.ts

@@ -0,0 +1,3 @@
+export { DetailedProjectCard } from './DetailedProjectCard/DetailedProjectCard';
+export { ProjectCard } from './ProjectCard/ProjectCard';
+export { ProjectMetadata } from './ProjectMetadata/ProjectMetadata';

src/shared/styles/theme.css

@@ -75,6 +75,15 @@
 
   /* === GRID === */
   --grid-gap: var(--space-3);
+
+  /* === ANIMATION === */
+  --ease-default: ease;
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-decelerate: cubic-bezier(0.25, 0, 0, 1);
+  --duration-fast: 100ms;
+  --duration-normal: 200ms;
+  --duration-slow: 350ms;
+  --duration-spring: 380ms;
 }
 
 @theme inline {
@@ -230,17 +239,93 @@
   border-right: var(--border-width) solid var(--blue);
 }
 
-/* Animations */
+/* Section content enter animation (initial render, no navigation) */
-@keyframes fadeIn {
+.section-content {
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity var(--duration-slow) var(--ease-default),
+    transform var(--duration-slow) var(--ease-default);
+}
+
+@starting-style {
+  .section-content {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+}
+
+/* Cross-section view transition (navigation between sections) */
+::view-transition-old(section-content) {
+  animation-name: section-fade-out;
+  animation-duration: var(--duration-normal);
+  animation-timing-function: var(--ease-default);
+  animation-fill-mode: both;
+}
+
+::view-transition-new(section-content) {
+  animation-name: section-fade-in;
+  animation-duration: var(--duration-spring);
+  animation-timing-function: var(--ease-spring);
+  animation-fill-mode: both;
+}
+
+@keyframes section-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes section-fade-in {
   from {
     opacity: 0;
-    transform: translateY(10px);
+    transform: translateY(12px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
-.animate-fadeIn {
+
-  animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+/* Section body: instant blur-out, clean slide-in */
+::view-transition-old(section-body) {
+  animation-name: section-body-out;
+  animation-duration: var(--duration-fast);
+  animation-timing-function: var(--ease-default);
+  animation-fill-mode: both;
+}
+
+::view-transition-new(section-body) {
+  animation-name: section-body-in;
+  animation-duration: var(--duration-slow);
+  animation-delay: var(--duration-normal);
+  animation-timing-function: var(--ease-decelerate);
+  animation-fill-mode: both;
+}
+
+@keyframes section-body-out {
+  from {
+    opacity: 1;
+    filter: blur(0);
+  }
+  to {
+    opacity: 0;
+    filter: blur(3px);
+  }
+}
+
+@keyframes section-body-in {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }

src/shared/ui/ViewTransitionWrapper/index.ts

@@ -0,0 +1 @@
+export { ViewTransitionWrapper } from './ui/ViewTransitionWrapper';

src/shared/ui/ViewTransitionWrapper/ui/ViewTransitionWrapper.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import { ViewTransitionWrapper } from './ViewTransitionWrapper';
+
+describe('ViewTransitionWrapper', () => {
+  it('renders children', () => {
+    render(
+      <ViewTransitionWrapper name="test">
+        <p>Hello</p>
+      </ViewTransitionWrapper>,
+    );
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+
+  it('renders multiple children', () => {
+    render(
+      <ViewTransitionWrapper name="test">
+        <p>First</p>
+        <p>Second</p>
+      </ViewTransitionWrapper>,
+    );
+    expect(screen.getByText('First')).toBeInTheDocument();
+    expect(screen.getByText('Second')).toBeInTheDocument();
+  });
+
+  it('does not add an extra wrapper DOM element', () => {
+    const { container } = render(
+      <ViewTransitionWrapper name="test">
+        <p>Content</p>
+      </ViewTransitionWrapper>,
+    );
+    expect(container.firstChild?.nodeName).toBe('P');
+  });
+});

src/shared/ui/ViewTransitionWrapper/ui/ViewTransitionWrapper.tsx

@@ -0,0 +1,26 @@
+import { Fragment, type ReactNode, ViewTransition as VT } from 'react';
+
+/**
+ * VT is undefined in stable react-dom (test env / non-experimental builds).
+ * Fall back to Fragment so children render and the name prop is silently ignored.
+ */
+const Transition = (VT ?? Fragment) as typeof VT;
+
+type Props = {
+  /**
+   * Maps to the view-transition-name CSS property
+   */
+  name: string;
+  /**
+   * Content to animate
+   */
+  children: ReactNode;
+};
+
+/**
+ * Wraps children in React's ViewTransition when available,
+ * falling back to a Fragment in environments where ViewTransition is undefined.
+ */
+export function ViewTransitionWrapper({ name, children }: Props) {
+  return <Transition name={name}>{children}</Transition>;
+}

src/shared/ui/index.ts

@@ -10,3 +10,4 @@ export { RichText } from './RichText';
 export type { ContainerSize, SectionBackground } from './Section';
 export { Container, Section } from './Section';
 export { TechStackBrick, TechStackGrid } from './TechStack';
+export { ViewTransitionWrapper } from './ViewTransitionWrapper';

tsconfig.json

@@ -18,7 +18,7 @@
         "name": "next"
       }
     ],
-    "types": ["vitest/globals"],
+    "types": ["vitest/globals", "react/canary"],
     "paths": {
       "@/*": ["./*"],
       "$shared/*": ["./src/shared/*"],