Venkat Teja Portfolio - Premium UI Skill

Overview

This skill ensures all UI/UX decisions follow premium, modern standards for a developer portfolio that attracts high-value clients.

Core Principles

Visual Quality

• No Generic "Developer Portfolio" templates — Avoid the standard dark mode + glowing gradients + monospace everything
• Premium Typography — Use Space Grotesk for headlines, Inter for body, clear hierarchy
• Thoughtful Spacing — Generous whitespace (not cramped), proper section breathing room
• Subtle Animations — Smooth, purposeful motion (not flashy distraction)

Animation Rules

• All transitions: 300-500ms duration
• Easing: cubic-bezier(0.16, 1, 0.3, 1) for smooth deceleration
• Hover states: Subtle lift (transform: translateY(-4px)) + shadow increase
• Scroll reveals: Fade up + slight scale (0.95 → 1)
• No infinite spinning loaders or aggressive bouncing

Color Usage

• Primary accent: #6366f1 (indigo)
• Secondary accent: #06b6d4 (cyan)
• Background: Deep dark #0a0a0f (not pure black)
• Text: High contrast white/gray scale, not dimmed to invisibility
• Gradients: Use sparingly, smooth transitions (not harsh rainbow effects)

Layout Principles

• Asymmetric grids where appropriate (not everything centered)
• Cards with clear hierarchy — subtle borders, hover states
• Code snippets — Proper syntax highlighting, terminal aesthetic
• Project showcases — Large visuals, clear CTAs, GitHub links

Motion Intensity Settings

DESIGN_VARIANCE: 7        // Modern, slightly asymmetric layouts
MOTION_INTENSITY: 6       // Engaging but not overwhelming
VISUAL_DENSITY: 5        // Balanced content density

Anti-Slop Rules

• ❌ No "Typing effect" on hero text (cliché)
• ❌ No generic "Available for hire" badges with pulsing dots (overused)
• ❌ No placeholder Lorem ipsum anywhere
• ❌ No broken links or "Coming soon" buttons
• ❌ No perfectly symmetrical layouts (feels AI-generated)
• ❌ No generic code window mockups (use real screenshots)
• ✅ Working contact form with real backend
• ✅ Actual project screenshots/code snippets
• ✅ Real testimonials or reviews
• ✅ Clear pricing/CTAs
• ✅ Human imperfections: slight rotation, film grain, organic chaos
• ✅ Personal details: workspace, tools, interests, real photos
• ✅ Asymmetric layouts with intentional tension

Specific Component Rules

Hero Section

• Large, bold typography
• Terminal/code window visual (not photo placeholder)
• Stats that animate on scroll
• Clear dual CTAs (Primary + Secondary)

Projects

• Featured project spans full width
• Grid of smaller projects below
• Real GitHub links
• Tech tags with proper hover states

Skills

• Icon + text grid (not just text list)
• Hover reveals additional detail
• Clear categorization

Contact

• Form with real submission handling
• Direct email/phone/WhatsApp links
• Social proof (GitHub stars, etc.)

Responsive Behavior

• Mobile: Stack everything, maintain readability
• Tablet: 2-column grids
• Desktop: Full layout with animations
• Reduce motion if prefers-reduced-motion

Performance

• Lazy load images below fold
• Optimize all assets
• Smooth 60fps animations only