Finished skills grid

diogofrosario · Sep 6, 2024 · c1c75b1 · c1c75b1
1 parent 970ed8f
commit c1c75b1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/components/Sections.tsx b/src/components/Sections.tsx
@@ -12,6 +12,7 @@ import {
   SiTensorflow,
   SiHuggingface,
   SiScikitlearn,
+  SiJupyter,
 } from "react-icons/si";
 
 import SkillCard from "./SkillCard";
@@ -176,20 +177,21 @@ export function Timeline() {
 export function Skills() {
   return (
     <div className="bg-black text-white h-screen w-full p-4" id="skills">
-      <p>Skills:</p>
-      <div className="grid grid-cols-3 gap-4 mt-10 pl-10 border-2 rounded-lg w-4/5 center">
+      <p>Main Tools & Technologies:</p>
+      <div className="grid grid-cols-3 gap-4 mt-10 w-1/2 mx-auto">
         <SkillCard Icon={FaPython} skillName="Python" />
         <SkillCard Icon={SiPytorch} skillName="Pytorch" />
         <SkillCard Icon={SiTensorflow} skillName="Tensorflow" />
-        <SkillCard Icon={FaLinux} skillName="Linux" />
         <SkillCard
           Icon={SiHuggingface}
           skillName="Huggingface & Transformers"
         />
         <SkillCard Icon={SiScikitlearn} skillName="Scikit-learn" />
-        <SkillCard Icon={SiRstudioide} skillName="R" />
+        <SkillCard Icon={FaLinux} skillName="Linux" />
         <SkillCard Icon={FaAws} skillName="AWS" />
+        <SkillCard Icon={SiRstudioide} skillName="R" />
+        <SkillCard Icon={SiJupyter} skillName="Jupyter" />
       </div>
     </div>
   );
-}
+}
diff --git a/src/components/SkillCard.tsx b/src/components/SkillCard.tsx
@@ -8,7 +8,7 @@ interface SkillCardProps {
 
 export default function SkillCard({ Icon, skillName, iconSize = 48 }: SkillCardProps) {
     return (
-      <div className="flex flex-col items-center justify-center bg-gray-900 rounded-lg p-5 m-4 w-56 hover:scale-105 hover:bg-gray-800 transition-transform duration-300">
+      <div className="flex flex-col items-center justify-center bg-gray-900 rounded-lg p-5 m-4 w-56 hover:scale-110 hover:bg-gray-800 transition-transform duration-300">
         <Icon size={iconSize} />
         <p className="mt-3 text-lg font-semibold text-white text-center">{skillName}</p>
       </div>