Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-09-08 15:33:54 +05:00
Code Issues Projects Releases Packages Wiki Activity

refactor: add background to links and headers

Browse source 
feat: add skills
This commit is contained in:
Kentai Radiquum 2025-07-25 03:03:13 +05:00
parent ab5eedeb07
commit 46f7530e71
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
8 changed files with 99 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

72
app/Section/Skills.tsx Normal file
View file

@ -0,0 +1,72 @@
import { Section } from "../components/Section";
const skills = {
"Front-end": [
"HTML",
"CSS",
"JavaScript",
"TypeScript",
"React",
"Next.js",
"Tailwind CSS",
"Django",
"Flask",
],
"Back-end": ["Node.js", "Express.js", "FastAPI"],
API: [
"REST",
"Postman/Hoppscotch",
// "Swagger",
"mitmproxy",
"HTTP Toolkit",
],
Collaboration: ["Git", "GitHub"],
Deployment: [
"Docker",
"Docker-compose",
"Vercel",
"GitHub Actions",
"Cloudflare Workers & Pages",
],
Tools: ["Figma", "Adobe Photoshop", "Cloudflare DNS"],
};
export const Skills = () => {
return (
<Section>
<h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#101316]/25 flex-1">Skills</h2>
<div className="grid grid-cols-2 gap-2">
<div className="flex flex-col gap-2 xl:grid-row">
{Object.entries(skills).map(([category, skills], index) => {
if (index < 3)
return (
<div key={`skills.${category}`} className="border-1 border-white/5 bg-[#101316]/25 rounded-xl px-3 py-2">
<h3 className="text-2xl md:text-3xl">{category}</h3>
<div className="flex gap-x-4 flex-wrap">
{skills.map((skill) => (
<p key={skill}>{skill}</p>
))}
</div>
</div>
);
})}
</div>
<div className="flex flex-col gap-2 xl:grid-row">
{Object.entries(skills).map(([category, skills], index) => {
if (index > 2)
return (
<div key={`skills.${category}`} className="border-1 border-white/5 bg-[#101316]/25 rounded-xl px-3 py-2">
<h3 className="text-2xl md:text-3xl">{category}</h3>
<div className="flex gap-x-4 flex-wrap">
{skills.map((skill) => (
<p key={skill}>{skill}</p>
))}
</div>
</div>
);
})}
</div>
</div>
</Section>
);
};