fixes

components/BackgroundCircles.tsx

@@ -18,7 +18,7 @@ export const BackgroundCircles = (props: Props) => {
  duration: 2.5
  }}
  className='relative flex justify-center items-center'>
- <div className='absolute border border-[#333333] rounded-full h-[120px] w-[120px] mt-50 animate-ping lg:h-[150px] lg:w-[150px]' />
+ <div className='absolute border border-[#3d3d3d] rounded-full h-[120px] w-[120px] mt-50 animate-ping lg:h-[150px] lg:w-[150px]' />
  <div className='absolute border border-[#333333] rounded-full h-[180px] w-[180px] mt-50 lg:h-[250px] lg:w-[250px]' />
  <div className='absolute border border-[#333333] rounded-full h-[250px] w-[250px] mt-50 lg:h-[400px] lg:w-[400px]' />
  <div className='rounded-full border border-[#F7AB0A] opacity-20

components/ExperienceCard.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { motion } from 'framer-motion'
+
+type Props = {}
+
+const ExperienceCard = (props: Props) => {
+ return (
+ <article className='flex flex-col rounded-lg items-center space-y-7 flex-shrink-0
+ w-[330px] md:w-[600px] xl:[900px] snap-center bg-[#292929] p-[20px] md:opacity-40 hover:opacity-100 cursor-pointer transition-opacity duration-200 overflow-hidden'>
+ <motion.img
+ initial={{
+ y: -100,
+ opacity: 0,
+ }}
+ transition={{ duration: 1.2 }}
+ whileInView={{ opacity:1, y: 0 }}
+ viewport={{once:true}}
+ className='w-24 h-24 rounded-full xl:w-[150px] xl:h-[150px]
+ object-cover object-center'
+ src='https://cdn.sanity.io/images/ltuexkre/production/9498d51c38123b1af0bdf52739ed7e4afe287244-3083x3222.jpg'
+ alt='company logo'
+ />
+ <div className='px-0 md:px-10'>
+ <h4 className='text-2xl md:text-3xl font-light'>Mobile Application Engineer</h4>
+ <p className='font-semibold text-1xl md:text-2xl mt-1'>BINARYVEDA</p>
+ <div className='flex space-x-2 my-2'>
+ <img
+ className='h-10 w-10 rounded-full'
+ src='https://cdn-icons-png.flaticon.com/512/5968/5968242.png'
+ />
+ <img
+ className='h-10 w-10 rounded-full'
+ src='https://cdn-icons-png.flaticon.com/512/5968/5968242.png'
+ />
+ <img
+ className='h-10 w-10 rounded-full'
+ src='https://cdn-icons-png.flaticon.com/512/5968/5968242.png'
+ />
+ </div>
+ <p className='uppercase py-5 text-gray-300'>Aug 2022 - Current</p>
+ <ul className='list-disc space-y-4 ml-5 text-sm'>
+ <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. </li>
+ <li>At dolorum vero, nisi excepturi fugiat ipsum et nesciunt </li>
+ <li>doloribus, neque, enim molestias quos quam oluta tenetur consequatur.</li>
+ <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
+ {/* <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li> */}
+ </ul>
+ </div>
+ </article>
+ )
+}
+
+export default ExperienceCard

components/Hero.tsx

@@ -10,14 +10,14 @@ export const Hero = (props: Props) => {
  const [text, count] = useTypewriter({
  words: [
  "Hi, I'm Ayush Srivastava",
- "<Developer />",
+ "<> Loves to Code </>",
  "Tech Enthusiast"
  ],
  loop: true,
  delaySpeed: 2000,
  })
  return (
- <div className='h-screen flex flex-col lg:pt-36 lg:-space-y-[65px] items-center justify-center
+ <div className='h-screen flex flex-col lg:pt-16 lg:-space-y-[65px] items-center justify-center
  text-center overflow-hidden'>
  <BackgroundCircles />
  <div className='relative -top-[36px] lg:top-[10px]'>

components/Skills.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { motion } from 'framer-motion'
+
+type Props = {}
+
+export const Skills = (props: Props) => {
+ return (
+ <motion.div className='flex relative flex-col text-center md:text-left
+ xl:flex-row max-w-[200px] xl:px-10 min-h-screen justify-center xl:space-y-0 mx-auto items-center'>
+ <h3 className='absolute top-24 uppercase tracking-[20px] text-gray-500 text-2xl'>Skills</h3>
+ <h3 className='absolute top-36 uppercase tracking-[3px] text-gray-500 text-sm'>
+ Hover over a skill for current proficiency
+ </h3>
+ </motion.div>
+ )
+}

components/WorkEx.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { motion } from 'framer-motion'
+import ExperienceCard from './ExperienceCard'
 
 type Props = {}
 
@@ -11,9 +12,12 @@ export const WorkEx = (props: Props) => {
  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'>
- <h3 className='absolute top-20 ml-5 uppercase tracking-[20px] text-gray-500 text-2xl'>Experience</h3>
- <div>
-
+ <h3 className='absolute top-[20px] md:top-[50px] ml-5 uppercase tracking-[20px] text-gray-500 text-2xl'>Experience</h3>
+ <div className='w-full flex space-x-5 overflow-x-scroll p-10 snap-x snap-mandatory'>
+ <ExperienceCard />
+ <ExperienceCard />
+ <ExperienceCard />
+ <ExperienceCard />
  </div>
  </motion.div>
  )

pages/index.tsx

@@ -6,6 +6,7 @@ import Header from '../components/Header'
 import {Hero} from '../components/Hero'
 import { About } from '../components/About'
 import { WorkEx } from '../components/WorkEx'
+import { Skills } from '../components/Skills'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -16,19 +17,24 @@ export default function Home() {
  <Head>
  <title>Ayush's Portfolio</title>
  </Head>
- <Header />
+
 
  <section id='hero' className='snap-start'>
+ <Header />
  <Hero />
  </section>
 
  <section id='about' className='snap-center'>
  <About />
  </section>
 
- <section id='experience' className='snap-center'>
+ <section id='experience' className='snap-start'>
  <WorkEx />
  </section>
+
+ <section id='skills' className='snap-start'>
+ <Skills />
+ </section>
 
  </div>
  )