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

I am working on a React-based portfolio project that adheres to modern design principles, modular architecture, and flexibility. Below is the detailed context and requirements for the project. General Context Authentication: Integrate Google OAuth for seamless login functionality. Ensure secure token validation and storage using methods like HTTP-only cookies. Build a custom login system with encrypted password handling (e.g., bcrypt). Integrate this system with a backend authentication service for user management. UI/UX Design: The UI should be responsive and follow accessibility standards. Components must have contrasting visual elements to enhance visibility. Avoid hardcoded dimensions; layouts should dynamically adapt based on the content and container sizes. Component Design: Each component should be reusable and follow a loosely coupled architecture. Maintain separation of concerns, ensuring the logic and UI layers are distinct. API Monitoring Tool: Provide a developer-friendly interface to document and test APIs. Include features like: Listing all available endpoints. Providing detailed information about parameters, expected responses, and examples. Real-time performance tracking (e.g., latency, error rates). Detailed Requirements Input Field Component Should support dynamic placeholder text with a focus on intuitive UX. Placeholder: Grey text with a subtle dotted outline. On focus: Outline dynamically changes to a bold color (e.g., black). Supports inline text editing with validation feedback. API Call Behavior: On pressing "Enter" or clicking a button, the component triggers an API call. Displays the returned response as bold, inline text. Button Component Should have a tactile, 3D-like appearance with smooth animations: Default state: Slightly raised effect. On hover: Background color changes dynamically (e.g., black to grey). On click: Transitions to an inset state, mimicking a "pressed" effect. Avoid fixed dimensions—should dynamically adjust based on its container and text content. Support for multiple actions (e.g., submit, cancel, save) via props. Top Navigation Bar Fixed to the top of the viewport. Contains: Logo aligned to the left. Navigation links centered. User actions (e.g., login/logout) on the right. Responsive: Collapses into a hamburger menu on smaller screens. Avoid hardcoded widths or padding—use dynamic styles for responsiveness. API Monitoring Tool Create a dashboard component that includes: A collapsible list of all APIs, categorized by functionality. A built-in testing interface: Users can input parameters dynamically. Display formatted API responses (JSON or XML) in a readable format. Real-time performance metrics like latency, success rates, and error counts. Ensure modularity: The tool should interact with APIs via a dedicated service layer. Folder Structure scss Copy code /src /components /common // Shared components (e.g., Button, InputField) /Navigation // Top navigation bar /Profile // Profile-related components /Experiences // Experience cards /Projects // Project-related components /services /api // Axios instances, API handlers, and monitoring tools /utils // Utility functions /styles // Shared styles and theming Deliverables Reusable Code for Input Field and Button Components: Must support dynamic styling and avoid hardcoded dimensions. Include detailed inline comments explaining the logic. API Monitoring Tool: A component that dynamically renders API documentation and allows testing. Should interact with a service layer for making API calls. Guidance on Integration: How to integrate the above components and tools into the folder structure. Ensure scalability and flexibility for future enhancements.