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

7
app/Section/Characters.tsx
View file

@ -33,14 +33,15 @@ export const Characters = () => {
return (
<Section>
<div className="flex flex-col gap-2 mt-2 md:flex-row md:justify-between md:items-center">
<h2 className="text-4xl md:text-5xl">Characters</h2>
<div className="flex items-center gap-4 xl:gap-8">
<h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#1c1e20]/25 flex-1">Characters</h2>
<div className="flex items-center gap-2 flex-1">
{links.map((item) => (
<Link href={item.url} key={`characters.link.${item.text}`}>
<Link href={item.url} key={`characters.link.${item.text}`} className="flex-1">
<IconWithText
icon={item.icon}
text={item.text}
desc={item.desc}
backgroundColor={"#1c1e20"}
/>
</Link>
))}

6
app/Section/Contacts.tsx
View file

@ -32,8 +32,8 @@ const links = [
export const Contacts = () => {
return (
<Section>
<h2 className="text-4xl md:text-5xl">Contacts</h2>
<div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
<h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#1c1e20]/25">Contacts</h2>
<div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-2">
{links.map((item) => {
if (item.url) {
return (
@ -42,6 +42,7 @@ export const Contacts = () => {
icon={item.icon}
text={item.text}
desc={item.desc}
backgroundColor={"#1c1e20"}
/>
</Link>
);
@ -52,6 +53,7 @@ export const Contacts = () => {
icon={item.icon}
text={item.text}
desc={item.desc}
backgroundColor={"#1c1e20"}
/>
);
}

8
app/Section/Photos.tsx
View file

@ -41,14 +41,16 @@ export const Photos = () => {
<div className="flex flex-col gap-4">
<Section>
<div className="flex flex-col gap-2 md:flex-row md:justify-between md:items-center">
<h2 className="text-4xl md:text-5xl">Photos</h2>
<div className="flex items-center gap-4 xl:gap-8">
<h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#ffb1cd]/5 flex-1">Photos</h2>
<div className="flex items-center gap-2 flex-1">
{links.map((item) => (
<Link href={item.url} key={`photos.link.${item.text}`}>
<Link href={item.url} key={`photos.link.${item.text}`} className="flex-1">
<IconWithText
icon={item.icon}
text={item.text}
desc={item.desc}
backgroundColor={"#ffb1cd"}
backgroundOpacity={"5%"}
/>
</Link>
))}

4
app/Section/Projects.tsx
View file

@ -42,7 +42,7 @@ const links = [
{
icon: "/icons/ic_baseline-telegram.svg",
text: "Red Pandas Stickers",
desc: "Collection of Red Panda related sticker packs",
desc: "Collection of Red Panda sticker packs",
url: "https://t.me/red_panda_stickers",
},
];
@ -50,7 +50,7 @@ const links = [
export const Projects = () => {
return (
<Section>
<h2 className="text-4xl md:text-5xl">Projects</h2>
<h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#101316]/5">Projects</h2>
<div className="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3">
{links.map((item) => (
<Link href={item.url} key={`projects.link.${item.text}`}>

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>
);
};

4
app/Section/Socials.tsx
View file

@ -50,8 +50,8 @@ const links = [
export const Socials = () => {
return (
<Section>
<h2 className="text-4xl md:text-5xl">Socials</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-x-12 gap-y-2">
<h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#ffb1cd]/5">Socials</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-2">
{links.map((item) => (
<Link href={item.url} key={`socials.link.${item.text}`}>
<IconWithText icon={item.icon} text={item.text} desc={item.desc} />