feat: ✨ main skills next and tailwind (#97)

components/homepage/SkillsMain.tsx

@@ -6,14 +6,15 @@ const SkillsMain = () => {
   return (
     <div className="mt-20">
       <DividerWithText text="My Main Skills" />
-      <div className="mb-20 mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+      <div className="mb-20 mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
         {skills.map((skill) => (
           <SkillsCard
+            id={skill.id}
             key={skill.id}
             imgSrc={skill.imgSrc}
             imgAlt={skill.imgAlt}
             title={skill.title}
-            titleYears={`${skill.titleYears}`}
+            years={skill.years}
             description={skill.description}
           />
         ))}

components/homepage/WhatIDoMindset.tsx

@@ -7,18 +7,18 @@ const skillsInfo: SkillInfo[] = [
   {
     id: 1,
     title: 'Passionate about JavaScript, TypeScript, and React',
-    description: `I have ${YEARS.javascript} years of experience creating modern, interactive web applications, utilizing Tailwind CSS to deliver visually appealing and responsive designs.`,
+    description: `I have ${YEARS.javascript} years of experience creating modern, interactive web applications, utilizing Tailwind CSS to deliver visually appealing and\u00A0responsive designs.`,
   },
   {
     id: 2,
     title: 'Proficient in technologies',
     description:
-      'I leverage React, Next.js, Redux, GraphQL, Jest, Playwright, and Figma to ensure code reliability and scalability, delivering high-quality solutions and products.',
+      'I leverage React, Next.js, Redux, GraphQL, Jest, Playwright, and\u00A0Figma to ensure code reliability, scalability and\u00A0the\u00A0delivery of\u00A0high-quality solutions and\u00A0products.',
   },
   {
     id: 3,
     title: 'Focus on type safety',
-    description: `With ${YEARS.typescript} years of experience in TypeScript, I focus on code safety, and creating robust and scalable codebases. Less errors save both time and money.`,
+    description: `With ${YEARS.typescript} years of experience in TypeScript, I focus on code safety, and creating robust and scalable codebases. Less errors save both time and\u00A0money.`,
   },
 ]
 
@@ -27,19 +27,19 @@ const mindsetInfo: SkillInfo[] = [
     id: 1,
     title: 'Committed to continuous learning',
     description:
-      'I continuously improve my technical skills and stay updated with trends by actively engaging in online communities and learning to enhance my knowledge and expertise.',
+      'I continuously improve my technical skills and stay updated with trends by actively engaging in online communities and\u00A0learning to\u00A0enhance my knowledge and\u00A0expertise.',
   },
   {
     id: 2,
     title: 'Collaborative by nature',
     description:
-      'I enjoy working in teams where I can contribute ideas. My strong communication skills enable me to explain concepts effectively to stakeholders and team members.',
+      'I enjoy working in teams where I can contribute ideas. My strong communication skills enable me to explain concepts effectively to\u00A0stakeholders and\u00A0team members.',
   },
   {
     id: 3,
     title: 'Delivering meaningful products to improve users lives',
     description:
-      'I am passionate about solving real-world problems to help users and customers. Products that streamline processes, and increase value of a business.',
+      'I am passionate about solving real-world problems to help users and customers. Products that streamline processes, and\u00A0increase value of a\u00A0business.',
   },
 ]
 

components/shared/SkillsCard.tsx

@@ -1,21 +1,16 @@
-import Image, { StaticImageData } from 'next/image'
+import { SkillCard } from '@/utils/interfaces'
+import Image from 'next/image'
 
-type SkillsCardProps = {
-  imgSrc: StaticImageData
-  imgAlt: string
-  title: string
-  titleYears: string
-  description: string
-}
+type SkillsCardProps = SkillCard
 
-const SkillsCard = ({ imgSrc, imgAlt, title, titleYears, description }: SkillsCardProps) => (
+const SkillsCard = ({ imgSrc, imgAlt, title, years, description }: SkillsCardProps) => (
   <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-md">
     <Image src={imgSrc} alt={imgAlt} width={88} height={88} />
     <div className="mt-3 text-2xl font-semibold tracking-tight text-neutral-900">
       {title}{' '}
-      {titleYears && (
+      {years && (
         <span className="text-neutral-500">
-          {' · '} {titleYears} years
+          {' · '} {years} {`${years === 1 ? 'year' : 'years'}`}
         </span>
       )}
     </div>

data/skills/skills-main.ts

@@ -1,6 +1,8 @@
 import js from '@/public/icons/svg/skills/js.svg'
+import next from '@/public/icons/svg/skills/next.svg'
 import react from '@/public/icons/svg/skills/react.svg'
 import redux from '@/public/icons/svg/skills/redux.svg'
+import tailwind from '@/public/icons/svg/skills/tailwind.svg'
 import ts from '@/public/icons/svg/skills/ts.svg'
 import { YEARS } from '@/utils/constants'
 import { generateIconsSkills } from '@/utils/generateIconsSkills'
@@ -17,31 +19,47 @@ export const skills: SkillCard[] = [
     imgSrc: js,
     imgAlt: 'JS',
     title: 'JavaScript',
-    titleYears: YEARS.javascript,
+    years: YEARS.javascript,
     description: 'Essential for creating modern interactive web applications.',
   },
   {
     id: 2,
     imgSrc: ts,
     imgAlt: 'TS',
     title: 'TypeScript',
-    titleYears: YEARS.typescript,
-    description: 'Ensuring type safety, code reliability and scalability.',
+    years: YEARS.typescript,
+    description: 'Ensuring type safety, code reliability and\u00A0scalability.',
   },
   {
     id: 3,
     imgSrc: react,
     imgAlt: 'React',
     title: 'React',
-    titleYears: YEARS.react,
-    description: 'Great for components that are reusable and easy to maintain.',
+    years: YEARS.react,
+    description: 'Great for components that are reusable and\u00A0easy to maintain.',
   },
   {
     id: 4,
     imgSrc: redux,
     imgAlt: 'Redux',
     title: 'Redux',
-    titleYears: YEARS.redux,
-    description: 'Managing application state in a predictable and organized way.',
+    years: YEARS.redux,
+    description: 'Managing application state in a predictable and\u00A0organized way.',
+  },
+  {
+    id: 5,
+    imgSrc: next,
+    imgAlt: 'Next.js',
+    title: 'Next.js',
+    years: YEARS.next,
+    description: 'The React Framework for creating fast and\u00A0scalable web applications.',
+  },
+  {
+    id: 6,
+    imgSrc: tailwind,
+    imgAlt: 'Tailwind CSS',
+    title: 'Tailwind CSS',
+    years: YEARS.tailwind,
+    description: 'Amazing utility-first CSS framework for\u00A0quickly building custom designs.',
   },
 ]

utils/constants.ts

@@ -3,6 +3,8 @@ export const YEARS = {
   typescript: 5,
   react: 5,
   redux: 2,
+  tailwind: 2,
+  next: 1,
   webDeveloper: 1,
   qaAutomation: 1,
   localizationManager: 2,

utils/interfaces.ts

@@ -70,6 +70,6 @@ export interface SkillCard {
   imgSrc: StaticImageData
   imgAlt: string
   title: string
-  titleYears: number
+  years: number
   description: string
 }