Customization Guide

Personalize your portfolio to match your brand

Colors & Branding

Edit in: assets/scss/_variables.scss

// Primary Colors
$primary-color: #6366f1;      // Main brand color
$primary-dark: #4f46e5;       // Darker variant
$primary-light: #818cf8;      // Lighter variant

$secondary-color: #ec4899;    // Accent color
$success-color: #10b981;      // Success state
$error-color: #ef4444;        // Error state

Typography

Edit in: assets/scss/_variables.scss

// Font Families
$font-family-primary: 'Inter', sans-serif;   // Body text
$font-family-heading: 'Poppins', sans-serif; // Headings

// Font Sizes
$font-size-xs: 0.75rem;    // 12px
$font-size-sm: 0.875rem;   // 14px
$font-size-base: 1rem;     // 16px
$font-size-lg: 1.125rem;   // 18px
$font-size-xl: 1.25rem;    // 20px

Spacing & Layout

Edit in: assets/scss/_variables.scss

// Base unit: 8px
$space-4: 1rem;      // 16px (default)
$space-6: 1.5rem;    // 24px
$space-8: 2rem;      // 32px
$space-16: 4rem;     // 64px

// Use in components
padding: $space-6;
margin: $space-8;

Animations

Edit in: assets/scss/_variables.scss

// Animation Durations
$transition-fast: 150ms;
$transition-base: 300ms;
$transition-slow: 500ms;

// Easing Functions
$easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
$easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

Modify keyframes in assets/css/animations.css:

@keyframes slideInUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

Images & Media

Replace placeholder images in HTML files:

<img src="path/to/your/image.jpg" alt="Description">

Add image folders:

  • assets/images/ - General images
  • assets/images/portfolio/ - Portfolio items
  • assets/images/team/ - Team photos

Responsive Breakpoints

// Mobile-first approach
// Base: 320px - 639px (Mobile)
// md: 768px+ (Tablet)
// lg: 1024px+ (Desktop)
// xl: 1280px+ (Large Desktop)
// 2xl: 1536px+ (Extra Large)

@media (min-width: $breakpoint-md) {
  // Tablet and up
}

JavaScript Customization

Animations API:

// Stagger animations on elements
Animations.stagger('.card', 100); // 100ms delay

// Add countup animation
Animations.countup('[data-countup]');

// Parallax effect
Animations.parallax('.bg-image', 0.5);

Theme API:

// Toggle theme
Theme.toggle();

// Set specific theme
Theme.set('dark');

// Listen for theme changes
Theme.onchange((theme) => {
  console.log('Theme changed to:', theme);
});