Ayush Salunkhe
3D-Effects:-Use-3D-transformation-effects-on-the-hero-text-(Ayush-Salunkhe)-and-title.-For-example,-rotate-the-text-slightly-on-mouse-movement-using-transform:-perspective(500px)-rotateY(10deg).-Animated-Hero-Image:-Animate-the-hero-image-to-gently-scale-in-and-out-or-have-it-rotate-on-hover.-Add-particle-effects-or-floating-shapes-around-the-hero-section-for-visual-interest.-import-React,-{-useState-}-from-"react";-import-{-FaGithub,-FaLinkedin,-FaTwitter,-FaInstagram-}-from-"react-icons/fa";-import-{-motion-}-from-"framer-motion";-const-Portfolio-=-()-=>-{-const-[formData,-setFormData]-=-useState({-name:-"",-email:-"",-message:-""-});-const-fadeInUp-=-{-initial:-{-opacity:-0,-y:-60-},-animate:-{-opacity:-1,-y:-0-},-transition:-{-duration:-0.6-}-};-const-staggerContainer-=-{-animate:-{-transition:-{-staggerChildren:-0.3-}-}-};-const-skills-=-[-{-category:-"Frontend-Development",-items:-["React",-"JavaScript",-"HTML5",-"CSS3",-"Tailwind-CSS"]-},-{-category:-"UI/UX-Design",-items:-["Figma",-"Adobe-XD",-"Wireframing",-"Prototyping"]-},-{-category:-"Backend-Development",-items:-["Node.js",-"Express",-"MongoDB",-"RESTful-APIs"]-}-];-const-services-=-[-{-title:-"Web-Development",-description:-"Custom-websites-built-with-modern-technologies-and-best-practices."-},-{-title:-"UI/UX-Design",-description:-"User-centered-design-solutions-that-enhance-digital-experiences."-},-{-title:-"Mobile-Development",-description:-"Cross-platform-mobile-applications-using-React-Native."-}-];-const-portfolio-=-[-{-title:-"E-commerce-Platform",-image:-"images.unsplash.com/photo-1460925895917-afdab827c52f",-description:-"Modern-e-commerce-solution-with-advanced-features"-},-{-title:-"Portfolio-Website",-image:-"images.unsplash.com/photo-1517694712202-14dd9538aa97",-description:-"Responsive-portfolio-website-with-animations"-},-{-title:-"Mobile-App",-image:-"images.unsplash.com/photo-1512941937669-90a1b58e7e9c",-description:-"Cross-platform-mobile-application"-}-];-const-handleSubmit-=-(e)-=>-{-e.preventDefault();-console.log("Form-submitted:",-formData);-};-const-handleInputChange-=-(e)-=>-{-setFormData({-...formData,-[e.target.name]:-e.target.value-});-};-return-(-<div-className="min-h-screen-bg-black-text-center-text-white">-<motion.header-initial={{-opacity:-0-}}-animate={{-opacity:-1-}}-transition={{-duration:-1-}}-className="relative-py-20-px-4"->-<div-className="fixed-bottom-8-left-1/2--translate-x-1/2-transform">-<div-className="flex-space-x-8-rounded-full-bg-gray-900/90-px-8-py-4-backdrop-blur-sm">-<motion.a-whileHover={{-scale:-1.1,-y:--5-}}-href="#about"-className="text-yellow-400-hover:text-yellow-300"->-About-</motion.a>-<motion.a-whileHover={{-scale:-1.1,-y:--5-}}-href="#skills"-className="text-yellow-400-hover:text-yellow-300"->-Skills-</motion.a>-<motion.a-whileHover={{-scale:-1.1,-y:--5-}}-href="#portfolio"-className="text-yellow-400-hover:text-yellow-300"->-Portfolio-</motion.a>-<motion.a-whileHover={{-scale:-1.1,-y:--5-}}-href="#contact"-className="text-yellow-400-hover:text-yellow-300"->-Contact-</motion.a>-</div>-</div>-<motion.h1-initial={{-y:--50-}}-animate={{-y:-0-}}-transition={{-duration:-0.8-}}-className="mb-4-text-6xl-font-bold"->-Ayush-Salunkhe-</motion.h1>-<motion.p-initial={{-y:-50-}}-animate={{-y:-0-}}-transition={{-duration:-0.8-}}-className="mb-8-text-xl-text-yellow-400"->-Full-Stack-Developer-&-UI/UX-Designer-</motion.p>-<motion.button-whileHover={{-scale:-1.1-}}-whileTap={{-scale:-0.9-}}-className="rounded-full-bg-yellow-400-px-8-py-3-text-black-hover:bg-yellow-300"->-Contact-Me-</motion.button>-</motion.header>-<motion.section-initial="initial"-whileInView="animate"-viewport={{-once:-true-}}-variants={fadeInUp}-id="about"-className="bg-black/50-py-20"->-<motion.div-whileHover={{-scale:-1.05-}}-transition={{-duration:-0.3-}}-className="mx-auto-mb-8-h-48-w-48-overflow-hidden-rounded-full-border-4-border-yellow-400-shadow-lg-shadow-yellow-400/20"->-<img-src="images.unsplash.com/photo-1472099645785-5658abf4ff4e"-alt="Profile"-className="h-full-w-full-object-cover"-/>-</motion.div>-<motion.div-variants={fadeInUp}-className="mx-auto-max-w-2xl-px-4"->-<p-className="text-lg">Passionate-developer-with-5+-years-of-experience-in-creating-beautiful-and-functional-web-applications.-Specialized-in-React-and-modern-web-technologies.</p>-</motion.div>-</motion.section>-<motion.section-variants={staggerContainer}-initial="initial"-whileInView="animate"-viewport={{-once:-true-}}-id="skills"-className="py-20"->-<motion.h2-variants={fadeInUp}-className="mb-12-text-4xl-font-bold-text-yellow-400"->-Skills-</motion.h2>-<div-className="mx-auto-grid-max-w-6xl-gap-8-px-4-sm:grid-cols-2-lg:grid-cols-3">-{skills.map((skill,-index)-=>-(-<motion.div-key={index}-variants={fadeInUp}-whileHover={{-scale:-1.05-}}-className="rounded-xl-bg-yellow-400-p-6-text-black-shadow-lg"->-<h3-className="mb-4-text-xl-font-bold">{skill.category}</h3>-<ul-className="space-y-2">-{skill.items.map((item,-idx)-=>-(-<li-key={idx}>{item}</li>-))}-</ul>-</motion.div>-))}-</div>-</motion.section>-<motion.section-variants={staggerContainer}-initial="initial"-whileInView="animate"-viewport={{-once:-true-}}-className="bg-black/50-py-20"->-<motion.h2-variants={fadeInUp}-className="mb-12-text-4xl-font-bold-text-yellow-400"->-Services-</motion.h2>-<div-className="mx-auto-grid-max-w-6xl-gap-8-px-4-sm:grid-cols-2-lg:grid-cols-3">-{services.map((service,-index)-=>-(-<motion.div-key={index}-variants={fadeInUp}-whileHover={{-scale:-1.05-}}-className="rounded-xl-bg-yellow-400-p-6-text-black-shadow-lg"->-<h3-className="mb-4-text-xl-font-bold">{service.title}</h3>-<p>{service.description}</p>-</motion.div>-))}-</div>-</motion.section>-<motion.section-variants={staggerContainer}-initial="initial"-whileInView="animate"-viewport={{-once:-true-}}-id="portfolio"-className="py-20"->-<motion.h2-variants={fadeInUp}-className="mb-12-text-4xl-font-bold-text-yellow-400"->-Portfolio-</motion.h2>-<div-className="mx-auto-grid-max-w-6xl-gap-8-px-4-sm:grid-cols-2-lg:grid-cols-3">-{portfolio.map((project,-index)-=>-(-<motion.div-key={index}-variants={fadeInUp}-whileHover={{-scale:-1.05-}}-className="overflow-hidden-rounded-xl-bg-gray-900-shadow-lg"->-<img-src={project.image}-alt={project.title}-className="h-48-w-full-object-cover"-/>-<div-className="p-6">-<h3-className="mb-2-text-xl-font-bold">{project.title}</h3>-<p-className="mb-4-text-gray-300">{project.description}</p>-<motion.button-whileHover={{-scale:-1.1-}}-whileTap={{-scale:-0.9-}}-className="rounded-full-bg-yellow-400-px-6-py-2-text-black-hover:bg-yellow-300"->-View-More-</motion.button>-</div>-</motion.div>-))}-</div>-</motion.section>-<motion.section-initial="initial"-whileInView="animate"-viewport={{-once:-true-}}-variants={fadeInUp}-className="bg-black/50-py-20"->-<div-className="mx-auto-max-w-4xl-px-4">-<motion.div-initial={{-scaleX:-0-}}-whileInView={{-scaleX:-1-}}-transition={{-duration:-0.8-}}-className="mb-8-h-px-bg-yellow-400"-></motion.div>-<motion.p-variants={fadeInUp}-className="text-2xl-italic-text-yellow-400-shadow-yellow-400/20"->-"Working-with-John-was-an-absolute-pleasure.-His-attention-to-detail-and-professional-approach-made-our-project-a-huge-success."-</motion.p>-<motion.div-initial={{-scaleX:-0-}}-whileInView={{-scaleX:-1-}}-transition={{-duration:-0.8-}}-className="mt-8-h-px-bg-yellow-400"-></motion.div>-</div>-</motion.section>-<motion.section-initial="initial"-whileInView="animate"-viewport={{-once:-true-}}-variants={fadeInUp}-id="contact"-className="py-20"->-<motion.h2-variants={fadeInUp}-className="mb-12-text-4xl-font-bold-text-yellow-400"->-Contact-Me-</motion.h2>-<motion.form-variants={fadeInUp}-onSubmit={handleSubmit}-className="mx-auto-max-w-xl-px-4"->-<div-className="mb-6">-<motion.input-whileFocus={{-scale:-1.02-}}-type="text"-name="name"-placeholder="Your-Name"-value={formData.name}-onChange={handleInputChange}-className="w-full-rounded-lg-bg-gray-900-p-4-text-white-focus:outline-none-focus:ring-2-focus:ring-yellow-400"-/>-</div>-<div-className="mb-6">-<motion.input-whileFocus={{-scale:-1.02-}}-type="email"-name="email"-placeholder="Your-Email"-value={formData.email}-onChange={handleInputChange}-className="w-full-rounded-lg-bg-gray-900-p-4-text-white-focus:outline-none-focus:ring-2-focus:ring-yellow-400"-/>-</div>-<div-className="mb-6">-<motion.textarea-whileFocus={{-scale:-1.02-}}-name="message"-placeholder="Your-Message"-value={formData.message}-onChange={handleInputChange}-rows="4"-className="w-full-rounded-lg-bg-gray-900-p-4-text-white-focus:outline-none-focus:ring-2-focus:ring-yellow-400"-></motion.textarea>-</div>-<motion.button-whileHover={{-scale:-1.1-}}-whileTap={{-scale:-0.9-}}-type="submit"-className="rounded-full-bg-yellow-400-px-8-py-3-text-black-hover:bg-yellow-300"->-Send-Message-</motion.button>-</motion.form>-</motion.section>-<motion.footer-initial="initial"-whileInView="animate"-viewport={{-once:-true-}}-variants={fadeInUp}-className="bg-black/50-py-8"->-<div-className="mb-6-flex-justify-center-space-x-6">-{[FaGithub,-FaLinkedin,-FaTwitter,-FaInstagram].map((Icon,-index)-=>-(-<motion.a-key={index}-whileHover={{-scale:-1.2,-rotate:-360-}}-transition={{-duration:-0.3-}}-href="#"-className="text-yellow-400/80-hover:text-yellow-400"->-<Icon-size={24}-/>-</motion.a>-))}-</div>-<motion.p-variants={fadeInUp}-className="text-sm-text-yellow-400/60"->-©-2024-Ayush-Salunkhe.-All-rights-reserved.-</motion.p>-</motion.footer>-</div>-);-};-export-default-Portfolio;
