import React from 'react'
import { motion } from "framer-motion"
type Props = {}
export default function Projects({}: Props) {
const projects = [1,2];
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-even mx-auto items-center z-0'>
<h3 className='absolute top-24 uppercase tracking-[20px] text-gray-500 text-2xl'>
My Portfolio
</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-[#61ff45]/80'>
{projects.map((project, i) => (
<div className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen'>
<motion.img
initial={{
y: -300,
opacity: 0
}}
transition={{ duration: 1.2 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
src="./img/PHP.png"
alt=""
/>
<div className='space-y-10 px-0 md:px-10 max-w-6xl'>
<h4 className='text-4xl font-semibold text-center'>
<span className='underline decoration-[#61ff45]/50'> Case Study {i + 1} of {projects.length}:</span> Mini Php Lexer
</h4>
<div className='text-lg text-center md:text-left'>
This is a lexical analyzer that aims to process and evaluate PHP code to determine if it can be executed without any problems, displaying the complete code on screen along with a breakdown of each part.
</div>
</div>
</div>
))}
</div>
<div className='w-full absolute top-[30%] bg-[#61ff45]/10 left-0 h-[500px] -skew-y-12'/>
</motion.div>
)
}
I'm in the process of creating my portfolio website, but when I run npm dev, I encounter an error saying "Hydration failed because the initial UI does not match what was rendered on the server." I suspect the issue is in this particular section of code as VSCode shows a "Missing 'key' prop for element in iterator" warning. As I am not very experienced with these programming languages, I am unsure about the meaning of this error.