Rasheed Ali Shaik - Software Engineer Portfolio

import-React,-{-useState,-useEffect,-useRef-}-from-"react";-import-{-FaPython,-FaReact,-FaGithub,-FaLinkedin,-FaTwitter,-}-from-"react-icons/fa";-import-{-SiTensorflow-}-from-"react-icons/si";-import-{-motion,-useSpring-}-from-"framer-motion";-const-PortfolioLanding-=-()-=>-{-const-[angle,-setAngle]-=-useState(0);-const-[isDragging,-setIsDragging]-=-useState(false);-const-[dragStart,-setDragStart]-=-useState({-x:-0-});-const-damping-=-15;-const-stiffness-=-200;-const-mass-=-1;-const-cardRef-=-useRef(null);-const-springAngle-=-useSpring(angle,-{-stiffness,-damping,-mass-});-const-handleMouseDown-=-(e)-=>-{-setIsDragging(true);-setDragStart({-x:-e.clientX-});-};-const-handleMouseMove-=-(e)-=>-{-if-(!isDragging)-return;-const-dx-=-e.clientX---dragStart.x;-setAngle(dx-*-0.015);-};-const-handleMouseUp-=-()-=>-{-setIsDragging(false);-setAngle(0);-};-const-cardVariants-=-{-rest:-{-scale:-1-},-hover:-{-scale:-1.01-},-};-return-(-<div-className="min-h-screen-bg-gray-800-text-gray-200-p-4-md:p-8-lg:p-12">-<div-className="max-w-7xl-mx-auto">-<div-className="flex-flex-col-lg:flex-row-items-center-justify-between-gap-16">-{/*-Text-Section-*/}-<div-className="lg:w-1/2-space-y-6">-<h1-className="text-4xl-md:text-5xl-lg:text-6xl-font-bold-text-blue-400-leading-tight">-Rasheed-Ali-Shaik-</h1>-<h2-className="text-2xl-md:text-3xl-text-gray-300-font-semibold">-Software-Engineer-</h2>-<p-className="text-lg-text-gray-400">-AI/ML-and-Web-Development-</p>-<div-className="flex-space-x-4-pt-6">-<a-href="https://github.com"-target="_blank"-rel="noopener-noreferrer"-className="text-gray-400-hover:text-blue-400-transition-colors"->-<FaGithub-size={24}-/>-</a>-<a-href="https://linkedin.com"-target="_blank"-rel="noopener-noreferrer"-className="text-gray-400-hover:text-blue-400-transition-colors"->-<FaLinkedin-size={24}-/>-</a>-<a-href="https://twitter.com"-target="_blank"-rel="noopener-noreferrer"-className="text-gray-400-hover:text-blue-400-transition-colors"->-<FaTwitter-size={24}-/>-</a>-</div>-</div>-{/*-ID-Card-Section-*/}-<div-className="w-full-lg:w-1/2-flex-justify-center-relative-pt-12-lg:pt-16">-{/*-Container-for-Hook-and-Lanyard-*/}-<div-className="absolute-top-0-left-1/2-transform--translate-x-1/2-z-30">-{/*-Metallic-Hook-*/}-<div-className="relative-w-6-h-6-bg-gradient-to-b-from-gray-400-to-gray-500-rounded-full-shadow-md-border-border-gray-500-flex-items-center-justify-center">-<div-className="absolute-top-[15%]-w-[60%]-h-[60%]-rounded-full-bg-gray-600"></div>-<div-className="absolute-bottom-0-left-1/2-transform--translate-x-1/2-w-1.5-h-3-bg-gray-500-rounded-b-sm"></div>-</div>-{/*-Lanyard-*/}-<div-className="w-3.5-h-10-sm:h-14-bg-gray-600-shadow-inner-overflow-hidden">-<div-className="absolute-inset-0-bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPjxyZWN0IHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiM0NDQ0NDQiLz48L3N2Zz4=')]-opacity-30"></div>-</div>-</div>-{/*-Card-Container-with-Effects-*/}-<div-className="relative"-style={{-width:-"270px",-//-Slightly-larger-card-height:-"432px",-perspective:-"1000px",-}}->-{/*-Connecting-Tag-*/}-<motion.div-className="absolute-top-0-left-1/2-transform--translate-x-1/2-translate-y-[calc(-100%---0.4rem)]-z-20-bg-gradient-to-b-from-gray-500-to-gray-600-h-4-sm:h-5-w-2-rounded-b-md-origin-bottom-shadow-sm"-style={{-rotate:-springAngle,-transformOrigin:-"top-center",-}}-/>-<motion.div-ref={cardRef}-className="absolute-top-0-left-0-w-full-h-full"-style={{-rotateY:-springAngle-}}-transition={{-type:-"spring",-stiffness:-stiffness,-damping:-damping,-mass:-mass-}}-style={{-transformOrigin:-"top-center"-}}-onMouseDown={handleMouseDown}-onMouseMove={handleMouseMove}-onMouseUp={handleMouseUp}-onMouseLeave={handleMouseUp}-drag="x"-dragConstraints={{-left:--40,-right:-40-}}-onDragStart={handleMouseDown}-onDrag={handleMouseMove}-onDragEnd={handleMouseUp}-onPointerLeave={()-=>-setIsDragging(false)}->-<div-className="absolute--inset-1.5-bg-blue-500/5-rounded-md-blur-opacity-15"></div>-{/*-Main-Card-*/}-<motion.div-variants={cardVariants}-initial="rest"-whileHover="hover"-className="relative-bg-gray-700-rounded-md-shadow-xl-overflow-hidden-transition-transform-duration-300-ease-in-out-border-border-gray-600-cursor-grab-active:cursor-grabbing"-style={{-width:-"100%",-height:-"100%",-backgroundColor:-"rgba(55,-65,-81,-0.9)",-backdropFilter:-"blur(8px)",-}}->-{/*-Card-Content-*/}-<div-className="p-5-flex-flex-col-h-full">-<div-className="relative-w-full-h-[60%]-mb-3">-<img-src="https://images.unsplash.com/photo-1633332755192-727a05c4013d"-alt="Profile"-className="w-full-h-full-object-cover-rounded-md-shadow-md"-style={{-transform:-"translateZ(5px)"-}}-/>-</div>-<div-className="text-center-flex-grow-flex-flex-col-justify-between">-<div>-<h3-className="text-lg-font-semibold-text-blue-300-mb-1">-Rasheed-Ali-Shaik-</h3>-<p-className="text-gray-400-text-sm-mb-2">-Software-Engineer-</p>-</div>-<div-className="flex-justify-center-space-x-3-mb-2">-<FaPython-size={16}-className="text-blue-400"-/>-<FaReact-size={16}-className="text-cyan-400"-/>-<SiTensorflow-size={16}-className="text-orange-400"-/>-</div>-<div>-<p-className="text-center-text-xs-text-gray-500">-B.Tech-Graduate-</p>-<p-className="text-center-text-xs-text-gray-500">-AI/ML-Specialist-</p>-</div>-</div>-</div>-</motion.div>-</motion.div>-</div>-</div>-</div>-</div>-<style-jsx>{`-/*-Responsive-adjustments-for-card-positioning-*/-.card-container-responsive-{-margin-top:-15px;-/*-Default-margin-for-smaller-screens-*/-}-@media-(min-width:-768px)-{-/*-Medium-screens-(md:)-*/-.card-container-responsive-{-margin-top:-30px;-}-}-@media-(min-width:-1024px)-{-/*-Large-screens-(lg:)-*/-.card-container-responsive-{-margin-top:-40px;-}-}-`}</style>-</div>-);-};-export-default-PortfolioLanding;