portfolio/tailwind.config.js at main · Zat-Code/portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out forwards',
        'shine-silver': 'shine-silver 2s infinite',
        'bounce-1': 'bounce1 3s infinite',
        'bounce-2': 'bounce2 4s infinite',
        'bounce-3': 'bounce3 3.5s infinite',
        'bounce-4': 'bounce4 4.5s infinite',
        'bounce-5': 'bounce5 5s infinite',
        'fade-in-up': 'fadeInUp 0.5s ease-out',
        'slide-in-right': 'slideInRight 0.5s ease-out',
        'energy-core': 'energyCore 2s ease-in-out infinite',
        'electric-1': 'electric1 3s linear infinite',
        'electric-2': 'electric2 2.5s linear infinite',
        'fade-slide-up': 'fade-slide-up 0.5s ease-out forwards'
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0', transform: 'translateY(10px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        shine: {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(100%)' },
        },
        bounce1: {
          '0%, 100%': { transform: 'translateY(-10%)' },
          '50%': { transform: 'translateY(0)' },
        },
        bounce2: {
          '0%, 100%': { transform: 'translateY(-15%)' },
          '50%': { transform: 'translateY(5%)' },
        },
        bounce3: {
          '0%, 100%': { transform: 'translateY(-12%)' },
          '50%': { transform: 'translateY(3%)' },
        },
        bounce4: {
          '0%, 100%': { transform: 'translateY(-18%)' },
          '50%': { transform: 'translateY(7%)' },
        },
        bounce5: {
          '0%, 100%': { transform: 'translateY(-20%)' },
          '50%': { transform: 'translateY(10%)' },
        },
        energyCore: {
          '0%, 100%': {
            transform: 'scale(1)',
            opacity: '0.2'
          },
          '50%': {
            transform: 'scale(1.5)',
            opacity: '0.4'
          }
        },
        electric1: {
          '0%': {
            transform: 'rotate(0deg)',
            opacity: '0.4'
          },
          '50%': {
            opacity: '0.7'
          },
          '100%': {
            transform: 'rotate(360deg)',
            opacity: '0.4'
          }
        },
        electric2: {
          '0%': {
            transform: 'rotate(0deg)',
            opacity: '0.4'
          },
          '50%': {
            opacity: '0.7'
          },
          '100%': {
            transform: 'rotate(-360deg)',
            opacity: '0.4'
          }
        },
        'fade-slide-up': {
          '0%': {
            opacity: '0',
            transform: 'translateY(20px)'
          },
          '100%': {
            opacity: '1',
            transform: 'translateY(0)'
          }
        },
        'shine-silver': {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(100%)' }
        }
      },
    },
  },
  plugins: [],
}