https://github.com/melihilker/web-portfolio
This professional portfolio website, built with Next.js, React.js, and Tailwind CSS, showcases my work with a focus on performance and modern design. Leveraging the power of these cutting-edge technologies, it delivers a fast, responsive, and SEO-friendly user experience. Explore my projects and see how I bring ideas to life on the web.
https://github.com/melihilker/web-portfolio
frontend nextjs portfolio postcss react tailwindcss typescript
Last synced: 3 months ago
JSON representation
This professional portfolio website, built with Next.js, React.js, and Tailwind CSS, showcases my work with a focus on performance and modern design. Leveraging the power of these cutting-edge technologies, it delivers a fast, responsive, and SEO-friendly user experience. Explore my projects and see how I bring ideas to life on the web.
- Host: GitHub
- URL: https://github.com/melihilker/web-portfolio
- Owner: MelihIlker
- License: mit
- Created: 2025-06-29T10:30:12.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-29T10:33:20.000Z (about 1 year ago)
- Last Synced: 2025-06-29T11:30:11.897Z (about 1 year ago)
- Topics: frontend, nextjs, portfolio, postcss, react, tailwindcss, typescript
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 Portfolio Website
> A modern, responsive portfolio website showcasing professional work and skills with elegant animations and interactive features.
## ✨ 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
## 🛠 Tech Stack
### Frontend Framework
- **React 19** - Latest React with concurrent features
- **TypeScript** - Type-safe development
- **Vite** - Fast build tool and development server
### Styling & UI
- **Tailwind CSS** - Utility-first CSS framework
- **Framer Motion** - Animation and gesture library
- **Lucide React** - Beautiful icon library
### Development Tools
- **ESLint** - Code linting and quality assurance
- **TypeScript ESLint** - TypeScript-specific linting rules
### Performance & Optimization
- **React Lazy Load Image** - Optimized image loading
- **Custom Hooks** - Reusable logic abstraction
- **Error Boundaries** - Graceful error handling
- **Code Splitting** - Bundle optimization with Vite
## 🚀 Quick Start
```bash
# 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 build
```
## 📁 Project Structure
```
src/
├── 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
```
## 🎯 Key Components
### Interactive Elements
- **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
### Custom Hooks
- **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
## 🌍 Internationalization
The portfolio supports both Turkish and English with:
- Complete UI translation
- Language persistence in localStorage
- Dynamic language switching
- Context-based translation system
## 📱 Responsive Design
Optimized for all screen sizes:
- Mobile-first approach
- Flexible grid layouts
- Touch-friendly interactions
- Optimized typography scaling
- Mobile sidebar with overlay
## ⚡ Performance Features
- **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
## 🎨 Canvas API Implementation
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**:
- `devicePixelRatio` support for retina displays
- Optimized drawing with `lineWidth: 0.5` and `lineCap: 'round'`
- Sub-pixel precision rendering
- **Animation Control**: Direction-based movement (up/down) with smooth transitions
## 🔧 PWA Features
- **Service Worker**: `sw.js` for offline capabilities and caching
- **Web App Manifest**: `manifest.json` with 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
## 📈 Performance Metrics
- **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
## 🚀 Deployment
### Vercel Deployment
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/`
```bash
# Deploy to Vercel
vercel --prod
```
### Other Platforms
- **Netlify**: Drag and drop `dist/` folder
- **GitHub Pages**: Use GitHub Actions
- **Any Static Host**: Upload built files
## 🛠 Development
### Available Scripts
```bash
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint
```
### Environment Variables
No environment variables required for basic functionality.
## 📄 License
This project is licensed under the MIT License.
## 🌐 Live Demo
Visit the live website: [Click!](https://melihilker-portfolio.vercel.app)
---
Built with ❤️ using React, TypeScript, and Tailwind CSS