Utkarsh Chaturvedi Portfolio Website

I'll create a modern, responsive portfolio website with a dark theme and neon accents as you requested. The site will feature animated elements, a sticky navbar, and all the sections you outlined.

Key Features of Your Portfolio Website

1. Modern Dark Theme with Neon Accents - I've implemented a dark background with neon blue/purple/teal accents as requested, creating a sleek, modern look.

2. Animated Elements - The site includes:

   • Particle background animation
   • Scroll-triggered animations for each section
   • Hover effects with neon glows
   • Typing animation in the hero section
3. Responsive Design - The portfolio is fully responsive across desktop, tablet, and mobile devices.

4. Structured Sections - All requested sections are implemented:

   • Hero section with animated typing effect
   • About Me with animated skill progress bars
   • Skills section with hover cards
   • Certificates section with hover zoom effects
   • Projects section showcasing your work with images
   • Achievements section with timeline animation
   • Education section with clean layout
   • Contact section with form and contact info

5. Image Integration - I've incorporated your provided images:

   • Profile picture with neon glowing border
   • Project images for the FIFA dashboard and grocery store website
6. Performance Optimized - The site uses Next.js with optimized image loading and smooth animations.

How to Use

1. Navigation - The sticky navbar highlights the active section as you scroll.
2. Contact Form - Visitors can reach out to you through the contact form.
3. Project Links - Each project has links to live sites or GitHub repositories.
4. Certificates - Certificates are displayed with download options.

Next Steps

You can further enhance your portfolio by:

1. Adding more projects as you complete them
2. Connecting the contact form to a backend service
3. Adding a blog section to share your knowledge
4. Implementing analytics to track visitor engagement

I'll create an enhanced certificates section with the features you requested. This will include the grid layout, certificate images, titles, download buttons, and hover animations.

Enhanced Certificates Section

I've updated your certificates section with the following features:

Visual Enhancements

• Grid Layout: 3 certificates side-by-side on desktop, 2 on tablet, and 1 on mobile
• Certificate Display: Each certificate shows the full image in a consistent aspect ratio

• Hover Effects:

  • Subtle zoom animation on hover
  • Neon border glow using a gradient from blue to purple
  • Box shadow with neon colors for a glowing effect

Functional Improvements

• Title Format: Each certificate displays its title with organization and year in parentheses
• Download Button: Prominent download button with icon for each certificate
• Smooth Animations: Fade-in animation when scrolling to the section
• Responsive Design: Properly adjusts for all screen sizes

Technical Details

• Used Next.js Image component for optimized image loading
• Implemented hover state tracking for precise animations
• Added gradient text for the section heading
• Used motion animations for scroll-triggered effects

The certificates now have a more prominent display with the actual certificate images as the focal point, and the download buttons are more visually appealing with the gradient background.

Note

For this example, I've used placeholder images. You'll need to replace them with your actual certificate images. The download functionality is set up to download the certificate images directly.