{"id":22083396,"url":"https://github.com/mtalhaofc/portfolio","last_synced_at":"2026-04-13T12:01:38.335Z","repository":{"id":333700487,"uuid":"1138394627","full_name":"MTalhaofc/Portfolio","owner":"MTalhaofc","description":null,"archived":false,"fork":false,"pushed_at":"2026-02-24T18:07:32.000Z","size":35366,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-24T22:37:49.419Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MTalhaofc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-20T16:07:12.000Z","updated_at":"2026-02-24T18:06:24.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/MTalhaofc/Portfolio","commit_stats":null,"previous_names":["mtalhaofc/portfolio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MTalhaofc/Portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTalhaofc%2FPortfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTalhaofc%2FPortfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTalhaofc%2FPortfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTalhaofc%2FPortfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MTalhaofc","download_url":"https://codeload.github.com/MTalhaofc/Portfolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTalhaofc%2FPortfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31751705,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T09:16:15.125Z","status":"ssl_error","status_checked_at":"2026-04-13T09:16:05.023Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["css","html","html-css-javascript","htmlcss","htmlportfolio","javascript","open-source","portfolio","portfolio-site","portfolio-template","portfolio-website","simpleportfolio","tailwindcss"],"created_at":"2024-12-01T00:13:34.054Z","updated_at":"2026-04-13T12:01:38.300Z","avatar_url":"https://github.com/MTalhaofc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Modern React Portfolio - AWS Cloud Engineer\n\nA stunning, feature-rich React portfolio showcasing professional expertise with dynamic content integration, beautiful animations, and modern UI/UX design.\n\n![Portfolio Preview](./public/images/portfolio-preview.png)\n*Add your portfolio screenshot here*\n\n## ✨ Key Features\n\n### 🎨 **Modern Design \u0026 Animations**\n- **Dark Mode Toggle** - Seamless theme switching with persistent storage\n- **Smooth Animations** - Powered by Framer Motion for engaging user experience\n- **Glass-morphism UI** - Modern translucent design elements\n- **Responsive Design** - Optimized for all devices (mobile, tablet, desktop)\n\n### 🔄 **Dynamic Content Integration**\n- **Medium Blog Integration** - Automatically fetches latest articles with thumbnails\n- **YouTube Channel Integration** - Displays recent videos with play overlays\n- **Real-time Updates** - Content updates automatically when you publish new content\n\n### ⚡ **Performance Optimizations**\n- **Global Image Caching** - Lightning-fast image loading across the entire site\n- **Lazy Loading** - Images load only when needed\n- **Optimized Animations** - Smooth 60fps animations with hardware acceleration\n\n### 📱 **Enhanced Mobile Experience**\n- **Beautiful Mobile Sidebar** - Professional navigation with smooth transitions\n- **Touch-friendly Interface** - Optimized for mobile interactions\n- **Responsive Cards** - Adaptive layouts for different screen sizes\n\n### 🎯 **Interactive Elements**\n- **Project Carousel** - Smooth navigation through featured projects\n- **Hover Effects** - Engaging micro-interactions throughout\n- **Scroll Animations** - Content reveals as you scroll\n- **Professional Timeline** - Interactive experience section\n\n## 🛠️ Tech Stack\n\n- **React 18** - Modern React with hooks and Context API\n- **Framer Motion** - Advanced animations and transitions\n- **FontAwesome** - Professional icon library\n- **CSS3** - Custom styling with CSS variables and glass-morphism\n- **RSS Integration** - Dynamic content from Medium and YouTube\n- **GitHub Pages** - Automated deployment\n\n## 📸 Screenshots\n\n### Desktop View\n![Desktop View](./public/images/desktop-view.png)\n*Add desktop screenshot here*\n\n### Mobile View\n![Mobile View](./public/images/mobile-view.png)\n*Add mobile screenshot here*\n\n### Dark Mode\n![Dark Mode](./public/images/dark-mode.png)\n*Add dark mode screenshot here*\n\n### Blog Integration\n![Blog Section](./public/images/blog-section.png)\n*Add blog section screenshot here*\n\n## 🚀 Quick Start\n\n### Prerequisites\n- Node.js (v14 or higher)\n- npm or yarn\n- Git\n\n### Installation\n\n1. **Clone the repository**\n```bash\ngit clone https://github.com/MTalhaofc/Portfolio.git\ncd Portfolio\n```\n\n2. **Install dependencies**\n```bash\nnpm install\n```\n\n3. **Start development server**\n```bash\nnpm start\n```\n\n4. **Build for production**\n```bash\nnpm run build\n```\n\n5. **Deploy to GitHub Pages**\n```bash\nnpm run deploy\n```\n\n## 🎨 Customization Guide\n\n### 1. Personal Information\nUpdate your details in the respective component files:\n\n**Header Section** (`src/components/Header.js`)\n```javascript\n// Update your name, title, and introduction\nconst name = \"Your Name\";\nconst title = \"Your Professional Title\";\nconst introduction = \"Your introduction text\";\n```\n\n**About Section** (`src/components/About.js`)\n```javascript\n// Update your background and summary\nconst aboutText = \"Your professional background...\";\n```\n\n**Contact Section** (`src/components/Contact.js`)\n```javascript\n// Update your social links\nconst socialLinks = {\n  linkedin: \"https://linkedin.com/in/yourprofile\",\n  github: \"https://github.com/yourusername\",\n  // ... other links\n};\n```\n\n### 2. Projects \u0026 Experience\n\n**Projects** (`src/components/Projects.js`)\n```javascript\nconst projects = [\n  {\n    title: \"Your Project Title\",\n    description: \"Project description...\",\n    tags: [\"React\", \"Node.js\", \"AWS\"],\n    image: `${process.env.PUBLIC_URL}/images/your-project.png`,\n    githubUrl: \"https://github.com/yourusername/project\",\n    liveUrl: \"https://your-project-demo.com\" // optional\n  },\n  // Add more projects...\n];\n```\n\n**Experience** (`src/components/Experience.js`)\n```javascript\nconst experiences = [\n  {\n    title: \"Your Job Title\",\n    company: \"Company Name\",\n    duration: \"Start Date - End Date\",\n    description: \"Job description and achievements...\",\n    technologies: [\"Tech1\", \"Tech2\", \"Tech3\"]\n  },\n  // Add more experiences...\n];\n```\n\n### 3. Skills Configuration\n\n**Skills** (`src/components/Skills.js`)\n```javascript\nconst skillCategories = {\n  \"Cloud Platforms\": [\"AWS\", \"Azure\", \"GCP\"],\n  \"Programming\": [\"JavaScript\", \"Python\", \"Java\"],\n  \"Frameworks\": [\"React\", \"Node.js\", \"Express\"],\n  // Add your skill categories...\n};\n```\n\n### 4. Blog Integration Setup\n\n**Medium Integration** (Automatic)\n- Replace `@mtalhaofc` with your Medium username in `src/components/Blog.js`\n```javascript\nconst response = await fetch('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@yourusername');\n```\n\n**YouTube Integration**\n- Get your YouTube Channel ID from your channel URL\n- Replace the channel ID in `src/components/Blog.js`\n```javascript\nconst response = await fetch('https://api.rss2json.com/v1/api.json?rss_url=https://www.youtube.com/feeds/videos.xml?channel_id=YOUR_CHANNEL_ID');\n```\n\n### 5. Images \u0026 Assets\n\n**Project Images**\n- Add project screenshots to `/public/images/`\n- Use high-quality images (recommended: 800x400px)\n- Supported formats: PNG, JPG, WebP\n\n**Profile Images**\n- Add your profile photo to `/public/images/profile.jpg`\n- Recommended size: 400x400px\n\n## 📁 Project Structure\n\n```\nPortfolio/\n├── public/\n│   ├── images/              # Project screenshots and assets\n│   │   ├── project1.png\n│   │   ├── project2.png\n│   │   └── profile.jpg\n│   └── index.html\n├── src/\n│   ├── components/          # React components\n│   │   ├── Header.js        # Hero section\n│   │   ├── About.js         # About section\n│   │   ├── Skills.js        # Technical skills\n│   │   ├── Projects.js      # Project showcase\n│   │   ├── Experience.js    # Professional timeline\n│   │   ├── Blog.js          # Medium \u0026 YouTube integration\n│   │   ├── Contact.js       # Contact information\n│   │   ├── Navigation.js    # Navigation menu\n│   │   ├── DarkModeToggle.js # Theme switcher\n│   │   └── CachedImage.js   # Optimized image component\n│   ├── contexts/            # React contexts\n│   │   ├── ThemeContext.js  # Theme management\n│   │   └── ImageCacheContext.js # Image caching\n│   ├── assets/              # Static assets\n│   ├── App.js              # Main application\n│   └── index.js            # Entry point\n├── package.json            # Dependencies and scripts\n└── README.md              # This file\n```\n\n## 🎯 Key Components Explained\n\n### **Header Component**\n- Animated hero section with call-to-action\n- Typewriter effect for dynamic text\n- Smooth scroll navigation\n\n### **Projects Component**\n- Interactive carousel with navigation\n- Image caching for fast loading\n- Responsive grid layout\n- Technology icons with hover effects\n\n### **Blog Component**\n- Automatic Medium article fetching\n- YouTube video integration\n- Thumbnail extraction and caching\n- Responsive card layouts\n\n### **Navigation Component**\n- Sticky navigation with smooth scrolling\n- Mobile-friendly sidebar\n- Professional branding\n- Scroll-to-top functionality\n\n## 🌐 Deployment\n\n### GitHub Pages (Recommended)\n```bash\nnpm run deploy\n```\n\n### Netlify\n1. Connect your GitHub repository\n2. Set build command: `npm run build`\n3. Set publish directory: `build`\n\n### Vercel\n1. Import your GitHub repository\n2. Vercel will auto-detect React settings\n3. Deploy with one click\n\n## 🔧 Advanced Configuration\n\n### Environment Variables\nCreate a `.env` file for sensitive data:\n```env\nREACT_APP_YOUTUBE_API_KEY=your_api_key_here\nREACT_APP_ANALYTICS_ID=your_analytics_id\n```\n\n### Custom Styling\n- Modify CSS variables in component files\n- Update color schemes in `:root` selectors\n- Customize animations in Framer Motion configs\n\n### Performance Optimization\n- Images are automatically cached globally\n- Lazy loading implemented for all images\n- Animations optimized for 60fps performance\n\n## 📱 Responsive Breakpoints\n\n- **Mobile**: 320px - 768px\n- **Tablet**: 768px - 1024px\n- **Desktop**: 1024px - 1440px\n- **Large Desktop**: 1440px+\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## 🆘 Support \u0026 Issues\n\nIf you encounter any issues or need help customizing the portfolio:\n\n1. Check the [Issues](https://github.com/MTalhaofc/Portfolio/issues) page\n2. Create a new issue with detailed description\n3. Include screenshots if applicable\n\n## 🌟 Features Showcase\n\n- ✅ **Dynamic Content Integration** - Medium \u0026 YouTube\n- ✅ **Global Image Caching** - Lightning fast loading\n- ✅ **Mobile-First Design** - Beautiful on all devices\n- ✅ **Dark Mode Support** - Professional theme switching\n- ✅ **SEO Optimized** - Meta tags and structured data\n- ✅ **Performance Optimized** - 90+ Lighthouse scores\n- ✅ **Accessibility Compliant** - WCAG 2.1 standards\n- ✅ **Modern Animations** - Smooth Framer Motion effects\n\n## 📞 Contact\n\n**Muhammad Talha**\n- GitHub: [@MTalhaofc](https://github.com/MTalhaofc)\n- LinkedIn: [Muhammad Talha](https://linkedin.com/in/mtalhaofc)\n- Portfolio: [https://MTalhaofc.github.io/Portfolio](https://MTalhaofc.github.io/Portfolio)\n\n---\n\n⭐ **Star this repository if you found it helpful!**\n\n*Built with ❤️ using React and modern web technologies*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmtalhaofc%2Fportfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmtalhaofc%2Fportfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmtalhaofc%2Fportfolio/lists"}