Portfolio Page - Copy this React, Tailwind Component to your project

Generate a professional, modern, and fully responsive portfolio page for an academy starting with a hero section. The page should highlight the skills, experience, and projects of individual teachers with animations and include video sections after each teacher’s portfolio. The layout should be clean and visually engaging, with smooth animations and transitions, ensuring a great user experience on both desktop and mobile devices." Hero Section: The hero section should display the portfolio heading at the top of the page (e.g., “Meet Our Expert Teachers”). Below the heading, include a short introductory text that briefly describes the academy’s teachers, their expertise, and their achievements. Use a clean, full width background image that subtly zooms in or fades on page load, and the heading should have a smooth "fade in" animation. The text should also have a delayed animation like “slide up” or “fade up” for a dynamic introduction. Ensure responsiveness so that on smaller screens, the text stacks properly, and images resize appropriately. Portfolio Section (Step by Step Teacher Portfolios): This section should feature individual teacher portfolios one after another. Each portfolio should include: Teacher’s Image: Add a large professional photo of the teacher with a "zoom in" animation on scroll. Teacher’s Name and Role: Display the teacher's name and role (e.g., "John Doe – Senior Web Developer") with a fade in or slide in animation. Short Bio: Add a short bio describing the teacher's skills, experience, and achievements. This text should slide in from the left or right. Skills and Projects: Highlight key skills and projects in a list or card format with icons representing each skill (e.g., React, Python, etc.). Each card should animate on hover with a slight scale or shadow effect. Step by Step Experience Timeline: Create a timeline (or step by step visual) showing the teacher's experience and major milestones. Each milestone should fade in as the user scrolls, with animations like “slide up” or “bounce.” Ensure the layout adjusts fluidly on mobile, with text and images reorganizing to fit the screen. Use media queries for optimal spacing and sizing on smaller screens. Video Section (Teacher Skill Showcase): After each teacher’s portfolio, insert a full width video section where the teacher showcases their skills in action. The video should autoplay when scrolled into view (muted by default, with an option to enable sound). Add a play button overlay on the video with a soft pulse animation, prompting users to interact. The video container should smoothly fade in as the user scrolls. Ensure the video is responsive, maintaining a perfect aspect ratio (e.g., 16:9) and resizing appropriately on different devices. On mobile, the video should collapse to full width and autoplay efficiently without performance issues. Teacher Portfolio Continuation: Repeat the portfolio and video section for each teacher, following the same structure but with unique animations for each teacher to keep the page engaging. For example, one teacher’s portfolio might slide in from the left, while another fades in from the right. Each video should feel unique with personalized content but consistent in style and animation. Additional Animations and Interactivity: Apply subtle hover animations on teacher photos and project cards, where elements like icons, borders, or shadows become more prominent. Use parallax effects for background images, where they move slower than the foreground content as the user scrolls. Add smooth scrolling transitions between sections, making sure the user experience is seamless and engaging. Ensure all animations are lightweight, optimized, and don’t negatively impact the performance of the page, especially on mobile devices.