{"id":29130491,"url":"https://github.com/melihilker/web-portfolio","last_synced_at":"2026-04-15T14:06:05.443Z","repository":{"id":301878097,"uuid":"1010557671","full_name":"MelihIlker/Web-Portfolio","owner":"MelihIlker","description":"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.","archived":false,"fork":false,"pushed_at":"2025-06-29T10:33:20.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-29T11:30:11.897Z","etag":null,"topics":["frontend","nextjs","portfolio","postcss","react","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MelihIlker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-29T10:30:12.000Z","updated_at":"2025-06-29T10:34:48.000Z","dependencies_parsed_at":"2025-06-29T11:40:59.088Z","dependency_job_id":null,"html_url":"https://github.com/MelihIlker/Web-Portfolio","commit_stats":null,"previous_names":["melihilker/web-portfolio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MelihIlker/Web-Portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelihIlker%2FWeb-Portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelihIlker%2FWeb-Portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelihIlker%2FWeb-Portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelihIlker%2FWeb-Portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MelihIlker","download_url":"https://codeload.github.com/MelihIlker/Web-Portfolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelihIlker%2FWeb-Portfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281243126,"owners_count":26467641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-27T02:00:05.855Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","nextjs","portfolio","postcss","react","tailwindcss","typescript"],"created_at":"2025-06-30T04:05:56.228Z","updated_at":"2025-10-27T09:12:40.087Z","avatar_url":"https://github.com/MelihIlker.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Portfolio Website\n\n\u003e A modern, responsive portfolio website showcasing professional work and skills with elegant animations and interactive features.\n\n## ✨ Features\n\n- **🎨 Animated Grid Backgrounds**: Dynamic canvas-based grid animations that respond to user interaction\n- **📱 Responsive Design**: Optimized for all device sizes with mobile-first approach\n- **🌍 Internationalization**: Complete Turkish and English language support\n- **🎯 Interactive Project Showcase**: Detailed project modals with technology stacks and live demos\n- **📊 Animated Skill Visualization**: Dynamic progress bars with smooth count-up animations\n- **⚡ Performance Optimized**: Lazy loading, error boundaries, and efficient rendering\n- **🎭 Smooth Animations**: Powered by Framer Motion for seamless user experience\n- **♿ Accessibility**: Full keyboard navigation and screen reader support\n- **🔧 PWA Ready**: Service Worker, manifest.json, and offline capabilities\n- **📈 Performance Monitoring**: Lighthouse score 92+ with optimized Core Web Vitals\n\n## 🛠 Tech Stack\n\n### Frontend Framework\n- **React 19** - Latest React with concurrent features\n- **TypeScript** - Type-safe development\n- **Vite** - Fast build tool and development server\n\n### Styling \u0026 UI\n- **Tailwind CSS** - Utility-first CSS framework\n- **Framer Motion** - Animation and gesture library\n- **Lucide React** - Beautiful icon library\n\n### Development Tools\n- **ESLint** - Code linting and quality assurance\n- **TypeScript ESLint** - TypeScript-specific linting rules\n\n### Performance \u0026 Optimization\n- **React Lazy Load Image** - Optimized image loading\n- **Custom Hooks** - Reusable logic abstraction\n- **Error Boundaries** - Graceful error handling\n- **Code Splitting** - Bundle optimization with Vite\n\n## 🚀 Quick Start\n\n```bash\n# Clone the repository\ngit clone https://github.com/MelihIlker/personal-website.git\ncd personal-website\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Build for production\nnpm run build\n```\n\n## 📁 Project Structure\n\n```\nsrc/\n├── components/          # React components\n│   ├── ui/             # Reusable UI components\n│   │   ├── SquaresBackground.tsx  # Canvas-based animated grid\n│   │   ├── GradientText.tsx       # Gradient text effects\n│   │   └── TextType.tsx           # Typewriter effect\n│   ├── Hero.tsx        # Landing section\n│   ├── Projects.tsx    # Project showcase\n│   ├── Skills.tsx      # Skills visualization\n│   ├── Experience.tsx  # Work experience\n│   ├── Education.tsx   # Education background\n│   ├── Contact.tsx     # Contact information\n│   ├── Footer.tsx      # Footer component\n│   ├── Navbar.tsx      # Navigation sidebar\n│   ├── Accessibility.tsx # Accessibility features\n│   ├── MicroInteractions.tsx # UI micro-interactions\n│   ├── ErrorBoundary.tsx # Error handling\n│   └── SkeletonLoader.tsx # Loading states\n├── hooks/              # Custom React hooks\n│   ├── useScrollAnimation.ts  # Scroll-triggered animations\n│   ├── useLanguage.ts         # Internationalization\n│   ├── useCountUp.ts          # Number counting animations\n│   └── useAccessibility.ts    # Accessibility features\n├── contexts/           # React contexts\n│   └── LanguageContext.tsx    # Language state management\n└── types/              # TypeScript type definitions\n    └── react-lazy-load-image-component.d.ts\n```\n\n## 🎯 Key Components\n\n### Interactive Elements\n- **SquaresBackground**: Custom canvas-based animated grid system with smooth 60fps animations\n- **TextType**: Typewriter effect component for dynamic text animation\n- **ProjectModal**: Detailed project information with technology stacks and live demos\n- **SkillProgress**: Animated progress bars with count-up effects\n- **Footer**: Terminal-style footer with social links and contact information\n\n### Custom Hooks\n- **useScrollAnimation**: Handles scroll-triggered animations with Intersection Observer\n- **useLanguage**: Manages internationalization state with localStorage persistence\n- **useCountUp**: Creates smooth number counting animations\n- **useAccessibility**: Keyboard navigation and accessibility features\n\n## 🌍 Internationalization\n\nThe portfolio supports both Turkish and English with:\n- Complete UI translation\n- Language persistence in localStorage\n- Dynamic language switching\n- Context-based translation system\n\n## 📱 Responsive Design\n\nOptimized for all screen sizes:\n- Mobile-first approach\n- Flexible grid layouts\n- Touch-friendly interactions\n- Optimized typography scaling\n- Mobile sidebar with overlay\n\n## ⚡ Performance Features\n\n- **Lazy Loading**: Images and components load on demand\n- **Code Splitting**: Manual chunks for vendor, animations, and UI components\n- **Error Boundaries**: Graceful error handling and recovery\n- **Skeleton Loaders**: Improved perceived performance\n- **Optimized Animations**: 60fps smooth canvas animations\n- **Critical CSS**: Inline critical CSS for faster initial render\n- **Font Preloading**: Google Fonts preloaded for better performance\n- **Async CSS Loading**: Non-blocking CSS loading\n\n## 🎨 Canvas API Implementation\n\nThe `SquaresBackground` component uses HTML5 Canvas for:\n- **Dynamic Grid Generation**: Responsive grid that adapts to screen size\n- **Smooth Animations**: 60fps animations with `requestAnimationFrame`\n- **Performance Optimization**: \n  - `devicePixelRatio` support for retina displays\n  - Optimized drawing with `lineWidth: 0.5` and `lineCap: 'round'`\n  - Sub-pixel precision rendering\n- **Animation Control**: Direction-based movement (up/down) with smooth transitions\n\n## 🔧 PWA Features\n\n- **Service Worker**: `sw.js` for offline capabilities and caching\n- **Web App Manifest**: `manifest.json` with app metadata\n- **Theme Color**: Dark theme support (`#1f2937`)\n- **App Shortcuts**: Quick access to Projects and Contact sections\n- **Installable**: Can be installed as a PWA on mobile devices\n\n## 📈 Performance Metrics\n\n- **Lighthouse Score**: 92+ (Performance, Accessibility, Best Practices, SEO)\n- **Core Web Vitals**: Optimized LCP, FID, and CLS\n- **Bundle Size**: Optimized with code splitting\n- **First Contentful Paint**: \u003c 1.5s\n- **Largest Contentful Paint**: \u003c 2.5s\n\n## 🚀 Deployment\n\n### Vercel Deployment\nThe project is configured for Vercel with:\n- **vercel.json**: Cache headers and build configuration\n- **Static Assets**: 1-year cache for optimal performance\n- **Build Command**: `npm run build`\n- **Output Directory**: `dist/`\n\n```bash\n# Deploy to Vercel\nvercel --prod\n```\n\n### Other Platforms\n- **Netlify**: Drag and drop `dist/` folder\n- **GitHub Pages**: Use GitHub Actions\n- **Any Static Host**: Upload built files\n\n## 🛠 Development\n\n### Available Scripts\n```bash\nnpm run dev          # Start development server\nnpm run build        # Build for production\nnpm run preview      # Preview production build\nnpm run lint         # Run ESLint\n```\n\n### Environment Variables\nNo environment variables required for basic functionality.\n\n## 📄 License\n\nThis project is licensed under the MIT License.\n\n## 🌐 Live Demo\n\nVisit the live website: [Click!](https://melihilker-portfolio.vercel.app)\n\n---\n\n\nBuilt with ❤️ using React, TypeScript, and Tailwind CSS","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelihilker%2Fweb-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmelihilker%2Fweb-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelihilker%2Fweb-portfolio/lists"}