Personal Portfolio Website Template

A modern, animated personal portfolio website template built with React and CSS animations.

Features

1. Header Section

• Animated banner with matrix-style text effect
• Glitch animation on subtitle
• Smooth scroll navigation
• Responsive navigation menu with dropdown support
• Social media links with hover effects

2. About Section

• Profile picture with animated border and glow effects
• Role and company information with icons
• Bio text with decryption animation effect
• Contact details with interactive hover effects
• Download resume button with floating animation

3. Technology Stack Section

• Grid layout for technology icons
• Animated Pacman loader
• Red ghost animation
• Hover effects on tech stack items
• Responsive design for mobile devices

4. Experience Section

• Timeline-style work experience display
• Company logos with hover effects
• Animated section transitions
• Detailed job descriptions

5. Portfolio Section

• Grid layout for projects
• Hover effects with overlay
• Project details modal
• Category filtering
• Responsive image handling

6. Contact Section

• Contact form with validation
• Social media integration
• Location information
• Email and phone details

Technical Features

Animations

• CSS-based animations for smooth performance
• Intersection Observer for scroll-based animations
• Custom keyframe animations for various effects
• Hover state transitions

Responsive Design

• Mobile-first approach
• Flexible grid system
• Adaptive layouts for different screen sizes
• Touch-friendly interactions

Performance

• Optimized CSS animations
• Lazy loading for images
• Efficient React component structure
• Minimal dependencies

Getting Started

1. Clone the repository
2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Build for production:

   npm run build

Customization

Data Configuration

Edit public/resumeData.json to update:

• Personal information
• Work experience
• Skills and technologies
• Portfolio projects
• Contact details

Styling

Main styles are in public/css/layout.css:

• Color scheme
• Animations
• Layout configurations
• Responsive breakpoints

Images

Place images in:

• Profile picture: public/images/
• Project images: public/images/portfolio/
• Technology logos: public/images/logos/

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT License - feel free to use this template for your personal portfolio.