A modern, responsive portfolio website showcasing professional work and skills with elegant animations and interactive features.
- 🎨 Animated Grid Backgrounds: Dynamic canvas-based grid animations that respond to user interaction
- 📱 Responsive Design: Optimized for all device sizes with mobile-first approach
- 🌍 Internationalization: Complete Turkish and English language support
- 🎯 Interactive Project Showcase: Detailed project modals with technology stacks and live demos
- 📊 Animated Skill Visualization: Dynamic progress bars with smooth count-up animations
- ⚡ Performance Optimized: Lazy loading, error boundaries, and efficient rendering
- 🎭 Smooth Animations: Powered by Framer Motion for seamless user experience
- ♿ Accessibility: Full keyboard navigation and screen reader support
- 🔧 PWA Ready: Service Worker, manifest.json, and offline capabilities
- 📈 Performance Monitoring: Lighthouse score 92+ with optimized Core Web Vitals
- React 19 - Latest React with concurrent features
- TypeScript - Type-safe development
- Vite - Fast build tool and development server
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Animation and gesture library
- Lucide React - Beautiful icon library
- ESLint - Code linting and quality assurance
- TypeScript ESLint - TypeScript-specific linting rules
- React Lazy Load Image - Optimized image loading
- Custom Hooks - Reusable logic abstraction
- Error Boundaries - Graceful error handling
- Code Splitting - Bundle optimization with Vite
# Clone the repository
git clone https://github.com/MelihIlker/personal-website.git
cd personal-website
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildsrc/
├── components/ # React components
│ ├── ui/ # Reusable UI components
│ │ ├── SquaresBackground.tsx # Canvas-based animated grid
│ │ ├── GradientText.tsx # Gradient text effects
│ │ └── TextType.tsx # Typewriter effect
│ ├── Hero.tsx # Landing section
│ ├── Projects.tsx # Project showcase
│ ├── Skills.tsx # Skills visualization
│ ├── Experience.tsx # Work experience
│ ├── Education.tsx # Education background
│ ├── Contact.tsx # Contact information
│ ├── Footer.tsx # Footer component
│ ├── Navbar.tsx # Navigation sidebar
│ ├── Accessibility.tsx # Accessibility features
│ ├── MicroInteractions.tsx # UI micro-interactions
│ ├── ErrorBoundary.tsx # Error handling
│ └── SkeletonLoader.tsx # Loading states
├── hooks/ # Custom React hooks
│ ├── useScrollAnimation.ts # Scroll-triggered animations
│ ├── useLanguage.ts # Internationalization
│ ├── useCountUp.ts # Number counting animations
│ └── useAccessibility.ts # Accessibility features
├── contexts/ # React contexts
│ └── LanguageContext.tsx # Language state management
└── types/ # TypeScript type definitions
└── react-lazy-load-image-component.d.ts
- SquaresBackground: Custom canvas-based animated grid system with smooth 60fps animations
- TextType: Typewriter effect component for dynamic text animation
- ProjectModal: Detailed project information with technology stacks and live demos
- SkillProgress: Animated progress bars with count-up effects
- Footer: Terminal-style footer with social links and contact information
- useScrollAnimation: Handles scroll-triggered animations with Intersection Observer
- useLanguage: Manages internationalization state with localStorage persistence
- useCountUp: Creates smooth number counting animations
- useAccessibility: Keyboard navigation and accessibility features
The portfolio supports both Turkish and English with:
- Complete UI translation
- Language persistence in localStorage
- Dynamic language switching
- Context-based translation system
Optimized for all screen sizes:
- Mobile-first approach
- Flexible grid layouts
- Touch-friendly interactions
- Optimized typography scaling
- Mobile sidebar with overlay
- Lazy Loading: Images and components load on demand
- Code Splitting: Manual chunks for vendor, animations, and UI components
- Error Boundaries: Graceful error handling and recovery
- Skeleton Loaders: Improved perceived performance
- Optimized Animations: 60fps smooth canvas animations
- Critical CSS: Inline critical CSS for faster initial render
- Font Preloading: Google Fonts preloaded for better performance
- Async CSS Loading: Non-blocking CSS loading
The SquaresBackground component uses HTML5 Canvas for:
- Dynamic Grid Generation: Responsive grid that adapts to screen size
- Smooth Animations: 60fps animations with
requestAnimationFrame - Performance Optimization:
devicePixelRatiosupport for retina displays- Optimized drawing with
lineWidth: 0.5andlineCap: 'round' - Sub-pixel precision rendering
- Animation Control: Direction-based movement (up/down) with smooth transitions
- Service Worker:
sw.jsfor offline capabilities and caching - Web App Manifest:
manifest.jsonwith app metadata - Theme Color: Dark theme support (
#1f2937) - App Shortcuts: Quick access to Projects and Contact sections
- Installable: Can be installed as a PWA on mobile devices
- Lighthouse Score: 92+ (Performance, Accessibility, Best Practices, SEO)
- Core Web Vitals: Optimized LCP, FID, and CLS
- Bundle Size: Optimized with code splitting
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
The project is configured for Vercel with:
- vercel.json: Cache headers and build configuration
- Static Assets: 1-year cache for optimal performance
- Build Command:
npm run build - Output Directory:
dist/
# Deploy to Vercel
vercel --prod- Netlify: Drag and drop
dist/folder - GitHub Pages: Use GitHub Actions
- Any Static Host: Upload built files
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLintNo environment variables required for basic functionality.
This project is licensed under the MIT License.
Visit the live website: Click!
Built with ❤️ using React, TypeScript, and Tailwind CSS