projects completed

components/About.tsx

@@ -6,9 +6,9 @@ type Props = {}
 export const About = (props: Props) => {
  return (
  <motion.div
- initial={{opacity:0}}
- whileInView={{opacity:1}}
- transition={{duration: 2.5}} 
+ initial={{opacity: 0}}
+ whileInView={{opacity: 1}}
+ transition={{duration: 1.2}} 
  className='h-screen flex flex-col relative text-center
  md:text-left md:flex-row max-w-7xl px-10 justify-evenly mx-auto items-center'>
  <h3 className='absolute top-20 ml-5 uppercase tracking-[20px] text-gray-500 text-2xl'>About</h3>

components/Projects.tsx

@@ -0,0 +1,50 @@
+import { motion } from 'framer-motion';
+import React from 'react'
+
+type Props = {}
+
+const projects = [1,2,3,4,5];
+
+export const Projects = (props: Props) => {
+ return (
+ <motion.div
+ initial={{ opacity: 0 }}
+ whileInView={{ opacity: 1 }}
+ transition={{ duration: 1.5 }}
+ className='h-screen relative flex overflow-hidden flex-col text-left md:flex-row max-w-full
+ justify-evenly mx-auto items-center z-0'
+ >
+ <h3 className='absolute top-20 ml-5 uppercase tracking-[20px] text-gray-500 text-2xl'>Projects</h3>
+ <div className='relative w-full flex overflow-x-scroll overflow-y-hidden
+ snap-x snap-mandatory z-20 scrollbar-thin scrollbar-track-gray-400/20 scrollbar-thumb-[#F7AB0A]/80 p-10'>
+ {
+ projects.map((project, index) => (
+ <div className='w-screen max-h-screen flex-shrink-0 flex-col space-y-5
+ justify-center items-center flex snap-center' key={index}>
+ <motion.img
+ initial={{
+ y: -200,
+ opacity: 0,
+ }}
+ transition={{
+ duration: 1.2
+ }}
+ className='md:w-[480px] w-[300px]'
+ whileInView={{ y: 0, opacity: 1 }}
+ viewport={{ once: true }}
+ src="https://cdn.sanity.io/images/ltuexkre/production/af7ca99b5a796d0698cf9121a4a0795b5022b6be-666x375.png"
+ alt="project" 
+ />
+ <div className='space-y-10 px-5 md:px-10 max-w-5xl'>
+ <h4 className='text-2xl md:text-3xl font-semibold text-center'>Crop Recommendation System</h4>
+ <h6 className='text-center md:text-left'>Netflix 2.0 app that has a Log In and Log Out Authentication with Google. It has a beautiful Home Screen with all the movies looking just like Netflix. There is also a subscription page where you can see your active monthly subscription. We also use Stripe Payments for the monthly Netflix Subscriptions!</h6>
+ </div>
+ </div>
+ ))
+ }
+
+ </div>
+ <div className='w-full absolute top-[30%] bg-[#F7AB0A]/10 left-0 h-[300px] -skew-y-12' />
+ </motion.div>
+ )
+}

components/Skill.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { motion } from 'framer-motion'
+
+type Props = {
+ directionLeft?: boolean;
+}
+
+export const Skill = ({directionLeft}: Props) => {
+ return (
+ <div className='group relative flex cursor-pointer'>
+ <motion.img
+ src='https://cdn.sanity.io/images/ltuexkre/production/b54b0a9525e943809d5cfd9b1549b9f7d3b8858f-500x500.png'
+ // initial={{
+ // x: directionLeft ? -100 : 100,
+ // opacity: 0,
+ // }}
+ // transition={{ duration: 1 }}
+ // whileInView={{ opacity: 1, x: 0 }}
+ 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'
+ />
+ <div className='absolute opacity-0 group-hover:opacity-80 transition duration-300
+ ease-in-out group-hover:bg-white w-20 h-20 md:w-28 md:h-28 xl:w-32 xl:h-32 rounded-full z-0'>
+ <div className='flex items-center justify-center h-full'>
+ <p className='text-[20px] font-semibold xl:text-3xl md:font-bold text-black opacity-100'>100%</p>
+ </div>
+ </div>
+ </div>
+ )
+}

components/Skills.tsx

@@ -1,16 +1,38 @@
 import React from 'react'
 import { motion } from 'framer-motion'
+import { Skill } from './Skill'
 
 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'>
+ <motion.div
+ initial={{ opacity: 0 }}
+ whileInView={{ opacity: 1 }}
+ transition={{ duration: 1.5 }}
+ className='flex relative flex-col text-center md:text-left
+ xl:flex-row 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>
+
+ <div className='grid grid-cols-4 gap-3 md:gap-5 pt-20'>
+ <Skill directionLeft />
+ <Skill directionLeft />
+ <Skill />
+ <Skill />
+ <Skill directionLeft />
+ <Skill directionLeft />
+ <Skill />
+ <Skill />
+ <Skill directionLeft />
+ <Skill directionLeft />
+ <Skill />
+ <Skill />
+ </div>
+
  </motion.div>
  )
 }

components/WorkEx.tsx

@@ -13,7 +13,7 @@ export const WorkEx = (props: Props) => {
  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-[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'>
+ <div className='w-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'>
  <ExperienceCard />
  <ExperienceCard />
  <ExperienceCard />

pages/index.tsx

@@ -7,6 +7,7 @@ import {Hero} from '../components/Hero'
 import { About } from '../components/About'
 import { WorkEx } from '../components/WorkEx'
 import { Skills } from '../components/Skills'
+import { Projects } from '../components/Projects'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -28,13 +29,17 @@ export default function Home() {
  <About />
  </section>
 
- <section id='experience' className='snap-start'>
+ <section id='experience' className='snap-center'>
  <WorkEx />
  </section>
 
  <section id='skills' className='snap-start'>
  <Skills />
  </section>
+
+ <section id='projects' className='snap-start'>
+ <Projects />
+ </section>
 
  </div>
  )