Skip to content

Commit 02561e4

Browse files
steadyfallsteadyfall
committed
fix: added subsections in skills section
1 parent fceb38a commit 02561e4

File tree

3 files changed

+93
-59
lines changed

3 files changed

+93
-59
lines changed

‎site/src/app/config.ts

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const projectsArray = [
4343
repo: true,
4444
repoUrl: "https://github.com/steadyfall/wwbm-webapp",
4545
live: false,
46-
techStack: [`Django`, `MySQL`, `HTML5/CSS3`, `jQuery`, `Docker`, `AWS EC2`]
46+
techStack: [`Django`, `MySQL`, `HTML5`, `TailwindCSS`, `jQuery`, `Docker`, `AWS EC2`]
4747
},
4848
{
4949
title: "SpectraSVD",
@@ -85,24 +85,14 @@ export const projectsArray = [
8585
repoUrl: "https://github.com/steadyfall/RedWish",
8686
live: true,
8787
liveUrl: "https://steadyfall.github.io/RedWish/",
88-
techStack: [`HTML5/CSS3`, `JavaScript`, `Firebase`, `DialogFlow API`]
88+
techStack: [`HTML5`, `CSS3`, `JavaScript`, `Firebase`, `DialogFlow API`]
8989
},
9090
]
9191

92-
export const skillsArray = [
93-
"Python",
94-
"JavaScript (ES6)",
95-
"TypeScript",
96-
"Django",
97-
"Flask",
98-
"React",
99-
"Next.js",
100-
"Node.js",
101-
"Postgres",
102-
"MySQL",
103-
"Docker",
104-
"Bash",
105-
"Powershell",
106-
"C",
107-
"C++"
108-
]
92+
export const skillsArray = {
93+
languages: ["Python", "JavaScript (ES6)", "TypeScript", "Go", "C", "C++20", "SQL"],
94+
frameworksAndLibraries: ["Django", "Flask", "React", "TailwindCSS", "Next.js", "Node.js", "Postgres", "MySQL"],
95+
tools: ["Bash", "Powershell", "Docker", "Postman"],
96+
}
97+
// "Axios", "Socket.IO"
98+
// databases: ["Postgres", "MySQL", "Redis"]

‎site/src/components/Skills.tsx

Lines changed: 49 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,58 @@ import { Icon } from '@iconify/react';
66
import { techIcons } from '@/lib/techIcons';
77

88
interface SkillsProps {
9-
arr: string[];
9+
arr: {
10+
languages: string[];
11+
frameworksAndLibraries: string[];
12+
databases?: string[];
13+
tools: string[];
14+
};
1015
}
1116

1217
export function Skills({ arr }: SkillsProps) {
1318
const [skills, setSkills] = useState(arr)
19+
const result = Object.entries(skills).map(([key, value]) => {
20+
return (
21+
<div className="mb-4" suppressHydrationWarning>
22+
<div className="text-xl mb-2 font-bold">
23+
{
24+
<BlurFade
25+
delay={BLUR_FADE_DELAY * 10}
26+
>
27+
{(key === "frameworksAndLibraries")
28+
? (
29+
('databases' in skills)
30+
? `Frameworks & Libraries`
31+
: `Frameworks, Libraries & Databases`
32+
)
33+
: key.charAt(0).toUpperCase() + key.slice(1)}:
34+
</BlurFade>
35+
}
36+
</div>
37+
<div className="flex flex-wrap gap-1">
38+
{
39+
value.map((skillText, index) => (
40+
<BlurFade
41+
key={index}
42+
delay={BLUR_FADE_DELAY * 10 + index * 0.05}
43+
>
44+
<Badge key={index}>
45+
{
46+
techIcons?.[skillText] &&
47+
<span className="mr-2">{
48+
<Icon icon={techIcons[skillText]}
49+
inline={true} width={18} height={18}/>
50+
}</span>
51+
}
52+
<span>{skillText}</span>
53+
</Badge>
54+
</BlurFade>
55+
))
56+
}
57+
</div>
58+
</div>
59+
);
60+
});
1461
return (
1562
<section id="skills" className="mb-12">
1663
<BlurFade delay={BLUR_FADE_DELAY * 9}>
@@ -19,26 +66,7 @@ export function Skills({ arr }: SkillsProps) {
1966
"inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]"
2067
)}>Skills</h2>
2168
</BlurFade>
22-
{skills && skills.length > 0 ? (
23-
<div className="flex flex-wrap gap-1">
24-
{skills.map((skillText, index) => (
25-
<BlurFade
26-
key={index}
27-
delay={BLUR_FADE_DELAY * 10 + index * 0.05}
28-
>
29-
<Badge key={index}>
30-
{
31-
techIcons?.[skillText] &&
32-
<span className="mr-2">{
33-
<Icon icon={techIcons[skillText]} inline={true} width={18} height={18}/>
34-
}</span>
35-
}
36-
<span>{skillText}</span>
37-
</Badge>
38-
</BlurFade>
39-
))}
40-
</div>
41-
) : (
69+
{skills ? result : (
4270
<p>No skills to display.</p>
4371
)}
4472
</section>

‎site/src/lib/techIcons.ts

Lines changed: 35 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,46 @@
11
export const techIcons: { [key: string]: string } = {
2-
"Python": "devicon:python",
3-
"Python3": "devicon:python",
4-
"JavaScript (ES6)": "devicon:javascript",
5-
"TypeScript": "devicon:typescript",
2+
"AWS": "la:aws",
3+
"AWS EC2": "simple-icons:amazonec2",
4+
"Axios": "simple-icons:axios",
5+
"Bash": "devicon-plain:bash",
66
"C": "devicon:c",
77
"C++": "devicon:cplusplus",
88
"C++20": "devicon:cplusplus",
9-
"Go": "logos:go",
10-
"HTML5": "logos:html-5" ,
11-
"CSS3": "logos:css-3",
12-
"R": "devicon:rstudio",
9+
"Cloudflare": "devicon:cloudflare",
10+
"CMake": "devicon:cmake",
11+
"CSS3": "devicon:css3",
12+
"Cypress": "devicon-plain:cypressio",
13+
"D3.js": "logos:d3",
1314
"Django": "vscode-icons:file-type-django",
15+
"Docker": "logos:docker-icon",
16+
"Firebase": "devicon:firebase",
1417
"Flask": "simple-icons:flask",
15-
"React": "logos:react",
18+
"Framer Motion": "simple-icons:framer",
19+
"Go": "logos:go",
20+
"HTML5": "devicon:html5",
21+
"JavaScript": "devicon:javascript",
22+
"JavaScript (ES6)": "devicon:javascript",
23+
"Jest": "logos:jest",
24+
"jQuery": "devicon-plain:jquery",
25+
"Linux": "devicon:linux",
26+
"MongoDB": "logos:mongodb-icon",
27+
"MySQL": "fontisto:mysql",
1628
"Next.js": "devicon:nextjs",
1729
"Node.js": "devicon:nodejs",
18-
"Axios": "simple-icons:axios",
19-
"Socket.IO": "simple-icons:socketdotio",
20-
"TailwindCSS": "devicon:tailwindcss",
21-
"D3.js": "logos:d3",
22-
"Jest": "logos:jest",
23-
"Cypress": "devicon-plain:cypressio",
24-
"Pytest": "simple-icons:pytest",
30+
"NumPy": "devicon:numpy",
31+
"OpenCV": "devicon:opencv",
2532
"Postgres": "logos:postgresql",
26-
"MySQL": "fontisto:mysql",
27-
"Docker": "logos:docker-icon",
33+
"Postman": "devicon:postman",
2834
"Powershell": "vscode-icons:file-type-powershell",
29-
"Bash": "devicon-plain:bash"
35+
"Pytest": "simple-icons:pytest",
36+
"Python": "devicon:python",
37+
"Python3": "devicon:python",
38+
"R": "devicon:rstudio",
39+
"Railway": "simple-icons:railway",
40+
"React": "logos:react",
41+
"Redis": "devicon:redis",
42+
"Socket.IO": "simple-icons:socketdotio",
43+
"Streamlit": "devicon:streamlit",
44+
"TailwindCSS": "devicon:tailwindcss",
45+
"TypeScript": "devicon:typescript",
3046
}

0 commit comments

Comments
 (0)