[fix]: skills category

src/components/markdown.js

@@ -41,7 +41,7 @@ const Markdown = (props) => {
     }
     const DisplaySocial = (props) => {
         if (props.username) {
-            return (<>{`<a href="${props.base}/${props.username}" target="blank"><img align="center" src="${props.icon}" alt="${props.username}" height="20" width="20" /></a>`}<br /></>);
+            return (<>{`<a href="${props.base}/${props.username}" target="blank"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="30" /></a>`}<br /></>);
         }
         return '';
     }
@@ -67,7 +67,7 @@ const Markdown = (props) => {
         const listChosenSkills = [];
         skills.forEach(skill => {
             if (props.skills[skill]) {
-                listChosenSkills.push(`<img src="${icons[skill]}" alt="${skill}" width="20" height="20"/>`);
+                listChosenSkills.push(`<img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>`);
             }
         });
         return listChosenSkills.length > 0 ? `<p align="left">${listChosenSkills.join(' ')}</p>` : '';

src/components/skills.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { icons, skills } from '../constants/skills';
+import { icons, categorizedSkills } from '../constants/skills';
 const Skills = (props) => {
-    const listSkills = skills.map((skill) => {
+    const createSkill = (skill) => {
         return (
             <div className="skillCheckbox" key={skill}>
                 <label htmlFor={skill} className="skillCheckboxLabel">
@@ -13,12 +13,98 @@ const Skills = (props) => {
                 </label>
             </div>
         );
+    }
+    const listFrontendSkills = categorizedSkills['frontend_dev'].skills.map((skill) => {
+        return createSkill(skill)
     });
+    const listBackendSkills = categorizedSkills['backend_dev'].skills.map((skill) => {
+        return createSkill(skill)
+    });
+    const listMobileSkills = categorizedSkills['mobile_dev'].skills.map((skill) => {
+        return createSkill(skill)
+    });
+    const listAISkills = categorizedSkills['ai'].skills.map((skill) => {
+        return createSkill(skill)
+    });
+    const listDatabaseSkills = categorizedSkills['database'].skills.map((skill) => {
+        return createSkill(skill)
+    });
+    const listDevopsSkills = categorizedSkills['devops'].skills.map((skill) => {
+        return createSkill(skill)
+    });
+    const listDataVisualizationSkills = categorizedSkills['data_visualization'].skills.map((skill) => {
+        return createSkill(skill)
+    });
+    const listFrameworkSkills = categorizedSkills['framework'].skills.map((skill) => {
+        return createSkill(skill)
+    });
+    const listLanguageSkills = categorizedSkills['language'].skills.map((skill) => {
+        return createSkill(skill)
+    });
+    const listSoftwareSkills = categorizedSkills['software'].skills.map((skill) => {
+        return createSkill(skill)
+    });
+    const listOtherSkills = categorizedSkills['other'].skills.map((skill) => {
+        return createSkill(skill)
+    });
+
     return (
         <div>
             <div className="section-title">Skills</div>
+
+            <h4 className="skills-category-title">Programming Language</h4>
             <div className="skills">
-                {listSkills}
+                {listLanguageSkills}
+            </div>
+
+            <h4 className="skills-category-title">Frontend Development</h4>
+            <div className="skills">
+                {listFrontendSkills}
+            </div>
+
+            <h4 className="skills-category-title">Backend Development</h4>
+            <div className="skills">
+                {listBackendSkills}
+            </div>
+
+            <h4 className="skills-category-title">Mobile App Development</h4>
+            <div className="skills">
+                {listMobileSkills}
+            </div>
+
+            <h4 className="skills-category-title">AI/ML</h4>
+            <div className="skills">
+                {listAISkills}
+            </div>
+
+            <h4 className="skills-category-title">Database</h4>
+            <div className="skills">
+                {listDatabaseSkills}
+            </div>
+
+            <h4 className="skills-category-title">Data Visualization</h4>
+            <div className="skills">
+                {listDataVisualizationSkills}
+            </div>
+
+            <h4 className="skills-category-title">Devops</h4>
+            <div className="skills">
+                {listDevopsSkills}
+            </div>
+
+            <h4 className="skills-category-title">Framework</h4>
+            <div className="skills">
+                {listFrameworkSkills}
+            </div>
+
+            <h4 className="skills-category-title">Software</h4>
+            <div className="skills">
+                {listSoftwareSkills}
+            </div>
+
+            <h4 className="skills-category-title">Other</h4>
+            <div className="skills">
+                {listOtherSkills}
             </div>
         </div>
     );

src/constants/skills.js

@@ -1,11 +1,59 @@
 //const baseURL = 'https://devicons.github.io/devicon/devicon.git/icons/';
-const skills = ['vuejs', 'react', 'angularjs', 'aws', 'android', 'backbonejs',
+const skills = ['vuejs', 'react', 'angularjs', 'aws', 'android', 'backbonejs', 'bootstrap', 'c', 'cplusplus', 'css3', 'csharp',
-    'bootstrap', 'c',
+    'd3js', 'django', 'docker', 'dotnet', 'electron', 'go', 'gulp', 'html5', 'java', 'javascript', 'typescript', 'laravel',
-    'cplusplus', 'css3', 'csharp', 'd3js', 'django', 'docker', 'dotnet', 'electron', 'go',
+    'symfony', 'codeigniter', 'mongodb', 'mysql', 'php', 'postgresql', 'rails', 'redis', 'ruby', 'rust', 'sass', 'scala',
-    'gulp', 'html5', 'java', 'javascript', 'typescript', 'laravel', 'symfony', 'codeigniter', 'mongodb', 'mysql', 'php', 'postgresql',
+    'nodejs', 'python', 'swift', 'spring', 'oracle', 'nginx', 'linux', 'redux', 'webpack', 'express', 'flutter', 'dart', 'kotlin',
-    'rails', 'redis', 'redhat', 'ruby', 'rust',
+    'tensorflow', 'chartjs', 'jenkins', 'gcp', 'kubernetes', 'azure', 'git', 'kafka', 'solr', 'cassandra', 'rabbitMQ',
-    'sass', 'scala', 'nodejs', 'python', 'swift', 'spring', 'oracle', 'nginx', 'linux', 'redux',
+    'hadoop', 'bash', 'pytorch', 'opencv', 'illustrator', 'photoshop', 'figma', 'blender'];
-    'webpack', 'express', 'flutter', 'dart', 'kotlin'];
+skills.sort();
+const categories = ['frontend_dev', 'backend_dev', 'ai', 'mobile_dev', 'database', 'data_visualization',
+    'devops', 'framework', 'language', 'software', 'other'];
+const categorizedSkills = {
+    frontend_dev: {
+        title: 'Frontend Development',
+        skills: ['vuejs', 'react', 'angularjs', 'backbonejs', 'bootstrap', 'css3', 'html5', 'gulp', 'sass', 'redux', 'webpack'],
+    },
+    backend_dev: {
+        title: 'Backend Development',
+        skills: ['nodejs', 'spring', 'express', 'kafka', 'solr', 'rabbitMQ', 'hadoop', 'nginx'],
+    },
+    mobile_dev: {
+        title: 'Mobile App Development',
+        skills: ['android', 'flutter', 'dart', 'kotlin'],
+    },
+    ai: {
+        title: 'AI/ML',
+        skills: ['tensorflow', 'pytorch', 'opencv'],
+    },
+    database: {
+        title: 'Database',
+        skills: ['mongodb', 'mysql', 'postgresql', 'redis', 'oracle', 'cassandra'],
+    },
+    devops: {
+        title: 'Devops',
+        skills: ['aws', 'docker', 'jenkins', 'gcp', 'kubernetes', 'bash', 'azure'],
+    },
+    data_visualization: {
+        title: 'Data Visualization',
+        skills: ['d3js', 'chartjs']
+    },
+    framework: {
+        title: '',
+        skills: ['django', 'dotnet', 'electron', 'symfony', 'laravel', 'codeigniter', 'rails']
+    },
+    language: {
+        title: 'Programming Languages',
+        skills: ['c', 'cplusplus', 'csharp', 'go', 'java', 'javascript', 'typescript', 'php', 'ruby', 'scala', 'python', 'swift']
+    },
+    software: {
+        title: 'Software',
+        skills: ['illustrator', 'photoshop', 'figma', 'blender']
+    },
+    other: {
+        title: 'Other',
+        skills: ['linux', 'git']
+    }
+}
 const icons = {
     vuejs: 'https://devicons.github.io/devicon/devicon.git/icons/vuejs/vuejs-original-wordmark.svg',
     react: 'https://devicons.github.io/devicon/devicon.git/icons/react/react-original-wordmark.svg',
@@ -26,11 +74,9 @@ const icons = {
     dotnet: 'https://devicons.github.io/devicon/devicon.git/icons/dot-net/dot-net-original-wordmark.svg',
     electron: 'https://devicons.github.io/devicon/devicon.git/icons/electron/electron-original.svg',
     express: 'https://devicons.github.io/devicon/devicon.git/icons/express/express-original-wordmark.svg',
-    git: 'https://devicons.github.io/devicon/devicon.git/icons/git/git-original-wordmark.svg',
     go: 'https://devicons.github.io/devicon/devicon.git/icons/go/go-original.svg',
     gulp: 'https://devicons.github.io/devicon/devicon.git/icons/gulp/gulp-plain.svg',
     html5: 'https://devicons.github.io/devicon/devicon.git/icons/html5/html5-original-wordmark.svg',
-    illustrator: 'https://devicons.github.io/devicon/devicon.git/icons/illustrator/illustrator-plain.svg',
     java: 'https://devicons.github.io/devicon/devicon.git/icons/java/java-original-wordmark.svg',
     javascript: 'https://devicons.github.io/devicon/devicon.git/icons/javascript/javascript-original.svg',
     laravel: 'https://devicons.github.io/devicon/devicon.git/icons/laravel/laravel-plain-wordmark.svg',
@@ -46,7 +92,6 @@ const icons = {
     python: 'https://devicons.github.io/devicon/devicon.git/icons/python/python-original.svg',
     rails: 'https://devicons.github.io/devicon/devicon.git/icons/rails/rails-original-wordmark.svg',
     redis: 'https://devicons.github.io/devicon/devicon.git/icons/redis/redis-original-wordmark.svg',
-    redhat: 'https://devicons.github.io/devicon/devicon.git/icons/redhat/redhat-original-wordmark.svg',
     ruby: 'https://devicons.github.io/devicon/devicon.git/icons/ruby/ruby-original-wordmark.svg',
     rust: 'https://devicons.github.io/devicon/devicon.git/icons/rust/rust-plain.svg',
     sass: 'https://devicons.github.io/devicon/devicon.git/icons/sass/sass-original.svg',
@@ -61,7 +106,25 @@ const icons = {
     webpack: 'https://devicons.github.io/devicon/devicon.git/icons/webpack/webpack-original.svg',
     flutter: 'https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg',
     dart: 'https://www.vectorlogo.zone/logos/dartlang/dartlang-icon.svg',
-    kotlin: 'https://www.vectorlogo.zone/logos/kotlinlang/kotlinlang-icon.svg'
+    kotlin: 'https://www.vectorlogo.zone/logos/kotlinlang/kotlinlang-icon.svg',
+    tensorflow: 'https://www.vectorlogo.zone/logos/tensorflow/tensorflow-icon.svg',
+    chartjs: 'https://www.chartjs.org/media/logo-title.svg',
+    jenkins: 'https://www.vectorlogo.zone/logos/jenkins/jenkins-icon.svg',
+    gcp: 'https://www.vectorlogo.zone/logos/google_cloud/google_cloud-icon.svg',
+    kubernetes: 'https://www.vectorlogo.zone/logos/kubernetes/kubernetes-icon.svg',
+    azure: 'https://www.vectorlogo.zone/logos/microsoft_azure/microsoft_azure-icon.svg',
+    git: 'https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg',
+    kafka: 'https://www.vectorlogo.zone/logos/apache_kafka/apache_kafka-icon.svg',
+    solr: 'https://www.vectorlogo.zone/logos/apache_solr/apache_solr-icon.svg',
+    cassandra: 'https://www.vectorlogo.zone/logos/apache_cassandra/apache_cassandra-icon.svg',
+    rabbitMQ: 'https://www.vectorlogo.zone/logos/rabbitmq/rabbitmq-icon.svg',
+    hadoop: 'https://www.vectorlogo.zone/logos/apache_hadoop/apache_hadoop-icon.svg',
+    bash: 'https://www.vectorlogo.zone/logos/gnu_bash/gnu_bash-icon.svg',
+    pytorch: 'https://www.vectorlogo.zone/logos/pytorch/pytorch-icon.svg',
+    opencv: 'https://www.vectorlogo.zone/logos/opencv/opencv-icon.svg',
+    illustrator: 'https://www.vectorlogo.zone/logos/adobe_illustrator/adobe_illustrator-icon.svg',
+    figma: 'https://www.vectorlogo.zone/logos/figma/figma-icon.svg',
+    blender: 'https://download.blender.org/branding/community/blender_community_badge_white.svg',
 }
 
 const initialSkillState = {}
@@ -69,4 +132,4 @@ skills.forEach(skill => {
     initialSkillState[skill] = false
 });
 
-export { initialSkillState, icons, skills };
+export { initialSkillState, icons, skills, categorizedSkills, categories };

src/pages/index.css

@@ -341,7 +341,11 @@ a {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
 }
-
+.skills-category-title {
+  margin: 1% 1% 1% 2%;
+  font-size: 16px;
+  text-align: center;
+}
 .skillCheckbox {
   padding-left: 10%;
 }