Styling Customization

Overview

The portfolio uses Tailwind CSS for styling with custom configurations, animations, and component-specific styles. This guide covers how to customize the visual appearance beyond just colors.

Tailwind Configuration

The main styling configuration is in tailwind.config.js:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ["class"],
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // Custom configurations here
    }
  },
  plugins: [require("tailwindcss-animate")],
}

Border Radius System

Customize the border radius using CSS custom properties:

tailwind.config.js

borderRadius: {
  lg: 'var(--radius)',
  md: 'calc(var(--radius) - 2px)',
  sm: 'calc(var(--radius) - 4px)'
}

Define the base radius in your CSS:

src/index.css

:root {
  --radius: 0.5rem; /* Default: 8px */
}

Change --radius to control the roundness of all components at once. Try 0.75rem for rounder corners or 0.25rem for sharper edges.

Animations

The portfolio includes custom animations for visual effects.

Built-in Animations

tailwind.config.js

animation: {
  blob: "blob 7s infinite",
  fadeIn: 'fadeIn 0.5s ease-in',
  'fade-in': 'fadeIn 0.5s ease-in-out',
}

Keyframes

tailwind.config.js

keyframes: {
  blob: {
    "0%": {
      transform: "translate(0px, 0px) scale(1)",
    },
    "33%": {
      transform: "translate(30px, -50px) scale(1.1)",
    },
    "66%": {
      transform: "translate(-20px, 20px) scale(0.9)",
    },
    "100%": {
      transform: "translate(0px, 0px) scale(1)",
    },
  },
  fadeIn: {
    '0%': { opacity: '0', transform: 'translateY(-10px)' },
    '100%': { opacity: '1', transform: 'translateY(0)' },
  },
}

Using Animations

<div className="animate-blob">Floating element</div>
<div className="animate-fadeIn">Fading element</div>

Creating Custom Animations

Define the Keyframes

Add new keyframes to your Tailwind config:

keyframes: {
  // ... existing keyframes
  slideIn: {
    '0%': { transform: 'translateX(-100%)', opacity: '0' },
    '100%': { transform: 'translateX(0)', opacity: '1' },
  },
  bounce: {
    '0%, 100%': { transform: 'translateY(0)' },
    '50%': { transform: 'translateY(-20px)' },
  },
}

Add the animation to the animation object:

animation: {
  // ... existing animations
  slideIn: 'slideIn 0.3s ease-out',
  bounce: 'bounce 1s ease-in-out infinite',
}

Use in Components

<div className="animate-slideIn">Slides in from left</div>
<div className="animate-bounce">Bouncing element</div>

Background Gradients

Custom gradient utilities are available:

tailwind.config.js

backgroundImage: {
  'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
}

Using Gradients

<div className="bg-gradient-radial from-navy-500 via-navy-700 to-navy-900">
  Radial gradient background
</div>

Component Styling Examples

Service Card Styling

The ServiceCard component demonstrates advanced styling techniques:

src/components/ServiceCard.jsx

<motion.div
  variants={fadeIn("up", "spring", index * 0.2, 0.75)}
  className="relative group"
>
  {/* Animated background gradient */}
  <div className="absolute inset-0 bg-gradient-to-br from-navy-500/10 via-navy-600/5 to-navy-700/10 dark:from-slate-600/10 dark:via-slate-700/5 dark:to-slate-800/10 rounded-xl blur-sm group-hover:from-navy-500/20 group-hover:via-navy-600/15 group-hover:to-navy-700/20 transition-all duration-500" />
  
  {/* Main card */}
  <div className="relative bg-white/98 dark:bg-slate-800/98 backdrop-blur-lg border border-navy-200/50 dark:border-slate-600/50 hover:border-navy-400/80 rounded-xl p-8 min-h-[380px] transition-all duration-300 group-hover:shadow-2xl group-hover:-translate-y-2">
    {/* Card content */}
  </div>
</motion.div>

Key Styling Techniques

Backdrop Blur: backdrop-blur-lg for glassmorphism effects
Group Hover: group-hover: for coordinated hover states
Opacity Modifiers: /10, /20 for transparent overlays
Transforms: translate-y-2, scale-1.05 for animations
Transitions: transition-all duration-300 for smooth changes

Custom CSS Styles

Additional custom styles in src/index.css:

src/index.css

.logo {
  color: var(--text-color);
  font-weight: 800;
  cursor: pointer;
  transition: 0.3s ease;
}

.logo:hover {
  text-shadow: 0 0 25px var(--main-color);
}

.icons-a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  background: transparent;
  border: 2px solid var(--main-color);
  font-size: 1.5rem;
  border-radius: 50%;
  color: var(--main-color);
  transition: 0.3s ease-in-out;
}

.icons-a:hover {
  color: var(--text-color);
  transform: scale(1.3) translateY(-5px);
  box-shadow: 0 0 25px var(--main-color);
  background-color: var(--main-color);
}

Customizing Button Styles

.btn {
  background: var(--main-color);
  border-radius: 0.5rem;        /* Changed from 4rem */
  font-size: 1rem;              /* Changed from 1.2rem */
  padding: 0.5rem 1.5rem;
  transition: 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);  /* Changed from scale */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Hover Effects

Customize hover effects throughout the portfolio:

Image Hover

src/index.css

.img_pic {
  border-radius: 50%;
  box-shadow: 0 0 25px var(--main-color);
  transition: 0.4s ease-in-out;
}

.img_pic:hover {
  box-shadow: 0 0 25px var(--main-color), 0 10px 1000px var(--main-color);
  transform: scale(1.05);
}

Custom Hover Effect Example

<div className="group relative overflow-hidden rounded-lg">
  <img 
    src="/image.jpg" 
    className="transition-transform duration-300 group-hover:scale-110" 
  />
  <div className="absolute inset-0 bg-navy-900/0 group-hover:bg-navy-900/50 transition-colors duration-300" />
</div>

Smooth Scrolling

Smooth scrolling is configured globally:

src/index.css

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;  /* Offset for fixed header */
}

* {
  scroll-behavior: smooth;
}

The scroll-padding-top value should match your navbar height to prevent content from being hidden behind the fixed header.

3D Tilt Effects

The portfolio uses react-parallax-tilt for 3D effects:

import Tilt from "react-parallax-tilt";

<Tilt className="w-full max-w-[300px]">
  <div className="transform-style-preserve-3d">
    {/* Content */}
  </div>
</Tilt>

src/index.css

.tilt-container {
  border-radius: 50%;
  transform-style: preserve-3d;
}

.tilt-container img {
  transform: translateZ(20px);
  transition: all 0.3s ease-out;
}

.tilt-container:hover img {
  filter: brightness(1.1);
}

Responsive Design

Tailwind’s responsive utilities are available:

<div className="
  w-full          // Mobile
  sm:w-1/2        // Small screens (640px+)
  md:w-1/3        // Medium screens (768px+)
  lg:w-1/4        // Large screens (1024px+)
  xl:w-1/5        // Extra large (1280px+)
">
  Responsive element
</div>

Variant Extensions

Custom variants for group interactions:

tailwind.config.js

variants: {
  extend: {
    scale: ['group-hover'],
    transform: ['group-hover'],
  },
}

Usage:

<div className="group">
  <img className="group-hover:scale-110" />
  <p className="group-hover:transform group-hover:translate-y-2" />
</div>

Animation Delays

Custom animation delay utilities:

src/index.css

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

Use for staggered animations:

<div className="animate-blob animation-delay-2000" />
<div className="animate-blob animation-delay-4000" />

Best Practices

Performance Tips:

Use will-change sparingly for performance-critical animations
Prefer transform and opacity for animations (GPU-accelerated)
Limit the number of simultaneous animations
Use transition-all cautiously (specify properties when possible)

Common Pitfalls:

Don’t mix Tailwind classes with inline styles
Avoid using !important unless absolutely necessary
Test all animations on mobile devices
Ensure animations respect prefers-reduced-motion

Next Steps

Theme Customization

Customize colors and dark/light mode settings

Content Updates

Update personal information and content

Get Started

Components

Customization

Integrations

Deployment

Overview

Tailwind Configuration

Border Radius System

Animations

Built-in Animations

Keyframes

Using Animations

Creating Custom Animations

Background Gradients

Using Gradients

Component Styling Examples

Service Card Styling

Key Styling Techniques

Custom CSS Styles

Customizing Button Styles

Hover Effects

Image Hover

Custom Hover Effect Example

Smooth Scrolling

3D Tilt Effects

Responsive Design

Variant Extensions

Animation Delays

Best Practices

Next Steps

Theme Customization

Content Updates

Build docs developers (and LLMs) love

Get Started

Components

Customization

Integrations

Deployment

​Overview

​Tailwind Configuration

​Border Radius System

​Animations

​Built-in Animations

​Keyframes

​Using Animations

​Creating Custom Animations

​Background Gradients

​Using Gradients

​Component Styling Examples

​Service Card Styling

​Key Styling Techniques

​Custom CSS Styles

​Customizing Button Styles

​Hover Effects

​Image Hover

​Custom Hover Effect Example

​Smooth Scrolling

​3D Tilt Effects

​Responsive Design

​Variant Extensions

​Animation Delays

​Best Practices

​Next Steps

Theme Customization

Content Updates

Build docs developers (and LLMs) love

Overview

Tailwind Configuration

Border Radius System

Animations

Built-in Animations

Keyframes

Using Animations

Creating Custom Animations

Background Gradients

Using Gradients

Component Styling Examples

Service Card Styling

Key Styling Techniques

Custom CSS Styles

Customizing Button Styles

Hover Effects

Image Hover

Custom Hover Effect Example

Smooth Scrolling

3D Tilt Effects

Responsive Design

Variant Extensions

Animation Delays

Best Practices

Next Steps