sharp-portfolio

As a user, I want to see a visually stunning Hero section so that I am immediately impressed by the portfolio. Implement the Hero page based on the existing Hero (v2) JSX design. Include: interactive particle universe background that reacts to cursor movement, glowing semi-transparent glass panel, animated typing effect cycling through AI Engineer roles, name 'Muqadas Naveed', title, tagline 'Building intelligent systems that solve real-world problems at scale', and two glowing CTA buttons ('View Projects' and 'Contact Me'). Smooth scroll transitions to About section. Reference the Hero (v2) design.

As a user, I want to read a professional summary of Muqadas Naveed so that I can evaluate her background and expertise. Implement the About section based on the About (v1) JSX design. Include a confident professional summary highlighting AI Engineering focus, real-world problem solving, scalable systems, and global opportunities. Use glassmorphism card styling, smooth scroll-triggered animations via Framer Motion, and responsive layout. This page links from the Hero section and leads to the Skills section.

As a user, I want to browse Muqadas Naveed's expertise in an interactive animated format so that I can assess her technical skills. Implement the Skills section based on the Skills (v1) JSX design. Display skill categories: Programming (Python, JavaScript), AI/ML (Machine Learning, Deep Learning, NLP, Computer Vision), Frameworks (TensorFlow, PyTorch, Scikit-learn), Tools (Git, Docker, REST APIs), and optional MERN Stack. Use animated cards or progress bars with Framer Motion scroll-triggered animations. This section links from About and leads to Projects.

As a user, I want to explore Muqadas Naveed's projects through visually stunning cards so that I can evaluate her project impact and technical achievements. Implement the Projects section based on the Projects (v2) JSX design. Include project cards with hover animations for: Employee Performance Dashboard (ML insights), Inventory Management System (AI predictions), Learning Management System with recommendation engine, NLP chatbot/sentiment analysis, and Computer Vision system. Each card must show description, technologies used, key achievements (accuracy %, optimization), GitHub link placeholder, and optional live demo button. Links from Hero CTA and Skills section, leads to Contact.

As a user, I want to view Muqadas Naveed's professional experience so that I can evaluate her career background. Implement the Experience section with a timeline or card layout styled in the futuristic dark theme. Include Freelance Software Developer role with AI-based and full-stack project contributions and measurable impact. Use Framer Motion scroll-triggered animations. Integrate as a section within the single-page portfolio flow between Projects and Currently Learning.

As a user, I want to see what Muqadas Naveed is currently learning so that I can see her commitment to growth. Implement the Currently Learning section with modern animated badges for: Transformers & LLMs, MLOps & deployment, and Advanced deep learning. Use glowing accent badge styles, hover animations, and Framer Motion entrance transitions. Integrate as a section between Experience and Contact.

As a user, I want to contact Muqadas Naveed through a stylish animated form so that I can reach out for opportunities. Implement the Contact section based on the Contact (v2) JSX design. Include email, LinkedIn, GitHub contact info display and a stylish animated contact form with Framer Motion transitions. Form fields: name, email, message, and submit button with glowing accent style. This is the final section of the user flow, linked from Projects and Hero CTA.

As a user, I want to see a clean minimal footer so that I can access essential links quickly. Implement a minimal, clean footer component with essential links (GitHub, LinkedIn, Email). Style using the portfolio dark theme with subtle accent colors. Ensure responsiveness and accessibility.

As a user, I want to see a polished loading animation when the portfolio loads so that I experience a premium entry feel. Implement a full-screen loading animation that plays on initial page load before revealing the Hero section. Use Framer Motion for the animation. Style with the portfolio's futuristic dark theme and accent colors.

As a user, I want to experience smooth scrolling, subtle cursor effects, and section transitions so that navigation feels fluid and professional. Implement smooth scrolling behavior, subtle custom cursor effects (professional, not distracting), and scroll-based section entrance animations using Framer Motion. Ensure effects are performant and accessible.

As a user, I want the portfolio to load within 3 seconds and be discoverable on search engines so that recruiters can find it easily. Implement performance optimizations (lazy loading, image optimization, code splitting), add meta tags, Open Graph tags, and structured data for SEO. Ensure WCAG 2.1 AA accessibility compliance. Target sub-3-second load on standard broadband.