feat: LHD birthday (#717)

* chore: add tsparticles/react

* fix: imports and lint issues

* fix: imports and format

* feat: refactor settings and add LHD birthday celebration

* chore: lint and format

src/views/components/settings/ContributorCard.tsx

@@ -0,0 +1,54 @@
+import Text from '@views/components/common/Text/Text';
+import React from 'react';
+
+interface ContributorCardProps {
+    name: string;
+    githubUsername: string;
+    roles: string[];
+    stats?: {
+        commits: number;
+        linesAdded: number;
+        linesDeleted: number;
+        mergedPRs?: number;
+    };
+    showStats: boolean;
+    includeMergedPRs: boolean;
+}
+
+/**
+ * GitHub contributor card component
+ */
+export const ContributorCard: React.FC<ContributorCardProps> = ({
+    name,
+    githubUsername,
+    roles,
+    stats,
+    showStats,
+    includeMergedPRs,
+}) => (
+    <div className='border border-gray-300 rounded bg-ut-gray/10 p-4'>
+        <Text
+            variant='p'
+            className='text-ut-burntorange font-semibold hover:cursor-pointer'
+            onClick={() => window.open(`https://github.com/${githubUsername}`, '_blank')}
+        >
+            {name}
+        </Text>
+        {roles.map(role => (
+            <p key={`${githubUsername}-${role}`} className='text-sm text-gray-600'>
+                {role}
+            </p>
+        ))}
+        {showStats && stats && (
+            <div className='mt-2'>
+                <p className='text-xs text-gray-500'>GitHub Stats (UTRP repo):</p>
+                {includeMergedPRs && stats.mergedPRs !== undefined && (
+                    <p className='text-xs'>Merged PRs: {stats.mergedPRs}</p>
+                )}
+                <p className='text-xs'>Commits: {stats.commits}</p>
+                <p className='text-xs text-ut-green'>{stats.linesAdded}++</p>
+                <p className='text-xs text-theme-red'>{stats.linesDeleted}--</p>
+            </div>
+        )}
+    </div>
+);