Tailwind CSS & Shadcn & Chart JS

Here’s a detailed section of my skills about Tailwind CSS, Shadcn, and Chart.js, covering their features, use cases, and example code snippets:

Tailwind CSS:

Overview: Tailwind CSS is a utility-first CSS framework that allows for rapid design and customization without having to leave your HTML. Its utility classes enable you to build custom designs directly in your markup.

Key Features and Skills:

• Utility-First Approach: Utilized utility classes for designing custom interfaces without writing custom CSS.

  <div class="bg-blue-500 text-white p-4 rounded-lg shadow-lg">
    <h1 class="text-2xl font-bold">Welcome to Tailwind CSS</h1>
    <p class="mt-2">Tailwind CSS is a utility-first CSS framework for rapid UI development.</p>
  </div>

• Responsive Design: Leveraged Tailwind’s responsive utilities to create adaptive layouts.

  <div class="bg-gray-100 p-4 md:p-6 lg:p-8">
    <h1 class="text-lg md:text-xl lg:text-2xl">Responsive Design with Tailwind</h1>
  </div>

• Custom Theming: Configured Tailwind’s configuration file to define custom themes, colors, and breakpoints.

  module.exports = {
    theme: {
      extend: {
        colors: {
          primary: '#3490dc',
          secondary: '#ffed4a',
        },
      },
    },
  };

• Component Libraries: Integrated Tailwind with component libraries like Tailwind UI for pre-designed components.

  <button class="btn btn-blue">Click Me</button>

Shadcn:

Overview: Shadcn is a design system and component library built on top of Tailwind CSS, aimed at providing a set of customizable and reusable components for building modern UIs.

Key Features and Skills:

• Pre-Built Components: Implemented Shadcn’s pre-built components to speed up development and maintain consistency.

  <Button variant="primary">Submit</Button>

• Customization: Customized Shadcn components using Tailwind’s utility classes to match branding requirements.

  <Card className="bg-white shadow-lg p-6 rounded-lg">
    <h2 className="text-xl font-semibold">Custom Card</h2>
    <p className="mt-2">This card is styled with Tailwind utilities and Shadcn components.</p>
  </Card>

• Design System Integration: Used Shadcn’s design tokens and patterns to maintain a consistent design language across projects.

  const theme = {
    colors: {
      primary: '#ff5722',
      secondary: '#795548',
    },
  };

Chart.js:

Overview: Chart.js is a flexible and easy-to-use JavaScript library for creating interactive charts and graphs. It supports various chart types and customization options.

Key Features and Skills:

• Chart Creation: Created interactive charts to visualize data effectively.

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <canvas id="myChart" width="400" height="200"></canvas>
  
  <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)',
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)',
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>

• Custom Chart Types: Developed custom chart types and interactive features based on project requirements.

  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
        label: 'Monthly Sales',
        data: [65, 59, 80, 81, 56, 55, 40],
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 2,
        fill: false
      }]
    },
    options: {
      responsive: true,
      scales: {
        x: {
          title: {
            display: true,
            text: 'Month'
          }
        },
        y: {
          title: {
            display: true,
            text: 'Sales'
          }
        }
      }
    }
  });

• Integration with React: Integrated Chart.js with React to create interactive and dynamic data visualizations in React applications.

  import { Chart } from 'react-chartjs-2';
  
  const LineChart = ({ data }) => (
    <Chart
      type="line"
      data={data}
      options={{
        scales: {
          x: { title: { display: true, text: 'Month' } },
          y: { title: { display: true, text: 'Sales' } }
        }
      }}
    />
  );