personal-website/src/sections/About/AboutTabs/InterestsAndSkills/InterestsAndSkills.jsx at 8416ca6be55b1e2ab89803fbff10548ab3ae1b78 · joemacd/personal-website · 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
111
112
113
114
115
116
117
118
119
import styles from "./InterestsAndSkills.module.css";
import {
  SiReact,
  SiTypescript,
  SiJavascript,
  SiGraphql,
  SiAndroidstudio,
  SiXcode,
  SiKotlin,
  SiSwift,
  SiAwsamplify,
  SiAmazoncognito,
  SiTensorflow,
  SiOpencv,
  SiC,
  SiOcaml,
  SiAsterisk,
  SiAmazonec2,
  SiAwslambda,
  SiPandas,
} from "react-icons/si";
import {
  FaNodeJs,
  FaJava,
  FaPython,
  FaDatabase,
  FaGit,
  FaMicrochip,
  FaAws,
} from "react-icons/fa";

const skillsData = [
  {
    category: "Web Development",
    skills: [
      { name: "React", Icon: SiReact },
      { name: "TypeScript", Icon: SiTypescript },
      { name: "JavaScript", Icon: SiJavascript },
      { name: "Node.js", Icon: FaNodeJs },
      { name: "GraphQL", Icon: SiGraphql },
    ],
  },
  {
    category: "Mobile Development",
    skills: [
      { name: "Android Studio", Icon: SiAndroidstudio },
      { name: "Xcode", Icon: SiXcode },
      { name: "Java", Icon: FaJava },
      { name: "Kotlin", Icon: SiKotlin },
      { name: "Swift", Icon: SiSwift },
    ],
  },
  {
    category: "AWS & Cloud",
    skills: [
      { name: "Amplify", Icon: SiAwsamplify },
      { name: "Chime SDK", Icon: FaAws },
      { name: "Cognito", Icon: SiAmazoncognito },
      { name: "Lambda", Icon: SiAwslambda },
      { name: "EC2", Icon: SiAmazonec2 },
      { name: "Nova Sonic", Icon: FaAws },
    ],
  },
  {
    category: "Data Science",
    skills: [
      { name: "Python", Icon: FaPython },
      { name: "Pandas", Icon: SiPandas },
      { name: "TensorFlow", Icon: SiTensorflow },
      { name: "Embedded ML", Icon: FaMicrochip },
      { name: "OpenCV", Icon: SiOpencv },
      { name: "SQL", Icon: FaDatabase },
    ],
  },
  {
    category: "Other Languages & Tools",
    skills: [
      { name: "Git", Icon: FaGit },
      { name: "C", Icon: SiC },
      { name: "OCaml", Icon: SiOcaml },
      { name: "Asterisk", Icon: SiAsterisk },
    ],
  },
];

export default function InterestsAndSkills() {
  return (
    <div className={styles.container}>
      {skillsData.map(({ category, skills }, catIdx) => (
        <section
          key={category}
          className={`${styles.section} ${styles.fadeUp}`}
          style={{ animationDelay: `${catIdx * 0.2}s` }}
        >
          <h2
            className={`${styles.heading} ${styles.fadeUp}`}
            style={{ animationDelay: `${catIdx * 0.2 + 0.1}s` }}
          >
            {category}
          </h2>
          <div className={styles.grid}>
            {skills.map(({ name, Icon }, skillIdx) => (
              <div
                key={name}
                className={`${styles.card} ${styles.fadeUp}`}
                style={{
                  animationDelay: `${catIdx * 0.2 + 0.2 + skillIdx * 0.05}s`,
                }}
              >
                <Icon className={styles.icon} />
                <span className={styles.label}>{name}</span>
              </div>
            ))}
          </div>
        </section>
      ))}
    </div>
  );
}