Skip to content

Commit 6c2e59a

Browse files
MagicherryMagicherry
committed
Update skill card icons
1 parent 403ecc8 commit 6c2e59a

4 files changed

Lines changed: 40 additions & 66 deletions

File tree

‎src/components/About/Techstack.js‎

Lines changed: 22 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,38 @@
11
import React from "react";
22
import { Col, Row } from "react-bootstrap";
3-
import {
4-
DiJavascript1,
5-
DiReact,
6-
DiNodejs,
7-
DiMongodb,
8-
DiPython,
9-
DiJava,
10-
} from "react-icons/di";
11-
import { IoLogoVue } from "react-icons/io5";
12-
import {
13-
SiSpringboot,
14-
SiRedis,
15-
SiNextdotjs,
16-
SiGo,
17-
SiMysql,
18-
SiDocker,
19-
SiKubernetes,
20-
SiTensorflow,
21-
SiPytorch
22-
} from "react-icons/si";
23-
import { FaGlassMartiniAlt } from "react-icons/fa"; // Gin placeholder icon
24-
import { CgCPlusPlus } from "react-icons/cg";
253

264
const techStackIcons = [
275
// Languages & Backend
28-
{ icon: <CgCPlusPlus />, name: "C++", link: "https://isocpp.org/" },
29-
{ icon: <DiJava />, name: "Java", link: "https://www.java.com/" },
30-
{ icon: <SiSpringboot />, name: "Spring Boot", link: "https://spring.io/projects/spring-boot" },
31-
{ icon: <SiGo />, name: "Go", link: "https://go.dev/" },
32-
{ icon: <FaGlassMartiniAlt />, name: "Gin", link: "https://gin-gonic.com/" },
33-
{ icon: <DiJavascript1 />, name: "JavaScript", link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript" },
34-
{ icon: <DiPython />, name: "Python", link: "https://www.python.org/" },
35-
{ icon: <DiNodejs />, name: "Node.js", link: "https://nodejs.org/" },
6+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/cplusplus/cplusplus-original.svg" alt="C++" style={{ width: "1em", height: "1em" }} />, name: "C++", link: "https://isocpp.org/" },
7+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/java/java-original.svg" alt="Java" style={{ width: "1em", height: "1em", filter: "brightness(2.5) contrast(1.1)" }} />, name: "Java", link: "https://www.java.com/" },
8+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/spring/spring-original.svg" alt="Spring Boot" style={{ width: "1em", height: "1em" }} />, name: "Spring Boot", link: "https://spring.io/projects/spring-boot" },
9+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/go/go-original.svg" alt="Go" style={{ width: "1em", height: "1em" }} />, name: "Go", link: "https://go.dev/" },
10+
{ icon: <img src="https://raw.githubusercontent.com/gin-gonic/logo/master/color.png" alt="Gin" style={{ width: "1em", height: "1em", objectFit: "contain" }} />, name: "Gin", link: "https://gin-gonic.com/" },
11+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg" alt="JavaScript" style={{ width: "1em", height: "1em" }} />, name: "JavaScript", link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript" },
12+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg" alt="Python" style={{ width: "1em", height: "1em" }} />, name: "Python", link: "https://www.python.org/" },
13+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/django/django-plain.svg" alt="Django" style={{ width: "1em", height: "1em", filter: "brightness(3.5) contrast(1.2)" }} />, name: "Django", link: "https://www.djangoproject.com/" },
14+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/flask/flask-original.svg" alt="Flask" style={{ width: "1em", height: "1em", filter: "invert(1)" }} />, name: "Flask", link: "https://flask.palletsprojects.com/" },
15+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/fastapi/fastapi-original.svg" alt="FastAPI" style={{ width: "1em", height: "1em", filter: "brightness(1.2) contrast(1.1)" }} />, name: "FastAPI", link: "https://fastapi.tiangolo.com/" },
16+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nodejs/nodejs-original.svg" alt="Node.js" style={{ width: "1em", height: "1em",filter: "brightness(1.2) contrast(1.0)" }} />, name: "Node.js", link: "https://nodejs.org/" },
3617

3718
// Frontend
38-
{ icon: <DiReact />, name: "React", link: "https://react.dev/" },
39-
{ icon: <IoLogoVue />, name: "Vue.js", link: "https://vuejs.org/" },
40-
{ icon: <SiNextdotjs />, name: "Next.js", link: "https://nextjs.org/" },
19+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg" alt="React" style={{ width: "1em", height: "1em" }} />, name: "React", link: "https://react.dev/" },
20+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vuejs/vuejs-original.svg" alt="Vue.js" style={{ width: "1em", height: "1em" }} />, name: "Vue.js", link: "https://vuejs.org/" },
21+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nextjs/nextjs-original.svg" alt="Next.js" style={{ width: "1em", height: "1em", filter: "invert(1)" }} />, name: "Next.js", link: "https://nextjs.org/" },
4122

4223
// Databases
43-
{ icon: <SiMysql />, name: "MySQL", link: "https://www.mysql.com/" },
44-
{ icon: <DiMongodb />, name: "MongoDB", link: "https://www.mongodb.com/" },
45-
{ icon: <SiRedis />, name: "Redis", link: "https://redis.io/" },
24+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mysql/mysql-original.svg" alt="MySQL" style={{ width: "1em", height: "1em", filter: "brightness(1.8) contrast(1.2)" }} />, name: "MySQL", link: "https://www.mysql.com/" },
25+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mongodb/mongodb-original.svg" alt="MongoDB" style={{ width: "1em", height: "1em",filter: "brightness(1.2) contrast(1.0)"}} />, name: "MongoDB", link: "https://www.mongodb.com/" },
26+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/redis/redis-original.svg" alt="Redis" style={{ width: "1em", height: "1em" }} />, name: "Redis", link: "https://redis.io/" },
4627

4728
// DevOps / Tools
48-
{ icon: <SiDocker />, name: "Docker", link: "https://www.docker.com/" },
49-
{ icon: <SiKubernetes />, name: "Kubernetes", link: "https://kubernetes.io/" },
29+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/docker/docker-original.svg" alt="Docker" style={{ width: "1em", height: "1em", filter: "brightness(1.5) contrast(1.0)"}} />, name: "Docker", link: "https://www.docker.com/" },
30+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/kubernetes/kubernetes-original.svg" alt="Kubernetes" style={{ width: "1em", height: "1em" }} />, name: "Kubernetes", link: "https://kubernetes.io/" },
5031

5132
// AI / ML
52-
{ icon: <SiPytorch />, name: "PyTorch", link: "https://pytorch.org/" },
53-
{ icon: <SiTensorflow />, name: "TensorFlow", link: "https://www.tensorflow.org/" },
33+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/pytorch/pytorch-original.svg" alt="PyTorch" style={{ width: "1em", height: "1em" }} />, name: "PyTorch", link: "https://pytorch.org/" },
34+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/tensorflow/tensorflow-original.svg" alt="TensorFlow" style={{ width: "1em", height: "1em" }} />, name: "TensorFlow", link: "https://www.tensorflow.org/" },
35+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/opencv/opencv-original.svg" alt="OpenCV" style={{ width: "1em", height: "1em" }} />, name: "OpenCV", link: "https://opencv.org/" },
5436
];
5537

5638

‎src/components/About/Toolstack.js‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,13 @@
11
import React from "react";
22
import { Col, Row } from "react-bootstrap";
3-
import {
4-
SiVisualstudiocode,
5-
SiLinux,
6-
SiWindows11,
7-
SiJetbrains,
8-
SiJupyter,
9-
} from "react-icons/si";
10-
import { FaApple } from "react-icons/fa";
113

124
const toolStackIcons = [
13-
{ icon: <SiWindows11 />, name: "Windows", link: "https://www.microsoft.com/en-us/windows" },
14-
{ icon: <FaApple />, name: "macOS", link: "https://www.apple.com/macos/" },
15-
{ icon: <SiLinux />, name: "Linux", link: "https://ubuntu.com/desktop/" },
16-
{ icon: <SiJupyter />, name: "Jupyter", link: "https://jupyter.org/" },
17-
{ icon: <SiVisualstudiocode />, name: "Visual Studio Code", link: "https://code.visualstudio.com/" },
18-
{ icon: <SiJetbrains />, name: "JetBrains", link: "https://www.jetbrains.com/" },
5+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/windows11/windows11-original.svg" alt="Windows" style={{ width: "1em", height: "1em", filter: "brightness(1.5) contrast(1.2)" }} />, name: "Windows", link: "https://www.microsoft.com/en-us/windows" },
6+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/apple/apple-original.svg" alt="macOS" style={{ width: "1em", height: "1em", filter: "invert(1)" }} />, name: "macOS", link: "https://www.apple.com/macos/" },
7+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linux/linux-original.svg" alt="Linux" style={{ width: "1em", height: "1em" }} />, name: "Linux", link: "https://ubuntu.com/desktop/" },
8+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/jupyter/jupyter-original.svg" alt="Jupyter" style={{ width: "1em", height: "1em" }} />, name: "Jupyter", link: "https://jupyter.org/" },
9+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vscode/vscode-original.svg" alt="VS Code" style={{ width: "1em", height: "1em" }} />, name: "Visual Studio Code", link: "https://code.visualstudio.com/" },
10+
{ icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/jetbrains/jetbrains-original.svg" alt="JetBrains" style={{ width: "1em", height: "1em" }} />, name: "JetBrains", link: "https://www.jetbrains.com/" },
1911
];
2012

2113
function Toolstack() {

‎src/components/Projects/ProjectData.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ export const projects = [
55
description: "A Personalized Recommender System implementing custom Matrix Factorization. Includes data preprocessing, model evaluation (MAE, RMSE, NDCG), and a full-stack web application.",
66
ghLink: "https://github.com/Magicherry/Movies-Recommendation",
77
demoLink: "https://github.com/Magicherry/Movies-Recommendation",
8-
tags: ["Machine Learning", "Matrix Factorization", "Next.js", "Django", "Recommender System"],
8+
tags: ["Python", "Machine Learning", "Matrix Factorization", "Next.js", "Django", "Text CNN", "Recommender"],
99
type: "Personal",
1010
date: "2026"
1111
},
1212
{
1313
imgPath: require("../../Assets/projects/Railway.png"),
1414
title: "Intelligent Rail Incident Classifier",
1515
description: "A hierarchical NLP system based on DeBERTa-v3 to automatically classify real-world railway incident logs across multi structured label levels, with end-to-end training and evaluation pipelines.",
16-
tags: ["Hierarchical Learning", "Data Preprocessing", "Supervised Fine-tuning", "DeBERTa-v3"],
16+
tags: ["Python", "Hierarchical Learning", "Preprocessing", "Fine-tuning", "DeBERTa-v3", "NLP"],
1717
type: "Company Internal",
1818
date: "2025"
1919
},
@@ -41,7 +41,7 @@ export const projects = [
4141
description: "A full-stack note-taking application featuring a Vue3 front-end and a Django back-end. Includes web scraping and data mining capabilities to analyze user data.",
4242
ghLink: "https://github.com/Magicherry/AyeNote",
4343
demoLink: "https://github.com/Magicherry/AyeNote",
44-
tags: ["Django", "Vue 3", "MySQL", "BeautifulSoup", "AJAX"],
44+
tags: ["Python", "Django", "Vue 3", "MySQL", "Beautiful Soup", "AJAX"],
4545
type: "Personal",
4646
date: "2023"
4747
},
@@ -51,7 +51,7 @@ export const projects = [
5151
description: "A real-time strategy game with a SpringBoot back-end and a Vue3 front-end. Features a MySQL database and a Bootstrap 4 interface for a dynamic gaming experience.",
5252
ghLink: "https://github.com/Magicherry/King-of-Bots",
5353
demoLink: "https://github.com/Magicherry/King-of-Bots",
54-
tags: ["Spring Boot", "Vue 3", "MySQL", "WebSocket", "JWT"],
54+
tags: ["Java", "Spring Boot", "Vue 3", "MySQL", "WebSocket", "JWT"],
5555
type: "Personal",
5656
date: "2023"
5757
},
@@ -61,7 +61,7 @@ export const projects = [
6161
description: "A comprehensive management system built with SpringBoot and MyBatis. Features a secure database with MD5 encryption and a clear separation of front-end and back-end concerns.",
6262
ghLink: "https://github.com/Magicherry/Management_Web_System",
6363
demoLink: "https://github.com/Magicherry/Management_Web_System",
64-
tags: ["Spring Boot", "Vue 3", "MyBatis Plus", "MySQL", "MD5"],
64+
tags: ["Java", "Spring Boot", "Vue 3", "MyBatis Plus", "MySQL", "MD5"],
6565
type: "Personal",
6666
date: "2022"
6767
},
@@ -71,7 +71,7 @@ export const projects = [
7171
description: "A high-fidelity UX prototype for a third-party music streaming application, designed in Axure RP 9 and inspired by Apple Music's clean and intuitive interface.",
7272
ghLink: "https://github.com/Magicherry/Music-App-Ui-Design",
7373
demoLink: "https://github.com/Magicherry/Music-App-Ui-Design",
74-
tags: ["Axure RP"],
74+
tags: ["Axure RP", "UX", "Prototyping"],
7575
type: "Personal",
7676
date: "2022"
7777
},

‎src/css/style.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2581,9 +2581,9 @@ body.homepage .home-about-section {
25812581
}
25822582

25832583
.tech-icons {
2584-
font-size: 1rem !important;
2584+
font-size: 1.2rem !important;
25852585
margin: 8px !important;
2586-
padding: 16px 12px !important;
2586+
padding: 12px 8px !important;
25872587
opacity: 0.93 !important;
25882588
border-radius: 20px !important;
25892589
border: 1px solid rgba(255, 255, 255, 0.16) !important;
@@ -2623,7 +2623,7 @@ body.homepage .home-about-section {
26232623
}
26242624

26252625
.tech-icons__name {
2626-
font-size: 0.95rem;
2626+
font-size: 1.05rem;
26272627
font-weight: 600;
26282628
letter-spacing: 0.3px;
26292629
line-height: 1.2;
@@ -2636,7 +2636,7 @@ body.homepage .home-about-section {
26362636
@media (max-width: 767px) {
26372637
.tech-icons {
26382638
margin: 6px !important;
2639-
padding: 14px 10px !important;
2639+
padding: 10px 8px !important;
26402640
max-width: 150px;
26412641
min-height: 90px;
26422642
gap: 8px !important;
@@ -2647,11 +2647,11 @@ body.homepage .home-about-section {
26472647
}
26482648

26492649
.tech-icons__icon {
2650-
font-size: 2.6rem;
2650+
font-size: 3.2rem;
26512651
}
26522652

26532653
.tech-icons__name {
2654-
font-size: 0.85rem;
2654+
font-size: 0.95rem;
26552655
}
26562656
}
26572657

0 commit comments

Comments
 (0)