skills updated

components/Header.tsx

@@ -59,8 +59,9 @@ const Header = ({ socials }: Props) => {
  network='email'
  fgColor='gray'
  bgColor='transparent'
+ onClick={()=>window.open('#contact', "_self")}
  />
- <p className='uppercase hidden md:inline-flex text-sm text-gray-400'>Get In Touch</p>
+ <p onClick={()=>window.open('#contact', "_self")} className='uppercase hidden md:inline-flex text-sm text-gray-400'>Get In Touch</p>
  </motion.div>
  </header>
  )

components/Skill.tsx

@@ -19,6 +19,7 @@ export const Skill = ({ skill, directionLeft}: Props) => {
  }}
  transition={{ duration: 1 }}
  whileInView={{ opacity: 1, x: 0 }}
+ viewport={{once:true}}
  className='rounded-full border border-gray-500 object-cover w-20 h-20
  xl:h-32 xl:w-32 md:w-28 md:h-28 filter group-hover:grayscale transition duration-300 ease-in-out'
  />

components/Skills.tsx

@@ -8,6 +8,9 @@ type Props = {
 }
 
 export const Skills = ({ skills }: Props) => {
+
+ const COLS = skills.length/3
+
  return (
  <motion.div
  initial={{ opacity: 0 }}
@@ -21,14 +24,19 @@ export const Skills = ({ skills }: Props) => {
  Hover over a skill for current proficiency
  </h3>
 
- <div className='grid grid-cols-4 gap-3 md:gap-5 pt-20'>
+ <div className={`grid grid-cols-${COLS} gap-3 md:gap-5 pt-20`}>
+ {
+ skills?.slice(0, COLS).map( skill => (
+ <Skill key={skill._id} skill={skill} directionLeft />
+ ))
+ }
  {
- skills?.slice(0, skills.length/2).map( skill => (
+ skills?.slice(COLS, 2*COLS).map( skill => (
  <Skill key={skill._id} skill={skill} />
  ))
  }
  {
- skills?.slice(skills.length/2).map( skill => (
+ skills?.slice(2*COLS, skills.length).map( skill => (
  <Skill key={skill._id} skill={skill} directionLeft />
  ))
  }

components/WorkEx.tsx

@@ -14,7 +14,7 @@ export const WorkEx = ({ experiences }: Props) => {
  whileInView={{ opacity: 1 }}
  transition={{ duration: 2.5 }}
  className='h-screen flex relative overflow-hidden flex-col text-left md:flex-row
- max-w-full px-10 justify-evenly mx-auto items-center'>
+ max-w-full px-0 justify-evenly mx-auto items-center'>
  <h3 className='absolute top-[20px] md:top-[50px] ml-5 uppercase tracking-[20px] text-gray-500 text-2xl'>Experience</h3>
  <div className='w-full md:h-full flex space-x-5 overflow-x-scroll scrollbar-thin scrollbar-track-gray-400/20 scrollbar-thumb-[#F7AB0A]/80 p-10 snap-x snap-mandatory'>
  {experiences.map((experience) => (

utils/fetchSkills.ts

@@ -3,7 +3,7 @@ import { sanityClient } from "../sanity";
 import { Skill } from "../typings";
 
 const query = groq`
- *[_type == "skill"]
+*[_type == "skill"] | order(progress desc)
 `
 
 export const fetchSkills = async () => {