feat: add split-screen layout with sticky sidebar

[andimrob]

Summary

Redesigns the site with a Brittany Chiang-inspired split-screen layout featuring:

• Sticky sidebar (left, desktop) with name tag, typed name, title, social links, and navigation
• Colorful animated gradient underline on navigation links
• Scrollable content area (right) with About, Experience, and Projects sections
• Responsive mobile header for smaller screens

Changes

• ✅ Created new Sidebar component with all profile info and navigation
• ✅ Created MobileHeader for responsive mobile view
• ✅ Restructured App.tsx to use two-column flex layout
• ✅ Added colorful gradient underline animation to nav links
• ✅ Added scroll margin to sections for better anchor navigation
• ✅ Removed Header and Hero components (functionality moved to Sidebar)

Visual Preview

• Desktop: Side-by-side layout with sticky left sidebar
• Mobile: Stacked layout with fixed header at top

Test Plan

• Build passes (pnpm run build)
• Test desktop layout at various screen sizes
• Test mobile layout and header
• Verify navigation links scroll to correct sections
• Check colorful underline animation on active section
• Verify theme toggle works in both desktop and mobile
• Test social links open correctly

---

Summary by cubic

Adds a split-screen layout with a sticky sidebar and rebuilds the Experience and Projects sections with rich content and tech badges. Improves navigation, accessibility, and visual polish across the site.

• New Features

  • Experience timeline with roles, company links, descriptions, and color-coded tech badges; added “View Full Résumé”.
  • Projects list with interactive cards, descriptions, links, and tech badges; added “View Full Project Archive”.
  • “Skip to Content” link and mobile sticky section titles for About, Experience, and Projects.
  • Typed name prism in the sidebar with magnetic tilt and subtle glow; mobile theme toggle.

• Refactors

  • Replaced RevealSection/SectionHeading with semantic sections and scroll-margins; moved Footer into the content panel.
  • Removed Header and its Storybook story.
  • CSS updates: prism height and side/front glow via magnetic-strength, animated gradient underline, smaller tagline.

^{Written for commit b8d49c3. Summary will update on new commits.}

[netlify]

✅ Deploy Preview for symphonious-blancmange-7aafce ready!

Name	Link
🔨 Latest commit	b8d49c3
🔍 Latest deploy log	https://app.netlify.com/projects/symphonious-blancmange-7aafce/deploys/69925b321fb29f0008a13abd
😎 Deploy Preview	https://deploy-preview-44--symphonious-blancmange-7aafce.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[cubic-dev-ai]

1 issue found across 7 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="src/index.css">

<violation number="1" location="src/index.css:41">
P2: Setting `--prism-h` to `auto` makes the `calc()` in the prism transforms invalid (auto can’t be divided), so the 3D faces won’t translate. Use a length value for `--prism-h` and override it where needed instead of `auto`.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}