feat: Layout v2 - Two-column design with chat sidebar#2
Merged
Conversation
Major layout overhaul focusing on storytelling and AI transformation: Layout Changes: - Two-column grid: main content (8 cols) + chat sidebar (4 cols) - Removed complex 12-col nested grid in favor of simpler structure - Chat interface now sticky on right side Header: - "Gareth Chainey" as permanent title - Animated role subtitle cycling through: Product Designer, Product Manager, Developer, Prototyper, AI Augmented - Sun/Moon theme toggle with Lucide icons GitHub Contributions: - Larger cells (4x4px), centered layout - Year labels (2024 → 2025) showing progression - Visual story: empty early 2024 → active 2025 - Caption: "Early 2024: Learning AI tools → 2025: Building daily with AI" Experience Timeline: - Click to expand with brand-colored highlights - Enterprise AI Group (sky), SEEK (pink), Best Practice (violet) Chat Interface: - Black message bubbles in day mode (was blue) - Improved error handling for billing issues - Switched to claude-3-5-haiku model Added Dependencies: - lucide-react for icons - agentation for dev tools Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Create a blog/changelog page documenting the AI-assisted development journey of this portfolio website. Features: - /blog route with development journal article - Changelog section showing version history (v0.1.0 → v0.3.0) - Each version entry includes: - Changes list - AI tools used - Branch/PR links - "Dev Blog" link added to main page header Content: - Documents the iterative process of building with AI - Explains key learnings (start complex, simplify later) - Lists the tech stack - Shows how GitHub contributions tell the transformation story Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Create a TypeScript-based content system for managing case studies. Defines Project and ContentBlock types for structured content blocks including text, headings, lists, images, videos, and embeds. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Renders content blocks with support for headings, text, lists, images, GIFs, videos, and embeds. Uses Framer Motion for staggered entrance animations. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Grid layout showing all case studies with ASCII placeholders, category and year metadata, and tags preview. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Dynamic routing for individual case studies with: - Project header with category, year, title, description, tags - Hero image support - Content rendering via CaseStudyContent - Collapsible chat sidebar with page-specific context Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace blue accent with Tailwind amber: - Light mode: amber-600 (#d97706) - Dark mode: amber-400 (#fbbf24) Also update GitHub contribution graph colors from green to amber and add scrollbar-hide utility for carousels. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Expand accent color to support light variant for hover states and subtle backgrounds. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace Anthropic Claude with OpenAI gpt-4o-mini for: - Faster response times - Shorter token limit (256) for concise answers - Better cost efficiency Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update dependencies to use OpenAI SDK for chat functionality. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Accept pageContext prop for context-aware responses - Add follow-up question pills after each response - Improve prompt for shorter, more conversational answers - Fix scroll bug with min-h-0 and flex-shrink-0 - Add amber accent to send button Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Reference documentation for Gareth's persona and background used by the chat system and potential voice agents. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Full-page dialog component for showing expanded content from chat responses. Supports title, body content, and optional navigation link with amber CTA button. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Major layout update: - Fixed top header with name and navigation links - Centered hero with "The future is Now" tagline - Animated role cycling through designer roles - GitHub contributions graph with amber accent - Projects carousel with auto-scroll and ASCII placeholders - Collapsible chat sidebar with page context - Chat doesn't auto-open on homepage (only on case studies) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…an' and 'feature/chat-improvements-clean' into feature/layout-v2-two-column-chat
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
Major layout redesign implementing a cleaner two-column layout with sticky chat sidebar.
Closes #1
Changes
Screenshot
See Issue #1 for visual documentation
Test Plan
🤖 Generated with Claude Code