https://github.com/mtalhaofc/portfolio
https://github.com/mtalhaofc/portfolio
css html html-css-javascript htmlcss htmlportfolio javascript open-source portfolio portfolio-site portfolio-template portfolio-website simpleportfolio tailwindcss
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mtalhaofc/portfolio
- Owner: MTalhaofc
- Created: 2026-01-20T16:07:12.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-02-24T18:07:32.000Z (3 months ago)
- Last Synced: 2026-02-24T22:37:49.419Z (3 months ago)
- Language: JavaScript
- Size: 33.7 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Modern React Portfolio - AWS Cloud Engineer
A stunning, feature-rich React portfolio showcasing professional expertise with dynamic content integration, beautiful animations, and modern UI/UX design.
*Add your portfolio screenshot here*
## ✨ Key Features
### 🎨 **Modern Design & Animations**
- **Dark Mode Toggle** - Seamless theme switching with persistent storage
- **Smooth Animations** - Powered by Framer Motion for engaging user experience
- **Glass-morphism UI** - Modern translucent design elements
- **Responsive Design** - Optimized for all devices (mobile, tablet, desktop)
### 🔄 **Dynamic Content Integration**
- **Medium Blog Integration** - Automatically fetches latest articles with thumbnails
- **YouTube Channel Integration** - Displays recent videos with play overlays
- **Real-time Updates** - Content updates automatically when you publish new content
### ⚡ **Performance Optimizations**
- **Global Image Caching** - Lightning-fast image loading across the entire site
- **Lazy Loading** - Images load only when needed
- **Optimized Animations** - Smooth 60fps animations with hardware acceleration
### 📱 **Enhanced Mobile Experience**
- **Beautiful Mobile Sidebar** - Professional navigation with smooth transitions
- **Touch-friendly Interface** - Optimized for mobile interactions
- **Responsive Cards** - Adaptive layouts for different screen sizes
### 🎯 **Interactive Elements**
- **Project Carousel** - Smooth navigation through featured projects
- **Hover Effects** - Engaging micro-interactions throughout
- **Scroll Animations** - Content reveals as you scroll
- **Professional Timeline** - Interactive experience section
## 🛠️ Tech Stack
- **React 18** - Modern React with hooks and Context API
- **Framer Motion** - Advanced animations and transitions
- **FontAwesome** - Professional icon library
- **CSS3** - Custom styling with CSS variables and glass-morphism
- **RSS Integration** - Dynamic content from Medium and YouTube
- **GitHub Pages** - Automated deployment
## 📸 Screenshots
### Desktop View
*Add desktop screenshot here*
### Mobile View
*Add mobile screenshot here*
### Dark Mode
*Add dark mode screenshot here*
### Blog Integration
*Add blog section screenshot here*
## 🚀 Quick Start
### Prerequisites
- Node.js (v14 or higher)
- npm or yarn
- Git
### Installation
1. **Clone the repository**
```bash
git clone https://github.com/MTalhaofc/Portfolio.git
cd Portfolio
```
2. **Install dependencies**
```bash
npm install
```
3. **Start development server**
```bash
npm start
```
4. **Build for production**
```bash
npm run build
```
5. **Deploy to GitHub Pages**
```bash
npm run deploy
```
## 🎨 Customization Guide
### 1. Personal Information
Update your details in the respective component files:
**Header Section** (`src/components/Header.js`)
```javascript
// Update your name, title, and introduction
const name = "Your Name";
const title = "Your Professional Title";
const introduction = "Your introduction text";
```
**About Section** (`src/components/About.js`)
```javascript
// Update your background and summary
const aboutText = "Your professional background...";
```
**Contact Section** (`src/components/Contact.js`)
```javascript
// Update your social links
const socialLinks = {
linkedin: "https://linkedin.com/in/yourprofile",
github: "https://github.com/yourusername",
// ... other links
};
```
### 2. Projects & Experience
**Projects** (`src/components/Projects.js`)
```javascript
const projects = [
{
title: "Your Project Title",
description: "Project description...",
tags: ["React", "Node.js", "AWS"],
image: `${process.env.PUBLIC_URL}/images/your-project.png`,
githubUrl: "https://github.com/yourusername/project",
liveUrl: "https://your-project-demo.com" // optional
},
// Add more projects...
];
```
**Experience** (`src/components/Experience.js`)
```javascript
const experiences = [
{
title: "Your Job Title",
company: "Company Name",
duration: "Start Date - End Date",
description: "Job description and achievements...",
technologies: ["Tech1", "Tech2", "Tech3"]
},
// Add more experiences...
];
```
### 3. Skills Configuration
**Skills** (`src/components/Skills.js`)
```javascript
const skillCategories = {
"Cloud Platforms": ["AWS", "Azure", "GCP"],
"Programming": ["JavaScript", "Python", "Java"],
"Frameworks": ["React", "Node.js", "Express"],
// Add your skill categories...
};
```
### 4. Blog Integration Setup
**Medium Integration** (Automatic)
- Replace `@mtalhaofc` with your Medium username in `src/components/Blog.js`
```javascript
const response = await fetch('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@yourusername');
```
**YouTube Integration**
- Get your YouTube Channel ID from your channel URL
- Replace the channel ID in `src/components/Blog.js`
```javascript
const response = await fetch('https://api.rss2json.com/v1/api.json?rss_url=https://www.youtube.com/feeds/videos.xml?channel_id=YOUR_CHANNEL_ID');
```
### 5. Images & Assets
**Project Images**
- Add project screenshots to `/public/images/`
- Use high-quality images (recommended: 800x400px)
- Supported formats: PNG, JPG, WebP
**Profile Images**
- Add your profile photo to `/public/images/profile.jpg`
- Recommended size: 400x400px
## 📁 Project Structure
```
Portfolio/
├── public/
│ ├── images/ # Project screenshots and assets
│ │ ├── project1.png
│ │ ├── project2.png
│ │ └── profile.jpg
│ └── index.html
├── src/
│ ├── components/ # React components
│ │ ├── Header.js # Hero section
│ │ ├── About.js # About section
│ │ ├── Skills.js # Technical skills
│ │ ├── Projects.js # Project showcase
│ │ ├── Experience.js # Professional timeline
│ │ ├── Blog.js # Medium & YouTube integration
│ │ ├── Contact.js # Contact information
│ │ ├── Navigation.js # Navigation menu
│ │ ├── DarkModeToggle.js # Theme switcher
│ │ └── CachedImage.js # Optimized image component
│ ├── contexts/ # React contexts
│ │ ├── ThemeContext.js # Theme management
│ │ └── ImageCacheContext.js # Image caching
│ ├── assets/ # Static assets
│ ├── App.js # Main application
│ └── index.js # Entry point
├── package.json # Dependencies and scripts
└── README.md # This file
```
## 🎯 Key Components Explained
### **Header Component**
- Animated hero section with call-to-action
- Typewriter effect for dynamic text
- Smooth scroll navigation
### **Projects Component**
- Interactive carousel with navigation
- Image caching for fast loading
- Responsive grid layout
- Technology icons with hover effects
### **Blog Component**
- Automatic Medium article fetching
- YouTube video integration
- Thumbnail extraction and caching
- Responsive card layouts
### **Navigation Component**
- Sticky navigation with smooth scrolling
- Mobile-friendly sidebar
- Professional branding
- Scroll-to-top functionality
## 🌐 Deployment
### GitHub Pages (Recommended)
```bash
npm run deploy
```
### Netlify
1. Connect your GitHub repository
2. Set build command: `npm run build`
3. Set publish directory: `build`
### Vercel
1. Import your GitHub repository
2. Vercel will auto-detect React settings
3. Deploy with one click
## 🔧 Advanced Configuration
### Environment Variables
Create a `.env` file for sensitive data:
```env
REACT_APP_YOUTUBE_API_KEY=your_api_key_here
REACT_APP_ANALYTICS_ID=your_analytics_id
```
### Custom Styling
- Modify CSS variables in component files
- Update color schemes in `:root` selectors
- Customize animations in Framer Motion configs
### Performance Optimization
- Images are automatically cached globally
- Lazy loading implemented for all images
- Animations optimized for 60fps performance
## 📱 Responsive Breakpoints
- **Mobile**: 320px - 768px
- **Tablet**: 768px - 1024px
- **Desktop**: 1024px - 1440px
- **Large Desktop**: 1440px+
## 🤝 Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📄 License
This project is open source and available under the [MIT License](LICENSE).
## 🆘 Support & Issues
If you encounter any issues or need help customizing the portfolio:
1. Check the [Issues](https://github.com/MTalhaofc/Portfolio/issues) page
2. Create a new issue with detailed description
3. Include screenshots if applicable
## 🌟 Features Showcase
- ✅ **Dynamic Content Integration** - Medium & YouTube
- ✅ **Global Image Caching** - Lightning fast loading
- ✅ **Mobile-First Design** - Beautiful on all devices
- ✅ **Dark Mode Support** - Professional theme switching
- ✅ **SEO Optimized** - Meta tags and structured data
- ✅ **Performance Optimized** - 90+ Lighthouse scores
- ✅ **Accessibility Compliant** - WCAG 2.1 standards
- ✅ **Modern Animations** - Smooth Framer Motion effects
## 📞 Contact
**Muhammad Talha**
- GitHub: [@MTalhaofc](https://github.com/MTalhaofc)
- LinkedIn: [Muhammad Talha](https://linkedin.com/in/mtalhaofc)
- Portfolio: [https://MTalhaofc.github.io/Portfolio](https://MTalhaofc.github.io/Portfolio)
---
⭐ **Star this repository if you found it helpful!**
*Built with ❤️ using React and modern web technologies*