This is a responsive, animated personal profile card built with React. It transforms a static personal logo into an interactive, full-viewport experience. Designed with clean animations and a user-focused interface, the component serves as an engaging digital introduction for myself Diante Hazelle-Mclean, Web Developer & Graphic Designer.
- Logo-to-Profile Animation: Clicking on the logo triggers a smooth, full-screen transformation revealing detailed personal information.
- Responsive Design: The component adapts to different viewports, ensuring a consistent experience across devices.
- Professional Animations:
- Hover effects using CSS transitions for smooth interactivity.
- Click animations with configurable durations (0.8–1.5s).
- Easing using custom
cubic-bezierfunctions for a natural feel.
- Interactive Elements:
- Linked buttons to Portfolio and Resume for easy access.
- Social media icons (LinkedIn, GitHub, Behance) with hover states to encourage engagement.
Diante Hazelle-Mclean Web Developer & Graphic Designer Passionate about designing user-friendly websites and creating beautiful graphic designs. Focused on building innovative and responsive web applications.
📄 Resume
🎨 Behance
💻 GitHub
If you are developing a production application, we recommend using TypeScript and enable type-aware lint rules. Check out the TS template to integrate TypeScript and typescript-eslint in your project.