Portfolio - Copy this React, Tailwind Component to your project
Following the instructions and make the webapp as a animated portfolio ### Website Prompt for Rohidas Shinde's IT Administrator Portfolio (Home Page) #### 1. **Home Section (Introduction)** **Layout**: The top section will feature a full screen background with a centered card displaying your circular image (with a border radius of 50% for a circle effect, 20px padding). **Content**: **Name**: Display the text "**Rohidas Shinde**" in a bold, professional font. **Position**: Underneath your name, display the text "**IT Administrator**" in a smaller font. **Image**: Your professional image will be displayed in a circular shape (border radius: 50%) with 20px padding. **Animation**: When the page loads, your image and text will fade in slowly from the center. Slight hover effect on your image to zoom in with smooth transition (e.g., 0.3s duration). #### 2. **Scroll Down Animation (Working Profession Section)** **Trigger**: As the user scrolls down, the next section smoothly fades in, adding some parallax scrolling to emphasize depth. **Content (Working Profession)**: **Header**: Display "**Working Profession**" as the section title, center aligned with a thin underline. **List of Expertise**: 1. **Windows Server Management**: Will appear first, sliding in from the left. 2. **Network Management**: Appears next, sliding in from the right. 3. **Cloud Architect AWS and Azure**: This will fade in from below, with a subtle bouncing effect. #### 3. **Header and Footer Styling** **Color Scheme**: **Header**: Dark navy blue background with white text. **Footer**: Matching navy blue background with white text. **Hover Effects**: Text color changes to light blue on hover in both header and footer sections. **Typography**: Use modern, professional fonts like `Roboto` or `Montserrat` for clean and readable content. #### 4. **Animations**: **Text Animations**: Add smooth animations for the text to appear as the user scrolls into each section. For each item in the "Working Profession" list, make sure there's a staggered delay (e.g., 200ms) between each item's animation, so they don't all appear at once. **Transitions**: Ensure smooth transitions between sections, using a `scroll snap` behavior for cleaner navigation when scrolling. #### 5. **General Layout & Responsiveness**: **Responsive Design**: Ensure the website is fully responsive, with the image and text scaling properly on smaller screens like mobile devices and tablets. **Minimalist UI**: Avoid clutter; keep the content concise with clean layouts for better readability and professionalism. This design gives your portfolio a modern and engaging look, highlighting your professional skills with smooth animations and a bold yet clean dark navy color scheme.
