How Claude Skills Transformed My Portfolio's UI: A Complete Redesign Journey

The Problem: A Generic Portfolio

Like many developers, I had built my portfolio website with solid technical foundations—Astro 5, React 19, TypeScript, Tailwind CSS, and DaisyUI. It was functional, performant, and responsive. But there was one critical problem: it looked like every other AI-assisted portfolio out there.

Every page followed the same pattern: identical hero sections, repetitive card layouts, uniform spacing, and predictable CTAs. While technically sound, it lacked personality and visual distinction. I needed something that would stand out, but I didn’t want to spend weeks on manual design iterations.

That’s when I turned to Claude Code’s frontend-design skill.

The Solution: AI-Powered Design Iteration

Over the course of several sessions, I worked with Claude to systematically improve every aspect of my portfolio’s UI. What made this approach powerful wasn’t just the speed—it was the systematic methodology Claude brought to the redesign.

We broke the transformation into 7 strategic stages:

1. Remove Repetitive Patterns - Eliminate visual monotony
2. Add Visual Variety Per Page - Give each page a unique personality
3. Break Card Dependency - Diversify layout patterns beyond cards
4. Enhance Typography - Create dramatic size contrasts
5. Add Interactive Elements - Bring the site to life
6. Mobile Optimization - Perfect the mobile experience
7. Performance & SEO - Optimize for speed and discoverability

Let me walk you through the major transformations.

---

Stage 1: Breaking the Monotony

Before: Copy-Paste Consistency

Every page started with identical patterns:

• Same hero height and structure
• Identical section labels (< Label />)
• Copy-pasted CTA components
• Uniform spacing throughout

After: Strategic Variation

Claude helped me create 4 different label styles, 3 hero height variants, and 3 CTA variations:

Label Variations:

• Horizontal rules with gradient (Home)
• Simple overline (About)
• Side accent bar (Experience)
• No label at all (Projects, Contact)

Hero Heights:

• Compact: 400px for quick content access (About, Blog, Contact)
• Tall: 500px for emphasis (Projects, Experience)
• Full-height: Custom hero component (Home)

CTA Variants:

• Bold: Maximum visual impact (Home)
• Standard: Classic style (Skills, Experience)
• Minimal: Clean borders with hover animations (About, Projects)
• None: When the page IS the CTA (Contact, Blog)

---

Stage 2: Page-Specific Personalities

Instead of treating all pages equally, we gave each one a distinct visual identity.

Home Page: Memorable First Impression

Before: Standard hero with static text and card previews

After:

• 9xl typography on desktop (from 6xl)
• Animated stat counters (years of experience, projects, technologies)
• Visual separators between sections (diagonal SVG shapes, geometric dots, floating orbs)
• Reduced preview sections from 3 to 2 for better focus

Key Component: Created CountUp.tsx React component with scroll-triggered animations using Intersection Observer API.

---

Projects Page: Gallery-First Showcase

Before: Boring list layout with uniform cards

After:

• Masonry grid layout that adapts to content height
• Technology filtering with smooth fade animations
• Hover overlays revealing tech stack and achievements
• Visual hierarchy with varying card sizes

The filtering system uses vanilla JavaScript with data attributes for performance, and CSS transitions create smooth fade effects.

---

Experience Page: Visual Timeline

Before: Plain cards in a list

After:

• Vertical gradient timeline (primary → secondary → accent)
• Circular timeline nodes at each position
• Expandable achievement sections (React component)
• Responsive design (timeline hidden on mobile, prominent on desktop)

Key Component: ExpandableSection.tsx with smooth expand/collapse animations and rotating icons.

---

Blog Page: Editorial Aesthetic

Before: Grid of identical post cards

After:

• Featured post hero with full-width background image and gradient overlay
• Mixed card sizes (first 2 posts span 2 columns)
• Reading time estimates (200 words/min calculation)
• Category filtering with active state indicators
• Improved typography hierarchy for editorial feel

Created src/lib/reading-time.ts utility for automatic reading time calculation based on word count.

---

About Page: Personal Touch

Before: Corporate bio page

After:

• Fun facts grid in hero (location, years coding, favorite fuel ☕, timezone)
• Visual journey timeline with 5 milestones (2008-present)
• Emoji icons throughout (🎓 🚀 ☁️ 📱 ⚡ 🔒)
• “What Drives Me” and “Continuous Learning” cards
• Alternating timeline layout on desktop

This page went from corporate to personable while maintaining professionalism.

---

Contact Page: Simplified & Clear

Before: Too many cards and information overload

After:

• 3 essential contact methods only (Email, LinkedIn, GitHub)
• Gradient backgrounds for each card (primary, secondary, accent)
• Visual FAQ cards in 2x2 grid (replaced accordion)
• Reduced FAQ from 5 to 4 most important questions
• Location in subtle footer instead of prominent card

Less clutter, more clarity, faster action.

---

Stage 3: Breaking the Card Dependency

One of the biggest design challenges was breaking free from card-based layouts. While cards are useful, over-reliance creates visual monotony.

Claude helped me create 5 alternative layout components:

1. ListLayout

Clean list format with:

• Border-left accent colors
• Inline technology badges
• Animated proficiency bars
• Scroll reveal animations

2. TableLayout

Responsive expandable table with:

• Zebra striping for readability
• Expandable rows for details
• Mobile-responsive collapse
• Touch-friendly targets

3. SplitScreen

Asymmetric two-column layout with:

• Sticky navigation sidebar
• Alternating content layout
• Project numbering system
• Visual statistics display

4. BentoGrid

Pinterest-style irregular grid with:

• 5 size variants (small, medium, large, wide, tall)
• 7 color themes
• Icon support
• Stat displays

5. OverlappingCards

Depth-based layouts with 4 patterns:

• Stack (vertical offset)
• Cascade (diagonal offset)
• Float (scattered with rotation)
• Diagonal (dynamic transforms)

All these layouts are showcased at /layouts-demo on the site.

---

Stage 4 & 5: Typography & Interactivity

Typography Enhancements

• Display text utilities (4rem → 10rem with clamp)
• Stat number highlighting (.text-stat class)
• Pull quotes for blog/project content
• Strategic font weight contrasts (300, 400, 600, 700)

Interactive Elements

• Scroll-triggered reveal animations across all pages
• Hover lift effects on cards (scale-105 with shadow transitions)
• Animated skill proficiency meters with progress bars
• Expandable timeline sections with smooth transitions
• Smooth scroll behavior with CSS scroll-behavior

---

Stage 6: Mobile Optimization

Mobile users were getting a cramped experience. We systematically optimized:

Touch Targets

• All buttons now meet 44x44px minimum (WCAG AAA)
• Increased tap areas for social links and navigation

Responsive Spacing

<!-- Progressive spacing -->
py-6 sm:py-8 lg:py-20
gap-6 sm:gap-8
mt-6 sm:mt-8 lg:mt-12

<!-- Progressive sizing -->
w-32 sm:w-48 md:w-56 lg:w-72
text-5xl sm:text-6xl md:text-7xl lg:text-8xl

Hero Height Optimization

• Mobile: 400px (saves screen space)
• Desktop: 600px (more immersive)

Navbar Optimization

• Mobile: 64px height (from 80px)
• Saved 16px of precious vertical space

---

Stage 7: Performance & SEO

Performance Wins

• Lighthouse score: 96/100 on mobile
• Font loading optimization (removed 2 unused weights)
• Font preloading for critical fonts (Outfit, Manrope)
• Lazy loading for images

SEO Improvements

• Meta tags with OpenGraph and Twitter cards
• Structured data with semantic HTML
• Sitemap generation (18 pages)
• SEO-optimized keywords and descriptions

---

The Tech Stack Behind the Scenes

All these improvements were built on a solid foundation:

• Astro 5.10.1 - Static site generation with islands architecture
• React 19.1.0 - Interactive components only where needed
• TypeScript - Strict typing with path aliases
• Tailwind CSS v4 - Utility-first styling
• DaisyUI - Component library (34 themes)
• shadcn/ui - Radix UI primitives

Key Architectural Decisions

1. Islands Architecture: Static Astro components for content, React components only for interactivity
2. Centralized Data: src/data/portfolio.ts as single source of truth
3. Content Collections: Zod validation for type-safe MDX content
4. Multi-layer Styling: DaisyUI base + Tailwind utilities + custom CSS

---

Lessons Learned

What Worked Well

1. Systematic Approach: Breaking the redesign into 7 stages prevented overwhelm
2. Component Thinking: Creating reusable layout components pays dividends
3. Progressive Enhancement: Start with mobile, enhance for desktop
4. Performance Budget: Keep JavaScript minimal with islands architecture

Challenges Overcome

1. Breaking Habits: It’s easy to default to cards—forcing variety requires intentionality
2. Maintaining Consistency: Visual variety without chaos requires a strong design system
3. TypeScript Strictness: Adding new features required proper typing throughout
4. Mobile Testing: Desktop-first thinking leads to cramped mobile experiences

Claude’s Unique Contributions

What made Claude particularly valuable:

• Pattern Recognition: Identified repetitive patterns I had become blind to
• Systematic Thinking: Organized improvements into logical, prioritized stages
• Code Generation: Quickly scaffolded components with proper TypeScript types
• Best Practices: Recommended accessibility standards (44px touch targets, ARIA labels)
• Performance Awareness: Suggested Intersection Observer over scroll listeners

---

Measuring Success

Before vs After Metrics

Metric	Before	After	Change
Lighthouse Performance	87/100	96/100	+9 points
Unique Page Designs	1 pattern	6 distinct	+500%
Layout Varieties	1 (cards)	6 patterns	+500%
Touch Target Compliance	~60%	100%	+40%
Font Loading Time	420ms	280ms	-33%
Mobile Hero Height	600px	400px	-33%

Qualitative Improvements

• Visual Distinction: Portfolio no longer looks AI-generated
• Page Identity: Each page has memorable characteristics
• Mobile UX: Significantly improved usability on small screens
• Performance: Faster loads with better perceived performance
• Accessibility: Better contrast, touch targets, and semantic HTML

---

The Future: What’s Next?

While the 7 stages are complete, there are exciting optional enhancements on the roadmap:

Potential Next Steps

1. CMS Integration: Replace static data with headless CMS (Sanity, Contentful)
2. Animations Library: Add Framer Motion for advanced transitions
3. Tech Brutalist Theme: Optional terminal-style aesthetic with ASCII art
4. A/B Testing: Measure which design variations convert better
5. Micro-interactions: Add delightful hover states and loading animations

Continuous Iteration

The beauty of this approach is that it’s iterative and systematic. You don’t need to redesign everything at once. Pick a stage, complete it, ship it, measure it.

---

How You Can Apply This

If you’re looking to improve your own portfolio or website, here’s my recommended approach:

1. Audit Your Current Site

• Identify repetitive patterns (same hero, same cards, same CTAs)
• List pages that feel too similar
• Check mobile usability (touch targets, spacing)
• Run Lighthouse audit

2. Prioritize High-Impact Changes

• Start with Stage 1 (Remove Repetitive Patterns) - quick wins
• Move to Stage 2 (Visual Variety) - high impact
• Then Stage 6 (Mobile Optimization) - critical for users

3. Work in Small Batches

• One page or component at a time
• Commit frequently with descriptive messages
• Test on real devices, not just browser dev tools

4. Leverage AI Thoughtfully

• Use Claude Code’s frontend-design skill for systematic improvements
• Ask for multiple design variations, not just the first suggestion
• Request best practices for accessibility and performance

5. Measure and Iterate

• Use Lighthouse for performance metrics
• Check analytics for engagement (time on site, bounce rate)
• Gather feedback from real users

---

Conclusion

Redesigning my portfolio with Claude Code’s frontend-design skill wasn’t about replacing human creativity—it was about accelerating systematic improvement. Claude brought structure, best practices, and rapid iteration to what could have been weeks of manual design work.

The result is a portfolio that:

• ✅ Stands out visually from generic AI-assisted designs
• ✅ Provides unique, memorable experiences on each page
• ✅ Performs excellently on mobile and desktop
• ✅ Maintains clean, maintainable code architecture
• ✅ Scores 96/100 on Lighthouse performance

If you’re a developer with a generic-looking portfolio, don’t settle. With the right approach and tools like Claude Code, you can create something distinctive and professional in a fraction of the time.

Want to see the results live? Visit nilushan.dev and explore the transformation yourself.

---

Resources

• Claude Code: claude.ai/code
• Astro Framework: astro.build
• DaisyUI Themes: daisyui.com/docs/themes
• Tailwind CSS: tailwindcss.com
• My Portfolio Repository: github.com/nilushan/profile-astro

---

This blog post documents real improvements made over November 2025 across multiple sessions with Claude Code. All code examples, screenshots, and metrics are from actual production implementation.