V1 refactored skills json

src/components/AboutMe.jsx

@@ -15,9 +15,10 @@ function AboutMe() {
                         <div>
                             <h1 className="text-6xl font-extrabold font-mono mb-6 text-white">Luan Tran</h1>
                             <p className="mb-6 text-white">
-                                I'm a Master's of Applied Computer Science student with a passion for machine learning and web development.
-                                I've worked on projects ranging from English proficiency classification to reactive web applications. Currently, I'm exploring ways to integrate using LLMs as agents in the context
-                                of linguistic education (French and English) and looking for opportunities in Web Development/Machine Learning.
+                                I'm a Master's student in Applied Computer Science with industry experience in automation and web development at Broadsign, Ericsson, and Matrox. My projects include deploying automated CI/CD workflows, multimodal medical imaging applications, and automated language proficiency assessment systems.
+                            </p>
+                            <p className="mb-6 text-white">
+                                I'm currently researching LLM-based agents for linguistic education and seeking opportunities in software development and machine learning.
                             </p>
                             <div className="flex justify-between items-center">
                                 <ul className="flex gap-4">

src/components/Projects.jsx

@@ -43,8 +43,7 @@ const ProjectCard = ({ project }) => {
                 <div className="flex flex-col space-y-1.5 p-6 pb-3">
 
                         {/* Category Badge */}
-                    <div className="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-zinc-600/70 bg-transparent text-[10px] font-mono uppercase tracking-[0.16em] text-zinc-300 whitespace-nowrap w-fit">
-                            <Code className="mr-1 h-3 w-3" />
+                    <div className="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-zinc-600/70 bg-transparent text-[12px] font-mono uppercase tracking-[0.16em] text-zinc-300 whitespace-nowrap w-fit">
                             {project.category}
                         </div>
 

src/components/Skills.jsx

@@ -1,29 +1,8 @@
 import SectionArrow from "./SectionArrow.jsx";
-import skillsData from "../data/skills.json";
+import {skillsData} from "./data/skills.js";
 import { iconMap } from "../utils/iconMap.js";
 
 function Skills() {
-    const renderSkillBox = (categoryName, skills) => {
-        return (
-            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 min-w-80" key={categoryName}>
-                <h1 className="text-xl text-white text-center mb-6 font-mono capitalize">
-                    {categoryName}
-                </h1>
-                <ul className="flex flex-wrap gap-2 justify-center">
-                    {skills.map((skill) => {
-                        const IconComponent = iconMap[skill.icon];
-                        return (
-                            <li key={skill.name} className="flex flex-col items-center w-16 sm:w-20 md:w-24">
-                                <IconComponent className="text-3xl sm:text-4xl text-white mb-2" />
-                                <p className="text-xs sm:text-sm text-white text-center">{skill.name}</p>
-                            </li>
-                        );
-                    })}
-                </ul>
-            </div>
-        );
-    };
-
     const renderDomainCard = (domain) => {
         const MainIcon = iconMap[domain.icon];
         return (
@@ -57,7 +36,7 @@ function Skills() {
         );
     };
 
-    const { domains, ...regularSkills } = skillsData;
+    const { domains } = skillsData;
 
     return (
         <section id="skills" className="min-h-screen flex flex-col items-center justify-between">

src/components/data/skills.js

@@ -0,0 +1,205 @@
+export const skillsData = {
+    languages: [
+        {
+            name: "Python",
+            icon: "FaPython"
+        },
+        {
+            name: "Java",
+            icon: "FaJava"
+        },
+        {
+            name: "Bash",
+            icon: "FaTerminal"
+        },
+        {
+            name: "JavaScript",
+            icon: "FaJs"
+        }
+    ],
+    environments: [
+        {
+            name: "Windows",
+            icon: "FaWindows"
+        },
+        {
+            name: "Linux",
+            icon: "FaLinux"
+        },
+        {
+            name: "Ubuntu",
+            icon: "FaUbuntu"
+        }
+    ],
+    virtualization: [
+        {
+            name: "VirtualBox",
+            icon: "SiVirtualbox"
+        },
+        {
+            name: "Docker",
+            icon: "FaDocker"
+        },
+        {
+            name: "Hyper-V",
+            icon: "FaTerminal"
+        }
+    ],
+    frameworks: [
+        {
+            name: "Flask",
+            icon: "SiFlask"
+        },
+        {
+            name: "Node.js",
+            icon: "FaNode"
+        },
+        {
+            name: "WordPress",
+            icon: "FaWordpress"
+        },
+        {
+            name: "React",
+            icon: "FaReact"
+        },
+        {
+            name: "Google Cloud",
+            icon: "FaGoogle"
+        },
+        {
+            name: "Play",
+            icon: "FaPlay"
+        }
+    ],
+    "CI/CD": [
+        {
+            name: "Git",
+            icon: "FaGitAlt"
+        },
+        {
+            name: "Github",
+            icon: "FaGithub"
+        },
+        {
+            name: "Jenkins",
+            icon: "FaJenkins"
+        },
+        {
+            name: "Bitbucket",
+            icon: "FaBitbucket"
+        },
+        {
+            name: "JIRA",
+            icon: "FaJira"
+        },
+        {
+            name: "Concourse",
+            icon: "SiConcourse"
+        }
+    ],
+    "Machine Learning": [
+        {
+            name: "PyTorch",
+            icon: "SiPytorch"
+        },
+        {
+            name: "Scikit-learn",
+            icon: "SiScikitlearn"
+        },
+        {
+            name: "Pandas",
+            icon: "SiPandas"
+        },
+        {
+            name: "NumPy",
+            icon: "SiNumpy"
+        },
+        {
+            name: "Jupyter",
+            icon: "SiJupyter"
+        }
+    ],
+    domains: [
+        {
+            name: "Web Development",
+            description: "Full-stack applications with modern frameworks and RESTful APIs",
+            icon: "FaCode",
+            relatedSkills: [
+                {
+                    icon: "FaReact",
+                    displayName: "React"
+                },
+                {
+                    icon: "FaNode",
+                    displayName: "Node.js"
+                },
+                {
+                    icon: "SiFlask",
+                    displayName: "Flask"
+                },
+                {
+                    icon: "FaJs",
+                    displayName: "JavaScript"
+                },
+                {
+                    icon: "FaPython",
+                    displayName: "Python"
+                }
+            ]
+        },
+        {
+            name: "Machine Learning",
+            description: "ML models, data analysis, and NLP solutions",
+            icon: "FaBrain",
+            relatedSkills: [
+                {
+                    icon: "SiPytorch",
+                    displayName: "PyTorch"
+                },
+                {
+                    icon: "SiScikitlearn",
+                    displayName: "Scikit-learn"
+                },
+                {
+                    icon: "SiPandas",
+                    displayName: "Pandas"
+                },
+                {
+                    icon: "SiNumpy",
+                    displayName: "NumPy"
+                },
+                {
+                    icon: "SiJupyter",
+                    displayName: "Jupyter"
+                }
+            ]
+        },
+        {
+            name: "DevOps & Cloud",
+            description: "CI/CD pipelines, containerization, and cloud infrastructure",
+            icon: "FaCloud",
+            relatedSkills: [
+                {
+                    icon: "FaDocker",
+                    displayName: "Docker"
+                },
+                {
+                    icon: "FaGitAlt",
+                    displayName: "Git"
+                },
+                {
+                    icon: "FaJenkins",
+                    displayName: "Jenkins"
+                },
+                {
+                    icon: "FaGoogle",
+                    displayName: "Google Cloud"
+                },
+                {
+                    icon: "SiConcourse",
+                    displayName: "Concourse"
+                }
+            ]
+        }
+    ]
+};