Light Theme - Copy this React, Mui Component to your project
Build a modern, visually appealing website portfolio for a cybersecurity professional, featuring multiple pages with modern design aesthetics, hover effects, and smooth transitions. The site should consist of the following pages: Header: Display name ("Avula Maheswar Reddy") with a dynamic typing animation showing titles like "Cybersecurity Analyst," "Malware Researcher," and "CTF Solver.", Include a circular profile picture with a subtle hover zoom effect and shadow glow. Add a short bio about the user's background in cybersecurity, including their experience and expertise (mentioning "incident response, malware analysis, vulnerability management"). Use a dynamic moving temgradient background with modern design patterns or subtle cybersecurity related animations (e.g., a moving digital code or network grid). "Explore My Work" leads to the Projects page. Experience Page:Timeline Layout, List relevant cybersecurity roles or experiences in a clean, vertical timeline format. Each timeline entry should expand on hover to reveal detailed information about the role or project.Key Highlights, Include interactive icons representing different areas of expertise, such as "Threat Modeling," "SIEM Setup," and "Network Security," which when hovered, show short descriptions.Section Transitions, Smooth scrolling with fade in and slide animations as the user navigates through different sections. Projects Page: Project Cards, Display projects such as "Detection of Malware Using Machine Learning," "DDoS Protection System," and "SOS Drone" in sleek card designs with hover effects that show project summaries. Interactive Elements, Add a button to view GitHub repositories or detailed write ups for each project. Hover Effect, When hovering over a project card, animate it to shift upward slightly and add a subtle shadow effect. Skills Page: Skills Grid, Present skills in a dynamic grid layout categorized under headings like "Programming," "Tools," "Networking & Security." Each skill icon should have a color transition effect on hover. Progress Bars, Include progress bars or radial charts to visualize proficiency in key skills such as Python, Assembly, and Malware Analysis. Unique Visuals, Include subtle animations of network diagrams or digital code in the background to represent technical expertise. Certifications Page: Certification List, Display certifications like "ISC2 Certified in Cybersecurity," "Google Cybersecurity Professional," "Malware Analysis from LetsDefend" with official logos. Hover Effect, Each certification will have a bounce or glow effect when hovered. Badges, Add digital badges for each certification that rotate slightly when hovered, giving them a 3D look. Contact Page: Contact Form, Include a clean, responsive contact form with hover effects on input fields. The "Send Message" button should have a pulsating animation to catch attention. Social Media Links. Include icons for LinkedIn, GitHub, Twitter, and Email with a color shift or icon grow effect when hovered.Footer, Minimalistic footer with copyright info and additional quick links to other sections. Overall Design Elements: Navigation Bar, Sticky, transparent navigation bar that changes background color when scrolling down. Color Scheme, Use a modern, sleek color palette (dark mode recommended), with neon accents (cyan, green, or purple) for a tech savvy, cybersecurity vibe. Fonts, Choose a clean, modern sans serif font like "Poppins" or "Roboto" for readability and professionalism. Interactive Effects, Implement CSS hover effects on buttons, images, and div tags to make the design dynamic. Animations, Include smooth scroll transitions between sections, subtle loading animations, and a parallax effect for background images.
