refactor: add background to links and headers

feat: add skills

app/Section/Characters.tsx

@@ -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>
+        <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-4 xl:gap-8">
+        <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>
           ))}

app/Section/Contacts.tsx

@@ -32,8 +32,8 @@ const links = [
 export const Contacts = () => {
   return (
     <Section>
-      <h2 className="text-4xl md:text-5xl">Contacts</h2>
+      <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-4">
+      <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"}
               />
             );
           }

app/Section/Photos.tsx

@@ -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>
+          <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-4 xl:gap-8">
+          <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>
             ))}

app/Section/Projects.tsx

@@ -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}`}>

app/Section/Skills.tsx

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

app/Section/Socials.tsx

@@ -50,8 +50,8 @@ const links = [
 export const Socials = () => {
   return (
     <Section>
-      <h2 className="text-4xl md:text-5xl">Socials</h2>
+      <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-x-12 gap-y-2">
+      <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} />

app/components/IconWithText.tsx

@@ -2,20 +2,23 @@ type IconWithTextProps = {
   icon: string;
   text: string;
   desc: string;
-  hoverTextColor?: string | null;
+  backgroundColor?: string | null;
+  backgroundOpacity?: string | null;
 };
 
 export const IconWithText = ({
   icon,
   text,
   desc,
-  hoverTextColor,
+  backgroundColor,
+  backgroundOpacity
 }: IconWithTextProps) => {
   return (
     <div
-      className={`flex items-center gap-1 ${
+      className={`flex items-start gap-2 border-1 px-3 py-1.5 rounded-xl border-white/5 bg-[var(--bg-color)]/[var(--bg-opacity)] ${
-        hoverTextColor ? `hover:text-${hoverTextColor}` : ""
+        backgroundColor ? `` : "bg-[#161213]/25"
-      } transition-[color,_scale] hover:scale-105 duration-100`}
+      } transition-[scale] hover:scale-105 duration-100 ease-in-out`}
+      style={{ "--bg-color": backgroundColor, "--bg-opacity": backgroundOpacity || "25%" } as React.CSSProperties}
     >
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img src={icon} alt={""} />

app/page.tsx

@@ -4,6 +4,7 @@ import { Footer } from "./Section/Footer";
 import { Intro } from "./Section/Intro";
 import { Photos } from "./Section/Photos";
 import { Projects } from "./Section/Projects";
+import { Skills } from "./Section/Skills";
 import { Socials } from "./Section/Socials";
 
 export default function Home() {
@@ -14,6 +15,7 @@ export default function Home() {
           <Intro />
           <Socials />
           <Photos />
+          <Skills />
           <Projects />
         </div>
         <div className="flex flex-col gap-8 md:gap-16 overflow-hidden bg-[#131314] rounded-t-4xl md:rounded-t-[128px] pt-4 md:pt-8 pb-8 md:pb-16 xl:rounded-t-4xl 2xl:rounded-t-[128px]">