Skip to content

Latest commit

 

History

History
407 lines (354 loc) · 9.36 KB

DESIGN_SYSTEM.md

File metadata and controls

407 lines (354 loc) · 9.36 KB

🌟 Portfolio Revamp - Visual Overview

🎨 Design System

Typography Scale

Hero Titles      → Unbounded (68px - 144px) - Bold, Futuristic
Page Headings    → Unbounded (48px - 96px)  - Strong Presence
Section Titles   → Unbounded (32px - 48px)  - Clear Hierarchy
Body Text        → Space Grotesk (16px - 24px) - Modern Readable
UI Elements      → Syne (14px - 18px)       - Clean Premium
Accents          → Fraunces (16px - 20px)   - Elegant Touch

Color Palette

Backgrounds:
- Primary Black:     #000000
- Surface Black:     #0a0a0a
- Card Background:   rgba(255,255,255,0.05)

Accent Colors:
- Primary Blue:      #3b82f6 (Tech/Trust)
- Purple:            #a855f7 (Premium/Creative)
- Cyan:              #06b6d4 (Modern/Fresh)
- Pink:              #ec4899 (Energy/Action)
- Emerald:           #10b981 (Success/Growth)
- Orange:            #f97316 (Warmth/Conversion)

Text:
- Primary:           #ffffff (Pure White)
- Secondary:         #d1d5db (Gray 300)
- Tertiary:          #9ca3af (Gray 400)

Gradient Combinations

Tech/Professional:   from-blue-600 to-purple-600
Creative/Premium:    from-purple-600 to-pink-500
Energy/Action:       from-orange-600 to-red-500
Growth/Nature:       from-green-500 to-emerald-600
Modern/Fresh:        from-blue-500 to-cyan-600
Elegant/Luxury:      from-indigo-500 to-purple-600
Warm/Inviting:       from-yellow-500 to-orange-600

📄 Page Breakdown

Homepage (/)

Structure:
├─ Hero Section
│  ├─ Animated Background (Meteors + Grid)
│  ├─ Navigation Bar (with Services link)
│  ├─ Status Badge ("Available for new projects")
│  ├─ Main Title "Crafting Digital Experiences"
│  ├─ Subtitle with description
│  └─ CTA Buttons:
│     ├─ "View My Work" (White)
│     ├─ "Hire Me" (Gradient - NEW!)
│     └─ "Get In Touch" (Outline)
│
├─ Sparkles Divider (Cosmic transition)
│
├─ About Section
│  ├─ Profile Image (with glow effect)
│  └─ Description text
│
├─ Experience Timeline
│  ├─ Animated badge buttons
│  └─ Two main sections:
│     ├─ "Greetings, Ladies & Gentlemen"
│     └─ "Freelance & Personal Projects"
│
├─ Skills Showcase
│  ├─ Background Circles animation
│  ├─ Skills Grid
│  └─ Technology Marquee
│
├─ Projects Timeline
│  └─ Three main projects displayed
│
├─ Social Connect
│  └─ Social media links
│
└─ Thank You Section
   └─ Sparkles animation

Services Page (/services) - NEW!

Structure:
├─ Hero Section
│  ├─ Premium badge
│  ├─ Title "Transform Your Vision Into Digital Reality"
│  ├─ Description
│  └─ CTA Buttons
│
├─ Service Packages Section
│  ├─ Section Header
│  ├─ Location Toggle (India/International)
│  └─ Three Package Cards:
│     │
│     ├─ Landing Page
│     │  ├─ Icon (Blue/Cyan gradient)
│     │  ├─ Price: ₹15,000 / $300
│     │  ├─ Delivery: 5-7 days
│     │  ├─ 6 Features
│     │  └─ "Get Started" button
│     │
│     ├─ Business Website (POPULAR)
│     │  ├─ Icon (Purple/Pink gradient)
│     │  ├─ Price: ₹35,000 / $600
│     │  ├─ Delivery: 14-21 days
│     │  ├─ 7 Features
│     │  ├─ Purple glow effect
│     │  └─ "Get Started" button
│     │
│     └─ Full-Stack Application
│        ├─ Icon (Orange/Red gradient)
│        ├─ Price: ₹75,000 / $1,500
│        ├─ Delivery: 30-45 days
│        ├─ 8 Features
│        └─ "Get Started" button
│
├─ Solutions I Build Section
│  ├─ Section Header
│  ├─ 8 Industry Cards (4 columns grid):
│  │  ├─ Restaurant Websites
│  │  ├─ Healthcare & Clinics
│  │  ├─ Educational Platforms
│  │  ├─ E-Commerce Stores
│  │  ├─ Real Estate Listings
│  │  ├─ Professional Portfolios
│  │  ├─ Business Websites
│  │  └─ High-Converting Landing Pages
│  │
│  └─ Bottom CTA
│     └─ "Don't see your industry?" message
│
└─ Final CTA Section
   ├─ "Ready to Build Something Extraordinary?"
   └─ Contact buttons

Thank You Page (/thank-you) - NEW!

Structure:
├─ Animated Background (Sparkles)
│
└─ Success Card
   ├─ Animated Checkmark (Green gradient)
   ├─ "Thank You!" title
   ├─ Success message
   ├─ Package name display
   │
   ├─ Info Cards (3 columns):
   │  ├─ Email Confirmation
   │  ├─ 48-Hour Response Time
   │  └─ Next Steps
   │
   ├─ Payment ID display
   │
   ├─ Contact Section
   │  ├─ Email button
   │  └─ WhatsApp button
   │
   └─ Navigation Buttons
      ├─ "Back to Home"
      └─ "View More Services"

🎭 Animation Guidelines

Entrance Animations

// Standard entrance
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}

// Hero entrance
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8 }}

// Staggered list items
transition={{ duration: 0.5, delay: index * 0.1 }}

Hover Effects

/* Buttons */
hover:scale-105 
hover:shadow-lg

/* Cards */
hover:-translate-y-2
hover:border-white/20
hover:shadow-[0_0_40px_rgba(59,130,246,0.15)]

/* Icons */
group-hover:scale-110
transition-transform duration-300

Microinteractions

/* Button press */
active:scale-95

/* Smooth transitions */
transition-all duration-300

/* Icon animations */
group-hover:translate-x-1 (arrows)
animate-ping (status dots)

📐 Spacing System

Component Padding:
- Hero sections:     py-20 (80px)
- Content sections:  py-16 (64px)
- Cards:            p-6 to p-8 (24px-32px)
- Buttons:          px-8 py-4 (32px x 16px)

Gap System:
- Card grids:       gap-6 to gap-8 (24px-32px)
- Button groups:    gap-4 (16px)
- Text sections:    space-y-4 to space-y-6 (16px-24px)
- List items:       space-y-3 (12px)

Max Widths:
- Content:          max-w-7xl (1280px)
- Text blocks:      max-w-3xl (768px)
- Narrow content:   max-w-2xl (672px)

🎯 Component Patterns

Premium Card

<div className="
  bg-gradient-to-br from-white/5 to-white/[0.02]
  border border-white/10
  rounded-2xl
  p-6
  backdrop-blur-sm
  transition-all duration-300
  hover:border-white/20
  hover:-translate-y-2
  hover:shadow-[0_0_40px_rgba(59,130,246,0.15)]
">
  {/* Content */}
</div>

Gradient Button

<button className="
  px-8 py-4
  bg-gradient-to-r from-blue-600 to-purple-600
  text-white
  rounded-full
  font-semibold
  hover:scale-105
  transition-all
  font-syne
">
  Button Text
</button>

Section Header

<h2 className="
  text-4xl sm:text-5xl md:text-6xl
  font-bold
  bg-clip-text text-transparent
  bg-gradient-to-r from-white to-gray-400
  mb-6
  font-unbounded
">
  Section Title
</h2>

💳 Payment Flow Diagram

User Journey:
┌─────────────┐
│  Homepage   │
│     or      │
│  Services   │
└──────┬──────┘
       │ Click "Get Started" / "Hire Me"
       ▼
┌─────────────┐
│  Services   │
│    Page     │
└──────┬──────┘
       │ Choose Package
       │ Click "Get Started"
       ▼
┌─────────────┐
│  Razorpay   │
│   Modal     │
└──────┬──────┘
       │ Enter payment details
       │ Complete payment
       ▼
┌─────────────┐
│  Thank You  │
│    Page     │
└──────┬──────┘
       │ Email sent to contact@vinaytz.com
       │ User sees "48-hour" message
       ▼
┌─────────────┐
│ You Contact │
│   Client    │
└─────────────┘

📱 Responsive Breakpoints

Mobile:      320px - 767px   (sm: prefix)
Tablet:      768px - 1023px  (md: prefix)
Laptop:      1024px - 1919px (lg: prefix)
Desktop:     1920px+         (xl: prefix)

Example Usage:
text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl
px-4 sm:px-6 md:px-8
grid-cols-1 md:grid-cols-2 lg:grid-cols-4

🎨 Component Hierarchy

Layout Wrapper
  ├─ Navigation (sticky)
  ├─ Hero Section (min-h-screen)
  ├─ Content Sections (py-20)
  │  └─ max-w-7xl mx-auto px-4
  │     └─ Grid / Flex layouts
  │        └─ Cards / Components
  └─ Footer / Final CTA

✨ Special Effects

Sparkles Background

  • Used in: Thank You page, Homepage dividers
  • Particle density: 100-800
  • Color: White with opacity

Meteors

  • Used in: Homepage hero
  • Count: 15
  • Animation: 5s linear infinite

Gradient Overlays

  • Radial gradients for depth
  • Conic gradients for animations
  • Linear gradients for cards/buttons

Glassmorphism

backdrop-blur-sm
bg-white/5
border border-white/10

🚀 Performance Optimizations

  • Next.js automatic font optimization
  • Lazy loading with viewport={{ once: true }}
  • Optimized animations (transform/opacity only)
  • Minimal re-renders with proper React patterns
  • Tailwind CSS purged in production

This design system ensures consistency, premium feel, and scalability across your entire portfolio website! 🎉